ES2015(ES6)のまとめ

今回はJavaScriptのES2015(ES6)についてまとめてみました。

そもそもES2015とは何か？

ECMASCriptの6th Editionのこと。ECMAScript 6th editionの6を取ってES6と呼ばれていたが、2015年に標準化されたため正式名称はES2015になりました。


  • 「変数(letとconst)」

    letとconstで変数を宣言できます。 letは再宣言が不可能な宣言であり（再代入は可能）、constは再宣言と再代入が不可能な宣言。間違えて変数を二重に定義してしまったり、予期せぬ再代入を防ぐことができます。 varは使う理由がないので、やめましょう。

let name = 'soarflat';
console.log(name); // => soarflat

name = 'SoarFlat'; // 再代入する
console.log(name); // => SoarFlat

let name = 'SOARFLAT'; // 再宣言するとエラーになる

////////////////////////////////////

const NAME = 'soarflat';
console.log(NAME); // => soarflat

NAME = 'SOARFLAT'; // 再代入するとエラーになる



  • 「カーリーブラケット{}によるブロックスコープ」

    カーリーブラケット{}によるブロックスコープが有効であり、その中でletかconstで宣言することで、当該カーリーブランケットの中でのみ変数を有効にできます。

if (true) {
    var a = 1;
    let b = 2;
    const c = 3;
    console.log(a); // => 1
    console.log(b); // => 2
    console.log(c); // => 3
}

console.log(a); // => 1
console.log(b); // => undefined
console.log(c); // => undefined


  • 「アロー関数」

    無名関数の省略形の関数。 従来より簡潔な記述で関数を定義できます。

//従来の無名関数
var fn = function(a, b){
  return a + b;
};

//アロー関数
const fn = (a, b) => {
  return a + b;
};

const fn = (a, b) => a + b;

  • 「クラス構文」

extendsでクラスの継承も可能。静的メソッドも定義可能。継承先のコンストラクタを上書きする時はsuper()を入れるようにしましょう。

class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log("Hello, I'm " + this.getName());   
  }
  getName() {
    return this.name;
  }
  static getCount() {// 静的メソッドの定義
    return globalCount;
  }
}

// 継承先のクラス
class SubPerson extends Person {
  constructor() {
    super();// これを追加する
    this.name = 'Sub'
  }
}


  • 「関数のデフォルト引数」

    関数の引数に事前に値を定義できます。

// 引数の値を乗算する関数
function multiply (a = 5) {
  return a * a;
}

console.log(multiply()) // => 25
console.log(multiply(10)) // => 100


  • 「文字列の操作」

    テンプレート構文で、文字列中で変数を展開させるプレースホルダーは${...}の形式で記述します。

let val = "JavaScript"

// 今までのやり方
let str1 = "Hello " + val + "!" // => Hello JavaScript!

// テンプレート構文
let str2 = `Hello ${val}!` // => Hello JavaScript!


プレースホルダー内${...}で、計算や関数を呼ぶこともできます。

let a = 3, b = 5
console.log( `a + b = ${a + b}, a * 2 + b = ${a * 2 + b}` )
// => a + b = 8, a * 2 + b = 11

function sub(a, b) {
  return a - b
}
console.log( `a - b = ${sub(a, b)}` )
// => a - b = -2


「`」を使うと改行の際に、「\n」などを使わずにスムーズにできます。

console.log(
　`string text line 1
　string text line 2`
);

// "string text line 1
// string text line 2"


式内挿法についてもすっきりと記述できます。

let a = 5;
let b = 10;

console.log(
 `Fifteen is ${a + b} and
  not ${2 * a + b}.`
);

// "Fifteen is 15 and
// not 20."


  • 「for文」

おなじみのループ文。 「for...in」か「for...of」の2パターンがあります。

const array = [65, 55, 80, 100];

// indexを出力
for(const index in array) {
  console.log(index);
}
// => 0
// => 1
// => 2
// => 3

//　要素を出力
for(const index in array) {
  console.log(array[index]);
}
// => 65
// => 55
// => 80
// => 100


// 要素を出力
for(const value of array) {
  console.log(value);
}
// => 65
// => 55
// => 80
// => 100


// オブジェクトも扱える
const obj = {name: 'soarflat', country: 'Japan'}

for(const key in obj) {
  console.log(`${key} and ${obj[key]}`);
}
// => name and soarflat
// => country and Japan


  • 「スプレッド構文」

「...foo」の形で記述され、配列やオブジェクトの要素を文字通り展開する構文。 複数の引数や複数の要素が必要な式をより簡潔にかけるようになります。「.」は3つであることに気をつけましょう。

//---------------配列のケース---------------//
const foo = [1, 2];

// 配列のクローン
const bar = [...foo]; // => [1, 2]

// 要素を追加して新しい配列を生成
const baz = [...foo, 3, 4]; // => [1, 2, 3, 4]

// 配列をマージ
const hoge = [...foo, ...bar]; // => [1, 2, 1, 2]


//---------------オブジェクトのケース---------------//

const foo = { a: 1, b: 2 };

// オブジェクトのクローン
const bar = { ...foo }; // => { a: 1, b: 2 }

// プロパティを追加した新しいオブジェクトの生成
const baz = { ...foo, c: 3 }; // => { a: 1, b: 2, c: 3 }

// オブジェクトのマージ
const hoge = { ...foo, ...{ c: 3, d: 4 } }; // => { a: 1, b: 2, c: 3, d: 4 }

// 元のオブジェクトに同名プロパティがある場合は置き換わる
const fuga = { ...foo, b: 3 }; // => { a: 1, b: 3 }
const piyo = { ...foo, ...{ a: 3, b: 4 } }; // => { a: 3, b: 4 }