Vue にまつわる3つのよくある誤解と、私がVueを選ぶ4つの理由

2025/09/30 Next.js vs Nuxt それぞれの良さを知る Frontend Night
https://offers-jp.connpass.com/event/367375/
の登壇資料です！

Transcript

1. Vue にまつわる3つのよくある誤解と、 Vue にまつわる3つのよくある誤解と、 私が Vue を選ぶ4つの理由 私が Vue を選ぶ4つの理由 Yutaro Koizumi 2025-09-30 Next.js vs Nuxt それぞれの良さを知る Frontend Night
2. Yutaro Koizumi (Twitter:@ykoizumi0903) 所属： ERPフロントチーム テックリード 工事現場の見積・予算などを作成・確認する「原価管理」 （Nuxt） 承認フローを一元管理する「資料承認」 （React Router / Nuxt 併用）などを担当 Zenn や ANDPAD TECH BLOG で記事を書いています 祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力 - Zenn GitHub Copilot Agent の力を借りて Next.js から React Router に移行しました - ANDPAD Tech Blog Vue・React マルチプロダクト開発を支える Vite - Speaker Deck 株式会社アンドパッド（ANDPAD）
3. 建築業界のDX化を推進する、様々なプロダクトをチームごとに開発しています 株式会社アンドパッド（ANDPAD）
4. チームごとに React と Vue を選択可能で、現在も両方で新しいプロダクトが立ち上がっています チームメンバーの得意な/プロダクトに適した技術を使ってもらうため 株式会社アンドパッド（ANDPAD）
5. このLTの趣旨 「React より Vue を使うべき！」ではないが、 「それぞれに良さがある」と思ってもらいたい 主に React を使っている人に向けて、 Vue の良さを知ってもらい、Vue に関するネガティブイメージを 払拭することを目標にします Nuxt と Next.js よりも、 Vue と React の違いにフォーカスして話します React が使いたくて Next を選ぶ、Vue が使いたくて Nuxt を選ぶ、という順番であることが多いはず もちろん Nuxt の話も出てきます ※ボリューム多めなので駆け足で話します
6. Vue にまつわる3つのよくある誤解 Vue についてよくある誤解と、なぜ誤解されてしまうのかについて
7. 誤解される理由：Vue 2 時代の印象に引きずられている Vue 2 時代は、 Template タグ内や emit などで型を付けづらい場面があったが、Vue 3 では全て解消 React Hooks に近い記法である Composition API が登場して既に5年以上が経過 公式ドキュメントも新規作成時のテンプレートも、既に TypeScript が標準になっている 公式拡張機能や型チェックを提供する などのツールセット Vue Language Tools (Volar) 誤解1：Vue は TypeScript との相性が悪い？
8. A. Vue 3 + Volar であれば TypeScript の導入で困ることはなく なっている Q. Vue は TypeScript との相性が悪い？
9. 誤解される理由：Vue 2 → 3 への移行は本当に大変だったから Vue 2 / Nuxt 2 から 3 への移行は、関連ライブラリも含めた破壊的変更が非常に多く、 開発者の大きな負荷と コミュニティの混乱を招いた ※ Vue Fes Japan 2023 KeyNote より抜粋 誤解2：Vue はアップデートが大変？
10. Vue 3 が登場した2020年以降、破壊的変更は導入されていない <script setup> 構文、 defineModel() など、選択肢としての便利な新記法 仮想 DOM を使わないコンパイル戦略 Vapor Mode は、コンポーネント単位で既存モードと併用可能 Rollup とほとんど完全な互換を保った、Rustベースの高速バンドラツール Rolldown の開発を主導 → API を維持したまま内部的な性能改善がどんどん進むのは、 Vue 3 の基盤の優秀さを示している 参考: 【Vue.js 3.2】<script setup> 構文がすごくすごい 【脱仮想 DOM !?】Vue.js が控えている進化 "Vapor Mode" の詳細 (2023/12) JavaScript の新しいバンドラ Rolldown について 誤解2：Vue はアップデートが大変？
11. A. Vue 3 以降は、それまでの反省を活かして互換性を非常に重 視している Q. Vue はアップデートが大変？
12. 誤解される理由：Vue と React の違いを説明する上で都合が良いから 「React と Vue は何が違うの？」と訊かれたら、 何らかのわかりやすい違いを挙げたくなる 「Vue は学習しやすいが複雑な開発に向かない、 React は難しいが大規模開発に向いている」という説 明は、明快で答えやすい → 多くの人が同様に説明することで、イメージが再 生産されてしまう この星取表は本当に正しい？ 学習しやすさ △難しい ◎簡単 柔軟性・拡張性 ◎高い △低い 向いているアプリ 大規模 小～中規模 一言で表すと？ Simple Easy React Vue 誤解3：Vue は大規模開発に向いていない？
13. 誤解される理由：Vue と React の違いを説明する上で都合が良いから Vue と React の拡張性に大きな差はない React Hooks と Composition API が非常に似ているのに、その適性だけガラッと変わるわけがない そもそも「React で小規模開発するのは難しい」はあまり言われないのに、Vue だけ言われるのも変 大規模開発が困難なのは、フレームワークではなく開発者の設計力の問題 Vue でも React でも設計や実装で踏んではいけないアンチパターンが存在する Mixin、Provider、Global Store、非 TypeScript の多用、過度な共通化など Vue でも React でも、小規模なアプリケーションを作るのは簡単で、大規模な開発のためにはより多くの知 識を学ぶ必要があるというだけ 最初の学習コストが低いことと、その学習だけで全てのアプリケーションが作れることは別の話 誤解3：Vue は大規模開発に向いていない？
14. A. 向いているが、Vue でも React でも大規模開発は難しい Q. Vue は大規模開発に向いていない？
15. ここまでのまとめ Vue も TypeScript との相性は良い Vue も後方互換性を非常に重視するようになった Vue も大規模開発に向いている → でも React でも良いのでは？
16. 私が Vue を選ぶ4つの理由
17. React と Vue で異なるレンダリングの仕組み コードの見た目ではそこまで差がないが、 「値の変更がどう反映されるか」が違う import { useState, useEffect } from 'react'; export default function Counter() { const [count, setCount] = useState(0); function increment() { setCount((c) => c + 1); } const doubledCount = count * 2; return ( <button onClick={increment}> Count is: {count} </button> ); } <script setup> import { ref, computed } from 'vue' const count = ref(0) function increment() { count.value++ } const doubledCount = computed(() => count.value * 2) </script> <template> <button @click="increment"> Count is: {{ count }} </button> </template> 理由1：簡単に高いパフォーマンスを得られる
18. React と Vue で異なるレンダリングの仕組み コードの見た目ではそこまで差がないが、 「値の変更がどう反映されるか」が違う 理由1：簡単に高いパフォーマンスを得られる import { useState, useEffect } from 'react'; export default function Counter() { const [count, setCount] = useState(0); function increment() { setCount((c) => c + 1); } const doubledCount = count * 2; return ( <button onClick={increment}> Count is: {count} </button> ); } <script setup> import { ref, computed } from 'vue' const count = ref(0) function increment() { count.value++ } const doubledCount = computed(() => count.value * 2) </script> <template> <button @click="increment"> Count is: {{ count }} </button> </template> React は state が更新されるたびにコンポーネント関数全体が再レンダーされ、 トップレベルに書かれた計算も再実行される Vue の setup は最初のレンダー時に一度だけ実行される ref が更新されると、 依存関係のある computed 関数だけが個別に再計算される
19. レンダリングシステムの違いがもたらすもの React は state や props などの値が変わるたびに、コンポーネントと、その子コンポーネント全てを新し いものに置き換える再レンダーによって変更を反映する → 更新タイミングなどの挙動を開発者が制御しやすいので、パフォーマンスを自分でチューニングしやすい が、注意しないとパフォーマンスの低下に繋がる Vue は ref や props をリアクティブな値として自動的に追跡し、その値が更新されると、 computed や DOM 要素などの依存関係を特定して、変更箇所だけを細かく更新する → 依存変数を自分で宣言する必要がなく、自動でパフォーマンスが最適化されるが、 開発者が挙動を完全に制御することは難しい 参考: Composition API に関するよくある質問 | Vue.js 他のフレームワークとの比較 — Vue.js (※Vue 2 時代のドキュメントです) 理由1：簡単に高いパフォーマンスを得られる
20. つまり、 「簡単にそれなりのパフォーマンスが欲しいなら Vue、 　大変でも高いパフォーマンスを求めるなら React」？
21. 理由1：簡単に高いパフォーマンスを得られる React より Vue の方がパフォーマンスは高い js-framework-benchmark のほとんどの結果で Vue 3 は React を上回って いるうえに、Vapor Mode で更なる最適化が進んでいる 多くの開発者にとっては、頑張って手動で最適化した React コードよりも、 自動最適化された Vue コードの方が高いパフォーマンスを出す可能性が高い 自動最適化は信用できない？ 自動的に依存関係を追跡する仕組みは、Fine-Grained Reactivity（きめ細 やかな反応性）として SolidJS に採用され、流行しつつある React Compiler や react-hooks/exhaustive-deps lint ルールは、 結局コンパイル時に機械的な依存関係の検出を行っている → 「そういうもの」だと割り切れば慣れるはず
22. 充実した公式・推奨ライブラリの存在 Vue は公式ライブラリや、Vue/Nuxt コアメンバーが中心となってメンテナンスしているライブラリが多く、 それだけで主要な機能をカバーできる フレームワーク：Nuxt ビルドツール：Vite ルーター：Vue Router ストア：Pinia 拡張機能：Vue Offical (Volar) テストツール：Vitest 理由2：ライブラリ選定で悩まなくて済む
23. 技術選定を楽にする環境 <style> タグがあるので CSS in JS ツールの導入や学習が不要 Nuxt は SSR・SPA・SSG などあらゆる環境に対応しているので、後で要件が変わってもフレームワークを 変更しなくて良い 200以上のユーティリティー関数の詰め合わせ VueUse のおかげで、機能ごとにライブラリを個別に入れな くて良い 例えば useElementVisibility や useMediaQuery など Vue / Nuxt を採用すると、ライブラリや実装で悩まずに、プロダクト本来の開発に集中できる 理由2：ライブラリ選定で悩まなくて済む
24. Vue コミュニティ発のツールが、フロントエンド全体で使われている Vite Vue の作者でもある Evan You 氏が 2020 年にリリースした高速で拡張性の高いバンドラーツール Nuxt、 React Router 、Tanstack Router、SvelteKit など、様々なフレームワークが JavaScript のバンドラー・ビルドの基盤として Vite を採用している create-react-app に代わる SPA の推奨技術として React ドキュメントにも記載されている Vitest Vue コアコミッターである Anthony Fu 氏が開発した、Vite ベースのテストツール 高速さと Jest との高い互換性を備え、あらゆるフロントエンド開発で使われるツールに成長 他にも UnJS、 Oxlint、 Volar.js などがオープンソースで他のライブラリを支えている 理由3：JavaScript エコシステムへの貢献
25. Vue コミュニティ発のツールがエコシステムを支えているメリット 汎用的に利用できるツールが発展することで、JS エコシステムの多様性が守られやすくなり、Vue もその 選択肢の1つとして維持されやすくなる Vue のコアメンバーが開発に関わっていることで、それらのツールの新機能も Vue との互換性を重視するこ とが期待できる Vue 開発チームの高い技術力は、Vue が将来的な時代の変化に対応できるという信頼にも繋がる 「SolidJS にインスパイアされて API そのままの Vapor Mode を開発します」ができる凄さ 理由3：JavaScript エコシステムへの貢献
26. Vue Fes Japan 2024 年は 750 名以上が来場した、日本最大級のフロントエンドイベント Evan You 氏、Anthony Fu 氏、 Volar や alien-signals を手掛けたJohnson Chu 氏、 Nuxt コアチームリーダーの Daniel Roe 氏などが来日して講演を行う貴重な機会 現在は Vue コミュニティに関連する Vite や Oxc、Rolldown などの話題も扱っており、 Vue に限らずフロントエンド全体のお祭りとしての側面を強めている 理由4：活発で熱気のあるコミュニティ
27. コミュニティに熱気があることは、それ自体がフレームワークを選ぶ理由になる ユーザーベースでの活発な情報発信やフィードバック ユーザー主導の関連ツールの継続的なメンテナンス・改善 日本コミュニティが活発であることによる、日本語での情報発信やイベントの機会の多さ → OSS の持続性・発展性はコミュニティの盛り上がりに直結する 理由4：活発で熱気のあるコミュニティ
28. Vue Fes Japan 2025 で、その熱を体感してみませんか？ Vue・React・Svelte それぞれのコアメンバーを迎えてのパネルディスカッション 「フロントエンドの未来を語る── React/Vue.js/Svelte が見据える次の 10 年」も開催されます 2025年10月25日（土） 、一般チケットはまだ間に合います！ 理由4：活発で熱気のあるコミュニティ
29. Vue Fes Japan 2025 で、その熱を体感してみませんか？ アンドパッド社も昨年に続きスポンサーブース出展します！ 私も当日はブースにいますので、ぜひお気軽に話しかけに来てください 理由4：活発で熱気のあるコミュニティ
30. ご清聴ありがとうございました！ Vue・React どちらかの経験がある方、新しい技術にチャレンジしてみたい方、大歓迎です！ 応募のハードルが高い方は気軽に @ykoizumi0903 までご連絡ください