公式サイトの例は日本語環境で入力するとき、正しく動かない問題がありました。キーイベントの選択によっては、変換確定と単独で入力した[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

>> CodeSandboxへ

けれど、アプリケーションのプロジェクトファイル構成をみれば、単一ファイルコンポーネント(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■変数値の差し込まれた翻訳テキストが表示される

>> CodeSandboxへ

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のコードのさまざまな書き方は、知識や技術、あるいはつくるプロジェクトによって選択が変えられます。長短を比べて評価したうえで、もっとも適した手法をお選びください。