この記事では、Rails や PHP といったサーバーサイドのプログラミングをメインでやっている人向けに Vue.js を用いた簡単な TODO 管理アプリを作るまでを、2回に分けて解説します。
なお、著者の作業環境の都合上、Mac OSX を対象として記事を執筆しています。
1回目では、Vue.js を用いたアプリのモダンな開発環境構築について説明いたします。
Vue.js とは？
Vue.js は「リアクティブなデータバインディング」と「コンポーネントシステム」に主眼を置いたフロントエンド向けの JavaScript ライブラリです。
最も簡単な vue.js の始め方 (script タグで vue.min.js を読み込む)
jQuery やその他のライブラリと同じく、 Vue.js もスタンドアロンで動くファイルをて異様してますし、 CDN にて配布もしています。
あなたの HTML ファイルにて <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> と書くことですぐにでも使うことができます。
また、 JSFiddle にて Vue.js を用いた "Hello,World." の実装例 が公開されてますので、これをいじって試してみるのも良いでしょう。
モダンな開発環境
昨今のフロントエンド開発では、生の JavaScript をいきなり書き始めることは少なくなってきたかなと感じます。
パッケージマネージャを使ってライブラリを管理し、モジュール管理ライブラリを使い JavaScript のファイルを複数個にうまく分割し、ES6のような新しい文法でプログラムを書き、そして様々なタスクをコマンド一つで実行するというのがモダンな開発手法でしょう。
そこで、本記事では NPM, Broserify, gulp, Babel, Vueify で構成した開発環境の構築方法について紹介したいと思います。
(※node.js, npm 自体のインストール方法は割愛いたします)
NPM を用いて Vue.js のインストールする
NPM のインストールは、node.js をインストーすることで自動的に行われるかと思いますので、割愛いたします。
さて、それでは開発を始めましょう。最初の一歩は、開発用のディレクトリを用意し、npm init して package.json を生成することです。 npm init した時に立ち上がるウィザードが面倒な時には、ひとまず全てデフォルトのままエンターキーを入力して構いません。
$ mkdir hello_vuejs # まずは開発用のディレクトリを作ります。
$ cd hello_vuejs # ディレクトリを作ったら、早速移動します。
$ git init # 作業を記録するために、git リポジトリにしておきましょう
$ echo "Hello, Vue.js" > ./README
$ git add .
$ git commit -m "Initial commit."
$ npm init # このコマンドで初期化します！
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults. # (超訳) package.json つくるよ！初期値は適当にしとくよ！
See `npm help json` for definitive documentation on these fields
and exactly what they do. # (超訳) 詳しくは `npm help json` してね！
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file. # (超訳) `npm install <pkg> --save` すると package.json もアップデートされるよ！
Press ^C at any time to quit. # (超訳) Control + c で強制終了！
name: (hello_vuejs) # このパッケージ or プロジェクトの名前を入力します。デフォルトは "hoge"
version: (1.0.0) # 現在のバージョンを入力しますデフォルトは 1.0.0
description: # 説明文を入力します。デフォルトは空
entry point: (index.js) # エントリポイントを入力します。 node.js のプログラムにて require("このパッケージ") した時に最初に読み込まれるファイルです。
test command: # 単体テスト用のコマンドがあるなら書きます
git repository: # リポジトリがすでにあるなら書きます
keywords: # NPM 用のパッケージとして公開した際の検索用キーワードなどをかきます
author: # あなたの名前！
license: (ISC) # このパッケージのライセンスを書きます
About to write to /path/to/hoge/package.json:
# (超訳) 以下の内容で package.json つくったよ！
{
"name": "hello_vuejs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT"
}
$ git add package.json # 早速 package.json の生成をリポジトリにコミットしましょう
$ git commit -m "Init NPM"
(参考: ここまでの作業 https://github.com/ayasuda/hello_vuejs/commit/7195b0bfea64787d511fe71ad484024e9b8d467c )
最初の設定が終わったら、早速 Vue.js をインストールしてみましょう。インストールは次のコマンドから行います。
$ npm install --save vue
インストールが終わったら、HTML ファイルを作成し、Vue.js が読み込めるか試してみましょう。次のファイルを作成してください。
<html>
<head>
<title>Hello, World.</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'Hello,Vue.js!'
}
})
</script>
</html>
ファイルを作成したら、ブラウザで開いてみましょう。
ちゃんと「Hello,Vue.js!」と表示されていますか？
うまくいったら変更を記録しておきましょう。
$ git add package.json index.html
$ echo "node_modules" > .gitignore # npm でインストールしたファイルはバージョン管理外にします。
$ git add .gitignore
$ git commit -m "Install Vue.js"
(参考: ここまでの作業 https://github.com/ayasuda/hello_vuejs/commit/fb0563ba64ea7bf411b39aa6b5015fdda560f204 )
Browserify を用い、script タグを１つにする
さて、先ほど作成した index.html ですが、<script> タグで読み込んでいる Vue.js のファイルパスが少々よろしくありません。 node_modules ディレクトリ内には、ユーザーに提供すべきでないファイルが含まれている場合もあります。
また、直接 index.html に JavaScript を書いてしまうと大規模なアプリ開発には不向きとなってしまいます。可能であれば複数個のファイルに分けてフロントエンドを進められた方が良いでしょう。
そこで、Browserify を導入します。
Browserfiy はフロントエンドの JavaScript で require を可能にさせるライブラリです。
早速インストールしましょう。インストールは次の手順で行います。
$ npm install --save-dev browserify # 共同でプロジェクトに参加するメンバーが browserify を入れているとは限らないので、このプロジェクトが browserify に依存していることを明確にする
$ npm bin # browserify のインストールされたパスを確認する
/path/to/hello_vuejs/node_modules/.bin
$ ./node_modules/.bin/browserify --version # 実行可能か確認する
12.0.1
ちゃんと Browserify のバージョン番号が出て来たでしょうか？ バージョン番号が表示されていれば、インストールが正常にされたはずです。
さて、 index.html に書かれた JavaScript を main.js というファイルに書き出してみましょう。そのあとで、Browserify を使い、全てをまとめた bundle.js というファイルを書き出してみることにします。
ファイルを次のように書き換えてください。
var Vue = require('vue')
new Vue({
el: '#app',
data: {
message: 'Hello,Vue.js!'
}
})
<html>
<head>
<title>Hello, World.</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script type="text/javascript" src="./bundle.js"></script>
</html>
ファイルの変更が終わったら、次のコマンドを実行して bundle.js を生成します。
$ ./node_modules/.bin/browserify main.js -o bundle.js
bundle.js が生成されたら、ブラウザで動きを確認してみましょう。
動きを確認し、正常に動いているようでしたらここまでの成果をコミットしておきます。
$ git add index.html main.js package.json
$ echo "bundle.js" >> .gitignore
$ git add .gitignore
$ git commit -m "Install Browserify"
(参考: ここまでの作業 https://github.com/ayasuda/hello_vuejs/commit/e72863706b4f87ecd7ac3979cb1a0a140f53391c )
ファイルが増えた時のために gulp のタスクを作っておく
ブラウザが読み込むファイルは bundle.js 1つにできましたが、browserify コマンドのオプションを忘れそうですし、複数ファイルになった時に簡単にビルドできなさそうな気がします。
そこで gulp を導入します。
gulp はビルドツールです。make と違い便利なプラグインがとてもたくさん公開されていること、一つ一つのタスクを簡便に書け、さらに軽いのが特長です。
インストールは次の手順です。
$ npm install --save-dev gulp vinyl-source-stream # vinyl-source-stream は browserify でのコンパイル結果を gulp 経由でファイルに書き出すために必要です。
gulp をインストールしたら、早速タスクを書きましょう。次の内容のファイルを作成してください。
（参考: Browserify: それはrequire()を使うための魔法の杖 - gulpの最小構成に挑戦
var gulp = require('gulp')
var browserify = require('browserify')
var source = require('vinyl-source-stream')
gulp.task('build', function() { // build というタスクを定義します
browserify({
'entries': ['./main.js']
}) // browserify の設定をして・・・
.bundle() // 一つのファイルにまとめたものを
.pipe(source('bundle.js')) // bundle.js という名前のファイルに記録して
.pipe(gulp.dest('./')) // "./" に書き出します
})
gulp.task('default', ['build']) // デフォルトの gulp タスクは build です。
タスクができたら早速実行してみます。実行は次のコマンドで行います。
$ ./node_modules/.bin/gulp build
ビルドに成功したら、さらに使いやすくするために package.json の scripts に登録しましょう。
npm経由で gulp build を実行可能にすることで、他のエンジニアの環境に非依存なビルド設定ができます。
（参考: npm で依存もタスクも一元化する )
...
"scripts": {
"build": "gulp build",
"test": "echo \"Error: no test specified\" && exit 1"
},
...
package.json の変更ができたら、次のコマンドで動きを確認してみてください。先ほどの gulp build した時と同じ動きをするはずです。
$ npm run build
動きを確認したらここまでの成果をコミットしておきましょう
$ git add package.json gulpfile.js
$ git commit -m "Install gulp"
(参考: ここまでの作業 https://github.com/ayasuda/hello_vuejs/commit/885d9c8e0a6fcc1348bbf25b2aef87c5320d6dc5 )
(Appendix) ES6 でソースをかけるように Babel を導入する
Babel を使えば JavaScript を次世代の仕様で記述できます。例えば Class 構文などが使えるようになるので、記述が幾分か楽にできるようになります。
今回は Browserify のプラグインとして Babel を動かすこととします。
$ npm install --save-dev babelify babel-preset-es2015 # babel-preset-es-2015 は、ES2015 (ES6) の構文をトランスパイルするために必要です
そして、 Browserify に babelify を使わせるために、package.json に次の項目を追加します。
"browserify": {
"transform": [
["babelify", { "presets": ["es2015"]}]
]
},
この設定をしておくことで、以降、ソースコードを ES6 で書けるようになります。
(参考: https://github.com/ayasuda/hello_vuejs/commit/0bcb70f0e963ae9d529474f3ab5c0bfde2b49d3d )
コンポーネントを書きやすくするために Vuify を導入する
Vue.js の重要なコンセプトの1つに コンポーネントシステム があります。vueify を用いることで、1つのコンポーネントを1つのファイルに定義することがしやすくなります。早速、メッセージの表示部分をコンポーネント化してみましょう。
まずは、コンポーネントを作りやすくする vueify をインストールします。
$ npm install --save-dev vueify
次に、components ディレクトリを作り、中にメッセージコンポーネントを message.vue という名前で作りましょう。内容は次のとおりです。
<template>
<p>{{message}}</p>
</template>
<script>
// babel を入れているので ES6 で書ける
export default {
data() {
return {
message: "Hello, Vuify!"
}
}
}
</script>
コンポーネントを作ったら、Vue のインスタンスに登録して、呼び出してみます。
index.html と main.js を次のように書き換えてください。
<html>
<head>
<title>Hello, World.</title>
</head>
<body>
<div id="app">
<my-message></my-message>
</div>
</body>
</html>
var Vue = require('vue')
new Vue({
el: '#app',
components: {
MyMessage: require('./components/message.vue')
}
})
ファイルの変更が終わったら npm run build してファイルをビルドし、ブラウザで挙動を確認してみてください。
(参考: ここまでの作業 https://github.com/ayasuda/hello_vuejs/commit/bac71b75fb8455e9399b36fce3616dfcb2d51948 )
環境構築が終わったら
次は、この環境を基にして簡単な TODO 管理アプリを作りつつ、Vue.js の機能をみていきましょう。