Reactでのダイアログの開閉制御については以前、別のエントリーで書きました。 ダイアログもアラートも、Reactで子コンポーネントの開閉管理を実装するVue3でも、何か簡単に書ける方法はないかと試行錯誤して、ちょっといい感じかな？という方針を見つけたので、備忘がてら技術ブログに書いておきます。 使いやすいダイアログAPIとは太古の昔より、便利なダイアログ機能というのは、呼び出し元はダイアログの開閉状態とか細かい制御は気にせず、必要な情報を渡して、結果だけもらうというものです。JavaScriptのブラウザのAPIにもありますよね。 const result = confirm("今日はいい天気でしたね") // OKのときはtrue console.log(result) これはVisual Basicとかでもなんでも同じですね。ただし、JavaScriptだとconfirm()、ale
2024年5月11日（土）に開催された TSKaigi 2024 のセッションで発表したスライドになります。 Vue3がリリースされ、早くも4年弱経とうとしています、Vue2のLTSも2023年末に終了し、新規開発ではVue3を利用することが主流となってきました。 Vueと並ぶフレームワークとしてReactがありますが、未だにReactと比較される際、TypeScript対応が…という噂がたまに聞こえてきます。しかして、Vue3とTypeScriptの親和性は実際のところどうなのでしょうか。Piniaやその他ツールチェイン側などと共にVue3の機能や実際の実装例とともにVue3とTypeScriptの親和性の疑問を解消できるような発表にできればと思っています。 https://tskaigi.org/talks/karan_corons
e-on's VUE PlantFactory PlantCatalog Now Free - e-on Softwareが長い歴史を持つ景観作成ソフトやノードベースの植物作成ソフトとアセットコレクションの開発＆販売を終了し完全無料ソフトとして公開！
3Dモデリング ソフト ソフトウェア＆ツール-Software&Tool Uniform 1.0 - iPad用の本格3DCG制作アプリがリリース！ローポ... 2024-05-16 SparsealによるiPad向け3DCG制作アプリ『Uniform』がリリースされました！！！！ 続きを読む ソフトウェア＆ツール-Software&Tool 生成 ツール InvokeAI 4.2 - ローカル環境で動作する多機能で無料＆オープンソース... 2024-05-16 最新AI技術による画像生成をシンプルかつ多機能なインターフェイスで扱うことの出来るInvokeAIのv4.2がリリースされました！ 続きを読む Blender アドオン プラグイン＆アドオン-Plugin&Addon Deep Paint v1.0 - GAKU氏によるGrease Pencilを... 2024-05-15 ハ
Vue/Vite 関連のライブラリー名の読み方は間違えられやすいものが多く、混乱を招くことがあります。この記事では、2024 年現在における Vue/Vite 関連ライブラリーの正式な読み方や由来をまとめ、正しい知識を共有することを目的としています。 Vue フロントエンド UI フレームワークのひとつ。 「ヴュー」と読む（口語だと「ビュー」と発音することが多い）。 Vue（発音は /vjuː/、view と同様） https://ja.vuejs.org/guide/introduction.html#what-is-vue Pinia Vue 公式の状態管理ライブラリー。 「ピーニャ」と読む。スペイン語で「パイナップル」を表す単語 piña に由来。 「ピニア」ではない。 Pinia (pronounced /piːnjʌ/, like "peenya" in English) htt
静的サイトジェネレーター「VitePress 1.0」正式リリース。VueとViteを採用し、高速なWebサイトを構築
静的サイトジェネレーター「VitePress 1.0」が正式リリースされた。UIフレームワークのVueと高速なバンドラであるViteを基盤に、MarkdownのコンテンツからSPAなWebサイトを構築できる。 オープンソースとして開発されている静的サイトジェネレーターの「VitePress 1.0」正式版がリリースされました。 VitePressは、Markdownで記述されたコンテンツを静的で美しい外見を持つWebサイトへと高速に変換する機能を備えたフレームワークです。 デフォルトでテクニカルドキュメントに適したテーマが用意されており、すでにVite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、IconifyなどのWebサイトのドキュメント部分に使われているとのことです。 VitePressは、同じく静的サイトジェネレーターである「VuePress」のモダン
JSer.info #685 - Storybook 8.0がリリースされました。 Storybook 8 Storybook: UI component explorer for frontend developers 破壊的な変更として、storiesOf APIの削除、*.stories.mdxの削除、StoryShots addonの削除、Yarn v1のサポート終了などが行われています。 詳細はマイグレーションガイドを参照してください。 Migration guide for Storybook 8.0 • Storybook docs 機能追加として、Chromaticとの連携機能の実装、MSWを使ったReact Server Component(RSC)のサポート。 そのほかには、SWCを使うことでビルドパフォーマンスの改善、react-docgenがデフォルトとなるように変
This is possibly the last minor release before Nuxt v4, and so we've packed it full of features and improvements we hope will delight you! ✨ 🪵 Better loggingWhen developing a Nuxt application and using console.log in your application, you may have noticed that these logs are not displayed in your browser console when refreshing the page (during server-side rendering). This can be frustrating, as
Emit が分からない！ Vue.js で ref や computed でのステート管理を学び、コンポーネント間でのやり取りで props を学び、次に emit を学ぼうとするとなんだか難しく感じることがあります。 確かに初学者の方からすると、慣れるまで少し時間がかかるかもしれません。 でも大丈夫です。 この記事では図でのイメージとあなたが既に知っているはずの知識を使って emit を理解するためのヒントを提供します。 基本のキ とりあえず emit の基本をおさらいします。 <!-- ChildComponent.vue --> <script setup lang="ts"> const emit = defineEmits<{ "my-event": [] }>(); function handleClick() { emit("my-event"); } </script> <
🏆 結論 「とりあえず ref を使えばいい！」 おしまいです。ref でできないことはありません。 注意点として補足しておくと、これは「Vue.js が ref を推奨している」「迷ってるならとりあえず ref を使っておけばいい」という話であって、reactive をはじめとする他の Reactivity API が非推奨だという話ではありません。 reactive がケースによって便利であることは Evan 氏なども認めており、そもそも Vue.js には厳密なルールがあるわけではないので、結局は自分の手に馴染むものを選択していくのが良いと思います。 なので、究極的な結論としては「とりあえず ref ファーストで考えておいて、なんらかしらの理由で reactive を使いたいなら別にそれも良い」という話になりますが、特別な理由がない場合は ref の方が推奨されます。 🚩 はじめ
<script setup> import { ref, computed } from "vue"; const props = defineProps({ count: Number }); const double = computed(() => props.count * 2); const message = ref("Hello, Vue.js"); </script> <template> <div> <p>{{ message }}</p> <p>{{ props.count }}</p> <p>{{ double }}</p> </div> </template> ・ ・ ・ ・ ・ ・ ・ なんで defineProps は import しなくても使えるの？？？？？ そんなことを思った方はいませんか？今日はその疑問を解決して差し上げます。 🚩 初めに 前回は Vu
AWS IAM の結果整合性を避けるためセッションポリシーを用いてポリシーの動作確認を行う、を解説する
Vue 3.4
Data Contracts In Practice With Debezium and Apache Flink (Kafka Summit London)
はじめに vue公式の拡張機能のバージョンアップにより、VSCodeで開発するときに推奨される拡張機能や設定に変更がありました。 非推奨の設定のままの人は、多分以下のような通知が出てると思うので、直しましょう。 今までの推奨設定 Vue - Officialをインストールする TypeScript Vue Plugin (Volar)をインストールする テイクオーバーモードを有効にする 今後の推奨設定 Vue - Officialをインストールする 新しく設定する人がやること Vue - Officialのインストール Vue - Officialをインストールする 今までの推奨設定をしていた人がやること TypeScript Vue Plugin (Volar)のアンインストール TypeScript Vue Plugin (Volar)が非推奨になったので無効に、もしくはアンインストー
![[2024年3月2日] Vue3+TypeScriptの環境構築で推奨される拡張機能と設定が変わったよ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/f28ba34c6e547e0c824adf322d8478550799e91c/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--AjgvUUB7--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255B2024%2525E5%2525B9%2525B43%2525E6%25259C%2525882%2525E6%252597%2525A5%25255D%252520Vue3%25252BTypeScript%2525E3%252581%2525AE%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E6%2525A7%25258B%2525E7%2525AF%252589%2525E3%252581%2525A7%2525E6%25258E%2525A8%2525E5%2525A5%2525A8%2525E3%252581%252595%2525E3%252582%25258C%2525E3%252582%25258B%2525E6%25258B%2525A1%2525E5%2525BC%2525B5%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252581%2525A8%2525E8%2525A8%2525AD%2525E5%2525AE%25259A%2525E3%252581%25258C%2525E5%2525A4%252589%2525E3%252582%25258F%2525E3%252581%2525A3%2525E3%252581%25259F%2525E3%252582%252588%2525E3%252580%252582%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Asimo%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2YyYTk1ZTA4YmUuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
🚩 初めに こんにちは。Vue Beginners です！ 😄 これまでに、Vue の勉強を始める方法や、環境構築の方法などを紹介してきました。 今回はもう少し範囲を絞って、具体的な疑問について解説していきます！！！！！ Vue.js について学んでいると、コンパイラ という言葉を見かけることがあると思います。 皆さんは「Vue.js のコンパイラとは何ですか？」と聞かれたら、どのように答えますか？ 🤔 意外と戸惑う方も多いのではないでしょうか。 今回はコンパイラとは何なのか、何のためにあるのか、Vue.js のコンパイラとはどういうものなのかについて説明してみます。 それではスタート！！！！！！！！！！！ 🤔 コンパイラとは これからの説明は、Vue.js に限った話ではありません。 プログラミング全般で使われる コンパイラ という意味について説明していきます。 コンパイラ (C
はじめに こんにちは、がんがんです。 2024.02.29 に関西で行われたReboot v-kansai Meetup #15で LT 登壇をしてきました。 登壇内容が GitHub の実装を掘っていくものだったため、本記事で改めて整理できたらと思います。 スライド資料はこちらです Auto-imports の使い方はこちらです Auto-imports 機能とは Auto-imports 機能とはcomponents、composablesを import 文不要で利用できる Nuxt の機能です。components の Auto-imports 機能はNuxt2時代からあったものです。 Nuxt3 の Auto-imports は以下の 2 機能を有しています。 機能 1. Built-in Auto-imports Vue, Nuxt composable が import 不要
export default eventHandler(async (event) => { const database = hubDatabase() const blob = hubBlob() const kv = hubKV() // Do your magic here return { hello: 'world' } }) All you need to start shippingNuxtHub provides you with all the tools you need to build and deploy your Nuxt apps, on the edge with zero configuration.
*1. 画面に表示されるがコンソールにエラーが出る。 Warning: Received NaN for the `children` attribute. If this is expected, cast the value to a string. *2. 画面には表示されずコンソールにワーニングが出る。 [Vue warn]: Invalid VNode type: undefined (undefined) *3. Chrome だと以下の形式（実行環境によって異なる可能性あり）。 Mon Jan 01 2024 00:00:00 GMT+0900 (GMT+09:00) *4. ランタイムエラー。 Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you
新しい UI テストの手法を提供するテストライブラリ SafeTest 2024.02.25 SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。SafeTest は単体テストと Playwright を使った E2E テストの手法を組み合わせることで、それぞれの手法が抱える欠点を補うことを目指しています。 SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。 従来のフロントエンドのテストの手法は Testing Libra
💡 ヒント: コミュニティとはグラデーションである 🚩 序 こんにちは。Vue Beginners (の管理人) です。 すでに多くの方に記事を見ていただけていてとても嬉しく思います。感謝しています。 今回はソースコードは 1 行も出てきません。 ひょっとすると、Vue.js の勉強法や使い方などを求めている方にとっては多少つまらない内容かもしれません。 ですが少し早まらず、是非とも一緒に考えてほしいです。🙏 今日の話は、これからあなたが Vue.js について学び、使っていく際にとても重要な話だと筆者は信じています。 🤔 あなたがコミュニティの一員であるかどうか 回答: それはわかりません。 ・ ・ ・ 「自称だからでしょ？」と思う方もいるかもしれませんが、そういう話ではありません。 あなたがいくら自称したところでこの答えは決まりません。 というのも、いくらあなたが「私はコミュニ
フロントエンドを Vue.js から React にリプレイスしたお話 (前編) - NTT Communications Engineers' Blog
はじめての方、はじめまして。久しぶりの方、お久しぶりです。 イノベーションセンターの何縫ねの。(@nenoMake)です。 普段の業務ではソフトウェアエンジニアとして Node-AI という WEB アプリケーションの開発をしています。 パブリックな活動としては、好きな言語である C# 関係の OSS 開発や技術ブログの投稿、登壇などをしています。 ですが、今回は C# ではなくフロントエンドのお話をします...! この記事では今まで Vue.js 2.x で開発されていた Node-AI の WEB フロントを完全に捨て去り、React にリプレイスしたお話をつらつらとしていきます。 まずは前編ということで、リプレイスプロジェクト発足時の課題感からはじめ、プロジェクトの進め方や選定技術などについてお話しします。 後編には内部の設計などのより技術的なお話をしたいと思います。では前編スタート
【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】
【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】 🤔 Vue.js って何から勉強すれば良いですか？ この疑問は Vue.js に限らず、多くの初学者の中でホットなトピックです。 すごく端的にこの問いに答えてみると、「好きにすればいい、正解はない！自分で考えなさい！」です。 これは確かにとても正しい意見[1]だと思いますが、そうは言っても初学者にとっては何から手をつけたらいいのかわからない状況が多いです。 と言うことで、上記のような前提は持ちつつ「まぁ、とりあえずこんな感じで良いんじゃないですかね(安牌)」と言う私(筆者)なりのアイデアを書いてみたいと思います。 ご参考までに 😙 それではスタート 💨 Vue.js の公式ドキュメント 「おいおい、急にハードルが高すぎるだろ...」 そう思った方も少なくないかもしれません。
ANDPADフロントエンドエンジニアの小泉です。 昨年の夏頃、担当したプロダクトで新規リポジトリでの開発を立ち上げる機会があり、Nuxt 3 を用いて構築を行いました。 アップデートではなく新規で Nuxt 3 サイトを構築するのは業務としては初めての経験だったのですが、Vue 3・Nuxt 3 の様々な機能によって、型安全な状態を保ったまま快適な開発を進められ、かつ3ページの全体実装を約7営業日で形にすることができました。 この記事では、「いま新規サービスのゼロからの立ち上げにNuxt 3を選択するとどんな嬉しいポイントがあるのか」という実例をご紹介できればと思います。 担当したプロダクトについて ANDPAD資料承認 | 製品のご紹介 2023年10月にリリースされた「ANDPAD資料承認」という、資料の申請・承認を一元管理する機能のフロントエンド開発を担当しました。 ただし、紹介サイ
「Vue / Nuxt利用者が気軽に情報を得ることができ、またVue / Nuxt初学者がまずここを訪ねてみる」 と思える、そんなVue / Nuxtの情報が集まる広場。ハードルは低く、わちゃわちゃと知見が集まる広場へ。 ✍️ Articles: Vue, Nuxt, related libraries
npm createは何してるのか vue@latestやコマンド実行時の挙動の前に、npm createについて確認する。 npmとは 正式名称：Node Package Manager。 その名の通りNode.js上で参照する各種パッケージの依存関係やバージョンなどを管理するマネージャ。 npm公式ドキュメントによるとソフトウェアレジストリと定義されている。 レジストリの解釈が少し難しいが、大まかにライブラリと同じものと見做してよさそう。 ライブラリ=モジュールの集合=再利用可能なプログラムの集まり、ということで、npmのおかげで用いることで集約された各モジュール（Node.js的に言うならパッケージ）を好きにローカル環境にもってきて実行することが出来る。 Node.jsとの関係性については以下の図が分かりやすかった。 参考：https://nodesource.com/blog/No
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】 - Qiita
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】TypeScriptフロントエンド個人開発Next.jsprisma はじめに 皆さんこんにちは、mamiなのだ！ 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ！ フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ！ ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまっ
2023年は Vue.js および Nuxt のアップデートがとっても活発な一年でした。 これだけ多くの、そして多様な進展があると、1年を振り返っておかないと何があったか忘れてしまいそうです。 というわけで Nuxt, Vue.js, Vite 関連の情報をピックアップして🏃♂駆け足で振り返ってみます。 （数が多かったので、おもに公式周辺のアカウントから告知されたものが中心です。漏れがあったらすみません。教えていただければ追加します） 🗓2023年1月 2022年の春先に正式に Vue.js 3 がデフォルトのバージョンとなり、2022年11月に Nuxt 3.0 がリリースされました。 年が明けて2023年1月の主だった情報です。 🔼Nuxt 関連 2023年1月17日に公開された Daniel Roe @danielcroe氏による公式ブログ記事 Nuxt: A vision
JSer.info #675 - Vue 3.4 がリリースされました。 Announcing Vue 3.4 | The Vue Point Vue 3.4ではVueテンプレートのパーサーのパフォーマンス改善、watchEffectの改善、defineModelがStable APIに変更されています。 また、v-bindが同名の場合の省略記法を追加、Hydrationのエラー表示を改善などの変更も含まれています。 破壊的な変更として、global JSX namespaceの型を定義しないように変更、実験的な機能だったReactivity Transformの削除なども含まれています。 関連して、Vue 2.x は2023年12月31日にサポートが終了し、End of Life(EOL)となりました。 Vue 2 Has Reached End of Life 最終バージョンは2.7.
Today we're excited to announce the release of Vue 3.4 "🏀 Slam Dunk"! This release includes some substantial internal improvements - most notably a rewritten template parser that is 2x faster, and a refactored reactivity system that makes effect triggering more accurate and efficient. It also packs a number of quality-of-life API improvements, including the stabilization of defineModel and a new
Wasm ベースの SQLite から Origin Private File System への出力を試す
この辺りあまり詳しくないので、間違っている可能性もあります... 整理 Origin Private File System オリジンごとに独立したディレクトリを保有できる Chrome ではデフォルトで有効になってる https://chromestatus.com/feature/5702777582911488 Wasm ベースの SQLite Wasm ベースなので、ブラウザ上で SQLite を動かせる デモで使用しているのはこれ https://sqlite.org//download.html#:~:text=WebAssembly %26 JavaScript デモを試してみる 記事の中にデモがあったのでこれを試してみる。 デモサイトに遷移すると、Origin Private File System 上でDBの作成、テーブルの作成、レコードが追加される。（mydb.sqli
All I know about Vue 3's Vapor Mode Details (2023/12) - Qiita
Vapor Mode ってご存知でしょうか? 少しでも聞いたことがあるようであれば、おそらくあなたは日常的に情報を収集している熱心な方でしょう。 というのも、現在(2023/12)、Vapor Mode について日本語での言及はほぼありません。 かといって英語圏に情報が出回っているかというと、そうでもありません。(後述) 今回は現時点で筆者が知っている Vapor Mode の詳細について、前提知識も整理しつつ理解していければと思います。 初めに お品書き (何を理解するか) 改めて Vue.js とは これから Vue.js を学び始める方や、Vue.js をのぞいてみるのは随分と久しぶりだという方もいるかと思うので、ざっくりおさらいします 現在の Vue.js 現在の Vue.js がどういう実装で実現されているのか、 Vapor Mode に関わってくる部分を抽出し、ソースコードベー
2. 機械学習・AIチートシート まずは機械学習やAI開発に関わるチートシートからです！ Machine Learning Cheat Sheet | DataCamp 主要な機械学習アルゴリズム、その利点と欠点、および使用ケースをガイドするものです。初心者からエキスパートまで、誰でも役立つリソースです。 機械学習アルゴリズム チートシート MicrosoftのAzureが提供している機械学習アルゴリズムに関するチートシートです。 TensorFlow Cheat Sheet https://zerotomastery.io/cheatsheets/tensorflow-cheat-sheet/ 機械学習と人工知能のためのオープンソースライブラリ、TensorFlowのチートシートです。基本的な概念やベストプラクティスがまとめられています。 （メールアドレスでサブスクライブするとPDFがダ
⛹️React っぽさを忘れよう、今年の Vue のアップデートを確認する2023 年リリースされた Vue 3.3 / 3.4 のアップデートを見てみましょう。ひょっとすると React に浸っている方は、その React っぽさから完全に抜けきれていない可能性があります。 By jiyuujin at12/22/2023 この記事は jiyuujin Advent Calendar 2023 の 22 日目の記事になります。 先日 Vue Fes 2023 ウェブサイトのリポジトリが公開されました。 が、最新の Vue のお作法に則っていますかと聞かれると、正直そこの自信は全くありません。 本業の都合上自身は完全に React 脳に浸っており、どこかしら React っぽく書けば Vue も動くのではと考えたり、でございます。 昨年 8 月にリリースされた Vue 3.2 では、いま
初めに 本記事は All we know about Vue 3's Vapor Mode の日本語翻訳版です。 このブログは現時点で出回っている Vapor Mode についてのリソースでおそらく最も体系的にまとめられているもので、主に Evan You 氏の講演やインタビューをもとに書かれています。 このブログを書いてくださったのは :icarus.gk 氏で、彼はいつも Vue のアップデートのまとめや、機能の紹介に関して素晴らしい発信をしています。 日本語翻訳を公開する件について :icarus.gk 氏 は快く了承してくださいました。 この場を借りて感謝したいと思います。 また、コンテンツの最後に幾つかの注釈を加えました。 こちらは元のブログにはないものであり、筆者 (@ubugeeei) が追記しているという点に注意してください。 Vapor Mode とは？ 🧐 Vapor
こんにちは！Vue.js 日本ユーザーグループ代表の kazupon です。 2023年10月28日(土)に中野セントラルパークカンファレンスでVue Fes Japan 2023を開催しました。 去年2022年はオンラインカンファレンス開催でしたが、今年2023年は COVID-19 が落ち着き、初開催した2018年より5年ぶりに日本でようやくオフラインカンファレンスを開催することができました。 当日多くの方に参加頂き、1日のカンファレンスを通して盛り上がりました。 協賛して頂いた各社、団体、個人スポンサーの皆様、スピーカーの皆さん、そして参加された皆さん、本当にありがとうございました。 カンファレンス開催から1ヶ月以上経ってしまいましたが、改めてカンファレンスを振り返ってみたいと思います。 レポート今年のカンファレンス参加状況ですが以下になりました。 全参加者数: 587名 一般参加者
破壊的変更を乗り越えてVue3移行達成した話
はじめにこの記事では、私たちが開発しているAnewsというプロダクトでのVue 3移行プロジェクトについて紹介していきます。 Anewsはビジネス向けにユーザーの趣向に合わせて日々のニュースなどの最新情報を提供するプロダクトです。フロントエンドはVue.jsというフレームワークを使用しています。2023年末にVue 2のサポート期限が迫っており、それまでにAnewsのVue 3移行を完遂すべく、Vue 3移行プロジェクトを行いました。 そこで得られた知見としてVue 2とVue 3の違いや、必要だった対応、実際に行った移行戦略などまとめていきたいと思います。 移行前の環境今のAnewsは2020年に開発がはじまり、AnewsはVue 2.6.12、TypeScriptを使用していました。 TypeScriptを活用して開発するため、TypeScriptのクラスでVueのコンポーネントを定義
一休.com 宿泊管理システムのフロントエンド設計と改善の変遷 - Developers Blog - 一休.com Developers Blog
宿泊の管理システムについて 新しい管理システムについて 開発初期のフロントエンド設計 コンポーネントは4レイヤー方式を採用 UIのコンポーネントライブラリを採用 これ以上の設計、方針は決めなかった 初期ローンチ後の課題 改善した内容 1. コンポーネント設計の見直し ディレクトリ構成の変更 大きくなったコンポーネントの分割 Fragment Colocationを導入してコンポーネントのインターフェースとFragmentを整理 2. 業務処理（composables）の分割 3. 型安全に開発できるように厳しいlint設定に変更 4. 秩序を保てる開発体制、ドキュメントの整備 現在と今後 今後やりたいこと 改善を継続するためのポイント まとめ おわりに 宿泊プロダクト開発部の田中（id:kentana20）です。 このエントリーは一休.com Advent Calendar 2023の14
何がjQueryを負債たらしめているのかを考察する | yamanoku Advent Calendar 2023
何がjQueryを負債たらしめているのかを考察する この記事はyamanoku Advent Calendar 2023の12日目の記事になります。 現代のフロントエンド技術的負債の要因となっているものはいくつかあると思いますが、その中でも共通で「jQuery」が挙げられるかなと思っています。長期間運営されているサービスであればまだまだ現役なのではないでしょうか？かくいうウチもそうです！ 2023年現在でのフロントエンド開発であれば今は新規でjQueryを選択肢としてあげることはほとんどないと思っていますが、今よりもJavaScriptのサポートが貧弱だったころ、かつてのブラウザ間の齟齬を吸収する点で大変重宝されていたようです。 JavaScript自体が進化してきたのもあり、jQueryでできた表現が単体のJavaScriptとWeb APIとで表現できるようになってきている1ので
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回は複数のコンポーネントをURLによって切り替え表示できる「Vue Router」の利用法を説明しました。今回はVue.jsの状態管理ライブラリ「Pinia」について説明します。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型定義ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。 一般にWebページは、ユーザーの入力値やWeb APIから取得したデータなど、さまざまな状態を持ちます。これらの状態がさまざまなコンポーネントに散
10月28日に開催された「VueFes Japan 2023」のイベントレポートをダイジェストでお届けします。 なお、公式サイトのタイムテーブル内に、一部の講演の資料がアップロードされています。 オープニング 実行委員長・ユーザーグループ代表の川口和也氏から、挨拶がありました。 今回は4トラックでスピーカーは35名、コアチームの来日など充実した内容になっています。またオフラインでの開催は5年ぶりです（台風やコロナの影響で、2018年以来です）。 川口氏は、フェイス・トゥ・フェイスで開催できる嬉しさやスポンサーへの感謝を述べました。 Evan You氏によるキーノート 基調講演はVue.jsの作者であるEvan You氏。広い会場で立ち見もでるほどの盛況でした。Evan You氏は、台風やコロナで日本に来れなかったため、久々の来日とのことです。 Evan You氏はVue.jsとVite
Vue & Vite Rustify
プロダクションで使うGo Pluginの利便性とパフォーマンス性 / Simplicity and Performance of Go plugin for Production
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue3でモーダルダイアログの起動をいい感じに実装する | フューチャー技術ブログ
サービス開発におけるVue3とTypeScriptの親和性について
Vue / Vite 関連ライブラリー名の読み方 2024
2024-03-19のJS: Storybook 8、Nuxt 3.11、Cloudflare Workers + Vitest
Nuxt 3.11 · Nuxt Blog
【Vue.js】イメージとアナロジーとヒストリーで理解する Component Emits
「ref と reactive」 結局どっちを使えばいいのか？ (2024 年最新版)
【Vue.js】defineProps はなぜ import 文を書かずに使えるのか【マクロ】
Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
[2024年3月2日] Vue3+TypeScriptの環境構築で推奨される拡張機能と設定が変わったよ。
【Vue.js】コンパイラってよく聞くけど一体全体なんなんだ！？！？！？
Nuxt Auto-imports機能の深淵を求めて
NuxtHub: Build full-stack Nuxt apps, on the edge.
【徹底比較】Vue.js と React でレンダリングされる値、されない値
新しい UI テストの手法を提供するテストライブラリ SafeTest
【初学者にこそ伝えたい】Vue.js コミュニティ入門
新規プロダクトの開発に Nuxt 3 を採用して良かったこと - ANDPAD Tech Blog
Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt.
Vue公式のクイックスタートは何してるのか - Qiita
Vue.js と Nuxt の 2023年まとめ
2024-01-02のJS: Vue 3.4、Vue 2.xのEOL、quick-lint-js 3.0.0、AstroとDenoの2023年まとめ
Announcing Vue 3.4 | The Vue Point
2023年版！エンジニア必見のチートシート集 - Qiita
React っぽさを忘れよう、今年の Vue のアップデートを確認する
【日本語版】All we know about Vue 3's Vapor Mode - Qiita
Vue Fes Japan 2023 を開催しました！｜kazupon
TypeScriptとも相性抜群なライブラリ──Vue.jsで状態管理を行う新定番「Pinia」を解説！
VueFes Japan 2023イベントレポート | gihyo.jp