コラム：ES2015(ES6)

説明

ここでは、『ES2015 (ES6)』について少し触れます。

初心者の方は、このコラムの内容は無視して構わないです。飛ばして先に進んでください。

JavaScriptはWebブラウザで使用され、発展してきたプログラミング言語です。そのため、各Webブラウザによって、仕様が少しずつ異なっていました。そこで、その中核仕様を抜き出して標準化した『ECMAScript』というものが作られました。

『ES2015 (ES6)』は、ECMASCriptの6番目の版です。新しい仕様が色々と入っており、過去のJavaScriptとは違う文法も増えています。ここではその中から、初心者にも分かりやすいもの、初心者でも見かけるもの、初心者でも覚えておくと便利なものを紹介しておきます。

全ての仕様をきちんと把握するには、『ES2015 (ES6)』をキーワードにして、ネットで詳しい情報を調べるとよいです。

参考

『let』『const』

『let』『const』は『var』に似ています。『var』は『function() {～}』の中にスコープを持っていましたが、『let』『const』は『{～}』の間をスコープに持ちます。

『let』はローカル変数を作る宣言です。『const』は定数を作る宣言です。定数とは、書き換えできない変数のことです。

以下、『let』のコードの例を示します。

let hoge = 123;
document.write(hoge + "<br>");
{
    let hoge = 456;
    document.write(hoge + "<br>");
}
document.write(hoge + "<br>");

【結果】

123
456
123

以下、『const』のコードの例を示します。

エラーが出る様子を確認するには、［F12］→「コンソール（Console）」タブで、開発者ツールのコンソールタブを開いておきます。

try {
    const PI = 3.14;   // 「const」で定義した時には値を代入可能
    document.write(PI + "<br>");
    PI = -3.14;        // 後で値を代入しようとするとエラーになる
    document.write(PI + "<br>");
} catch(e) {
    document.write(e + "<br>");
}

【結果】

3.14
TypeError: Assignment to constant variable.

『アロー関数』

『アロー関数』関数を簡略化して書く方法です。『=>』という部分がアローの名前の理由です。

以下、まずは複数の引数がある場合です。

// これまでの関数
var fnc = function(a, b) {
    return a + b;
};
document.write(fnc(2, 3) + "<br>");

// アロー関数1
var arrow1 = (a, b) => {
    return a + b;
};
document.write(arrow1(3, 4) + "<br>");

// アロー関数2（処理がreturnだけなら、省略可能）
var arrow2 = (a, b) => a + b;
document.write(arrow2(4, 5) + "<br>");

次に、引数が1つだけの場合です。引数の『( )』を省略できます。

// これまでの関数
var fnc = function(a) {
    return a * a;
};
document.write(fnc(2) + "<br>");

// アロー関数1
var arrow1 = a => {
    return a * a;
};
document.write(arrow1(3) + "<br>");

// アロー関数2（処理がreturnだけなら、省略可能）
var arrow2 = a => a * a;
document.write(arrow2(4) + "<br>");

最後は、引数がない場合です。引数がない場合は、引数の『( )』を省略できません。

// これまでの関数
var fnc = function() {
    return 3;
};
document.write(fnc() + "<br>");

// アロー関数1
var arrow1 = () => {
    return 4;
};
document.write(arrow1() + "<br>");

// アロー関数2（処理がreturnだけなら、省略可能）
var arrow2 = () => 5;
document.write(arrow2() + "<br>");

気を付けなければならないことは、『アロー関数』を使うと、functionを使った際と、thisが指し示す対象が変わります。

これは分かりにくいので実例を示します。

// これまでの関数
var printName = function() {
    document.write(this + "<br>");
    document.write(this.myName + "<br>");
};
var human = {
    myName: "yuu",
    print: printName
}
human.print();

// アロー関数
var printNameArrow = () => {
    document.write(this + "<br>");
    document.write(this.myName + "<br>");
};
var humanArrow = {
    myName: "mamoru",
    print: printNameArrow
}
humanArrow.print();

【結果】

[object Object]
yuu
[object Window]
undefined

これまでの関数では、その関数（function）がぶら下がっているオブジェクト（呼び出し元のオブジェクト）を『this』とします。

『printName』関数は、『human』オブジェクトの配下なので、『this』は『human』（出力では『[object Object]』）になります。そのため、『this.myName』は『"yuu"』になります。

アロー関数では、その関数が書かれた時点で『this』が決定します。ここでは、関数の外で書いているので、ルートに当たるWindowオブジェクト（出力では『[object Window]』）になります。『Window.myName』は特に定義していないので、『undefined』（未定義）になります。

『テンプレート文字列』

これまで文字列は『"』（ダブルクオーテーション）や『'』（シングルクォーテーション）で囲ってきました。『`』（バッククオート）で囲むと、特殊な文字列を作ることができます。

この『`』（バッククオート）で囲んだ範囲は、改行を行なうことができます。また、『${変数名}』を文字列内に書くことで、プログラムの変数の値を、文字列内に挿入することができます。こうした文字列を、『テンプレート文字列』と呼びます。

var name = "遊";
var like = "手抜き";
var message = \`私の名前は${name}です。
好きなことは${like}です。\`;
document.write(message);

【結果】

私の名前は遊です。
好きなことは手抜きです。

『分割代入』

配列の要素を、まとめて変数に代入することができます。実例を見ると分かりやすいので、さっそく実例を見てみましょう。

var arr = [1, 2, 3];
var [a, b, c] = arr;
document.write(a + "<br>");
document.write(b + "<br>");
document.write(c + "<br>");

1
2
3

『関数のデフォルト引数』

関数の引数が指定されていない場合に、デフォルトの値（何も指定されていない場合の初期値）を設定できます。

以下、例です。引数のあとに『 = 5』『 = 10』としている部分が、デフォルトの値の設定です。

var fnc = function(a = 5, b = 10) {
    return a * b;
}
document.write(fnc(2, 3) + "<br>");
document.write(fnc(2) + "<br>");
document.write(fnc() + "<br>");