【Vol.1】Vue.js + Vuexで作るTodoアプリのチュートリアル

こんにちは。

最近、Vue.jsを勉強しています。公式のドキュメントを読んだり、チュートリアルをやってみたり、ちょっとしたアプリケーションを作ってみたりしているのですが、初心者向けのチュートリアルがあまり充実してないと感じたので、Vue.jsとVuexを活用した簡単なTodoアプリを作るチュートリアルを書いてみたいと思います。

基本的には、こちらの本に書かれてあるTodoアプリと同じものですが、ちょっとカスタマイズしたり、自分がつまずいた箇所を追加で補足したり、かなり細かい粒度で書いていきたいと思います。

初回は、制作環境を構築し、タスク一覧を表示するところまで進めていきます。

Todoアプリの要件

まずはアプリの要件を確認していきましょう。

  • タスクは一覧で表示できる
  • タスクはタスク名、ラベルとともに追加できる
  • 各タスクにはチェックボックスを設け、完了/未完了がわかるようにする
  • タスクに紐づくラベルは追加できる
  • タスク一覧では、ラベルでフィルタし一覧を絞り込み表示できる
  • 現在のタスクをローカルストレージに保存/復元できる

事前準備

特にこれと言って用意するものはありませんが、Vue.jsの基本構文や考え方はざっくり理解できているという前提で進めていきます。

もしそれらがまだという方は、Vue.jsのチュートリアルに目を通しておくとスムーズに進められると思います。

制作環境

僕が作っている環境は以下のとおりです。

  • macOS – v10.14.2以上
  • npm – v6.8.0以上
  • node.js – v8.11.3以上
  • vue – v2.6.6以上

node.jsやnpmは適宜入れておいてください。

Vueの環境を構築する

今回はVue CLIを使って制作していきますので、まずVue CLIをインストールしましょう
Vue CLIはVueを使ったアプリケーションの開発の手助けをするツールのうちのひとつです。Vue.js単体でやると面倒な環境設定をセットアップしてくれるので、ラクに開発に着手することができます。

任意のディレクトリを作って、コマンドラインからVue CLIをインストールします。

その後、以下のコマンドでプロジェクトを作成します。今回は、vue-todo-tutorialというプロジェクト名にします。最初にEnterを押すと、自動でインストールが進んでいくのでしばらく待ちましょう。

上記のとおりにコマンドを入力すると、http://localhost:8080/ に以下の画像のようにサンプルが表示されます。
お疲れ様です。ここまで表示されたらVue-CLIのインストールは完了です。

Vuexをインストールする

また、今回はアプリケーションの状態管理にVuexを活用します。以下、公式サイトの説明です。

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。

中規模、大規模のアプリケーションを作るとなると状態管理がどんどん複雑化していきます。そこで、予めデータフローを設計し、設計した流れのとおりに状態を随時変更し管理することが重要になってきます。Vuexは、Vue.jsにといてその状態管理を行うためのライブラリなのです。
Vuexについての詳細は、今後随時説明していこうと思います。

Vuexは以下のコマンドを入力してインストールします。

状態管理に必要な記述(ストアという)は、store.jsに記載していきます。

テンプレートを用意する

それでは、環境が整ったところでタスク一覧を表示するところまで作って行きます。まず、store.jsを以下のように記述します。

次に、アプリケーションのエンドポイントmain.jsは以下のように書きます。

次に、トップレベルのテンプレートApp.vueを以下のように書きます。

タスク一覧を表示する

必要なファイルがひととおりそろったところで、タスクを表示できるようにしていきましょう。初期のタスクは決め打ちでいくつか用意しておきます。

状態管理を行うstore.jsを以下のようにしてください。
「ビールを買う」「広辞苑を買う」というタスクをそれぞれ用意し、完了したかどうかをチェックするためのdoneというキーを用意します。

定数として定義されているstore内に、stateを定義します。state内には、tasksというタスク一覧のオブジェクトを用意します。

stateとは、Vuexにおいてアプリケーション全体の状態を保持するオブジェクトです。「信頼できる唯一の情報源」として機能します。アプリケーション全体で参照する状態は、すべてこのstateに記述しておきます。

今回は、tasksというタスク一覧のオブジェクトをstateに定義しました。このタスク一覧はアプリケーション全体で使用するデータなので、コンポーネント内のdataではなく、store内のstateとして定義しておきます。

新たなタスクが追加されたらこのtasksに新たな要素が追加されたり、完了の有無もこのstateで管理したりするというわけです。

次に、タスクを表示するためのテンプレートを記述していきます。

21行目に注目してください。算出プロパティtasks()でなにやら値を返しています。ここでは、事前に定義しておいたstore内のstateから、tasksを読み込んでいます。先程のタスク一覧ですね

上記でtasksを読み込み、各タスクをv-forディレクティブで順次表示しています。

ここまで書いてエディタで保存すると、ブラウザが自動でリロードされ、タスク一覧が表示されるようになるかと思います。このホットリロード機能はVue-CLIに搭載されているものです。便利ですね。

タスクのチェックボックスはv-bindでtask.doneをバインディングしています。

今回は、いったんここまでとします。次回は、タスク一覧に新たなタスクを追加するところまでいきたいと思います。

この本がオススメ

このチュートリアルは、『Vue.js入門』を大幅にサンプリングしています。Vue.jsを勉強する人にはとてもオススメできる1冊ですので、ぜひ読んでみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)