| Vue.js | |
|---|---|
| 原作者 | エヴァン・ユー |
| 開発者 | エヴァン・ユーとコアチーム[ 1 ] |
| 初回リリース | 2014年2月[ 2 ] (2014年2月) |
| 安定版リリース | |
| 書かれた | タイプスクリプト |
| プラットフォーム | ウェブプラットフォーム |
| 含まれるもの | ララベル |
| サイズ | 33.9 KB分+ gzip [ 4 ] |
| タイプ | JavaScriptライブラリ |
| ライセンス | MITライセンス[ 5 ] |
| Webサイト | vuejs.org |
Vue.js (一般的にはVueと呼ばれ、「ビュー」と発音されます[ 6 ])は、オープンソースのモデル-ビュー-ビューモデルフロントエンドJavaScriptフレームワークで、ユーザーインターフェイスとシングルページアプリケーションを構築します。[ 12 ] Evan Youによって作成され、彼と他のアクティブなコアチームメンバーによってメンテナンスされています。[ 13 ]
Vue.jsは、宣言的なレンダリングとコンポーネント構成に重点を置いた、段階的に適応可能なアーキテクチャを備えています。コアライブラリはビュー層のみに特化しています。[ 6 ]ルーティング、状態管理、ビルドツールなど、複雑なアプリケーションに必要な高度な機能は、公式にメンテナンスされたサポートライブラリとパッケージを通じて提供されます。[ 14 ]
Vue.jsでは、ディレクティブと呼ばれるHTML属性を使用してHTMLを拡張することができます。[ 15 ]ディレクティブはHTMLアプリケーションに機能を提供するもので、組み込みまたはユーザー定義のディレクティブとして提供されます。
Vueは、 GoogleでAngularJSを複数のプロジェクトで使用した後、Evan Youによって開発されました。彼は後に自身の思考プロセスをこう要約しています。「Angularの本当に気に入っている部分だけを抽出して、本当に軽量なものを作れないかと考えました。」[ 16 ]プロジェクトの最初のソースコードは2013年7月にコミットされ、当時は「Seed」という名前でした。[ 17 ] Vueが初めて一般公開されたのは、翌年の2014年2月でした。[ 18 ] [ 19 ]
バージョン名はマンガやアニメシリーズから派生したものが多く、最初の文字がアルファベット順に並んでいます。
| バージョン | 発売日 | タイトル | LTSの終了 | 寿命の終わり |
|---|---|---|---|---|
| 3.5 | 2024年9月1日 | 天元突破グレンラガン[ 20 ] | ||
| 3.4 | 2023年12月28日 | スラムダンク[ 21 ] | ||
| 3.3 | 2023年5月11日 | るろうに剣心[ 22 ] | ||
| 3.2 | 2021年8月5日 | 五等分の花嫁[ 23 ] | ||
| 3.1 | 2021年6月7日 | 冥王星[ 24 ] | ||
| 3.0 | 2020年9月18日 | ワンピース[ 25 ] | ||
| 2.7 | 2022年7月1日 | ナルト[ 26 ] | 2023年12月31日 | 2023年12月31日 |
| 2.6 | 2019年2月4日 | マクロス[ 27 ] | 2022年3月18日 | 2023年9月18日 |
| 2.5 | 2017年10月13日 | レベルE [ 28 ] | ||
| 2.4 | 2017年7月13日 | キルラキル[ 29 ] | ||
| 2.3 | 2017年4月27日 | ジョジョの奇妙な冒険[ 30 ] | ||
| 2.2 | 2017年2月26日 | 頭文字D [ 31 ] | ||
| 2.1 | 2016年11月22日 | ハンター×ハンター[ 32 ] | ||
| 2.0 | 2016年9月30日 | 攻殻機動隊[ 33 ] | ||
| 1.0 | 2015年10月27日 | エヴァンゲリオン[ 34 ] | ||
| 0.12 | 2015年6月12日 | ドラゴンボール[ 35 ] | ||
| 0.11 | 2014年11月7日 | カウボーイビバップ[ 36 ] | ||
| 0.10 | 2014年3月23日 | ブレードランナー[ 37 ] | ||
| 0.9 | 2014年2月25日 | アニマトリックス[ 38 ] | ||
| 0.8 | 2014年1月27日 | 該当なし[ 39 ] | 最初のバージョンが公表された[ 18 ] [ 19 ] | |
| 0.7 | 2013年12月24日 | 該当なし[ 40 ] | ||
| 0.6 | 2013年12月8日 | VueJS [ 41 ] | ||
新しいメジャーバージョン(v3.yz)がリリースされると、最後のマイナーバージョン(2.xy)は18ヶ月間LTSリリース(バグ修正とセキュリティパッチ)となり、その後18ヶ月間はメンテナンスモード(セキュリティパッチのみ)となります。[ 42 ]
Vue 3は2020年9月に正式リリースされました。State of Vue.js Report 2025によると、調査対象となった開発者の96%がVue 3.xを使用したことがあると回答しています。しかし、35%は過去1年間にVue 2.7.xを使用したことも示しており、サポート終了にもかかわらずVue 2への依存が続いていることを示しています。[ 43 ]また、このレポートでは、回答者の4分の1以上がVue 2からVue 3への移行時に課題に遭遇したことも指摘されています。[ 44 ]
Vue.jsの現状レポート2025によると、Vueのコアチームの推奨事項は開発者の採用に反映されており、調査対象の開発者の80%以上がPiniaを使用していると報告している一方で、Vuexの使用率は依然として38.4%であり、古いライブラリへの依存が続いていることを示しています。[ 45 ]
Vueコンポーネントは、基本的なHTML要素を拡張して再利用可能なコードをカプセル化します。高レベルでは、コンポーネントはVueのコンパイラが動作をアタッチするカスタム要素です。Vueでは、コンポーネントは基本的に、事前定義されたオプションを持つVueインスタンスです。[ 46 ] 以下のコードスニペットは、Vueコンポーネントの例を示しています。このコンポーネントはボタンを表示し、ボタンがクリックされた回数を出力します。
<!doctype html> < html > < head > < script src = "https://unpkg.com/vue@3/dist/vue.global.js" ></ script > </ head >< body > < div id = "app" > < button-clicked : initial-count = " 0 " /> </ div ><スクリプト> const { defineComponent 、ref 、computed 、watch 、watchEffect 、onMounted 、createApp } = Vueconst ButtonClicked = defineComponent ({ name : 'ButtonClicked' , props : { initialCount : { type : Number , required : true } }, setup ( props ) { const count = ref ( 0 )const doubleCount = computed (() => count . value * 2 )const handleClick = () => { count . value += 1 }watch ( count , ( newValue , oldValue ) => { console . log ( `count の値が${ oldValue }から${ newValue }に変更されます。` ) })watchEffect (() => console . log ( `countの値を2倍すると${ doubleCount . value } ` ))onMounted (() => { count . value = props . initialCount })return { count , doubleCount , handleClick } }, template : ` <button @click="handleClick">Clicked <nowiki>{{ count }></nowiki> times</button> ` })const app = createApp ({})app.component ( ' ButtonClicked ' , ButtonClicked )app.mount ( ' # app ' ) </script> </body> </html>VueはHTMLベースのテンプレート構文を使用し、レンダリングされたDOMを基盤となるVueインスタンスのデータにバインドできます。すべてのVueテンプレートは、仕様に準拠したブラウザとHTMLパーサーで解析できる有効なHTMLです。Vueはテンプレートを仮想DOMレンダリング関数にコンパイルします。仮想ドキュメントオブジェクトモデル(DOM)により、Vueはブラウザを更新する前にメモリ内でコンポーネントをレンダリングできます。リアクティブシステムと組み合わせることで、Vueは再レンダリングするコンポーネントの最小数を計算し、アプリの状態が変化したときに最小限のDOM操作を適用できます。 [ 47 ] Vueユーザーはテンプレート構文を使用することも、関数呼び出しまたはJSXを 介してハイパースクリプトを使用してレンダリング関数を直接記述することもできます。[ 48 ]レンダリング関数を使用すると、ソフトウェアコンポーネントからアプリケーションを構築できます。[ 49 ]
Vueは、プレーンなJavaScriptオブジェクトと最適化された再レンダリングを使用するリアクティブシステムを備えています。各コンポーネントはレンダリング中にリアクティブ依存関係を追跡するため、システムはいつ再レンダリングするか、どのコンポーネントを再レンダリングするかを正確に把握します。[ 50 ]
Vue は、 DOMにアイテムが挿入、更新、または削除されたときにトランジション効果を適用するさまざまな方法を提供します。これには、次のようなツールが含まれます。
トランジション コンポーネントでラップされた要素が挿入または削除されると、次のことが起こります。
シングルページアプリケーション(SPA)の従来の欠点は、特定のウェブページ内の特定の「サブ」ページへのリンクを共有できないことです。SPAはサーバーからユーザーに単一のURLベースのレスポンス(通常はindex.htmlまたはindex.vue)のみを提供するため、特定の画面をブックマークしたり、特定のセクションへのリンクを共有したりすることは、通常は困難、あるいは不可能です。この問題を解決するために、多くのクライアント側ルーターは動的URLを「ハッシュバン」(#!)で区切ります(例:page.com/ #!/ )。しかし、HTML5では、ほとんどの最新ブラウザがハッシュバンなしのルーティングをサポートしています。
Vueは、現在のURLパスに基づいてページに表示される内容を変更するインターフェースを提供します。URLパスの変更方法(メール送信リンク、更新、ページ内リンクなど)は問いません。さらに、フロントエンドルーターを使用することで、ボタンやリンクで特定のブラウザイベント(クリックなど)が発生した際に、ブラウザパスを意図的に遷移させることができます。Vue自体にはフロントエンドハッシュルーティングは付属していません。しかし、オープンソースの「vue-router」パッケージは、アプリケーションのURLを更新するためのAPIを提供し、戻るボタン(履歴のナビゲーション)、メールによるパスワードリセットや認証URLパラメータ付きのメール検証リンクをサポートしています。ネストされたルートをネストされたコンポーネントにマッピングし、きめ細かな遷移制御を提供します。Vueを使用することで、開発者は既に小さなビルディングブロックで大きなコンポーネントを構築することでアプリケーションを構築しています。vue-routerを追加することで、コンポーネントは所属するルートにマッピングするだけでよく、親/ルートルートは子コンポーネントがレンダリングされる場所を示すだけで済みます。[ 53 ]
< div id = "app" > <ルータービュー></ルータービュー> </ div > ... <スクリプト> ... const User = {テンプレート: '<div>User {{ $route.params.id }}}' };const router = new VueRouter ({ routes : [ { path : '/user/:id' , component : User } ] }); ... </ script >上記のコード:
websitename.com/user/<id>。$route.params.id。<router-view></router-view>DOM の div#app 内にレンダリングされます。websitename.com/user/1次のようになります。< div id = "app" > < div > < div >ユーザー 1 </ div > </ div > </ div >コア ライブラリには、コア チームと貢献者によって開発されたツールとライブラリが付属しています。
Vue.jsエコシステムは概して非常によく発達していますが、開発者はエコシステムにおけるいくつかのギャップを、最も欠けているものの1つとして指摘しています(2025年3月の開発者調査「 State of Vue.js Report 2025 」より)。[ 58 ]回答者の22%は、MUIやRadixのような堅牢な公式コンポーネントライブラリの不足と、より優れたテストユーティリティの必要性を挙げています。また、ダッシュボード、eコマース、Framer Motionのようなアニメーションライブラリなど、よりモジュール化されたエンタープライズ対応のソリューションへの需要もありました。[ 59 ]
VueなどのJavaScriptベースのウェブアプリケーションフレームワークは、豊富な機能を提供しますが、それに伴うトレードオフも伴います。これらのフレームワークは、ルーティング、コンポーネントベースの開発、状態管理など、ネイティブウェブ技術で利用可能な機能を拡張または強化することがよくあります。Webコンポーネント、FetchやESモジュールなどの最新のJavaScript API、Shadow DOMなどのブラウザ機能を含むネイティブウェブ標準は大きく進歩していますが、フレームワークは開発者の生産性向上、大規模アプリケーション向けの構造化パターンの提供、エッジケースの処理の簡素化、パフォーマンス最適化ツールの提供といった機能から、依然として広く利用されています。[ 60 ] [ 61 ] [ 62 ]
フレームワークは抽象化レイヤーを導入することがありますが、これはパフォーマンスのオーバーヘッド、バンドルサイズの増大、複雑さの増大につながる可能性があります。Vue 3などの最新のフレームワークは、並行レンダリング、ツリーシェイキング、選択的ハイドレーションなどの機能でこれらの課題に対処しています。これらの進歩はレンダリング効率とリソース管理を向上させますが、そのメリットは特定のアプリケーションと実装のコンテキストによって異なります。SvelteやPreactなどの軽量フレームワークは、異なるアーキテクチャアプローチを採用しています。Svelteは仮想DOMを完全に排除し、コンポーネントを効率的なJavaScriptコードにコンパイルするのに対し、PreactはReactと互換性のある最小限の代替手段を提供します。フレームワークの選択は、チームの専門知識、パフォーマンス目標、開発の優先順位など、アプリケーションの要件によって異なります。[ 60 ] [ 61 ] [ 62 ]
ウェブフレームワークの新しいカテゴリには、enhance.dev、Astro、Fresh などがあり、ネイティブウェブ標準を活用しながら、抽象化と開発ツールを最小限に抑えています。[ 63 ] [ 64 ] [ 65 ]これらのソリューションは、プログレッシブエンハンスメント、サーバーサイドレンダリング、パフォーマンスの最適化を重視しています。 Astro は、インタラクティブな部分のみをハイドレーションしながら、デフォルトで静的 HTML をレンダリングします。 Fresh は、実行時のオーバーヘッドをゼロにしながら、サーバーサイドレンダリングに重点を置いています。 Enhance.dev は、ウェブコンポーネントを使用して、プログレッシブエンハンスメントパターンを優先しています。 これらのツールは、ロジックをビルド時またはサーバー側実行に移行することで、クライアント側 JavaScript への依存を減らしますが、インタラクティブ性に必要な場合は JavaScript を使用します。 このアプローチにより、パフォーマンスが重要でコンテンツ重視のアプリケーションに特に適しています。[ 60 ] [ 61 ] [ 62 ]
この記事にはフリーコンテンツ作品 からのテキストが含まれています。MITライセンス(ライセンスステートメント/許可)に基づきライセンスされています。テキストはVue.jsガイド、Vue.js から引用されています。