こんにちは。Takitaです。
おもにバックエンド側を触ることが多いのですが、
フロント側も覚えたいなと思い最近Vue.jsに入門しました。
Vue.js公式のドキュメントは日本語訳されており、公式のサンプルもいくつかあるのですが、
さあこれから始めよう!と思う初心者には環境構築を含めてちょっとハードルが高い気がしました。
(私が調べた限り日本語で良さそうなチュートリアルはありませんでした。)
そこで今回は自分でTODOアプリをVue.jsで0からつくる手順を公開しているサイト (英語)を参考にしてTODOアプリを作成してherokuにデプロイするまでやってみたので、GitHubのcommitを追いながら簡単に解説をしてみたいと思います。
実際の動作は以下から確認できます。
https://vue-todo-app.herokuapp.com/
GitHubのリポジトリはこちらです。
https://github.com/tackeyy/vue-todo-app
vue-cli 2.8.1
※ 2017/06/28時点では vue-cli 2.8.2
がリリースされています
vue-cliはVue.jsを使う環境のテンプレートを用意してくれるコマンドラインツールです。
自分で環境を作るのは面倒なのでvue-cliを使って進めていきます。
たとえば $ vue init webpack my-project
するだけでWebpack + vue-loader ホットリロードの環境が出来上がります。
https://jp.vuejs.org/2015/12/28/vue-cli/
プロジェクトを作成するディレクトリに移動してから以下のコマンドでプロジェクトを作成します。
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
これで自動的にブラウザが開きます。
https://github.com/tackeyy/vue-todo-app/commit/39dc13b8ef2c36b92e315874786b99ac9c2d5455
Hello.vue
とそれに関連する記述を削除src/components/TodoList.vue
でTodoリストを作成https://github.com/tackeyy/vue-todo-app/commit/36b14ed0c2dd33b4e542e2be996a2c2bcd0c2485
TodoList.vue
のテンプレートを呼び出し<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 }}
https://jp.vuejs.org/v2/guide/list.html#配列の置き換え
<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 を選びます。
https://jp.vuejs.org/v2/guide/conditional.html#v-else
今回のケースではtodoの状態はぼちぼち変わることから、 v-show
で良いのかなと思います。
https://github.com/tackeyy/vue-todo-app/commit/c8c05328968a4a1cb23717cef3b6a4125d8f32ec
TodoList.vue
に記載していたTODOを1つのコンポートネント( Todo.vue )にしています<span class='right floated edit icon' v-on:click="showForm">
DOMイベントの購読してイベント発火できます。
上記の要素をクリックするとshowFormが呼ばれます。
https://jp.vuejs.org/v2/guide/events.html
https://github.com/tackeyy/vue-todo-app/commit/49bd51d11c7d566e04ab1cc975239e2e2962c95c
<todo v-on:delete-todo="deleteTodo" ... </todo>
+ deleteTodo(todo) {
+ this.$emit('delete-todo', todo)
+ },
Todo.vue
の親コンポーネント( TodoList.vue
)の delete-todo
で発火する deleteTodo
関数を呼び出しています。第二引数の todo
は削除されるTODO自身です。
https://jp.vuejs.org/v2/api/#vm-emit
https://github.com/tackeyy/vue-todo-app/commit/8c4373120b437ec0136cdecf06e34495b6ca8a35
いい感じのダイアログを出せるライブラリです。
本家のページで動作感が確認できます。
http://t4t5.github.io/sweetalert/
https://github.com/tackeyy/vue-todo-app/commit/a44ea7e7126af0e2937922cd22998ad43a5b0a85
今まで説明した文法だけなので特に説明はありません。
https://github.com/tackeyy/vue-todo-app/commit/51559fe45955d19c3c3ba3af1996868179a62001
ここも今まで出てきた文法だけで事足ります。
https://github.com/tackeyy/vue-todo-app/commit/1252239921600a891ed1534ea3bc1b7b0c31af65
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