はじめに

これまでの連載で，Vue.jsの基礎文法やコンポーネントを学習し，Vue Routerを使ってシングルページアプリケーションの基本的な実装を行いました。連載最終回である今回は，より現場を意識した実践的なアプリケーションの開発について紹介します。

これまでの連載ではVue.jsの気軽に使えるメリットや本質的な機能を理解してもらうために，ES5のJavaScriptを使い，各種のコマンドラインツールなしで解説してきました。より実践向きな高度なアプリケーション開発になるため，ES2015以降のJavaScriptを使用し，エディタ，コマンドラインや開発を補助するライブラリなどの様々なツールを活用しながら学習していきます。

vue-cliによるアプリケーション開発

前準備

開発にnpm（Node.js）を利用します。Node.jsは日本語公式サイトを参考にインストールしてください。npmはNode.jsのパッケージマネージャで，Node.jsをインストールすると標準でインストールされます。Node.jsは執筆時点の最新安定バージョンのv6.9.2を使用します。

vue-cli

vue-cliとは，Vue.js向けのアプリケーション開発環境をセットアップする公式のコマンドラインツールです。

JavaScriptでアプリケーションを構築する場合，モジュール化，バンドラー／プリプロセッサによるビルド，JavaScriptの静的構文チェック（Lint）⁠，単体テストやE2Eテストなどが必要になります。これらを満たした開発環境のセットアップは長期的なメンテナンスと開発の生産性を考えると必須とも言えますが，自分で一から用意するのはかなりの手間で，徒労感の伴う作業となるでしょう。この面倒なアプリケーション開発環境のセットアップを担ってくれるのがvue-cilと呼ばれるコマンドラインツールです。これによりすぐにVue.jsアプリケーションの開発に着手できます。

vue-cliのインストール

では，さっそくvue-cliを使ってVue.jsのアプリケーション開発環境を整えてみましょう。まずは，npmでvue-cliをインストールします。

$ npm install -g vue-cli

インストールが完了したら，vueコマンドが使用できるようになります。試しに以下のvue-cliのバージョンを確認するコマンドを実行してみましょう。

$ vue --version
2.6.0

本稿では執筆時点での最新バージョンである2.6.0を使用します。

アプリケーションプロジェクトの作成

vue-cliのインストールが完了したら，テンプレートを利用してアプリケーション開発環境をセットアップします。Vue.jsは公式にVue.jsアプリケーションプロジェクトテンプレートをいくつか提供しています。最も人気のwebpackプロジェクトテンプレートを使用し，vue-cli-gihyo-exampleという名前でアプリケーションプロジェクトを作成することにします。

$ vue init webpack vue-cli-gihyo-example

上記コマンドを実行すると，コマンドライン上でプロジェクト名やLint，テストなどのセットアップの有無を対話的に問われます。今回は以下のように設定します（Authorの部分はコマンドライン実行環境によって変わります）⁠。

  This will install Vue 2.x version of template.
  
  For Vue 1.x use: vue init webpack#1.0 vue-cli-gihyo-example

? Project name vue-cli-gihyo-example
? Project description A Vue.js project
? Author kazuya kawaguchi <xxx@domain.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

入力が完了すると下記の内容が出力され，vue-cli-gihyo-exampleというディレクトリにVue.jsアプリケーションプロジェクトがセットアップされます。

vue-cli · Generated "vue-cli-gihyo-example".

To get started:

 cd vue-cli-gihyo-example
 npm install
 npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

出力されたメッセージには，開発を始めるために実行するべきコマンドと，webpackプロジェクトテンプレートの公式ドキュメントの参照先URLが出力されます。

アプリケーションの開発を開始する

Vue.jsアプリケーションプロジェクトのセットアップが完了したので，前節のvue-cliによるセットアップにおいて出力された内容に従って進めてみます。

$ cd vue-cli-gihyo-example
$ npm install
$ npm run dev

npm installでVue.jsアプリケーション開発に必要な依存モジュールのインストールが完了します。

次にnpm run devで動作確認のための開発用サーバが起動すると，ブラウザが起動し図1の内容が表示されるのを確認できるはずです。

最小限に動作するアプリケーションの雛形となるコードが生成されています。以降は，これをベースにして開発していきます。