初見でわかりにくいと思ったES2015

この記事はJavascript Advent Calendar 22日の記事です。

はじめに

ES2015ではクラスを始め、これまでのJavascriptにないたくさんの便利な仕様がたくさん追加されました。

そのため、ES2015使えばフレームワークなしでも管理しやすいアプリを作成できる ようになったのではないかと思います。
(※もちろん、複雑なアプリや大規模なアプリならフレームワークの導入を検討した方がいいと思います。)

そんなES2015、これまでのJSではまず見ることがない文法が新しく追加されています。
「リファレンス読む前にまずはネット上のサンプルを動かす」派の私には、

• サンプル見て何をしているのかわからない orz
• ネットでどうググればいいかわからない(キーワードどう指定すればいいんだよ・・・)

ということが結構あり、勉強し始めた時は苦労しました。

という事で、この記事では、「私がES2015勉強し始めの時よくわからなかった3つの文法」を紹介します。
この記事が、これからES2015を勉強しようと考えている人の少しでも助けになれば幸いです。

その１：スプレッド演算子 (...values)

...values のように、ピリオドを3つ繋げたやつです。3点リーダーと呼んだりします。
これはスプレッド演算子と言います。複数の引数をとる関数や配列に値をセットする（または取り出す）時に使用します。

// ３つの値を受け取り、その値をログに出力する
function spreadDemoFunc(value1, value2, value3) {
    console.log(value1, value2, value3);
}

// データ
let args = [2, 4, 6];

spreadDemoFunc(...args);  // 変数argsの値が展開され、spreadDemoFuncの引数にセットされる

// 実行結果: 2 4 6

let value1 = [1, 2, 3, 4, 5];
let value2 = [6, 7, 8, 9, 10];

let joinValue = [...value1, ...value2]; // value1, value2がそれぞれ展開され、1つの配列になる

console.log(joinValue);

// 実行結果: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

let value = [1, 2, 3, 4, 5, 6, 7, 8, 9];
[a, b, c, ...others] = value; // 先頭3件のデータをa, b, c それぞれ代入し、残りはothersに入れる
console.log(a, b, c, others);

// 実行結果: 3 1 2 3 [4, 5, 6, 7, 8, 9]

その２アロー関数 (() => {})

アロー関数関数は無名関数みたいなものですが、無名関数と違ってthisが宣言した場所のthisに束縛されます。
このアロー関数でわかりにくかったのは「書き方がいくつかある」ことです。
下記にアロー関数の書き方を３種類紹介します。下記はすべて同じ値を返します。

let helloWorld = (name) => {
    return('Hello '+ name + '!!!!');
};
console.log(helloWorld('Qiita'));

// 実行結果: Hello Qiita!!!!

let helloWorld = name => {
    return('Hello '+ name + '!!!!');
};
console.log(helloWorld('Qiita'));

// 実行結果: Hello Qiita!!!!

let helloWorld = name => 'Hello '+ name + '!!!!';
console.log(helloWorld('Qiita'));

// 実行結果: Hello Qiita!!!!

一番下のアロー関数はreturnを省略した書き方で「'Hello '+ name + '!!!!'」の部分が
returnされます。私は始めてこの記述を見た時に「何か代入でもするのか？？」とか思ってしまいました。

その３ オブジェクトの省略記法／分割代入

オブジェクトの省略記法／分割代入は、割とすぐに調べることができましたが、ネット上にあるES2015のサンプルコードを見たときに、「コーディングミス？？」と誤解したためピックアップしました。

ES2015より、下記のように、オブジェクト作成時にオブジェクトのキーを省略して代入することができるようになりました。

let a = 1, b = 2, c = 3;
let object = {a, b, c};
console.log(object, a, b, c); 

// 実行結果: Object {a: 1, b: 2, c: 3} 1 2 3

逆に、次のように書くとオブジェクトの中身を分割して変数に代入することができます。

let object = {a: 1, b: 2, c: 3};
let {a, b, c} = object;
console.log(object, a, b, c); 

// 実行結果: Object {a: 1, b: 2, c: 3} 1 2 3

まとめ

ES2015で追加された文法の中でも、ぱっと見で何をしているのかわかりにくいと感じた文法を3つ紹介しました。なお、今回掲載した記事はMDN を参考にして作成しました。

今回紹介したした３つの文法は、最新verのChromeであれば全てサポートされています。
なので、「Babelのようなトランスパイラを使ったことがない人」、「ES2015試すのにBabel使うのめんどくさい」と思っている人でも、Chromeのデベロッパーツールから手軽に実行できるので、ぜひ試してみてください！！