おすすめのJSフレームワーク「Vue.js」で開発をスタートしよう!

UEQareer Advent Calendar 2017の10日目のエントリーです。

皆さん、こんにちは!
レッドインパルスのたかけんです。

今回は、最近使う機会があった「Vue.js」をご紹介します。

vue.jsとは

Vue (発音は / v j u ː / 、 view と同様)はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。 (https://jp.vuejs.org/ より引用)

Facebookの「React」やGoogleの「Angular2」に並ぶ勢いで、人気のJSフレームワークです。

なぜVue.jsがおすすめなのか

日本語のドキュメントが豊富

おすすめの理由は、これに尽きると思います。一般的に、フレームワークを使うことで、開発の効率を大幅に上げることができます。しかし、そのフレームワークの使い方を覚えるのが結構大変です。また日本人の開発者(特に初学者)に立ちはだかるのが、言語の壁ではないでしょうか。
オープンソースで公開されているツールやフレームワークの大多数は、そのドキュメントは英語で書かれています。英語に苦手意識のある方は、フレームワークの使い方の前に、英語の読解に苦労してしまうかもしれません。

しかし、Vue.jsのドキュメントは、コミッターの方の尽力により、多言語に対応しており、日本語にも対応しています。これは、ありがたいですね!

モダンな開発に対応

Vue.jsの開発は、とても活発に行われています。
仮想DOMやコンポーネント指向など、トレンドの技術にも対応しています。
後で紹介するvue-cliで、webpackを使い、ES2015で開発することもできるし、Fluxを実現するコアライブラリであるVuexや、Chromeでデバッグが行えるvue-devtoolsもあります。

モダンな開発に必要なものは、だいたい全て揃っています。

学習コストが低い

フレームワークの選定条件の1つとして、学習コストがあります。
vue.jsは、ReactやAngularに比べて、学習コストが低く、直感的にコーディングできます。

例えば、以下は、テンプレートを使ってリストを表示させる際の各フレームワークのサンプルの比較です。

(1) Vue テンプレート

(2) Angular テンプレート

(3) JSX(React)

好みの問題もありますが、
おそらく、一番シンプルで直感的に理解しやすいのは、Vue.jsのテンプレートでは無いでしょうか。

vue-cliでVue.jsをはじめよう

vue-cliを使うことで、簡単にテンプレートからvue.jsのプロジェクトを作成できます。

まずは、vue-cliのインストール。

テンプレートの数も多数用意されています。

  • webpack – A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

  • webpack-simple – A simple Webpack + vue-loader setup for quick prototyping.

  • browserify – A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.

  • browserify-simple – A simple Browserify + vueify setup for quick prototyping.

  • pwa – PWA template for vue-cli based on the webpack template

  • simple – The simplest possible Vue setup in a single HTML file

simpleテンプレートを使ったVueプロジェクト

まずは、最もシンプルなsimpleを使ってみましょう。

my-project1以下に、index.htmlが作成されました。
以下のような内容になっています。

サーバを立ち上げて、動かしてみましょう。

アプリ画面が表示されます。

webpackテンプレートを使ったVueプロジェクト

続いて、webpackテンプレートを試してみましょう。
こちらは、コアライブラリも含めてインストールできたり、ES2015で記述できたり、ESLintが入っていたりと、盛りだくさん。
規模の大きめなアプリケーションを作りたい人向けです。

構成は、こんな感じです。

ライブラリをインストールして、サーバを動かしてみます

プロキシでプロジェクトが作成できない場合

vue-cliですが、プロキシ配下のネットワーク環境だと、うまくテンプレートをダウンロードできず、プロジェクトの作成に失敗してしまいます。
その場合は、手動でテンプレートのリポジトリをダウンロードし、offlineオプションをつけてvue-cliコマンドを実行します。

まとめ

無事にテンプレートも出来たので、Vue.jsで開発ができますね!
「えっ!? この後は、何を参考にすれば良いの?」って、思った方は、、、

素晴らしい公式ドキュメントをぜひ参考にしましょう!!
サンプルのアプリも複数用意されています。
Vue.jsコミュニティ自体も、とても活発に活動されているので、参加してみるのも良いかと思います。

それでは、素敵なVue.jsの開発ライフをお楽しみください〜