序文

皆さんにとってVue.jsとはどういうものだろうか?

普段Vue.jsを仕事で書いている人,趣味で触れている人,SNSやメディアを通じてその名前だけを知っている人—— 色々な立場の方がいるだろう.

覚えることが多い?
ルールがなくて分かりづらい?
簡単?
マイグレーションが大変?
でもなんか好き?
やっぱり嫌い?

いろんな感情やイメージを持った方がいると思う.

今日は,皆さんが何となく普段肌で感じているVue.jsの特徴やイメージについて改めて考え,体系的にまとめ直してみようと思う.そういう試みだ.

Vue.jsを4つのキャラクター で特徴づけてみる.


1 / 4 — Approachable

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

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 is not Easy. It is Approachable.


2 / 4 — Language

Vue.jsは言語だ

Vue.jsが言語であることを説明してみる前に,まずはプログラミング言語のおさらいをしよう.

プログラミング言語とは

プログラミング言語とは何だろうか?
プログラミング言語はプログラムを書くための言語だ.名前の通りだ.

皆さんはこの世界にたくさんのプログラミング言語が存在していることを知っているはずだ.
JavaScriptやTypeScript,Rust,C++,Haskell.
それだけではない.HTMLやCSS,JSONもそのうちの1つだ.

これらは「汎用プログラミング言語」や,「ドメイン固有言語(DSL)」などのように分類される.どちらも言語だ.

どうしてこんなにもたくさんの言語が存在しているのだろうか?

ここで改めて考えて欲しいのだが,プログラムを記述しておくために,コンピューターにとって必要な形式というものはどういうものだろうか?

答えは バイナリ だ.これだけあれば全てのものは記述することができる.
ほとんどの状況で,任意の言語は最終的にはバイナリとなって動作している.

じゃあプログラミング言語というのは誰のためのものなのだろうか?
これは紛れもなく私たち,「人間」 のためのものだ.

人間が読める意味へ バイナリ 01010110... アセンブリ mov, jmp... 高水準言語 C, JS, Rust... Vue.js — DSL for UI 1 HTML + CSS + JS を拡張 2 宣言的 UI を記述 3 コンポーネントで整理

世の中には多様な記述対象がある.
ハードウェアの制御や,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は言語だ」という話についてさらに深掘りした記事も書いている.

What is Vue.js? It's just a language lol


3 / 4 — Ecosystem

Vue.jsは拡大するエコシステム

Vue.jsのもう一つの大きな特徴は,Vue.jsから始まり,Vue.jsの枠を超えて広がっていくエコシステム だ.

Evan You Creator Vue.js Vite VoidZero Volar.js Astro MDX Nuxt UnJS Nitro h3 citty ofetch un- plugin jiti mlly Analog, TanStack Start... React, Svelte, Solid, Qwik... Vitest Rolldown Oxc powers Parser Linter Forma- tter Trans- former Minifier Resolver → Web Community へ広がる

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は現在,AstroMDX,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の垣根を超えて,SvelteAstroOxcなどでも同様の仕組みが導入されている.


VoidZero — 次世代への布石 Vite, Vitest, Rolldown, Oxc を統合する新たなビジョン

VoidZeroと統一ツールチェーンへの挑戦

Vue.jsエコシステムの広がりは,さらに大きな挑戦へと繋がっている.

断片化という課題

Evan You氏はViteの開発を通じて,JavaScriptエコシステム全体が抱える課題に直面した.

「あらゆるアプリケーションは無数のサードパーティ依存関係に頼っており,それらがうまく連携するよう設定することは最も困難なタスクの一つだ」

https://voidzero.dev/posts/announcing-voidzero-inc

Viteは開発体験を大きく改善したが,内部では依然として様々な依存関係があり,異なるツール間での不整合を埋めるための抽象化やワークアラウンドが必要だった.そして,異なるツール間での重複したパースやシリアライゼーションコストがボトルネックになっていた.

VoidZeroの誕生

2024年,Evan You氏はVoidZeroを設立した.
「次世代のJavaScript統一ツールチェーンを構築する」 というビジョンを掲げて.

VoidZeroのビジョンは4つの特徴を持つ統合開発スタックの構築だ:

Unified 同じ AST, resolver, module interop High Performance Rust による最大並列化 Composable 独立したコンポーネント Runtime Agnostic あらゆる JS 環境で一貫した体験 Vite Vitest Rolldown Oxc Open Source

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に置いてくれた信頼」が,この方向性を深く考えるきっかけになった

https://voidzero.dev/posts/announcing-voidzero-inc

VoidZeroは明確に宣言している:

「オープンソース化したものは全てオープンソースのまま.Vite, Vitest, Rolldown, Oxcはオープンソース.」

https://voidzero.dev/posts/announcing-voidzero-inc

そのVite+ Alphaでは,Vite+自体もMITライセンスで完全にオープンソース化された.

そして重要なのは,VoidZeroはVue.jsをファーストクラスでサポートする ということだ.Vue.jsから始まったこれらのツールは,Vue.jsエコシステムに対して最高の体験を提供し続ける.

これらのプロジェクトは既にOpenAI,Google,Apple,Microsoft,Shopifyなど主要な組織で採用されている.その信頼性は実証済みだ.


4 / 4 — Community

Vue.jsはコミュニティ

最後のキャラクター.これはVue.jsとは切っても切れない大事な要素だ.

Dev Dev Dev Dev Dev Dev

コミュニティから生まれるもの

ここまで紹介してきたプロジェクトの多くは,コミュニティメンバーの個人的なプロジェクトとして始まったものだ.

  • VolarJohnson Chu氏の個人プロジェクトからVue.js公式言語ツールへ

  • OxcBoshen氏が始めたRustパーサーがVoidZeroの中核技術へ

  • UnJSPooya Parsa氏のNuxt外での取り組みが独立エコシステムへ

これらは偶然ではない.
Vue.jsコミュニティには,個人の情熱がエコシステム全体を動かす力 がある.

信頼の連鎖

Vue.jsのエコシステムが他のフレームワークやツールにも影響を与えている現象は,単なる技術的な優位性だけでは説明できない.

それは 信頼 だ.

Evan You氏がVoidZeroを設立する際に述べたように:

「コミュニティがViteに置いてくれた信頼」

https://voidzero.dev/posts/announcing-voidzero-inc

この信頼は一朝一夕に築かれたものではない.
10年以上にわたる一貫したオープンソースへのコミットメント,後方互換性への配慮,そしてコミュニティの声に耳を傾ける姿勢.

その結果として,Vue.jsから始まったツールがReactエコシステムでも使われ,Svelteでも使われ,Solidでも使われている.

Webコミュニティへの貢献

これはVue.jsコミュニティだけの話ではない.
Web開発者コミュニティ全体 への貢献だ.

  • ViteはVue.js以外のあらゆるフレームワークの開発体験を変えた

  • Volar.jsはAstroやMDXの言語サポートを可能にした

  • NitroはNuxt以外のメタフレームワークにも採用された

  • OxcRolldownはJavaScriptツールチェーン全体の高速化に貢献している

一つのコミュニティで生まれたイノベーションが,境界を越えてWeb全体に広がっていく.

これこそが,オープンソースの真の力であり,Vue.jsコミュニティが体現している価値だと私は思う.


Characterize Vue.js Approachable × Language × Ecosystem × Community

結び

Vue.jsを4つのキャラクターで特徴づけてみた.

  1. Approachable — 柔軟に選択できる,いろんなユースケースにアプローチしやすい

  2. Language — UIを記述するためのドメイン固有言語

  3. Ecosystem — Vue.jsから始まり,枠を超えて広がるエコシステム

  4. Community — 個人の情熱がエコシステムを動かし,信頼を築く

これらは独立した特徴ではない.
相互に影響し合い,強化し合っている.

Approachableだからこそ多くの人が参入し,コミュニティが育つ.
コミュニティが育つからこそ,言語ツールやエコシステムが発展する.
エコシステムが発展するからこそ,より多くの選択肢が生まれ,Approachableさが増す.

この循環がVue.jsの価値の本質だと私は思う.


Vue.jsはただのUIフレームワークではない.
アプローチしやすく,
人間のために設計された言語であり,
境界を越えて広がるエコシステムであり,
信頼と情熱で繋がるコミュニティだ.


これは私の単なるエッセイであり,Vue.js Teamの公式見解ではありません.