Vue.js

テンプレート

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アニメーションライブラリを統合する

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

1. Vueは、ターゲットエレメントにCSSトランジションまたはアニメーションが適用されているかどうかを自動的に検出する。 そうであれば、CSSトランジションクラスは適切なタイミングで追加/削除される。
2. トランジションコンポーネントがJavaScriptフックを提供した場合、これらのフックは適切なタイミングで呼び出される。
3. 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>

上記のコードは、

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>

^[17]