これから始めるVue.js 2.0

全9回

このシリーズは、View層にフォーカスしたライブラリVue.jsの初学者向け入門です。Vue.js 2.x系を対象に基礎知識から、アプリケーションを構築するまで、基本事項をていねいに解説します。

最終回 Vuexで状態管理をする 2017年1月19日

Storeパターンに置き換えたメモアプリケーションを、Vue.js専用の状態管理のためのライブラリVuexで置き換えます。Storeパターンより堅牢なルールを適用し、さらに状態管理を適切に行えます。

Vue.jsで作成したメモアプリケーションの状態管理方法を、単純なStoreパターンに置き換えていきます。中央集権的な状態管理とはどのようなものか、これまでの状態管理方法との違いを確認しつつ、作業を進めます。

状態が複数の箇所から変更できるような設計では、次第にデータの流れが把握しにくくなります。解決のための状態管理の方法として、Storeパターンを解説します。

メモアプリケーションにルーティングをネストしつつ、メモの編集ページを実装します。メモの選択と編集が一画面で行えるように工夫します。Vue.jsを使うと、コンポーネント単位で見通しよく実装できます。

.vueファイルで置き換えたメモアプリケーションにvue-routerでルーティングを追加します。今回は、最新、新規メモ追加、一覧表示などの各ページをルーティングにマッピングしたのち、それらを作り込んでいきます。

前回作成したメモアプリケーションをもとに、最新表示、一覧表示、編集、新規作成など複数ページを持ったアプリを作成します。今回は開発用のローカル環境を整え、vueファイルへの置き換え作業から始めます。

簡単なメモアプリケーションの作成を通して、Vue.jsのコンポーネントの作成と、コンポーネント間のデータの受け渡しや、イベントハンドリングついて解説します。要所、要所で注意すべきポイントが出てきます。

この回では、Vue.js2.0の特徴的な機能を使って、簡単なアプリケーションを作るために、特に使用頻度の高い機能を中心に基本を解説します。合わせてVue.jsの開発環境を整えておきましょう。

まずはVue.jsとは何かを解説します。併せて、Vue.jsでの開発をサポートするツールにはどんなものがあるが一通り紹介します。このシリーズではVue.js 2.0の情報を元にしています。

運営会社