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

0 件のコメント

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

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

関連記事


目次


データ型

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

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

構文
"0(ゼロ)" + ["o(オー)"] + "数字"  // 8進数
"0(ゼロ)" + "b(ビー)" + "数字"    // 2進数
利用例
1
2
3
4
5
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}`;
利用例

複数行

1
2
3
4
5
6
7
8
9
10
// 複数行
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
利用例
1
2
var escaped = "\u3053\u3093\u306B\u3061\u306F";
console.log(escaped);  // "こんにちは"

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

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

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

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

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

1
2
3
4
5
6
7
8
var getMessage(id, message) {
  return {
    id,
    message
  };
};
var m = getMessage(123, 'Hello World');
console.log(m.message);  // 'Hello World'

算出プロパティーキー

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

1
2
3
4
5
var key = 'foo'
var o = {
  [key]: 'bar'
};
console.log(o.foo);  // 'bar'

メソッド定義の略記

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

1
2
3
4
5
6
var o = {
  msg: 'hello world.',
  greet() {
    return this.msg;
  }
};

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

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

y
lastIndexで指定された位置から始まる文字列に対してマッチングを行う
u
指定されたマッチングパターンに対してUnicodeに関する機能を有効化する
利用例
1
2
3
4
5
6
7
8
9
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型 の生成および利用を行います。

1
2
3
4
5
6
7
8
9
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
定数値
利用例
1
2
3
4
const MESSAGE = 'Hello World.';
console.log(MESSAGE);        // "Hello World."
 
MESSAGE = 'Hello World !!'// <-エラーになる

let

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

構文
let name = value;
name
変数名
value
変数値
利用例
1
2
3
4
5
6
7
8
9
var msg = 'Hello';
 
{
  // この範囲はブロックスコープ
  let msg = 'こんにちは';
  console.log(msg);    // "こんにちは"
}
 
console.log(msg);      // "Hello"

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

1
2
3
4
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});

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

利用例

単純な初期化

1
2
3
4
5
6
7
8
9
10
var a, b;
 
// 配列を使った例
[a, b] = [1, 2];
 
// オブジェクトを使った例
({a, b} = {a:1, b:2});
 
console.log(a);    // 1
console.log(b);    // 2

デフォルト値

1
2
3
4
5
6
7
8
9
10
11
12
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

スワップ

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

必要な値の取り出し

1
2
3
4
5
6
7
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"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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
利用例

関数の引数

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

配列リテラル生成

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

分割代入

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

配列の結合

1
2
3
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
処理
利用例
1
2
3
4
5
6
7
8
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]]]]){
  // 何か処理...
}
利用例
1
2
3
4
5
6
7
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
残余引数。「...」のプレフィックスを仮引数名につけることで設定できる。
利用例
1
2
3
4
5
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 }
利用例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 の フォロー」 お願いします!!