ES6（の基礎）を覚えて年を越そう

はじめに

気づいたらプロジェクトの中にjQueryやcoffee, ES6などが同居してる状況ってありますよね？？（あるんです）

どれが良い悪いは置いていっっったん置いておいて、プロジェクトの中で使用するものを統一したいと思ったりするわけです。今回は、その中でも今後スタンダードになる可能性があるES6の書き方をまとめた上で実際にコードを書く練習までできるようにしようと思います。

ES6とは

ES6とはECMAScript6の略語で、Ecma Internationalが定めたJavaScriptの言語仕様です。ES6は、2015年6月17日に採択された最新バージョンになります。ES6で新しく提供された仕様には以下のようなものがあります。それぞれ説明していきます。とりあえず主だったものから説明していきます。

• let/const
• テンプレート文字列
• for…of
• アロー関数
• class

ES6を使用するには

ES6は、対応しているブラウザがあまり多くありません。そのため、ES6のコードをブラウザで使用できるように変換する必要があります。今回は、ここには触れませんが、 Babelなんかが良いようです。

ES6の基本文法とか

let

letを使用することで、ブロックスコープで有効な変数を宣言できるようになりました。

これまでのJavaScript

ブロックスコープ（変数の有効範囲をif/for/whileなどのブロック内に限定するスコープ）がありませんでした。ブロックレベルのスコープがなかったので、以下のようなコードが有効になってしまいます。

if (true) {
  var hoge = 1;
}

console.log(hoge);
=>1

ブロックスコープが有効の場合は、if文の中でのみhogeという変数は有効です。if文の外でhogeを出力しようとするとエラーが出ますが、JavaScriptにはブロックスコープはないので、ブロックの外でも変数が有効になってしまいます。変数がどこからでも呼び出せてしまうので変数を定義する際に名前が競合していないかを確認する必要がありました。

これからのJavaScript（ES6）

letを使用して変数を宣言することで、ブロックスコープで有効な変数を宣言できます。ふう、安全ですね。

if (true) {
  let hoge = 1
}

console.log(hoge);
=>エラー

const

constを使用することで、定数を宣言できます。この定数もletと同じようにブロックスコープで有効です。

const hoge = 1;
hoge = 2
=> エラー

テンプレート文字列

`（バッククウォート）で文字列を囲むことで改行文字を表現できる文字列リテラルを作成出来ます。

これまでのJavaScript

\nを使って改行してました。。

var hoge = 'Hellow\nWorld';
console.log(hoge);
=>Hello[改行]World

これからのJavaScript

`（バッククウォート）で囲むと改行をそのまま表現することができるようになりました。

let hoge = `Hello
World`;
console.log(hoge);
=>Hello[改行]World

式展開

ES6では、${}の形式で文字列の中に式を埋め込むことができます。

これまでのJavaScript

+ を使用して連結していましたね。。。

var name = 'Taro';
console.log('My name is' + name + '.');

これからのJavaScript

+が不要になったことで、とてもすっきりしますね。

var name = 'Taro';
console.log('My name is ${name}.');

for ~ of …で配列の列挙

for ~ of …と書くことで配列の値を列挙できるようになりました。

これまでのJavaScript

これまではというと、for ~ in …という似たような記述がありました。が、ちょっと残念な（個人的に）結果が返ってくるのです。みてください。

let array = ['a', 'b', 'c'];
for (let ele in array) {
  console.log(ele);
}
=>0, 1, 2

なんとインデックスを列挙してしまうのです。。。どちらかといえば要素の方を列挙してほしいことが多いので残念だなと思ってました。

これからのJavaScript

for ~ of …を使うとちゃんと値の方を列挙してくれます！助かりますね。

let array = ['a', 'b', 'c'];
for (let ele of array) {
  console.log(ele);
}
=>a, b, c

アロー関数

アロー関数では、これまでの無名関数よりもシンプルに書くことができる。

#before
var sampleFunc = function(arg) {
  console.log(arg);
};

#after
var sampleFunc = arg => {
  console.log(arg);
};

1. functionを削除し、引数の後ろに=>をつける。
2. 引数が一つの時は()を省略できる。
3. 処理全体で一行の場合は、{ }とreturnも省略できる。

アロー関数では、thisを固定できる。以下のように書くことができるようになった。これまでのようにbindでthisを束縛したり、_thisみたいに別の変数に代入したりしなくてもよくなりました。

クラス

ES6からいよいよクラスを定義できるようになりました。まずはクラスで定義したコードを見てください。以下のコードは、Vehicle（車）を表すクラスです。color（色）、エンジン（engine）、speed（速度）をプロパティとして持ち、driveとstopをメソッドとして持ちます。

class Vehicle {
  constructor(color) {
    this.color = color;
    this.engine = false;
    this.speed = 0;
  }
  drive() {
    this.engine = true;
    this.speed = 40;
  }
  stop() {
    this.engine = false;
    this.speed = 0;
  }
}

let vehicle = new Vehicle(’red');
vehicle.drive();
console.log(vehicle.speed);
vehicle.stop();
console.log(vehicle.speed);
console.log(vehicle.engine);