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

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

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

WEB+DB PRESS Vol.87
WEB+DB PRESS Vol.87

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

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

第1章 ECMAScript 6 とは何か

  • ES6 の主要新機能リスト … 下記なども参考に。
  • ECMAScript 6 compatibility table
  • JavaScript エンジン毎に対応状況に違いが出る傾向。
  • PC 向けの Web では、ES6 に対応しない IE11 が 4 年以上残り続ける。 … Win10/IE11 は、なんと 2025 年 10 月 15 日まで。

第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章
  • 末尾再帰最適化

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

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

アロー関数

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

クラスと継承

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

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

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

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

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

関数パラメータの拡張

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

スプレッドオペレータ

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

分割代入

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

イテレータと for/of 文

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

テンプレートリテラル

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

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

Map

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

Set

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

WeakMap と WeakSet

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

型付き配列

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

Symbol, Proxy, Reflect

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

String

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

Array

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

Object

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

Math と Number

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

RegExp

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

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

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

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

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

Promise

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

Generator

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

非同期処理との組合せ

以下を参照する。

Promise と Generator の現在。

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

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

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

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

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

ES6 モジュールの基本

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

ES6 モジュールの読み込み

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

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

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

補遺

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター!
WINGSプロジェクト (2015-08-28)
売り上げランキング: 778