WEB+DB PRESS Vol.87 の ECAMScript 6 (2015) 特集を読んだ

ES2015 の特集。
気になったところを追記しつつまとめた。

WEB+DB PRESS Vol.87 は、2015年6月24日発売。

WEB+DB PRESS Vol.87

posted with amazlet at 16.06.22

佐藤鉄平小林明大石村真吾坂上卓史上原誠鳥居英佐藤歩泉水翔吾うさみけんた伊藤直也高橋侑久佐藤太一 hayajo 橋本翔西尾泰和中島聡はまちや2
技術評論社
売り上げランキング: 116,588

Amazon.co.jpで詳細を見る

追記コメントは強調で表記。

Contents

第1章 ECMAScript 6 とは何か

ES6 の主要新機能リスト … 下記なども参考に。

ES6 チートシート | プログラミング | POSTD
いまからはじめるECMAScript 6
Effective ES6
ES6 in Practice

ECMAScript 6 compatibility table
JavaScript エンジン毎に対応状況に違いが出る傾向。
PC 向けの Web では、ES6 に対応しない IE11 が 4 年以上残り続ける。 … Win10/IE11 は、なんと 2025 年 10 月 15 日まで。

Tech TIPS：一目で分かる、各Windows OSでのInternet Explorerのサポート終了時期 – ＠IT

第2章 ECMAScript 6 に触れてみよう

Babel は、ES6 トランスパイラ。
ポリフィルライブラリ core-js を内蔵。

Polyfill の導入はこうできるが、

<script src="/node_modules/babel-polyfill/dist/polyfill.js"></script>

Browserify / Webpack を使っていればこのようにできる。

require("babel-polyfill");

React にも対応。
Sprockets 4 で採用予定。 … 現在は v.4.beta2。v.3 では sprockets-es6 を利用する。
Babel のトランスパイルは ES5 の機能を駆使しているため、IE8 での動作に制限がある。

どの機能を使っていくべきか

ぜひ導入したい機能

アロー関数 … 第3章
オブジェクトリテラル拡張 … 第3章
ブロックスコープ … 第3章
ディフォルトパラメータ … 第3章
レストパラメータ … 第3章
スプレッドオペレータ … 第3章
分割代入 … 第3章
テンプレートリテラル … 第3章
Promise … 第5章
Map, Set, WeakMap, WeakSet … 第4章
String, Array, Object などの新しいメソッド … 第4章

検討の上で導入したい機能

クラス … 第3章
モジュール … 第6章
イテレータ … 第3章
Symbol … 第4章

トランスパイルが難しい機能

Generator … 第5章
末尾再帰最適化

末尾再帰による最適化 – Qiita

おおむね後述の各章で各機能について説明がなされている。
コメントのページで後述されている。

第3章モダンになった文法

アロー関数

this は自動的に補足されるため、self や bind を自分で書く必要はない。
意図的に this を補足している箇所では注意が必要。例えば Mocha でテストケースを書く場合。 … babel-preset-power-assert を利用すれば解決できる。
ES6 以降の API 設計では、this ではなく引数として渡す方が好まれるようになっていく。

クラスと継承

ES6 のクラスは、アクセス修飾子や抽象クラスがないシンプルな仕様。
組み込みクラスの継承が可能に。例えば Error を継承したカスタムクラスの定義がシンプルに書ける。

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

プロパティ省略記法, コンピューテッドプロパティ, メソッド定義

オブジェクトリテラルのプロパティ/メソッドのいろんな書き方（ES6版） – Qiita

let と const によるブロックスコープ

let でブロックスコープ変数を宣言する。
const で定数を宣言する。再代入は禁止されるが、オブジェクトの変更は可能。

関数パラメータの拡張

関数の引数のディフォルトパラメータをシンプルに指定できる。
レストパラメータで可変長の引数を取る関数をシンプルに書ける。

スプレッドオペレータ

スプレッドオペレータのドット記法により、シンプルに配列を引数に展開できる。

分割代入

配列やオブジェクトから、構造がマッチするデータを抽出できる。

イテレータと for/of 文

イテレータとは、集合から要素を繰り返し取り出すための統一されたインターフェース。
Iterable と Iterator が導入された。
Iterable を実装した反復可能オブジェクトとしては、Array, String, Map, Set, DOM NodeList などがある。
next() メソッドを呼ぶ処理は最も素朴な API で、普通は ES6 で導入された for…of 文を利用して繰り返し処理を行う。

JavaScript のイテレータを極める！ – Qiita

テンプレートリテラル

バッククォートで囲んだ文字列の途中に、変数を埋め込むことができる。
改行を含む複数行をそのまま記述できるが、先頭行や行頭の空白を無視する機能はない。
タグ付きテンプレート。テンプレートリテラルの前にタグ関数を書くことでテンプレートを引数にとれる。

JavaScript のテンプレートリテラルを極める！ – Qiita
テンプレートエンジン不要？JavaScriptで文字列処理を簡潔にするTemplate literal | HTML5Experts.jp

第4章強化された標準ライブラリ

Map

key-value 型のデータを扱う専用クラスとして導入された。
クラスで Iterable。

Map – JavaScript | MDN

Set

重複がないユニークな値の集合を表すデータ型。
Map と同様。多くのメソッドで互換性がある。

Set – JavaScript | MDN

WeakMap と WeakSet

Map や Set とほぼ同じだが、イテレータを伴うメソッドや clear メソッドがない。
イテレータがないということは、キーを知らないとアクセスできないということ。これを利用してキャッシュやプライベートプロパティを実現できる。

WeakMap – JavaScript | MDN
WeakSet – JavaScript | MDN

型付き配列

バイナリデータを効率的に扱うためのデータ型。

JavaScript リファレンス – JavaScript | MDN

Symbol, Proxy, Reflect

メタプログラミングを強化する仕組みとして Symbol, Proxy, Reflect が追加された。

Symbol – JavaScript | MDN
Proxy – JavaScript | MDN
Reflect – JavaScript | MDN

String

Unicode 対応の拡充。サロゲートペア。
便利なメソッドの追加。

String – JavaScript | MDN

Array

Array.from は、Array のようなオブジェクトやイテレータを Array に変換するメソッド。
Array.of は、引数を要素に持つ配列を生成するメソッド。
インスタンスメソッドの追加。keys, values, entries など。

Array – JavaScript | MDN

Object

Object.assign は、後ろに指定された引数のオブジェクトのプロパティをコピーするメソッド。jQuery の $.extend と同様。 … 例えばオブジェクト/ハッシュの結合・マージ。
Object.is は、=== による同値比較とおなじ性質のメソッド。NaN の改善。
Object.setPrototypeOf と __proto__
プリミティブ型の引数をとれるようになったメソッド。例外を投げなくなった。

Object – JavaScript | MDN

Math と Number

2進数と8進数のリテラル。
整数の取扱。
isNaN と isFinite の改善。
多数の算術関数の追加。

Math – JavaScript | MDN
Number – JavaScript | MDN

RegExp

String と同様に RegExp も Unicode 対応が強化された。
u フラグを追加するとサロゲートペアにもマッチする。

RegExp – JavaScript | MDN

第5章簡潔で柔軟な非同期処理

Promise によって、非同期処理のインターフェースが標準化される。
Generator によって、より直感的な非同期フロー制御が可能になる。

これまでの非同期処理と新たな非同期処理

（この例では）2つの非同期処理が直列に実行されているにも関わらず、コードはどんどんネスト化されていくため、フローが複雑になっていく。 … コールバック地獄
非同期な API は Promise で返す。
Generator を組み合わせて使うことで同期処理のようなスタイルで非同期処理を記述できる。
Generator をベースにしたライブラリ co。 … 後述の「非同期処理との組合せ」リンク先を参照。

Promise

Promise は、非同期処理を抽象化する統一的なインターフェース。

Promise.prototype.then() – JavaScript | MDN
Promise.prototype.catch() – JavaScript | MDN

Generator

Generator は、停止や再開のできる特殊な関数。イテレータを生成する関数でもある。

yield – JavaScript | MDN
Generator.prototype.next() – JavaScript | MDN

非同期処理との組合せ

以下を参照する。

JavaScript のジェネレータを極める！ – Qiita
generatorとJavaScriptの非同期処理 – Qiita
ジェネレータの解説と非同期への適用 – Block Rockin’ Codes
JavaScript Promiseの本
co, node-thunkify, koa

Promise と Generator の現在。

今後、非同期処理を書く場合、API を Promise に統一しておく。
Generator についてはサポートしたいプラットフォームの対応を待ってから、Promise と融合していくのが、安全な導入プラン。

第6章標準化されたモジュール管理システム

モジュール管理の仕組みが標準仕様として導入された。

これまでのモジュール管理

CommonJS モジュールは、Node.js で採用されているサーバサイド向けのモジュール管理仕様。require 関数で読み込む。
Browserify などを使ってブラウザで実行可能なファイルにバンドルさせることができる。
AMD は、ブラウザ向けに作られたモジュール機構。define 関数でモジュールを定義し、require 関数で読み込む。
記法が冗長で、性能が求められる場合には事前ビルドが必要となる。
それぞれメリットデメリットがあったため、ES6 モジュールが考え出された。

ES6 モジュールの基本

import と export

import – JavaScript | MDN
export – JavaScript | MDN

名前付きエクスポート(named exports)では、import するために export されたメンバ名を知っている必要がある。
ディフォルトエクスポート(default export)では、モジュール1つに対して1つのメンバに限り名前不要でインポートできる。
ES6 モジュールでは、モジュールを細かく分割してディフォルトエクスポートを中心に利用していくのが良い。
import と export はトップレベルに書く。関数宣言文と同じように巻き上げが発生し、どこで書いても冒頭で宣言した事になる。
ES6 モジュール内は、必ず strict mode となる。トップレベルの this は undefined となる。

ES6 モジュールの読み込み

ES6 ではモジュールの文法のみを定義し、識別子の解決方法や読込方法は実行環境に委譲されている。
各実行環境(Node.js, Browser, Loader API)の仕様はまだ決まっていない。

Loader

いま ES6 モジュールを使う方法

トランスパイラを利用することで ES6 モジュールを使うことができる。

Babel · The compiler for writing next generation JavaScript
systemjs/systemjs: Universal dynamic module loader

補遺

ES2015で始めるJavaScript入門 – Qiita
Let’s Learn ES6 – YouTube

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター！