Vue.js公式サイトには、学習のために「例」のコーナーが設けられています。「TodoMVC の例」は、そのサンプルのひとつです。SPA(シングルページアプリケーション)のチュートリアルとして、Todoリストはよく扱われます。
「TodoMVC の例」が備える基本的な機能は、それらと大きく変わりません。けれど、やたらとボタンが並ぶことなく、必要に応じて表示されたり、確定や取り消しは[enter]/[esc]といったキー入力で済ますことによる、洗練されたインタフェースが特長です(図001)。
図001■TodoMVCの画面表示
ちなみに、筆者が初心者向けに書いたチュートリアル「Vue.js + ES6入門」01-12は、ボタンだらけのダサダサなデザインを採用しました。その方が、コードはわかりやすくなるからです(サンプル001)。Vue.jsがはじめての人は、こちらから読まれた方がよいでしょう。このチュートリアルをテキストにしたハンズオンの「Vue.js入門講座」が開講されています。興味がありましたら、ご検討ください。
サンプル001■Vue.js + ES6: props validation and key attribute
See the Pen Vue.js + ES6: props validation and key attribute by Fumio Nonaka (@FumioNonaka) on CodePen.
Vue.jsは初心者から商用向けの規模の大きな開発まで、知識や技術に応じたコーディングができます。その手法や技術を解説したチュートリアルなどの記事がそれなりの本数書きたまりました。本稿はそれらのテーマと内容の簡単なご紹介です。実際に動きが確かめられるコードサンプルも交えています。詳しい解説は、それぞれに引用した記事をお読みください。
01 公式サイトの例をECMAScript 2015の構文にしてみる
「Vue.js + ES6: TodoMVCをつくる」01-05は、コードの組み立ては公式の例にもとづき、構文をECMAScript 2015(ES6)に改めたチュートリアルです(サンプル002)。
サンプル002■Vue.js + ES6: Vue TodoMVC 05
See the Pen Vue.js + ES6: Vue TodoMVC 05 by Fumio Nonaka (@FumioNonaka) on CodePen.
公式サイトの例は日本語環境で入力するとき、正しく動かない問題がありました。キーイベントの選択によっては、変換確定と単独で入力した[enter]キーが区別されないのです(図002)。そこで、本チュートリアルには「Vue.js: TodoMVCの例で日本語の項目が正しく入力できるようにする」にもとづく対処が加えてあります。
図002■日本語変換確定の[enter]キーで項目が追加されてしまう
02 Vue CLI 3のひな形から単一ファイルコンポーネントでつくる
「単一ファイルコンポーネント」は、コンポーネントごとにテンプレートのHTML記述とJavaScriptコード、そしてCSSスタイルをひとつのファイル(vue)にまとめる開発手法です。コンポーネントに分けて開発することにより、管理やテスト、使い回しもしやすくなります。ただし、開発環境を整えなければなりません。
<template>
<!-- HTML記述 -->
</template>
<script>
// JavaScriptコード
</script>
<style>
/* CSSスタイル */
</style>
Vue CLIを使えば、開発環境とともに単一ファイルコンポーネントのひな形プロジェクトが簡単にできます(「Vue CLI 3入門」01-06参照)。このひな形からTodoMVCアプリケーションをつくるのが「Vue.js + CLI入門」01-08です。でき上がったアプリケーションの見た目や動きは、前2項の作例と変わりません(サンプル003)。
サンプル003■vue-todo-mvc-07
けれど、アプリケーションのプロジェクトファイル構成をみれば、単一ファイルコンポーネント(vue)の組み合わせでつくられていることがわかります(図003)。
図003■単一ファイルコンポーネントによるプロジェクトファイル構成
Vue.jsにはアニメーションの機能も備わっています。公式の例にはないリスト項目のアニメーションを試したのが、「Vue.js + CLI入門 08: 要素にアニメーションを加える」です。実際の動きは、CodeSandboxサンプルでお確かめください。
03 v-forディレクティブの定めには一意のkey属性が必要
v-forは、複数データから要素を動的につくってページに差し込むディレクティブです。使う際の注意を解説した「Vue.js: v-forで項目インデックスをkey属性にしていいのか」がよく参照されています。
ディレクティブで加える各要素には、一意のkey属性を定めなければなりません。正しい属性値を与えないとき、不具合の起こる典型が前述のアニメーションです。この記事では、TodoMVCのアニメーションで、具体的にどのような動きになってしまうのかをわかりやすく示しました。
04 Vue I18nで多言語に対応させる
Vue I18nは、Vueアプリケーションを国際化(多言語対応)させるためのプラグインです(「Vue.js: Vue I18nでアプリケーションを多言語に対応させる」参照)。「Vue.js + Vue I18n: アプリケーションを多言語に対応(国際化)させる」は、前掲「Vue.js + CLI入門 08」でつくったアニメーションの作例を、日英2ヶ国語対応にします。
各国語の翻訳はロケールにわけて、変数(プロパティ)でもたせます(JSON形式に対応)。
const messages = {
en: {
message: {
archive: 'Clear completed'
}
},
ja: {
message: {
archive: '断捨離'
}
}
};
すると、VueI18nインスタンスのロケール(locale)を変えるだけで、テンプレートに定めた変数のテキストが切り替わるのです(図004)。実際の結果は、CodeSandboxサンプルでご覧ください。
const i18n = new VueI18n({
locale: 'ja',
messages,
});
new Vue({
i18n,
}).$mount('#app');
図004■変数値の差し込まれた翻訳テキストが表示される
05 単一ファイルコンポーネントにVuexを使う
VuexはVueアプリケーションに状態管理の仕組みを提供するライブラリです。アプリケーションにひとつだけつくられるStoreが状態を一手に引き受け、決まったやり方でしか変えられません。
単一ファイルコンポーネントのTodoMVCアプリケーションにVueを組み合わせたチュートリアルが「Vue.js + Vuex入門」01-08です。でき上がったCodeSandboxサンプルの見た目、動きとも、もちろん前掲の作例と変わりません。注目していただきたいのは、VuexのStoreモジュール(store.jp)が加わっていることです(図005)。
図005■VuexのStoreモジュールが加わったプロジェクトファイル構成
コンポーネントの組み立ては前掲02の単一ファイルコンポーネントのプロジェクトと変わりません。「Vue.js + CLI入門 02」02「項目をボタンで削除する」では、孫の項目(TodoItem)から子のリスト(TodoList)にイベント(remove-todo)を送り、さらに親(App)にバケツリレーして、項目が削除されました。
src/components/TodoItem.vue
[@click="removeTodo" → this.$emit('remove-todo', this.todo)]
↓
src/components/TodoList.vue
[@remove-todo="removeTodo" → this.$emit('remove-todo', todo)]
↓
src/App.vue
[@remove-todo="removeTodo" → removeTodo(todo)]
けれど、Vuexを使えば、データの参照・変更はStoreが一手に引き受けます。「Vue.js + Vuex入門 02」02「項目ごとにボタンで削除する」では、孫(TodoItem)からでも、Storeに直に削除を頼めば済むのです。データの変更については、Storeのモジュールがいわばハブになると捉えればよいでしょう。
src/components/TodoItem.vue
[@click="removeTodo" → this.$store.commit('removeTodo']
↓
src/store.js
[removeTodo(state, todo)]
Vueのコードのさまざまな書き方は、知識や技術、あるいはつくるプロジェクトによって選択が変えられます。長短を比べて評価したうえで、もっとも適した手法をお選びください。