Vue.js

Vue.js（ヴュー・ジェイエス）またはVueは、ウェブアプリケーションにおけるユーザインタフェースを構築するための、オープンソースのJavaScriptフレームワークである。他のJavaScriptライブラリを使用するプロジェクトへの導入において、容易になるように設計されている。一方で高機能なシングルページアプリケーション（SPA）を構築することも可能である。

概要

このプロジェクトは、Web UI開発（コンポーネント、宣言的UI、ホットリロード、タイムトラベルデバッグなど）において、アイデアをより実現させることに焦点を当てている。独断的ではなく開発者がピックアップしやすい。

部分的に採用可能なアーキテクチャ（プログレッシブフレームワーク）を採用している。コアライブラリは、宣言的なレンダリングとコンポーネントの構成に焦点を合わせ、既存のページに埋め込むことができる。ルーティング、状態管理、ビルドツールなどの複雑なアプリケーションに必要な高度な機能は、正式に維持されているサポートライブラリとパッケージを介して提供される。

歴史 VueはGoogleにおいてAngularJSを使用した開発に携わった尤雨溪によって開発され、2014年2月にリリースされた。尤は「Angularの本当に好きだった部分を抽出して、余分な概念なしに本当に軽いものを作ることができたらどうだろうか？」と考えていた。

Vue 2.0は2016年10月1日にリリースされた。仮想DOMの全面採用、サーバサイドレンダリング（SSR）対応、改良されたコンポーネントシステムなどを特徴とし、フレームワークとしての基盤を確立した。

Vue 3.0は2020年9月18日にリリースされた。TypeScriptによる完全な書き直し、Proxyベースのリアクティブシステムへの刷新、Composition APIの導入などにより、パフォーマンスと開発者体験が大幅に向上した。

2022年7月にリリースされたVue 2.7 "Naruto"は、Vue 3のComposition APIや<script setup>構文などをバックポートした最終マイナーバージョンである。2023年12月24日にv2.7.16 "Swan Song"が最終リリースとして公開され、2023年12月31日にVue 2はEnd of Life（EOL）を迎えた。

2025年12月にはVue 3.6のベータ版がリリースされ、仮想DOMを介さず直接DOM操作を行う新しいコンパイルモード「Vapor Mode」が搭載された。Vapor Modeはコンポーネント単位でオプトインでき、従来の仮想DOMコンポーネントとの混在も可能である。

特徴テンプレート HTMLベースのテンプレート構文を使用して、レンダリングされたDOMを基となるインスタンスのデータに宣言的にバインドできる。すべてのVueテンプレートは、モダンブラウザとHTMLパーサによって解析できる有効なHTMLである。その中で、Vueはテンプレートを仮想DOMレンダー機能にコンパイルする。リアクティブシステムと組み合わせることで、Vueは最小限の数のコンポーネントを把握して再描画し、アプリの状態が変化したときに最小限のDOM操作を適用することができる。

Vueでは、テンプレートシンタックスを使用するか、Reactで使用されるJSXを使用してレンダリング関数を直接作成するかを選択できる。これを行うには、テンプレートオプションをレンダリング関数に置き換える必要がある。レンダリング機能は、強力なコンポーネントベースのパターンを可能とする。例えば、新しいトランジションシステムは完全にコンポーネントベースで、レンダリング機能を内部的に使用する。

リアクティブ Vueの最も特徴的な機能の1つは、目立たないリアクティブシステムである。モデルは単純なJavaScriptオブジェクトである。それらが変更されるとViewが更新される。状態管理は非常に容易で直感的である。 Vueは何もすることなく、最適な再レンダリングを提供する。各コンポーネントは、レンダリング中にそのリアクティブ依存性を追跡しているため、システムはいつ再レンダリングするか、どのコンポーネントを再レンダリングするかを正確に認識している。

Vue 2ではObject.definePropertyによるリアクティブシステムが使用されていたが、Vue 3ではProxyベースに刷新され、配列の変更検知やプロパティの動的追加など、従来の制限が解消された。

Composition API Vue 3で導入されたComposition APIは、コンポーネントのロジックをインポート可能な関数として記述するAPIセットである。従来のOptions API（data、methods、computedなどのオプションオブジェクトでロジックを定義する方式）に対し、Composable関数によるロジック共有の容易さ、TypeScriptとの高い親和性、関連ロジックをまとめて記述できる可読性の向上などの利点がある。Options APIも引き続きサポートされており、両方のAPIを同一プロジェクト内で併用できる。

コンポーネントコンポーネントは、Vueの最も強力な機能の1つである。大規模なアプリケーションでは、開発全体を管理しやすくするために、アプリ全体を小さな独立した再利用可能なコンポーネントに分割する必要がある。コンポーネントは、基本的なHTML要素を拡張して再利用可能なコードをカプセル化する。高レベルではコンポーネントは、Vueのコンパイラが動作をアタッチするカスタム要素である。コンポーネントは基本的に事前定義されたオプションを持つVueインスタンスである。

以下のコードスニペットには、Vueコンポーネントの例が含まれている。コンポーネントはボタンを表示し、ボタンがクリックされた回数を表示する。

Vue 3の単一ファイルコンポーネント（SFC）と<script setup>構文を用いた同等の例を以下に示す。

トランジション Vueは、アイテムがDOMに挿入、更新、または削除されたときにトランジション効果を適用するさまざまな方法を提供する。以下のツールが含まれる。

CSSトランジションとアニメーションのクラスを自動的に適用する Animate.cssなどのサードパーティのCSSアニメーションライブラリを統合するトランジションフック中にJavaScriptを使用してDOMを直接操作する Velocity.jsなどのサードパーティのJavaScriptアニメーションライブラリを統合する

トランジションコンポーネントにラップされた要素が挿入または削除されると、以下のようになる。

Vueは、ターゲットエレメントにCSSトランジションまたはアニメーションが適用されているかどうかを自動的に検出する。そうであれば、CSSトランジションクラスは適切なタイミングで追加/削除される。トランジションコンポーネントがJavaScriptフックを提供した場合、これらのフックは適切なタイミングで呼び出される。 CSSトランジション/アニメーションが検出されず、JavaScriptフックが提供されていない場合、挿入または削除のDOM操作は次のフレームで直ちに実行される。

ルーティングシングルページアプリケーション（SPA）の一番の欠点は、特定のウェブページ内の正確なサブページへのリンクを共有できないことである。SPAがユーザに提供するサーバーからのURLベースの応答（通常index.htmlまたはindex.vueを提供）は1つだけで、ブックマークに保存したり、特定の記事へのリンクを共有することは不可能である。

この問題を解決するために、フロントエンドルータはもともとhashbang（#!）分割されたハッシュベースのURLを提供している。モダンブラウザはHTML5をサポートしている。Vueのようなライブラリは、どのように変更されたかに関係なく、現在のURLパスに基づいてページに表示される内容を変更するための簡単なインターフェイスを提供する（電子メールによるリンク、更新、またはページ内リンクによるかどうかにかかわらず）。

さらに、フロントエンドルータを使用することにより、特定のブラウザイベント（すなわちクリック）がボタンまたはリンク上で発生した場合に、ブラウザパスの意図的な移行が可能になる。Vue自体はフロントエンドハッシュルーティング機能を持っていないが、オープンソースの「vue-router」パッケージでブラウザのURLを変更したり、バックボタン（ハッシュ履歴）を使用したり、URLで提供されている認証パラメータを使用して電子メールパスワードのリセットや電子メールの確認リンクを使用するAPIを提供する。

ネストされたルートをネストされたコンポーネントにマッピングすることをサポートし、きめ細かな移行制御を提供する。 Vue+vue-routerを使用したフロントエンドルーティングシングルページアプリケーションの作成は容易である。 Vueでは、開発者は既に大きなコンポーネントを構築する小さなビルディングブロックでアプリケーションを作成している。vue-routerをミックスに追加すると、コンポーネントは所属するルートにマッピングするだけで、親ルートルートは子ノードのレンダリング先を示す必要がある。

上記のコードは、

websitename.com/user/<id>にフロントエンドルートを設定する。（const User ...）で定義されたユーザーコンポーネントでレンダリングされるもの。ユーザーコンポーネントが、$routeオブジェクトのparamsキー（$route.params.id）を使用してURLに入力されたユーザーの特定のIDを渡すことを許可する。このテンプレート（ルータに渡されたパラメータによって異なる）は、DOMのdiv#app内で<code><router-view></router-view></code>にレンダリングされる。 websitename.com/user/1と入力すると最終的に生成されるHTMLは次のようになる

バージョン履歴 Vueのリリースバージョンには、アニメ・漫画作品のタイトルがアルファベット順にコードネームとして付けられる慣例がある。各メジャー/マイナーバージョンのリリース時には、その作品に関連するセリフが引用されることがある。固定のリリースサイクルは設けられておらず、パッチリリースは必要に応じて、マイナーリリースは通常3〜6か月ごとにリリースされる。

バージョンリリース日コードネーム作品ジャンルリリース時の引用 v0.6.0 2013-12-08 — — — v0.7.0 2013-12-24 — — — v0.8.0 2014-01-27 — — — v0.9.0 2014-02-25 Animatrix アニメ映画 "...then man made the machine in his own likeness. Thus did man become the architect of his own demise." - The Instructor（インストラクター） v0.10.0 2014-03-23 Blade Runner SF映画 "A coding sequence cannot be revised once it's been established." - Tyrell（タイレル博士） v0.11.0 2014-11-07 Cowboy Bebop TVアニメ "There are ends we don't desire, but they're inevitable, we have to face them." - Jet Black（ジェット・ブラック） v0.12.0 2015-06-12 Dragon Ball 漫画・TVアニメ "If you keep calm you'll never be a super saiyan." - Goku（孫悟空） v1.0.0 2015-10-27 Evangelion TVアニメ "The fate of destruction is also the joy of rebirth." - SEELE（ゼーレ） v2.0.0 2016-09-30 Ghost in the Shell 漫画・アニメ映画 "Your effort to remain what you are is what limits you." - Puppet Master（人形使い） v2.1.0 2016-11-22 Hunter X Hunter 漫画・TVアニメ "You should enjoy the little detours to the fullest. Because that's where you'll find the things more important than what you want." - Ging Freecss（ジン＝フリークス） v2.2.0 2017-02-26 Initial D 漫画・TVアニメ "Fill'er up. High Octane." - Ryosuke Takahashi（高橋涼介） v2.3.0 2017-04-27 JoJo's Bizarre Adventure 漫画・TVアニメ "It was me, Dio!" - Dio Brando（ディオ・ブランドー） v2.4.0 2017-07-13 Kill la Kill TVアニメ "Fear is freedom! Subjugation is liberation! Contradiction is truth!" - Satsuki Kiryuuin（鬼龍院皐月） v2.5.0 2017-10-13 Level E 漫画・TVアニメ — v2.6.0 2019-02-04 Macross TVアニメ — v2.7.0 2022-07-01 Naruto 漫画・TVアニメ — v2.7.16 2023-12-24 Swan Song — Vue 2最終リリース。2023年12月31日にEOL v3.0.0 2020-09-18 One Piece 漫画・TVアニメ — v3.1.0 2021-06-07 Pluto 漫画 — v3.2.0 2021-08-09 Quintessential Quintuplets 漫画・TVアニメ — v3.3.0 2023-05-11 Rurouni Kenshin 漫画・TVアニメ — v3.4.0 2023-12-28 Slam Dunk 漫画・TVアニメ — v3.5.0 2024-09-01 Tengen Toppa Gurren Lagann TVアニメ — v3.6.0（ベータ） 2025-12-23（ベータ1）（未発表） — Vapor Mode搭載最新安定版: v3.5.32（2025年4月3日時点）

サポートライブラリ Vue Router（ルーティング） Pinia（状態管理） 2021年に公式の状態管理ライブラリはVuexからPiniaへと移行した。 Vue Loader（Webpackローダー） Vuetify（UIライブラリ） Vite（ビルドツール） - 尤雨溪が開発したフロントエンドビルドツール。ESモジュールを活用した高速な開発サーバーとビルドを提供する。 Vitest（テストフレームワーク） - Viteネイティブのユニットテストフレームワーク Nuxt（メタフレームワーク） - Vue.jsベースのサーバサイドレンダリング（SSR）対応メタフレームワーク

Vue.js

Źródło i licencja