close
コンテンツにスキップ

Vue.js

出典: フリー百科事典『ウィキペディア（Wikipedia）』
Vue.js
 ウィキデータを編集
Vue.js の公式ロゴマーク
作者 尤 雨溪(Evan You)
初版 2014年2月 (12年前) (2014-02)[1]
最新版
ウィキデータを編集
安定版
3.5.38[2] / 2026年6月11日 (29日前)
リポジトリ
ウィキデータを編集
プログラミング
言語
プラットフォーム クロスプラットフォーム
サイズ 33.30KB min+gzip
サポート状況 開発中
種別 JavaScriptライブラリ、開発支援、UIフレームワーク
ライセンス MITライセンス
公式サイト vuejs.org ウィキデータを編集
テンプレートを表示

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

概要

[編集]

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

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

歴史

[編集]

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

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

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

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

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

特徴

[編集]

テンプレート

[編集]

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

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

リアクティブ

[編集]

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

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

Composition API

[編集]

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

コンポーネント

[編集]

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

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

<div id="tuto">
  <button-clicked v-bind:initial-count="0"></button-clicked>
</div>

<script>
Vue.component('button-clicked', {
  props: ['initialCount'],
  data: () => ({
    count: 0,
  }),
  template: '<button v-on:click="onClick">Clicked {{ count }} times</button>',
  computed: {
    countTimesTwo() {
      return this.count * 2;
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`The value of count is changed from ${oldValue} to ${newValue}.`);
    }
  },
  methods: {
    onClick() {
      this.count += 1;
    }
  },
  mounted() {
    this.count = this.initialCount;
  }
});

new Vue({
  el: '#tuto',
});
</script>

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

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

トランジション

[編集]

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

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

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

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

ルーティング

[編集]

シングルページアプリケーション（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をミックスに追加すると、コンポーネントは所属するルートにマッピングするだけで、親ルートルートは子ノードのレンダリング先を示す必要がある。[22]

<div id="app">
  <router-view></router-view>
</div>
...

<script>
...
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
};

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
});
...
</script>

上記のコードは、

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

[23]

バージョン履歴

[編集]

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

バージョンリリース日コードネーム作品ジャンルリリース時の引用
v0.6.02013-12-08———
v0.7.02013-12-24———
v0.8.02014-01-27———
v0.9.02014-02-25Animatrixアニメ映画"...then man made the machine in his own likeness. Thus did man become the architect of his own demise." - The Instructor（インストラクター）[26]
v0.10.02014-03-23Blade RunnerSF映画"A coding sequence cannot be revised once it's been established." - Tyrell（タイレル博士）[27]
v0.11.02014-11-07Cowboy BebopTVアニメ"There are ends we don't desire, but they're inevitable, we have to face them." - Jet Black（ジェット・ブラック）[28]
v0.12.02015-06-12Dragon Ball漫画・TVアニメ"If you keep calm you'll never be a super saiyan." - Goku（孫悟空）[29]
v1.0.02015-10-27EvangelionTVアニメ"The fate of destruction is also the joy of rebirth." - SEELE（ゼーレ）[30]
v2.0.02016-09-30Ghost in the Shell漫画・アニメ映画"Your effort to remain what you are is what limits you." - Puppet Master（人形使い）
日本語原典:「君が今の君自身であろうとする執着は、君を制約し続ける」[31]
v2.1.02016-11-22Hunter 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（ジン＝フリークス）
日本語原典:「道草を楽しめ 大いにな ほしいものより大切なものが きっとそっちに転がってる」[32]
v2.2.02017-02-26Initial D漫画・TVアニメ"Fill'er up. High Octane." - Ryosuke Takahashi（高橋涼介）
日本語原典:「とりあえずハイオク満タンいれてもらおうかな…」[33]
v2.3.02017-04-27JoJo's Bizarre Adventure漫画・TVアニメ"It was me, Dio!" - Dio Brando（ディオ・ブランドー）
日本語原典:「このディオだッ！」[34]
v2.4.02017-07-13Kill la KillTVアニメ"Fear is freedom! Subjugation is liberation! Contradiction is truth!" - Satsuki Kiryuuin（鬼龍院皐月）
日本語原典:「恐怖こそ自由！君臨こそ解放！矛盾こそ真理！」[35]
v2.5.02017-10-13Level E漫画・TVアニメ—[36]
v2.6.02019-02-04MacrossTVアニメ—[37]
v2.7.02022-07-01Naruto漫画・TVアニメ—[38]
v2.7.162023-12-24Swan Song—Vue 2最終リリース。2023年12月31日にEOL[39]
v3.0.02020-09-18One Piece漫画・TVアニメ—[40]
v3.1.02021-06-07Pluto漫画—[41]
v3.2.02021-08-09Quintessential Quintuplets漫画・TVアニメ—[42]
v3.3.02023-05-11Rurouni Kenshin漫画・TVアニメ—[43]
v3.4.02023-12-28Slam Dunk漫画・TVアニメ—[44]
v3.5.02024-09-01Tengen Toppa Gurren LagannTVアニメ—[45]
v3.6.0（ベータ）2025-12-23（ベータ1）（未発表）—Vapor Mode搭載[46]
最新安定版: v3.5.32（2025年4月3日時点）[47]

サポートライブラリ

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

関連項目

[編集]

注釈

[編集]
  1. ↑ “First Week of Launching Vue.js”. Evan You. 2017年12月21日閲覧。
  2. ↑ "https://github.com/vuejs/core/releases/tag/v3.5.38"。
  3. ↑ “Introduction — Vue.js” (英語). 2017年3月11日閲覧。
  4. ↑ “Evan is creating Vue.js | Patreon” (英語). Patreon. 2017年3月12日時点のオリジナルよりアーカイブ。2017年3月11日閲覧。
  5. ↑ “Between the Wires | Evan You”. Between the Wires. 2016年11月3日. 2017年8月26日時点のオリジナルよりアーカイブ. 2017年8月26日閲覧.
  6. ↑ “Vue 2.0 is Here!” (英語). The Vue Point. 2024年9月22日閲覧。
  7. ↑ “Announcing Vue 3.0 "One Piece"” (英語). The Vue Point. 2024年9月22日閲覧。
  8. ↑ “Vue 2.7 "Naruto" Released” (英語). The Vue Point. 2026年4月14日閲覧。
  9. ↑ “Vue 2 Has Reached End of Life” (英語). The Vue Point. 2026年4月14日閲覧。
  10. ↑ “Release v3.6.0-beta.1”. GitHub. 2026年4月14日閲覧。
  11. ↑ “Preview of Vue 3.6 & Vapor Mode” (英語). Vue School. 2026年4月14日閲覧。
  12. ↑ “vue/package-lock.json”. 2017年10月14日閲覧。 “"acorn-jsx":”
  13. ↑ “RReverser/acorn-jsx”. 2017年10月14日閲覧。 “It was created as an experimental alternative, faster React.js JSX parser.”
  14. ↑ “Template Syntax — Vue.js” (英語). 2017年3月11日閲覧。
  15. ↑ “Vue 2.0 is Here!”. The Vue Point (2016年9月30日). 2017年3月11日閲覧。
  16. ↑ “Reactivity in Depth — Vue.js” (英語). 2017年3月11日閲覧。
  17. ↑ “Reactivity in Depth — Vue.js” (英語). 2026年4月14日閲覧。
  18. ↑ “Composition API FAQ — Vue.js” (英語). 2026年4月14日閲覧。
  19. ↑ “Components — Vue.js” (英語). 2017年3月11日閲覧。
  20. ↑ “Transition Effects — Vue.js” (英語). 2017年3月11日閲覧。
  21. ↑ “Transitioning State — Vue.js” (英語). 2017年3月11日閲覧。
  22. ↑ “Routing — Vue.js” (英語). 2017年3月11日閲覧。
  23. ↑ “Vue Nested Routing (2)”. Vue Home Page (subpage). 2017年5月10日閲覧。
  24. ↑ “Vue.js バージョンとコードネーム”. Qiita. 2026年4月14日閲覧。
  25. ↑ “Releases — Vue.js” (英語). 2026年4月14日閲覧。
  26. ↑ “Release v0.9.0: Animatrix”. GitHub. 2026年4月14日閲覧。
  27. ↑ “Release v0.10.0: Blade Runner”. GitHub. 2026年4月14日閲覧。
  28. ↑ “Releases · vuejs/vue (page 22)”. GitHub. 2026年4月14日閲覧。
  29. ↑ “Releases · vuejs/vue (page 20)”. GitHub. 2026年4月14日閲覧。
  30. ↑ “Release 1.0.0: Evangelion”. GitHub. 2026年4月14日閲覧。
  31. ↑ “Release v2.0.0: Ghost in the Shell”. GitHub. 2026年4月14日閲覧。
  32. ↑ “Release v2.1.0: Hunter X Hunter”. GitHub. 2026年4月14日閲覧。
  33. ↑ “Release v2.2.0: Initial D”. GitHub. 2026年4月14日閲覧。
  34. ↑ “Release v2.3.0: JoJo's Bizarre Adventure”. GitHub. 2026年4月14日閲覧。
  35. ↑ “Release v2.4.0: Kill la Kill”. GitHub. 2026年4月14日閲覧。
  36. ↑ “Release v2.5.0: Level E”. GitHub. 2026年4月14日閲覧。
  37. ↑ “Release v2.6.0: Macross”. GitHub. 2026年4月14日閲覧。
  38. ↑ “Release v2.7.0: Naruto”. GitHub. 2026年4月14日閲覧。
  39. ↑ “Release v2.7.16: Swan Song”. GitHub. 2026年4月14日閲覧。
  40. ↑ “Announcing Vue 3.0 "One Piece"”. The Vue Point. 2026年4月14日閲覧。
  41. ↑ “Release v3.1.0: Pluto”. GitHub. 2026年4月14日閲覧。
  42. ↑ “Release v3.2.0: Quintessential Quintuplets”. GitHub. 2026年4月14日閲覧。
  43. ↑ “Announcing Vue 3.3”. The Vue Point. 2026年4月14日閲覧。
  44. ↑ “Announcing Vue 3.4”. The Vue Point. 2026年4月14日閲覧。
  45. ↑ “Announcing Vue 3.5”. The Vue Point. 2026年4月14日閲覧。
  46. ↑ “Release v3.6.0-beta.1”. GitHub. 2026年4月14日閲覧。
  47. ↑ “Releases · vuejs/core”. GitHub. 2026年4月14日閲覧。
  48. ↑ “Vue Router” (英語). router.vuejs.org. 2024年9月22日閲覧。
  49. ↑ “Pinia” (英語). pinia.vuejs.org. 2024年9月22日閲覧。
  50. ↑ “Vuex” (英語). vuex.vuejs.org. 2024年9月22日閲覧。
  51. ↑ “Vue Loader” (英語). vue-loader.vuejs.org. 2017年3月11日閲覧。
  52. ↑ “Vuetify — A Vue Component Framework” (英語). vuetifyjs.com. 2024年9月22日閲覧。
  53. ↑ “Vite” (英語). vite.dev. 2026年4月14日閲覧。
  54. ↑ “Vitest” (英語). vitest.dev. 2026年4月14日閲覧。
  55. ↑ “Nuxt” (英語). nuxt.com. 2026年4月14日閲覧。

外部リンク

[編集]
「https://ja.wikipedia.org/w/index.php?title=Vue.js&oldid=109801431」から取得