Vue.js

Vue.js
作者	尤雨溪(Evan You)
初版	2014年2月 (10年前)
最新版	3.4.30 - 2024年6月22日 (32日前) [±]
リポジトリ	github.com/vuejs/core;
プログラミング; 言語	JavaScript; TypeScript (Vue 3.0);
プラットフォーム	クロスプラットフォーム
サイズ	33.30KB min+gzip
サポート状況	開発中
種別	JavaScriptライブラリ
ライセンス	MIT License
公式サイト	vuejs.org
	テンプレートを表示

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

概要

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

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

歴史

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

VueはGitHubでスターの数が、Backbone.js、AngularJS、Angular、jQuery、React等、他の歴史あるライブラリを上回る。^[7]

特徴

テンプレート

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

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

リアクティブ

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

コンポーネント

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

以下のコードスニペットには、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は、アイテムがDOMに挿入、更新、または削除されたときにトランジション効果を適用するさまざまな方法を提供する。以下のツールが含まれる。

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

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

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

ルーティング

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

<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>

上記のコードは、

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

<div id="app">
  <div>
    <div>User 1</div>
  </div>
</div>

^[17]

サポートライブラリ

Vue-router（ルーティング）^[18]
Vuex(状態監理)^[19]
- Pinia
Vue-loader（Webpackローダー）^[20]
Vueify(UIライブラリ) ^[21]
Vue-cli(コマンドライン・インタフェース)^[22]
- Vite

注釈

^ “First Week of Launching Vue.js”. Evan You. 2017年12月21日閲覧。
^ "Release 3.4.30"; 閲覧日: 2024年6月27日; 出版日: 2024年6月22日.
^ “vue/LICENSE”. GitHub. 2017年4月17日閲覧。
^ “Introduction — Vue.js” (英語). 2017年3月11日閲覧。
^ “Evan is creating Vue.js | Patreon” (英語). Patreon. 2017年3月11日閲覧。
^ “Between the Wires | Evan You”. Between the Wires. (2016年11月3日) 2017年8月26日閲覧。
^ “Search stars GitHub” 2020年12月4日閲覧。
^ “vue/package-lock.json”. 2017年10月14日閲覧。 “"acorn-jsx":”
^ “RReverser/acorn-jsx”. 2017年10月14日閲覧。 “It was created as an experimental alternative, faster React.js JSX parser.”
^ “Template Syntax — Vue.js” (英語). 2017年3月11日閲覧。
^ “Vue 2.0 is Here!”. The Vue Point (2016年9月30日). 2017年3月11日閲覧。
^ “Reactivity in Depth — Vue.js” (英語). 2017年3月11日閲覧。
^ “Components — Vue.js” (英語). 2017年3月11日閲覧。
^ “Transition Effects — Vue.js” (英語). 2017年3月11日閲覧。
^ “Transitioning State — Vue.js” (英語). 2017年3月11日閲覧。
^ “Routing — Vue.js” (英語). 2017年3月11日閲覧。
^ “Vue Nested Routing (2)”. Vue Home Page (subpage). 2017年5月10日閲覧。
^ “vue-router” (英語). router.vuejs.org. 2017年3月11日閲覧。
^ “vuex” (英語). vuex.vuejs.org. 2017年3月11日閲覧。
^ “vue-loader” (英語). vue-loader.vuejs.org. 2017年3月11日閲覧。
^ “vueify” (英語). GitHub. 2017年3月11日閲覧。
^ “vue-cli” (英語). GitHub. 2017年3月11日閲覧。

外部リンク

[1] “First Week of Launching Vue.js”. Evan You. 2017年12月21日閲覧。

[wikidata-8e99a7a23a09c6df344866ace4270a7f652dd8e3-v3-2] "Release 3.4.30"; 閲覧日: 2024年6月27日; 出版日: 2024年6月22日.

[license-3] “vue/LICENSE”. GitHub. 2017年4月17日閲覧。

[4] “Introduction — Vue.js” (英語). 2017年3月11日閲覧。

[5] “Evan is creating Vue.js | Patreon” (英語). Patreon. 2017年3月11日閲覧。

[6] “Between the Wires | Evan You”. Between the Wires. (2016年11月3日) 2017年8月26日閲覧。

[7] “Search stars GitHub” 2020年12月4日閲覧。

[8] “vue/package-lock.json”. 2017年10月14日閲覧。 “"acorn-jsx":”

[9] “RReverser/acorn-jsx”. 2017年10月14日閲覧。 “It was created as an experimental alternative, faster React.js JSX parser.”

[10] “Template Syntax — Vue.js” (英語). 2017年3月11日閲覧。

[11] “Vue 2.0 is Here!”. The Vue Point (2016年9月30日). 2017年3月11日閲覧。

[12] “Reactivity in Depth — Vue.js” (英語). 2017年3月11日閲覧。

[13] “Components — Vue.js” (英語). 2017年3月11日閲覧。

[14] “Transition Effects — Vue.js” (英語). 2017年3月11日閲覧。

[15] “Transitioning State — Vue.js” (英語). 2017年3月11日閲覧。

[16] “Routing — Vue.js” (英語). 2017年3月11日閲覧。

[17] “Vue Nested Routing (2)”. Vue Home Page (subpage). 2017年5月10日閲覧。

[18] “vue-router” (英語). router.vuejs.org. 2017年3月11日閲覧。

[19] “vuex” (英語). vuex.vuejs.org. 2017年3月11日閲覧。

[20] “vue-loader” (英語). vue-loader.vuejs.org. 2017年3月11日閲覧。

[21] “vueify” (英語). GitHub. 2017年3月11日閲覧。

[22] “vue-cli” (英語). GitHub. 2017年3月11日閲覧。

[4]

[1]

[2]

[3]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

[21]

[22]