Vue.jsの「TodoMVC の例」をECMAScript 6の構文に書き替える

Vue.js公式サイトの「TodoMVC の例」はインターフェイスが洗練されたTodoリストの作例です。コードの組み立てについては「Vue.js: TodoMVCをつくる」01〜05で解説しました。本稿では、このJavaScriptコードをECMAScript 2015(ECMAScript 6)の構文に書き替えます。

const宣言を使う

ECMAScript 6の変数宣言には、varに加えて、letとconstが備わりました。ふたつともブロックスコープをもちます。constは値を上書きできない定数の宣言です。

// var STORAGE_KEY = 'todos-vuejs-2.0';
const STORAGE_KEY = 'todos-vuejs-2.0';

値を書き替える変数にはlet、書き替えない定数にはconstを用います。ただし、const宣言した変数には再代入できないだけで、オブジェクトのプロパティは操作できることにお気をつけください。

オブジェクトへのメソッド定義とアロー関数式

オブジェクトにメソッドを定義するとき、コロン(:)とfunctionキーワードは省いてしまえます。また、名前のない関数には、アロー関数式=>を用いるとすっきりと書けます。

// var todoStorage = {
const todoStorage = {
    // fetch: function() {
    fetch() {
        // var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
        const todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
        // todos.forEach(function(todo, index) {
        todos.forEach((todo, index) =>
            todo.id = index  //;
        // });
        );
        todoStorage.uid = todos.length;
        return todos;
    },

};

アロー関数式は、引数に関数を渡す新しいArrayクラスのメソッドと組み合わせることがとくにお勧めです。関数本体が1文のときはブロックの波かっこ{}は省くことができ、その式の値は返されるのでreturnも要りません。なお、アロー関数式はthisを束縛しないということも、頭に置いておきましょう。

// var filters = {
const filters = {

    // active: function(todos) {
    active(todos) {
        // return todos.filter(function(todo) {
        return todos.filter((todo) =>
            // return !todo.completed;
            !todo.completed
        // });
        );
    },

};

オブジェクトリテラルのプロパティに用いるブラケット構文

オブジェクトのプロパティを参照するとき、ドット(.)のほかにブラケット[]が使えます。そして、ブラケットの中には変数や式が与えられました。オブジェクトリテラルのプロパティ名にも同じ構文を用いることができるようになったのです。

Vue.jsのカスタムディレクティブにはハイフン(-)が含まれることもあります。けれど、JavaScriptの識別子として扱えません。このとき、文字列を用いれば、プロパティ名に定められます。さらに、ブラケット[]でメソッド名として扱うこともできるのです。

// var app = new Vue({
const app = new Vue({

    directives: {
        // 'todo-focus': function(element, binding) {
        ['todo-focus'](element, binding) {
            if (binding.value) {
                element.focus();
            }
        }
    }
});

「TodoMVC の例」のJavaScriptコードをECMAScript 6の構文に書き替えたのがつぎのサンプル001です。CodePenに掲げました。ECMAScript 6には、クラスについても新たな構文が備わっています。興味のある方は「CreateJSのJavaScriptコードをECMAScript 6の構文に書き替える」をお読みください。

サンプル001■Vue.js + ES6: TodoMVC

See the Pen Vue.js + ES6: TodoMVC by Fumio Nonaka (@FumioNonaka) on CodePen.