おもにバックエンド側を触ることが多いのですが、フロント側も覚えたいなと思い最近Vue.jsに入門しました。
Vue.js公式のドキュメントは日本語訳されており、公式のサンプルもいくつかあるのですが、
さあこれから始めよう！と思う初心者には環境構築を含めてちょっとハードルが高い気がしました。
（私が調べた限り日本語で良さそうなチュートリアルはありませんでした。）
そこで今回は自分でTODOアプリをVue.jsで0からつくる手順を公開しているサイト （英語）を参考にして、
TODOアプリを作成してherokuにデプロイするまでやってみたので、GitHubのcommitを追いながら簡単に解説をしてみたいと思います。
実際の動作は以下から確認できます。
GitHubのリポジトリはこちらです。
とくに関係ないですが、私のブログはこちらです。
今回スコープ外のはなし
- ルーティング / vue-router2
- 状態管理・データ永続化 / Vuex
- テスト
こんな人におすすめ
- ある程度Vue.jsの雰囲気はわかったので簡単なVueアプリをつくってみたい人
- vue-cliで作ったアプリをherokuにデプロイしてみたい人
環境
vue-cli 2.8.1
※ 2017/06/28時点では vue-cli 2.8.2 がリリースされています
vue-cliのインストール
vue-cliはVue.jsを使う環境のテンプレートを用意してくれるコマンドラインツールです。
自分で環境を作るのは面倒なのでvue-cliを使って進めていきます。
たとえば $ vue init webpack my-project するだけでWebpack + vue-loader ホットリロードの環境が出来上がります。
プロジェクト作成
プロジェクトを作成するディレクトリに移動してから以下のコマンドでプロジェクトを作成します。
vue-todo-app はアプリ名なのでお好きなものに変更しても構いません。
$ vue init webpack vue-todo-app
今回はrouterとtestは説明しないのでvue-cliからの質問に以下のように答えてください。
（全部Yesでも特に問題はありません）
? Project name vue-todo-app
? Project description A Vue.js project
? Author tackeyy
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
プロジェクトができたら以下のコマンドを実行してアプリを起動します。
$ cd vue-todo-app
$ npm install
$ npm run dev
$ npm run dev をすると自動的にブラウザが開きます。
Todo listを作成する
コミットの内容
- デフォルトで入っている
Hello.vueとそれに関連する記述を削除 -
src/components/TodoList.vueでTodoリストを作成 - Todoリストをsrc/App.vueで読み込み
TODOを表示する
コミットの内容
- src/App.vueで表示するTODOの初期データを定義
- src/components/TodoList.vueでTODOの初期データを表示
-
src/App.vueで
TodoList.vueのテンプレートを呼び出し - 見た目を整えるためにSemantic UIをここで使っています
使用されているVue.jsの文法
<todo-list v-bind:todos="todos"></todo-list>
TodoList.vue に todos を渡しています。
TodoList.vue で props: ['todos'] とすることで、渡した todos を TodoList.vue で使用できるようになります。
データの受け渡しについてもう少し理解を深めたい場合は、[図解]Vue.js2.x系で親子コンポーネント間でデータの受け渡しをする方法がわかりやすかったので目を通してみてください。
今回は省略記法を用いていませんが、 v-bind には省略記法があり、以下のようにも書くことができます。
https://jp.vuejs.org/v2/guide/syntax.html#v-bind-省略記法
<!-- 完全な構文 -->
<a v-bind:href="url"></a>
<!-- 省略記法 -->
<a :href="url"></a>
<div class='ui centered card' v-for="todo in todos">
ある程度予測がつきますが、 v-for はfor文と同じです。
https://jp.vuejs.org/v2/guide/list.html#v-for
<p class="tasks">完了したタスク: {{ todos.filter(todo => { return todo.done === true }).length }}</p>
filter はVue.jsの機能です。完了したTODOの数を取得しています。
今見返すと、 todo.done === true と書かなくても良いですね。
{{ todos.filter(todo => { return todo.done }).length }}
<div class='ui bottom attached green basic button' v-show="todo.done">
v-show の右辺が真の場合は要素を表示します。
条件付きレンダリングでは v-if という似たような機能があります。
v-show はレンダリングしたものを display CSSプロパティで切り替えるのに対して、 v-if は条件が真だった場合に初めてレンダリングされるという違いがあります。
Vue.jsのドキュメントにも以下のようにあります。
とても頻繁に何かを切り替える必要があれば v-show を選び、条件が実行時に変更することがほとんどない場合は、v-if を選びます。
今回のケースではtodoの状態はぼちぼち変わることから、 v-show で良いのかなと思います。
TODOの編集
コミットの内容
-
TodoList.vueに記載していたTODOを1つのコンポートネント（ Todo.vue ）にしています
使用されているVue.jsの文法
<span class='right floated edit icon' v-on:click="showForm">
DOMイベントの購読してイベント発火できます。
上記の要素をクリックするとshowFormが呼ばれます。
TODOの削除
コミットの内容
- ゴミ箱アイコンをクリックするとTODOを削除できるようにしています
使用されているVue.jsの文法
<todo v-on:delete-todo="deleteTodo" ... </todo>
+ deleteTodo(todo) {
+ this.$emit('delete-todo', todo)
+ },
Todo.vue の親コンポーネント（ TodoList.vue ）の delete-todo で発火する deleteTodo 関数を呼び出しています。第二引数の todo は削除されるTODO自身です。
SweetAlertの導入
SweetAlert
いい感じのダイアログを出せるライブラリです。
本家のページで動作感が確認できます。
コミットの内容
- SweetAlertで必要なjs, cssをCDN経由で取得
- ここらへんでSweetAlertを使用してアラートを出すように修正
TODOの作成
コミットの内容
- CreateTodo.vueというコンポーネントを追加して、新しいTODOを作成できるようにしています
使用されているVue.jsの文法
今まで説明した文法だけなので特に説明はありません。
TODOを完了にする
コミットの内容
- PendingをクリックするとCompletedに変わるようにしています
使用されているVue.jsの文法
ここも今まで出てきた文法だけで事足ります。
Herokuにデプロイ
TODO: heroku側の設定、heroku-cliの導入、コミットの説明
（´-`）.｡oO（追記して欲しい方がもし入れば追記しますのでコメントください)
さいごに
説明が足りない部分や勘違いがあればぜひコメント等で優しく教えていただけると助かります。
もっとシンプルにかけるよ、などの指摘やプルリクなども歓迎ですー！
参考にした記事
https://scotch.io/tutorials/build-a-to-do-app-with-vue-js-2
http://www.travisluong.com/how-to-deploy-a-vue-js-app-to-heroku/
https://medium.com/@sagarjauhari/quick-n-dirty-way-to-deploying-vue-webpack-apps-on-heroku-4ab964ee536