Characterize Vue.js
序文
皆さんにとって Vue.js とはどういうものだろうか？
普段 Vue.js を仕事で書いている人，趣味で触れている人，SNS やメディアを通じてその名前だけを知っている人—— 色々な立場の方がいるだろう．
覚えることが多い？
ルールがなくて分かりづらい？
簡単？
マイグレーションが大変？
でもなんか好き？
やっぱり嫌い？
いろんな感情やイメージを持った方がいると思う．
今日は，皆さんが何となく普段肌で感じている Vue.js の特徴やイメージについて改めて考え，体系的にまとめ直してみようと思う．そういう試みだ．
Vue.js を 4つのキャラクター で特徴づけてみる．
Vue.js is Easy?
この言葉を聞いたことがあるだろうか？
「Vue.js is Easy」
巷では Easy / Simple という対比もよく目にする．
実は，私自身はこの言葉をあまり好んではいない．
まず前提として，「何を簡単と感じるか」はその人のバックグラウンドに大きく左右されるものであり，かなり主観的だ．
この時点で迂闘に「簡単」という言葉を使うのは避けたいが，加えてこの言葉には 2つの誤解 を生む可能性がある．
誤解その 1：「Vue.js は難しくなった」
Vue.js は 2020年に Composition API とともに version 3 を発表し，大きな変化を得た．
そしてそれから今にあたるまでもたくさんの進化を続けてきた．
そんな中，一定数「Vue.js は難しくなった」とか，「昔の Vue.js はもっとシンプルでよかった」などといった意見を見ることがある．
確かに，一時期の Vue.js はシンプルで親しみやすく，"簡単" なものを目指していたかもしれない．Vue.js が今よりも "Easy" だった時代は確かにあるだろう．
しかしここで考えたいのは，「難しくなったのは本当に Vue.js だろうか？」 という話だ．
私はこれは違うと思う．
難しくなったのは Web だ．
フロントエンドが発足し出した 2010年代から，徐々に UI の複雑さや，フロントエンドとしてのコードベースの規模，アプリ全体としてのパフォーマンスの課題が大きくなっていき，Web アプリケーション全体が難しくなった．
Vue.js はそれらのニーズに追従したのだ．
それを裏付けるものとして，「Vue.js はまだ従来の形式をサポートしている」 というのが挙げられる．
具体的には，TypeScript を利用しないケースや，CDN から Vue.js を利用するケース．Options API．などなど昔からある形式は今もサポートを続けている．
つまり，「難しくなかった頃の Vue」を今も利用することは可能だ．
誤解その 2：「Vue.js にはルールがないからダメだ」
「Vue.js は簡単だけどルールがない．それはバグを生むし，コードを汚くする」という誤解だ．
プログラムに対して設計や規約を設ける，というのは一般的には良いプラクティスとされている．私もそう思う．
しかしこれらを設ける上で，注意するべきことがいくつかある．
まず 1つ目は 「どの課題を解決するためのルールなのか」 ということだ．
ルールには目的が必要だ．そのルールを設けることによってどういった恩恵が受けられるのかということは常に考えられるべきだ．
そして 2つ目は，それによって発生するトレードオフの考慮 だ．
規約は 0 コストではない．その制約が強ければ強いほど，それに準拠することを強く求められ，小回りが効かなくなったり，学習コストが高くなったりする．
じゃあ結局あなたはルールはない方が良いと言っているのですか？と言いたくなるかもしれないがそうではない．
「トレードオフに則ってあなたに合うものを選択しましょう．」 ということだ．
Web アプリケーションというのはあまりに多種多様だ．それを開発しているメンバーや会社の状況なども含め多種多様だ．
そして，それら全てに通じる銀の弾丸は存在しない．
加えて，設計や規約は 0/1 のものでもない．
私は「ルールは必要ない」と言いたいわけではなく，「ルールは必要だが，色々なものがある．それを選択できる価値は大きい．」 と言いたいわけだ．
そこをフレームワークが責任を負うか，実装者が責任を負うかはトレードオフであり，
実装者が負う場合には多少の責任を請け負う代わりに規約の柔軟さを手に入れることができる．
「Vue.js は簡単だけどルールがないからダメだ」という反応はこのトレードオフを十分に考慮できていない．
Vue.js is Approachable
それでは，改めて Vue.js とは何なのだろうか？
私は，Vue.js is Approachable だと思っている．
Approachable という言葉は実は公式ドキュメントのトップにも登場している．
さまざまなトレードオフがあるが，一貫して 「いろんなユースケースにアプローチしやすい」 というところがかなりポイントだと思っている．
また，Vue.js は "The Progressive Framework" とも呼ばれている．
これは Approachable と関連する概念で，「あなたのプロジェクトと共に成長し，あなたのニーズに適応できるフレームワーク」ということだ．
ビルドステップなしの静的 HTML 拡張から始めて，必要に応じて SPA や SSR，SSG へとステップアップしていくこともできるし，最初からフルスタックな構成で始めることもできる．
どんな規模でも，どんな段階からでもアプローチできる——これもまた Vue.js の柔軟さの表れだ．
Vue.js は Approachable な UI フレームワークだ．
難しくなったわけでもなく，簡単さと引き換えにメチャクチャになるものでもない．
柔軟に選択できる，ということだ．
Vue.js は難しくなった Web に追従した．従来の使い方も選択できる．
実装者が規約や設計を柔軟に選択できる．
これが，今日話したい Vue.js のキャラクターの 1つ目 だ．
この話題についてさらに深掘りした記事も書いている．興味があればぜひ．
Vue.js は言語だ
Vue.js が言語であることを説明してみる前に，まずはプログラミング言語のおさらいをしよう．
プログラミング言語とは
プログラミング言語とは何だろうか？
プログラミング言語はプログラムを書くための言語だ．名前の通りだ．
皆さんはこの世界にたくさんのプログラミング言語が存在していることを知っているはずだ．
JavaScript や TypeScript，Rust，C++，Haskell．
それだけではない．HTML や CSS，JSON もそのうちの 1 つだ．
これらは「汎用プログラミング言語」や，「ドメイン固有言語 (DSL)」などのように分類される．どちらも言語だ．
どうしてこんなにもたくさんの言語が存在しているのだろうか？
ここで改めて考えて欲しいのだが，プログラムを記述しておくために，コンピューターにとって必要な形式というものはどういうものだろうか？
答えは バイナリ だ．これだけあれば全てのものは記述することができる．
ほとんどの状況で，任意の言語は最終的にはバイナリとなって動作している．
じゃあプログラミング言語というのは誰のためのものなのだろうか？
これは紛れもなく私たち，「人間」 のためのものだ．
世の中には多様な記述対象がある．
ハードウェアの制御や，OS，ブラウザ，Web アプリケーション，CLI ツールまで．
そしてこれらに必要な知識は異なる．
それぞれの領域で，いろんなコンセプトをもとに人間にとっての "書きやすさ" や "正しさ" を提供するためにたくさんの言語が存在しているわけだ．
非構造的なプログラミングから始まり，制御としての知識をプログラミング言語自体に与えるために構文を用意し，OOP をやる為に OOP の言語を作り，FP をやる為に FP の言語を作り，メモリ管理から解放されるためにまた新しい言語を作り，データを記述するためにデータ記述言語を作る．
Vue.js は UI を記述するための言語
それでは，Vue.js はどうだろうか．
Vue.js は UI を記述するための言語 だと捉えることができる．
すでに，UI を記述するための言語として，HTML, CSS, そして JavaScript がある．
Vue.js はこれらをベースとして，足りない知識を拡張している．
1. 宣言的なテンプレート記述
UI の template を宣言的に，かつ動的に記述するということ．
このプラクティスは HTML, CSS, JavaScript が登場した時期にはあまりないものだった．
Web が発展していくとともに，クライアントで動作するコードの複雑さは大きくなり，さまざまな UI の記述方法が乱立し，安定性や可読性の観点から UI は宣言的に記述できる方が良いということがわかってきた．
Vue.js は template を記述するための言語をサポートし，この問題を解決した．
2. コンポーネント中心の設計
関連する HTML, CSS, JavaScript を 1 つにまとめて記述し，UI に関連する記述の凝集度を高める．
加えて，scoped css や slot の記述も Vue.js が提供している拡張知識の 1 つだ．
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
function increment() {
count.value++;
}
</script>
<template>
<button type="button" @click="increment">count is: {{ count }}</button>
</template>
<style scoped>
button {
color: #42b883;
}
</style>ここで注目したいのは，<script> 部分では JavaScript のメンタルモデルをほぼそのまま使える ということだ．
View と ViewModel の境界——つまり Reactivity にさえ気をつけていれば，あとは普通の JavaScript だ．
特別なルールやフレームワーク固有の制約はほとんどない．これも Vue.js の Approachable さの一つだ．
3. Optimizer としてのコンパイラ
コンパイラによって静的に解析できるパフォーマンスチューニングは人の手で行うべきではない．
こういった最適化はコンパイラに任せて，私たちは UI を記述するために必要な本質的なことに集中しているべきだ．
Vue.js のコンパイラはさまざまな最適化を行なってくれる．
- Static Hoisting: 静的なノードを巻き上げ，再生成を回避
- Patch Flags: 動的な部分にフラグを付与し，差分検出を高速化
- Tree Flattening: ネストした静的ノードをフラット化
- Vapor Mode: 仮想 DOM を介さない，より直接的なレンダリング
言語機能としての構文
皆さんは if 文や while, for, loop などを知っているはずだ．
しかし，コンピュータからするとこれらは本質的にはただの "判定してジャンプ" だ．
なぜ "判定してジャンプ" という 1 つの命令に対して複数の構文があるのだろうか？
それぞれのユースケースで意味付けがされていた方が人間にとって分かりやすいからだ．
単に分岐をしたい時には "if"，特定の条件下にある時まで繰り返したい時には "while"．
コンピューターにとってはただのジャンプでも，人間にとってはこういった意味付がプログラムを書く時の補助になる．
Vue.js についても同じだ．
プログラム上，コンポーネント間のデータの受け渡しは，その名の通り "受け渡し" でしかない．
しかし，UI を記述する際には UI の知識を拡張し，意味付を行うことができる．
- コンポーネントにデータをバインドしたい時には
v-bind - イベントを購読/発行したい時には
v-on,emit - コンポーネントにテンプレートを差し込みたい時には
slot
そう，Vue.js は UI を記述する時に発生する知識を言語として整理した のだ．
これはかなりプログラミング言語の価値観そのものだ．
言語ツール
そしてもう 1 つ，忘れてはいけないことは 「Vue.js には十分に発達した言語ツールがある」 ということだ．
プログラミング言語を作る際にはさまざまな課題がある．
仕様の決定，コンパイラの実装，そして言語ツールだ．
たくさんの時間と労力がかかる．
確かに，一昔前の Vue.js は他のフレームワークに比べて少し遅れていた．
だが時間は進み，多大な努力とともにかなり改善されている．
ここで改めて，vuejs/language-tools，そして Johnson Chu さん，コミュニティメンバーの皆さんに感謝したい．
「Vue.js は言語だ」という話についてさらに深掘りした記事も書いている．
Vue.js は拡大するエコシステム
Vue.js のもう一つの大きな特徴は，Vue.js から始まり，Vue.js の枠を超えて広がっていくエコシステム だ．
Vite — Vue から始まった革命
皆さんご存知 Vite は昨今のフロントエンドには欠かせない存在だ．
元々 Vite は vue-dev-server という名前で始まった．
これは，Vue.js の作者である Evan You 氏が，ブラウザの Native ESM を利用し，バンドラを使わない開発セットアップを行うというアイデアから始まったものだった．
それから，No-bundle Dev Server for Vue Single-File Components として Vite に改名され，v2 で core が framework agnostic になり，「Next Generation Frontend Tooling」という位置付けになった．
そうだ．Vite は Vue.js から始まり進化を続け，昨今では Vue.js にとどまらず，フロントエンドのツールとして広がった．
Volar.js — 言語ツールフレームワーク
先ほども Vue.js のキャラクターの一つとして言語の側面と，優れた言語ツールがあることについて触れた．
Vue.js の言語ツールは過去にもいくつかの実装があったが，今は vuejs/language-tools が公式の言語ツールになっている．
元々これは Volar という Vue.js 用の VSCode extension として始まったもので，コミュニティメンバーの個人的なプロジェクトだった．
Volar は v1.0 に到達するまでに 2 年という長い年月と膨大な労力とともに進化し，Vue.js 公式の推奨ツールになった．
そこから，Vue.js に依存しないコアな機能が Volar.js として切り離され，Vue.js の言語ツールは vuejs/language-tools という名前になった．
そしてこの Volar.js は現在，Astro や MDX，Angular のメタフレームワークである Analog の言語ツールの基盤として広まっている．
UnJS — Nuxt から広がるエコシステム
UnJS は Unified JavaScript または Unleash JavaScript という JavaScript のライブラリ群だ．
コンセプトとしては，1 つの目的を持った 1 つのライブラリを高品質に，どんな環境でも動作するように，そしてコラボレーティブにといったことが挙げられる．
この UnJS は Nuxt2 でリードエンジニアをやっていた Pooya Parsa 氏が Nuxt とは別のエコシステムとして開発を続けていたもので，Nuxt3 に向けた開発をしている際に切り出されたサーバーエンジンや Pooya 氏が作っていたライブラリ群を UnJS というオーガナイゼーションにリブランディングされた．
UnJS と Nuxt は綿密にコラボレートし，今では Nuxt の多くの機能が UnJS によって実装されている．
HTTP フレームワークである h3 や，それをベースにしたサーバーエンジンである Nitro などがその代表だ．
Nitro は Analog などでも使われている．
ecosystem-ci — テストの仕組みも共有
Vue.js はたくさんのエコシステムを抱えている．
状態管理のライブラリや UI フレームワーク，ルーター，テスティングライブラリなど本当にたくさんある．
Vue2 から Vue3 へのアップグレードではこれらのエコシステムの追従が大きな課題となった．
そこで，これらのダウンストリームのエコシステムのインテグレーションテストを行う仕組みが導入された．
これは元々 Vite の Svelte とのインテグレーションテストで取り組まれていたもので，Vue.js にもこの仕組みが入った．
そして，これもまた，Vue.js / Vite の垣根を超えて，Svelte や Astro，Oxc などでも同様の仕組みが導入されている．
VoidZero と統一ツールチェーンへの挑戦
Vue.js エコシステムの広がりは，さらに大きな挑戦へと繋がっている．
断片化という課題
Evan You 氏は Vite の開発を通じて，JavaScript エコシステム全体が抱える課題に直面した．
「あらゆるアプリケーションは無数のサードパーティ依存関係に頼っており，それらがうまく連携するよう設定することは最も困難なタスクの一つだ」
Vite は開発体験を大きく改善したが，内部では依然として様々な依存関係があり，異なるツール間での不整合を埋めるための抽象化やワークアラウンドが必要だった．そして，異なるツール間での重複したパースやシリアライゼーションコストがボトルネックになっていた．
VoidZero の誕生
2024年，Evan You 氏は VoidZero を設立した．
「次世代の JavaScript 統一ツールチェーンを構築する」 というビジョンを掲げて．
VoidZero のビジョンは 4 つの特徴を持つ統合開発スタックの構築だ：
Oxc — Rust で書かれた高速コンパイラ
Oxc (JavaScript Oxidation Compiler) は，Boshen 氏が率いる Rust で書かれた JavaScript/TypeScript ツールチェーンだ．
パーサー，リンター (Oxlint)，フォーマッター (Oxfmt)，トランスフォーマー，ミニファイアー，リゾルバーを含む包括的なツールセットで，圧倒的なパフォーマンス を実現している：
- Oxlint: ESLint の 50-100 倍高速
- Oxfmt: Prettier の 35 倍高速
- oxc-resolver: webpack の enhanced-resolve の 30 倍高速
- transformer: Babel の 40 倍高速
2025年6月には Oxlint 1.0 が安定版としてリリースされ，Shopify や Airbnb など 5,200 以上の早期採用者がいる．
Rolldown — Rust ベースのバンドラー
Rolldown は VoidZero が開発する Rust ベースのバンドラーで，Rollup 互換の API を持ちながら 10-30 倍高速 なパフォーマンスを実現する．
2025年11月には Vite 8 Beta が発表され，Rolldown への移行が進められている．
現時点ではまだ完全な統合 (full-bundle) には至っていないが，将来的には従来の esbuild + Rollup の組み合わせを置き換えていく予定だ．
早期テストでは既に印象的なパフォーマンス改善が報告されている：
- GitLab: ビルド時間 2.5分 → 40秒
- Excalidraw: 3-16 倍高速なビルド
- メモリ使用量: 100 倍削減のケースも
この取り組みにより，Vite は将来的に ビルドツール (Vite)，バンドラー (Rolldown)，コンパイラ (Oxc) という同一チームがメンテナンスするエンドツーエンドのツールチェーンのエントリーポイントとなることを目指している．
Vite+ — 統合されたツールチェイン
さらに VoidZero は Vite+ を発表した．
Vite のスーパーセットとして，開発者に必要なツール群を単一の統合されたツールチェインとして提供する：
vite new— プロジェクトスキャフォールディングvite test— Vitest によるユニットテストvite lint— Oxlint によるリンティングvite fmt— Oxfmt によるフォーマットvite lib— ライブラリバンドリングvite run— モノレポタスクランナーvite ui— GUI devtools
信頼とオープンソースへのコミットメント
ここで重要なのは，VoidZero の オープンソースへの姿勢 だ．
「コミュニティが Vite に置いてくれた信頼」が，この方向性を深く考えるきっかけになった
VoidZero は明確に宣言している：
「オープンソース化したものは全てオープンソースのまま．Vite, Vitest, Rolldown, Oxc はオープンソース．」
そして重要なのは，VoidZero は Vue.js をファーストクラスでサポートする ということだ．Vue.js から始まったこれらのツールは，Vue.js エコシステムに対して最高の体験を提供し続ける．
これらのプロジェクトは既に OpenAI，Google，Apple，Microsoft，Shopify など主要な組織で採用されている．その信頼性は実証済みだ．
Vue.js はコミュニティ
最後のキャラクター．これは Vue.js とは切っても切れない大事な要素だ．
コミュニティから生まれるもの
ここまで紹介してきたプロジェクトの多くは，コミュニティメンバーの個人的なプロジェクトとして始まったものだ．
- Volar — Johnson Chu 氏の個人プロジェクトから Vue.js 公式言語ツールへ
- Oxc — Boshen 氏が始めた Rust パーサーが VoidZero の中核技術へ
- UnJS — Pooya Parsa 氏の Nuxt 外での取り組みが独立エコシステムへ
これらは偶然ではない．
Vue.js コミュニティには，個人の情熱がエコシステム全体を動かす力 がある．
信頼の連鎖
Vue.js のエコシステムが他のフレームワークやツールにも影響を与えている現象は，単なる技術的な優位性だけでは説明できない．
それは 信頼 だ．
Evan You 氏が VoidZero を設立する際に述べたように：
「コミュニティが Vite に置いてくれた信頼」
この信頼は一朝一夕に築かれたものではない．
10年以上にわたる一貫したオープンソースへのコミットメント，後方互換性への配慮，そしてコミュニティの声に耳を傾ける姿勢．
その結果として，Vue.js から始まったツールが React エコシステムでも使われ，Svelte でも使われ，Solid でも使われている．
Web コミュニティへの貢献
これは Vue.js コミュニティだけの話ではない．
Web 開発者コミュニティ全体 への貢献だ．
- Vite は Vue.js 以外のあらゆるフレームワークの開発体験を変えた
- Volar.js は Astro や MDX の言語サポートを可能にした
- Nitro は Nuxt 以外のメタフレームワークにも採用された
- Oxc と Rolldown は JavaScript ツールチェーン全体の高速化に貢献している
一つのコミュニティで生まれたイノベーションが，境界を越えて Web 全体に広がっていく．
これこそが，オープンソースの真の力であり，Vue.js コミュニティが体現している価値だと私は思う．
結び
Vue.js を 4 つのキャラクターで特徴づけてみた．
- Approachable — 柔軟に選択できる，いろんなユースケースにアプローチしやすい
- Language — UI を記述するためのドメイン固有言語
- Ecosystem — Vue.js から始まり，枠を超えて広がるエコシステム
- Community — 個人の情熱がエコシステムを動かし，信頼を築く
これらは独立した特徴ではない．
相互に影響し合い，強化し合っている．
Approachable だからこそ多くの人が参入し，コミュニティが育つ．
コミュニティが育つからこそ，言語ツールやエコシステムが発展する．
エコシステムが発展するからこそ，より多くの選択肢が生まれ，Approachable さが増す．
この循環が Vue.js の価値の本質だと私は思う．
Vue.js はただの UI フレームワークではない．
アプローチしやすく，
人間のために設計された言語であり，
境界を越えて広がるエコシステムであり，
信頼と情熱で繋がるコミュニティだ．
これは私の単なるエッセイであり，Vue.js Team の公式見解ではありません．