これから始めるVue.js 2.0 | 第1回 Vue.jsとは

これから始めるVue.js 2.0 第1回 Vue.jsとは

まずはVue.jsとは何かを解説します。併せて、Vue.jsでの開発をサポートするツールにはどんなものがあるが一通り紹介します。このシリーズではVue.js 2.0の情報を元にしています。

カテゴリー: JavaScript >; Vue.js

2016年11月17日発行

著者中島直博フロントエンド・エンジニア

これから始めるVue.js 2.0 シリーズの記事一覧

はじめに

本シリーズでは、JavaScriptライブラリであるVue.js（ビュージェイエス）の基本的な機能や使い方を解説します。併せて、Vue.jsでの開発をサポートするツールについても解説します。

なお、以降、特に断りのない限り、次の環境での動作を元に執筆しています。

Vue.jsとは

Vue.jsはUIなどを組み立てるView層にフォーカスしたJavaScriptライブラリです。Vue.jsの特徴として、リアクティブなデータバインディング、再利用性の高いコンポーネントによるUIの構築、仮想DOMによる高速なレンダリング、シンプルなAPIなどが挙げられます。シンプルでわかりやすく作られているため、少しの学習でもすぐアプリケーション作成に役立てることができます。

Vue.js

また、Vue.jsをサポートするライブラリやツール、整備されたドキュメント類、Vue.jsユーザーのコミュニティやフォーラムなど、開発を進める過程で助けとなるものが数多く用意されているのも魅力の一つです。

日本語ドキュメントがあります

Vue.jsには翻訳するコミュニティがあり、日々翻訳が進められています。日本語の公式サイトもあります。執筆時点では2系の翻訳は完了していませんが、vue.jsのリポジトリで翻訳中ドキュメントが見られます。

データバインディングを試してみよう

まずVue.jsでのデータバインディングがのようなものか、簡単なサンプルで見てみましょう。

次のデモは、データの更新とDOMの更新を同期的に行うものです。

このデモのソースコードは次のようになっています。input要素にmessageがバインディングされ、テキストボックスの内容を変えるとmessageの値が更新され、同時にmessageを参照している{{message}}の内容が更新されます。

データバインディング

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.2/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        template: `
          <div>
            <p><input v-model="message"></p>
            <p>{{message}}</p>
          </div>
        `,
        data: {
          message: 'Hello Vue.js!!'
        }
      })
    </script>
  </body>
</html>

JavaScriptのコードとしては10数行ですが、これだけでDOMとデータの同期ができます。このようにVue.jsではHTMLテンプレートを使った宣言的なデータバインディングが簡単に行えます。

高速なレンダリング

Vue.jsは2系から、仮想DOM*を採用しています。仮想DOMの採用によって、ほかのフレームワークと比較しても、より最適化された高速なレンダリングが可能になりました。仮想DOMについては、使うときに特に意識せずとも、その恩恵を受けることができます。

公式ブログでは、第三者の描画速度のベンチマーク結果をまとめたグラフが掲載されています。Vanilla JavaScript（ライブラリを用いない素のJavaScript）の処理速度を1として、その何倍の時間がかかるかを表したもので、数値が低いほど処理速度が速いということになります。

出典：公式ブログ「Vue 2.0 is Here! | The Vue Point」

*注：仮想DOM（Vertual DOM）

仮想DOMによる描画はVue.jsと同じようにView層にフォーカスしたReact.jsでも用いられています。詳しくは次の記事の「Virtual DOMとは」の節を参照してください。

これから始めるReact.js 第1回 React.jsとは：Virtual DOMとは

あらゆる規模で使えるフレームワーク

公式サイトを見ると「The Progressive JavaScript Framework」という見慣れない用語があると思います。これは作者のEvan You氏が提唱する"Progressive Framework（プログレッシブ・フレームワーク）"という概念です。

アプリケーションは、多くの場合、作って終わりということはなく、その後も開発が続けられます。要求に合わせて新しい機能を追加したり、ときには仕様を変更したりと、アプリケーションを成長させる必要があります。アプリケーションの成長段階において、採用したフレームワーク（ライブラリ）が要求に合わなくなるというのはよくある話です。こういったアプリの成長に対応できるフレームワーク、それがProgressive Frameworkという概念です。

Progressive Frameworkが意味しているのは、Vue.jsがどのような規模、段階のアプリケーションにも対応できるということです。Vue.js単体を見ると、小規模のアプリケーションに適しているように思いますが、Vue.jsをサポートするツールやライブラリといったエコシステムの存在によって、アプリケーションの要求に柔軟に対応することができます。

Vue.jsでネイティブアプリを作れるようになる？

Vue.js 2.0のリリースポストでWeexという、ネイティブアプリ（iOS & Android）のUIを作るためのフレームワークにVue.jsが採用される予定であることがアナウンスされました。これによって、Vue.jsのコンポーネントをWeb、iOS、Androidと、プラットフォームを問わず使えるようになるとのことです。

開発をサポートするツール

前述したように、Vue.jsを使った開発ではアプリケーションの要求に合わせて、Vue.jsをサポートするライブラリやツールを採用していくことなります。vuejsのリポジトリには、多くのライブラリやツールがありますが、その中から本シリーズで取り上げていく予定のものを簡単に紹介します。

vue-cli

vue-cliはVue.jsのプロジェクトを始める際に、プロジェクトの雛形を生成（scaffolding：本来の意味は「足場」）してくれるツールです。vue-cliを使うと、webpackやBrowserifyを使ったバンドル環境の設定、ファイルに変更があったときに差分だけを再読込してくれるローカルサーバーの設定を自動で行ってくれます。またこれには、後述するvueifyやvue-loaderによる単一コンポーネントでのアプリケーション開発を行える環境のセットアップも行ってくれます。

vueifyとvue-loader

Vue.jsはUIをコンポーネント（部品）ごとに定義して、それを組み立てることでアプリケーションを構築します。このコンポーネントの定義をよりやりやすくするのが、vueifyとvue-loaderです。vueifyとvue-loaderは基本的に同じ目的を持ったものですが、vueifyがBrowserifyを使ったもの、vue-loaderがwebpackを使ったものという点が異なります。

コンポーネントは.vueという独自の拡張子のファイルで生成し、この中にコンポーネントのHTML、CSS、JavaScriptを定義します。

次のソースコードは.vueファイルの例です。template要素にHTMLテンプレートを、style要素にCSSを、script要素にJavaScriptを記述します。

.vueファイルの例

<template>
  <div class="my-component">
    <button @click="onClick">{{message}}</button>
  </div>
</template>

<style lang="scss" scoped>
  .my-component {
    color: tomato;
    button {
      border: 1px solid #000;
    }
  }
</style>

<script>
  export default {
    data() {
      return {
        message: 'Hello!!'
      }
    },
    methods: {
      onClick() {
        console.log(this.message)
      }
    }
  }
</script>

vueifyとvue-loaderは単にコンポーネントごとにファイルを分けるだけでなく、SassやBabelといった、CSSプリプロセッサやJavaScriptトランスパイラへの対応も簡単に行えるようになっています。styleのlang属性の値としてscssやstylusといった指定をすることで、面倒な設定なしにCSSプリプロセッサを利用できます。また、デフォルトでBabelによるトランスパイルが行われるようになっているので、ES2015などの構文を存分に利用することができます。

Vuex

中規模、大規模なアプリケーションになってくると、状態（データ）をどこに持たせるのかが問題になったり、コンポーネント同士でデータのやり取りをしていたために、コンポーネントの再利用性が低くなったりします。このようなアプリケーションのデータに関する問題を解決するために利用するのがVuex（ビュエックス）です。

Vuexは、Fluxに代表されるような状態管理パターンをVue.jsで行うためのライブラリです。

ここでは詳しく解説しませんが、次の図のように、単一のState（状態）をActionsとMutationsによって変更し、その変更をきっかけにVue ComponentsがUIの更新を行います。

出典：vuejs/vuexドキュメント

Vuexを使うことで、複雑になりがちなデータの管理をシンプルにわかりやすく行えます。Vuexに関しては、シリーズ後半で詳しく取り上げる予定です。

そのほかの連携ライブラリ

Vue.jsはルーティングや通信の機能を持っていません。Single Page Applicationを作るときなどには、次に紹介するライブラリを使うことができます。

vue-router

vue-routerはVue.js公式のルーティングライブラリです。公式のライブラリだけあって、Vue.jsのコンポーネントを利用することに最適化されています。

vue-validator

vue-validatorはVue.js公式のフォームバリデーションライブラリです。フォームに入力された値が期待している値かどうかチェックすることができます。

組み合わせるライブラリの選択

Vue.jsの公式ライブラリを紹介しましたが「公式が提供しているものを使わなければならない」ということはありません。公式ライブラリを使うことの利点は、Vue.js本体の更新に合わせてライブラリも更新されることです。サードパーティ製のライブラリは更新が突然止まって、Vue.js本体の更新に追いつけなくなったり、Vue.jsと組み合わせて使うのに適さなくなる可能性があります。ただし、これはVue.jsのコア領域に関わるようなライブラリにだけ当てはまります。

たとえば、外部リソースを取得するライブラリはVue.jsのコア領域には関わりがありません。ですのでaxiosや、それこそjQuery（の$.ajax）などの、サードパーティ製ライブラリを自由に選択することができます。

おわりに

今回はVue.jsの特徴と、Vue.jsをサポートするツールやライブラリについて紹介しました。次回はVue.jsのAPIの中から、特に使用頻度が高いものについて解説します。