Vue.js

Vue.js とは

Vue.js (ビュージェイエス) は、ユーザーインターフェースを構築するための JavaScript フレームワークだ。Evan You が開発し、npm への最初の公開版 0.10.0 は 2014 年 3 月に出ている。データの変化に応じて画面を自動で更新する仕組みを持ち、React や Angular と並ぶ主要なフロントエンド技術の一つとされる。「段階的に導入できる」設計で、既存ページの一部分から大規模アプリまで同じ書き方で通せる。

系統は 2026 年 8 月時点で 3 系が現行 (2020 年 9 月公開の 3.0 が起点で、npm の latest は 3.5 系) で、2 系は 2023 年 12 月 31 日にサポート終了 (EOL) となり、公式サイトも 3 系への移行を案内している。新規開発で 2 系を選ぶ理由は残っておらず、2 系のまま動いているコードは移行計画の対象になる。

特徴

特徴	内容
リアクティブ	データが変わると画面が自動更新
単一ファイルコンポーネント	HTML・CSS・JS を 1 ファイルにまとめる
段階的導入	既存ページに少しずつ組み込める
学習しやすさ	公式ドキュメントが整い理解しやすい

既存の Web ページに <script> で読み込んで一部だけ使うことも、本格的なアプリ全体を構築することもできる。

画面が自動更新される仕組み

自動更新の正体は、データへのアクセスを横取りして「どの描画処理がどのデータを読んだか」を記録し、書き込みが起きたら記録済みの描画処理を再実行する追跡機構である。3 系では reactive() で包んだオブジェクトを Proxy で追跡し、ref() は getter / setter で追跡する。2 系は当時のブラウザ対応の制約から getter / setter (Object.defineProperty) だけを使っていたため、後から追加したプロパティが追跡されず Vue.set を呼ぶ必要があるという制約があった。3 系の Proxy はその制約を解消した一方、reactive() が返すのは元のオブジェクトを包んだ別の値なので、=== で元オブジェクトと比べると一致しない。同じデータの生の参照と包んだ参照が混在すると等値判定が壊れるため、包んだ側に統一して扱うのが安全になる。

Options API と Composition API

コンポーネントの書き方は 2 系統ある。data や methods をオブジェクトのキーとして並べる Options API と、ref() や computed() を呼び出して組み立てる Composition API だ。3 系では Composition API が土台で、Options API はその上に実装されている (this へのプロパティアクセスが追跡を起動し、watch や computed のオプションは内部で Composition API の同等機能を呼ぶ)。どちらか一方が非推奨という関係ではないので、既存コードを Options API のまま動かし続けても問題は無い。判断基準になるのは再利用の必要性で、複数のコンポーネントで同じ状態管理を使い回したいなら、ロジックを関数として切り出せる Composition API が向く。

React との比較

観点	Vue.js	React
記述	テンプレート (HTML に近い)	JSX (JavaScript 中心)
導入	段階的に取り入れやすい	エコシステムを組み合わせる
学習曲線	緩やかとされる	慣れが要る

どちらが優れているということはなく、チームの経験や既存資産で選ぶのが現実的だ。

採用時の注意点

学びやすさの反面、大きなバージョンアップでは移行コストが発生する。2 系から 3 系では、グローバルな Vue を直接触る形からアプリケーションインスタンスを作る createApp 方式へ変わり、フィルターや $children は削除された。書き換え自体は移行ガイドに沿えば機械的だが、実際の作業量を決めるのは自分のコードより依存パッケージ側で、UI ライブラリや状態管理が 3 系対応版を出すまで着手できないという待ちが発生しやすい。移行を見積もるなら、まず依存関係の対応状況を棚卸しするのが順序になる。また、フロントエンドのフレームワークは流行の移り変わりが速いため、特定技術に過度に依存せず、土台となる HTML・CSS・JavaScript の理解を保つことが、長期的な対応力につながる。

学習には関連書籍が役立つ。