2017.12.10 プログラミング知識

おすすめの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 テンプレート

<ul v-for="n in 4">
  <li>{{ n }}</li>
</ul>

(2) Angular テンプレート

<ul *ngFor="let n of _.range(1, 5)">
  <li>{{ n }}</li>
</ul>

(3) JSX(React)

<ul>
{_.range(1, 5).map(n =>
  <li>{n}</li>
)}
</ul>

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

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

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

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

$ npm install -g 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を使ってみましょう。

$ vue init simple my-project1

? name my-project1
? author Ken Takahash 

   vue-cli · Generated "my-project1".

$ cd my-project1
$ ls
index.html

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

<!DOCTYPE html>
<html>
<head>
  <title>Welcome to Vue</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    <img src="https://vuejs.org/images/logo.png" alt="Vue logo">
    <h1>{{ greeting }}</h1>
    <ul>
      <li>
        To learn more about Vue, visit
        <a :href="docsURL" target="_blank">
          {{ humanizeURL(docsURL) }}
        </a>
      </li>
      <li>
        For live help with simple questions, check out
        <a :href="discordURL" target="_blank">
          the Discord chat
        </a>
      </li>
      <li>
        For more complex questions, post to
        <a :href="forumURL" target="_blank">
          the forum
        </a>
      </li>
    </ul>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        greeting: 'Welcome to your Vue.js app!',
        docsURL: 'http://vuejs.org/guide/',
        discordURL: 'https://chat.vuejs.org',
        forumURL: 'http://forum.vuejs.org/'
      },
      methods: {
        humanizeURL: function (url) {
          return url
            .replace(/^https?:\/\//, '')
            .replace(/\/$/, '')
        }
      }
    })
  </script>
</body>
</html>

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

$ npm install -g live-server 
$ live-server

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

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

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

$ vue init webpack my-project2

? Project name my-project2
? Project description A Vue.js project
? Author Ken Takahash 
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project2".

   To get started:

     cd my-project2
     npm install
     npm run dev

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

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

$ tree .
.
├── README.md
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   ├── webpack.prod.conf.js
│   └── webpack.test.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   ├── prod.env.js
│   └── test.env.js
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   └── router
│       └── index.js
├── static
└── test
    ├── e2e
    │   ├── custom-assertions
    │   │   └── elementCount.js
    │   ├── nightwatch.conf.js
    │   ├── runner.js
    │   └── specs
    │       └── test.js
    └── unit
        ├── jest.conf.js
        ├── setup.js
        └── specs
            └── HelloWorld.spec.js

13 directories, 28 files

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

cd my-project2
npm install
npm run dev

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

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

git clone https://github.com/vuejs-templates/simple ~/.vue-templates/simple
vue init simple my-project --offline
cd my-project
npm install
npm run dev

まとめ

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

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

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

RECOMMENDこちらの記事も人気です。

ABOUTこの記事をかいた人

レッドインパルス リーダー

NEW POSTこのライターの最新記事