序文
皆さんにとって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倍高速 なパフォーマンスを実現する.
2026年3月12日にはVite 8.0が安定版としてリリースされ,Rolldownが単一のRustベースバンドラーとして統合された.
これにより,従来のesbuild + Rollupという二重構成は,Vite 8ではRolldownを中心にした一本化されたアーキテクチャへ移行した.
preview / beta期間の実プロジェクトでは,印象的なパフォーマンス改善が報告されている:
Linear: 本番ビルド時間46秒 → 6秒
Ramp: ビルド時間57%削減
Mercedes-Benz.io: 最大38%削減
Beehiiv: 64%削減
この取り組みにより,Viteは ビルドツール(Vite),バンドラー(Rolldown),コンパイラ(Oxc)という近いチームが連携してメンテナンスするエンドツーエンドのツールチェーンのエントリーポイントになっていく.
Vite+ — 統合されたツールチェイン
さらにVoidZeroは2026年3月13日にVite+ Alphaをリリースした.
Viteのスーパーセットとして,グローバルCLIのvpとプロジェクトローカルのvite-plusパッケージを中心に,開発者に必要なツール群を単一の統合されたツールチェインとして提供する:
vp create— プロジェクトやモノレポのスキャフォールディングvp env— Node.jsランタイムのグローバル / プロジェクト単位の管理vp install— 選択したパッケージマネージャー経由の依存インストールvp dev— Vite開発サーバーvp check— 型チェック,リンティング,フォーマットの一括実行vp test— Vitestによるテストvp build— 本番ビルドvp run— Vite Taskによるスクリプト / モノレポタスク実行vp pack— tsdownによるライブラリ / CLIパッケージング
信頼とオープンソースへのコミットメント
ここで重要なのは,VoidZeroの オープンソースへの姿勢 だ.
「コミュニティがViteに置いてくれた信頼」が,この方向性を深く考えるきっかけになった
VoidZeroは明確に宣言している:
「オープンソース化したものは全てオープンソースのまま.Vite, Vitest, Rolldown, Oxcはオープンソース.」
そのVite+ Alphaでは,Vite+自体もMITライセンスで完全にオープンソース化された.
そして重要なのは,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開発者コミュニティ全体 への貢献だ.
一つのコミュニティで生まれたイノベーションが,境界を越えてWeb全体に広がっていく.
これこそが,オープンソースの真の力であり,Vue.jsコミュニティが体現している価値だと私は思う.
結び
Vue.jsを4つのキャラクターで特徴づけてみた.
Approachable — 柔軟に選択できる,いろんなユースケースにアプローチしやすい
Language — UIを記述するためのドメイン固有言語
Ecosystem — Vue.jsから始まり,枠を超えて広がるエコシステム
Community — 個人の情熱がエコシステムを動かし,信頼を築く
これらは独立した特徴ではない.
相互に影響し合い,強化し合っている.
Approachableだからこそ多くの人が参入し,コミュニティが育つ.
コミュニティが育つからこそ,言語ツールやエコシステムが発展する.
エコシステムが発展するからこそ,より多くの選択肢が生まれ,Approachableさが増す.
この循環がVue.jsの価値の本質だと私は思う.
Vue.jsはただのUIフレームワークではない.
アプローチしやすく,
人間のために設計された言語であり,
境界を越えて広がるエコシステムであり,
信頼と情熱で繋がるコミュニティだ.
これは私の単なるエッセイであり,Vue.js Teamの公式見解ではありません.