ECMAScript 2015 (ES6) まとめ (基本編)

ECMAScript 2015 (ECMAScript 6 / ES6 と呼ばれていたもの) は以前の ECMAScript 5 と比べるとかなりの構文、式、機能が追加されています。ざっくりとまとめ…としたくてもかなりの量があったので数回に分けてみていきたいと思います。

初回は JavaScript 実装する中でもコアとなりそうなデータ型、宣言、式と演算子、関数に関して見ていきます。次回以降ではクラス、モジュール、組み込みオブジェクトについて見ていきたいと思います。

関連記事

データ型
- 数値
  - 8進数、2進数
- 文字列
  - テンプレートリテラル
  - Unicodeコードポイントエスケープ
- オブジェクト
  - オブジェクトリテラル拡張
- 正規表現
  - "y" および "u" オプション
- Symbol型
宣言
- const
- let
式と演算子
関数

データ型

8進数 (Octal) / 2進数 (Bynary) リテラル

8進数と 2進数のリテラルが使えるようになります。 8進数は "0(ゼロ)" と "o(オー)" のプレフィックスを付けることで表現します。 "o(オー)" のプレフィックスは任意なのでなくても 8進数として扱われます。 2進数は "0(ゼロ)" と "b(ビー)" のプレフィックスを付けることで表現します。

構文

"0(ゼロ)" + ["o(オー)"] + "数字"  // 8進数

"0(ゼロ)" + "b(ビー)" + "数字"    // 2進数

利用例

var oval = 0o0012;  // 8進数の"12"   (= 10進数の"10")
var bval = 0b1010;  // 2進数の"1010" (= 10進数の"10")

console.log(oval);  // "10"
console.log(bval);  // "10"

テンプレートリテラル

組み込み式を利用できる文字列リテラルが定義できます。テンプレートリテラルはバッククォート(``) で文字列を囲みます。プレースホルダーはドル記号と波括弧(${expression})で囲みます。改行はエスケープを行わなくてもそのまま表現できます。テンプレートリテラルは生成時にプレースホルダ―が計算されるため、あらかじめプレースホルダーに代入する値は準備しておく必要があります。

構文

var text = `plane text ${expression}`;

利用例

複数行

// 複数行
var text = `O Romeo, Romeo! 
Wherefore art thou Romeo?`;

// 式内挿入
var a = 3;
var b = 4;
var text = '${a} + ${b} = ${a+b}';

console.log(text);   // "3 + 4 = 7"

Unicodeコードポイントエスケープ

文字列を表現する際、Unicodeコードポイントエスケープが利用できます。 "\u"のプレフィックスに続いて4桁の16進数を記載することで表現します。

構文

\uhhhh

利用例

var escaped = "\u3053\u3093\u306B\u3061\u306F";
console.log(escaped);  // "こんにちは"

オブジェクトリテラル拡張

オブジェクト生成に関して以下のようなことができるようになります。

プロパティ値の自動代入
算出プロパティキー
メソッド定義の省略

利用例

プロパティ値の自動代入。

オブジェクト生成時にスコープ内でプロパティ名と同名の変数がある場合、その変数値をプロパティの値として自動代入します。

var getMessage(id, message) {
  return {
    id,
    message
  };
};
var m = getMessage(123, 'Hello World');
console.log(m.message);  // 'Hello World'

算出プロパティーキー

オブジェクト生成時に動的なキー作成ができます。

var key = 'foo'
var o = {
  [key]: 'bar'
};
console.log(o.foo);  // 'bar'

メソッド定義の略記

オブジェクトにメソッドを追加する際、function を省略できます。

var o = {
  msg: 'hello world.',
  greet() {
    return this.msg;
  }
};

正規表現の "y" および "u" フラグ

正規表現で新しいフラグ y および u が使えるようになります。それぞれのフラグの意味は以下のようなものになっています。

y: lastIndexで指定された位置から始まる文字列に対してマッチングを行う
u: 指定されたマッチングパターンに対してUnicodeに関する機能を有効化する

利用例

var text = "1st 2nd 3rd 4th 5th";
var regexp = /\d\w\w/y

regexp.lastIndex;       // 0
text.match(regexp);     // ["1st"]
regexp.lastIndex = 2    // 2
text.match(regexp);     // null
regexp.lastIndex = 4    // 4
text.match(regexp);     // ["2nd"]

Symbol型

新しいプリミティブ型 Symbol が追加されます。 Symbol は必ずユニークな値をとる型です。

構文

var value = Symbol([name]);

name: シンボルを説明する文字列。

利用例

Symbol型 は同じ文字列で生成しても違う値とみなされます。完全に同じ値を利用したい場合、 Symbol.for メソッドを利用して Symbol型の生成および利用を行います。

var sym1 = Symbol('key1');
var sym2 = Symbol('key1');

console.log(sym1 === sym2);    // false

var sym3 = Symbol.for('key2');
var sym4 = Symbol.for('key2');

console.log(sym3 === sym4);    // true

宣言

const

読み取り専用の定数を生成できます。読み取り専用のため、再設定することができません。

有効なスコープは宣言されたグローバルまたは関数内になります。

構文

const name = value;

name: 定数名
value: 定数値

利用例

const MESSAGE = 'Hello World.';
console.log(MESSAGE);        // "Hello World."

MESSAGE = 'Hello World !!';  // <-エラーになる

let

ブロックスコープ内で有効な変数を宣言できます。宣言された変数値はブロック内だけで利用できます。

構文

let name = value;

name: 変数名
value: 変数値

利用例

var msg = 'Hello';

{
  // この範囲はブロックスコープ
  let msg = 'こんにちは';
  console.log(msg);    // "こんにちは"
}

console.log(msg);      // "Hello"

波括弧 ({}) で囲まれた範囲がブロックスコープとなるため、その範囲内だけが有効範囲となります。ブロックスコープを抜けるとブロックスコープ内の内容は破棄されるため、もとのスコープをたどって得られる値が表示されます。

var arr = [1, 2, 3, 4, 5];
for (let i = arr.length; i--;) {
  console.log(i);
}

変数 i はブロックスコープとして forループ の内部だけで有効な変数となります。

式と演算子

分割代入(Destructing assignment)

配列またはオブジェクトから任意のプロパティ値を取り出して代入する方法です。

構文

[a, b] = [1, 2];

({a, b} = {a:1, b:2});

オブジェクトへ分割代入する際は式として実行するために丸括弧でくくります。

利用例

単純な初期化

var a, b;

// 配列を使った例
[a, b] = [1, 2];

// オブジェクトを使った例
({a, b} = {a:1, b:2});

console.log(a);    // 1
console.log(b);    // 2

デフォルト値

var a, b, c, d;

// 配列を使った例
[a=1, b=2, c=3, d=4] = [, ,5, 10];

// オブジェクトを使った例
({a=1, b=2, c=3, d=4} = {c:5, d:10});

console.log(a);    // 1
console.log(b);    // 2
console.log(c);    // 5
console.log(d);    // 10

スワップ

var a = 5, b = 8;
[a, b] = [b, a];

console.log(a);    // 8
console.log(b);    // 5

必要な値の取り出し

var url = "https://garafu.blogspot.com/2015/06/regexp-sample.html";
var regexp = /^(\w+)\:\/\/([^\/]+)\/(.*)$/;
var [,protocol, host, fullpath] = regexp.exec(url);

console.log(protocol);    // "http"
console.log(host);        // "garafu.blogspot.jp"
console.log(fullpath);    // "2015/06/regexp-sample.html"

var name, age;

var getUser = function (id) {
  var name, kana, age, status;
  
  // 何か処理
  name = 'Yoko Nishikawa';
  age = 16;
  
  return {
    id,
    name,
    kana,
    age,
    status
  };
};

var {name, age} = getUser('0123');
console.log(name);      // "Yoko Nishikawa"
console.log(age);       // 16

スプレッド演算子 (Spread Operator)

配列が設定されている変数名に ... のプレフィックスを付けることで、複数の引数、複数の配列要素、複数の値を利用する場所で式が展開されます。

構文

...arg

利用例

関数の引数

var helloFunc = function (x, y, z) { };
var args = [1, 2, 3];
helloFunc(...args);

配列リテラル生成

var parts = [2, 3];
var full = [1, ...parts, 4, 5];
console.log(full); // "[1, 2, 3, 4, 5]"

分割代入

var [a, b, ...arr] = [1, 2, 3, 4, 5];
console.log(a);    // "1"
console.log(b);    // "2"
console.log(c);    // "[3, 4, 5]"

配列の結合

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
arr1.push(...arr2);

for ... of 文

カウント可能なオブジェクト(Array, Map, Set, String, TypedArray, DOMElementsTree, arguments) の明らかな要素のみを順に捜査します。 for ... in はプロパティ含めてすべての値を列挙するが for ... of は配列の要素のみを列挙します。

構文

for (variable of iterable) {
  statement
}

variable: 要素を代入する変数
iterable: カウント可能なオブジェクト
statement: 処理

利用例

var arr = [1, 2, 3];
arr.message = 'Hello World';

for (let item of arr) {
  console.log(item);
};
// -> 1, 2, 3
// 'Hello World'; は表示されない

関数

デフォルト引数 (Default Parameters)

関数の仮引数にデフォルト値を設定することができます。デフォルト引数は呼び出し時に評価されるので、オブジェクトは呼び出される度に生成されます。

構文

function [name]([param1[=defaultValue1][, ... [, paramN[=defaultValueN]]]]){
  // 何か処理...
}

利用例

var getMessage(name = 'tanaka') {
  return 'Hello ' + name + '.';
};

var message = getMessage();

console.log(message);       // 'Hello tanaka.'

残余引数 (Rest Parameters)

関数の最後の引数に「...」の接頭辞を付けることで、不特定多数の引数を配列として受け取ります。

残余引数(Rest Prameters) と arguments の違いは以下にあります。

残余引数は任意の名前を付けられる
残余引数は一部の引数値になりうる
argumentsはすべての引数を持つ
残余引数はarrayインスタンス
argumentsは独自オブジェクト

構文

var expression = function (a, b, ...args) {
}

expression: 関数名
a, b: 通常の引数。
...args: 残余引数。「...」のプレフィックスを仮引数名につけることで設定できる。

利用例

var log = function (...args) {
  console.log(args.join(','));
};

log("host", "status");    // "host,status"

アロー関数

C# のラムダ式のような記載ができます。アロー関数で定義された関数はすべて無名関数になります。

構文

基本

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression

引数が1個の場合、丸括弧は省略可能

(param) => { statements }
param => { statements }

引数が0個の場合、丸括弧は省略不可

() => { statements }

利用例

var hoge = function () {
  var self = this;
  this.arg = 0;

  // ES6より前の古い書き方
  window.setInterval(function () {
    self.arg += 1;
    $('#out').val(self.arg);
  }, 1000);

  // ES6の新しい書き方
  window.setInterval(() => {
    this.arg += 1;
    $('#out').val(this.arg);
  }, 1000);
};

ECMAScript2015 で追加変更された内容の中でもコアな部分についてまとめてみました。これだけでも今までにない JavaScript ライフが始まる予感がしますが… まだまだクラスやモジュールといった新機能もあります。続きはまた別の記事にて…。

参考記事

最後に… このブログに興味を持っていただけた方は、ぜひ「Facebookページにいいね！」または「Twitter のフォロー」お願いします！！