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

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

#const宣言を使う
ECMAScript 6の変数宣言には、`var`に加えて、[`let`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/let)と[`const`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/const)が備わりました。ふたつともブロックスコープをもちます。`const`は値を上書きできない定数の宣言です。

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

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

#オブジェクトへのメソッド定義とアロー関数式
[オブジェクトにメソッドを定義する](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#メソッドの定義)とき、コロン(`:`)と`function`キーワードは省いてしまえます。また、名前のない関数には、[アロー関数式`=>`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/arrow_functions)を用いるとすっきりと書けます。

```js
// 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`を束縛しない](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions#Lexical_this)ということも、頭に置いておきましょう。

```js
// var filters = {
const filters = {

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

};
```

#オブジェクトリテラルのプロパティに用いるブラケット構文
オブジェクトのプロパティを参照するとき、ドット(`.`)のほかにブラケット`[]`が使えます。そして、ブラケットの中には変数や式が与えられました。[オブジェクトリテラルのプロパティ名](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#計算されたプロパティ名)にも同じ構文を用いることができるようになったのです。

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

```js
// 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の構文に書き替える](https://qiita.com/FumioNonaka/items/4ebb8a34e826bde58227)」をお読みください。

####サンプル001■Vue.js + ES6: TodoMVC
<p class="codepen" data-height="360" data-theme-id="0" data-default-tab="js,result" data-user="FumioNonaka" data-slug-hash="MWgMVXb" style="height: 360px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js + ES6: TodoMVC">
  <span>See the Pen <a href="https://codepen.io/FumioNonaka/pen/MWgMVXb">
  Vue.js + ES6: TodoMVC</a> by Fumio Nonaka (<a href="https://codepen.io/FumioNonaka">@FumioNonaka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>