ただいま新デザインバージョンのプレビュー中です。旧バージョンはこちら。不具合等はお問い合わせより報告お願いいたします。

これから始めるVue.js 2.0

カテゴリー
JavaScript
Vue.js
全9回

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

第1回 Vue.jsとは

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

第2回 使用頻度の高い基礎機能

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

第3回 コンポーネントの作成と連携

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

第4回 vue-loaderを使ったコンポーネント開発

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

第5回 vue-routerでルーティングを行う

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

第6回 使いやすい編集ページの実装

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

第7回 アプリケーションの状態管理

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

第8回 Storeパターンの適用

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

最終回 Vuexで状態管理をする

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