[JavaScript General] WEB+DB PRESS Vol.87 の ECAMScript 6 (2015) 特集を読んだ
ES2015 の特集。
気になったところを追記しつつまとめた。
[markdown]
_WEB+DB PRESS Vol.87 は、2015年6月24日発売。_
技術評論社
売り上げランキング: 116,588
追記コメントは _強調_ で表記。
## 第1章 ECMAScript 6 とは何か
– ES6 の主要新機能リスト … _下記なども参考に。_
> * [ES6 チートシート | プログラミング | POSTD](http://postd.cc/es6-cheatsheet/)
> * [いまからはじめるECMAScript 6](http://www.slideshare.net/1000ch/begin-ecmascript6)
> * [Effective ES6](http://www.slideshare.net/teppeis/effective-es6)
> * [ES6 in Practice](http://www.slideshare.net/teppeis/es6-in-practice)
– [ECMAScript 6 compatibility table](http://kangax.github.io/compat-table/es6/)
– JavaScript エンジン毎に対応状況に違いが出る傾向。
– PC 向けの Web では、ES6 に対応しない IE11 が 4 年以上残り続ける。 … _Win10/IE11 は、なんと 2025 年 10 月 15 日まで。_
> * [Tech TIPS：一目で分かる、各Windows OSでのInternet Explorerのサポート終了時期 – ＠IT](http://www.atmarkit.co.jp/ait/articles/1503/11/news134.html)
## 第2章 ECMAScript 6 に触れてみよう
– [Babel](https://github.com/babel/babel) は、ES6 トランスパイラ。
– ポリフィルライブラリ [core-js](https://github.com/zloirock/core-js) を内蔵。
_[Polyfill](https://babeljs.io/docs/usage/polyfill/) の導入はこうできるが、_
“`html
“`
_Browserify / Webpack を使っていれば[このように](https://babeljs.io/docs/usage/polyfill/)できる。_
“`js
require(“babel-polyfill”);
“`
– [React](https://babeljs.io/docs/plugins/preset-react/) にも対応。
– Sprockets 4 で[採用予定](https://github.com/rails/sprockets/blob/master/UPGRADING.md)。 … _現在は [v.4.beta2](https://github.com/rails/sprockets/blob/master/CHANGELOG.md)。v.3 では [sprockets-es6](https://babeljs.io/docs/setup/#sprockets) を利用する。_
– 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](http://qiita.com/pebblip/items/cf8d3230969b2f6b3132)
_おおむね後述の各章で各機能について説明がなされている。
コメントのページで後述されている。_
## 第3章 モダンになった文法
### アロー関数
– `this` は自動的に補足されるため、`self` や `bind` を自分で書く必要はない。
– 意図的に `this` を補足している箇所では注意が必要。例えば Mocha でテストケースを書く場合。 … _[babel-preset-power-assert](https://www.d-wood.com/blog/2016/04/20_7953.html) を利用すれば解決できる。_
– ES6 以降の API 設計では、`this` ではなく引数として渡す方が好まれるようになっていく。
### クラスと継承
– ES6 のクラスは、アクセス修飾子や抽象クラスがないシンプルな仕様。
– 組み込みクラスの継承が可能に。例えば `Error` を継承したカスタムクラスの定義がシンプルに書ける。
### オブジェクトリテラルの拡張
– プロパティ省略記法, コンピューテッドプロパティ, メソッド定義
> * [オブジェクトリテラルのプロパティ/メソッドのいろんな書き方（ES6版） – Qiita](http://qiita.com/kura07/items/356bd37733f457d3177f)
### let と const によるブロックスコープ
– `let` でブロックスコープ変数を宣言する。
– `const` で定数を宣言する。再代入は禁止されるが、オブジェクトの変更は可能。
### 関数パラメータの拡張
– 関数の引数のディフォルトパラメータをシンプルに指定できる。
– レストパラメータで可変長の引数を取る関数をシンプルに書ける。
### スプレッドオペレータ
– スプレッドオペレータのドット記法により、シンプルに配列を引数に展開できる。
### 分割代入
– 配列やオブジェクトから、構造がマッチするデータを抽出できる。
### イテレータと for/of 文
– イテレータとは、集合から要素を繰り返し取り出すための統一されたインターフェース。
– Iterable と Iterator が導入された。
– Iterable を実装した[反復可能オブジェクト](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Iteration_protocols)としては、`Array, String, Map, Set, DOM NodeList` などがある。
– [next()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Generator/next) メソッドを呼ぶ処理は最も素朴な API で、普通は ES6 で導入された [for…of 文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for…of_statement) を利用して繰り返し処理を行う。
> * [JavaScript の イテレータ を極める！ – Qiita](http://qiita.com/kura07/items/cf168a7ea20e8c2554c6)
### テンプレートリテラル
– バッククォートで囲んだ文字列の途中に、変数を埋め込むことができる。
– 改行を含む複数行をそのまま記述できるが、先頭行や行頭の空白を無視する機能はない。
– タグ付きテンプレート。テンプレートリテラルの前にタグ関数を書くことでテンプレートを引数にとれる。
> * [JavaScript の テンプレートリテラル を極める！ – Qiita](http://qiita.com/kura07/items/c9fa858870ad56dfec12)
> * [テンプレートエンジン不要？JavaScriptで文字列処理を簡潔にするTemplate literal | HTML5Experts.jp](https://html5experts.jp/takazudo/17396/)
## 第4章 強化された標準ライブラリ
### Map
– key-value 型のデータを扱う専用クラスとして導入された。
– クラスで Iterable。
> * [Map – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map)
### Set
– 重複がないユニークな値の集合を表すデータ型。
– `Map` と同様。多くのメソッドで互換性がある。
> * [Set – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set)
### WeakMap と WeakSet
– `Map` や `Set` とほぼ同じだが、イテレータを伴うメソッドや `clear` メソッドがない。
– イテレータがないということは、キーを知らないとアクセスできないということ。これを利用してキャッシュやプライベートプロパティを実現できる。
> * [WeakMap – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/WeakMap)
> * [WeakSet – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/WeakSet)
### 型付き配列
– バイナリデータを効率的に扱うためのデータ型。
> * [JavaScript リファレンス – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference)
### Symbol, Proxy, Reflect
– メタプログラミングを強化する仕組みとして `Symbol, Proxy, Reflect` が追加された。
> * [Symbol – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol)
> * [Proxy – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
> * [Reflect – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Reflect)
### String
– Unicode 対応の拡充。サロゲートペア。
– 便利なメソッドの追加。
> * [String – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String)
### Array
– `Array.from` は、Array のようなオブジェクトやイテレータを Array に変換するメソッド。
– `Array.of` は、引数を要素に持つ配列を生成するメソッド。
– インスタンスメソッドの追加。`keys, values, entries` など。
> * [Array – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)
### Object
– `Object.assign` は、後ろに指定された引数のオブジェクトのプロパティをコピーするメソッド。jQuery の `$.extend` と同様。 … _例えばオブジェクト/ハッシュの結合・マージ。_
– `Object.is` は、`===` による同値比較とおなじ性質のメソッド。`NaN` の改善。
– `Object.setPrototypeOf` と `__proto__`
– プリミティブ型の引数をとれるようになったメソッド。例外を投げなくなった。
> * [Object – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object)
### Math と Number
– 2進数と8進数のリテラル。
– 整数の取扱。
– `isNaN` と `isFinite` の改善。
– 多数の算術関数の追加。
> * [Math – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math)
> * [Number – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number)
### RegExp
– `String` と同様に `RegExp` も Unicode 対応が強化された。
– `u` フラグを追加するとサロゲートペアにもマッチする。
> * [RegExp – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp)
## 第5章 簡潔で柔軟な非同期処理
– [Promise](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise) によって、非同期処理のインターフェースが標準化される。
– [Generator](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Generator) によって、より直感的な非同期フロー制御が可能になる。
### これまでの非同期処理と新たな非同期処理
– （この例では）2つの非同期処理が直列に実行されているにも関わらず、コードはどんどんネスト化されていくため、フローが複雑になっていく。 … _コールバック地獄_
– 非同期な API は Promise で返す。
– Generator を組み合わせて使うことで同期処理のようなスタイルで非同期処理を記述できる。
– Generator をベースにしたライブラリ [co](https://github.com/tj/co)。 … _後述の「非同期処理との組合せ」リンク先を参照。_
### Promise
– [Promise](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise) は、非同期処理を抽象化する統一的なインターフェース。
> * [Promise.prototype.then() – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then)
> * [Promise.prototype.catch() – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch)
### Generator
– [Generator](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Generator) は、停止や再開のできる特殊な関数。イテレータを生成する関数でもある。
> * [yield – JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield)
> * [Generator.prototype.next() – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Generator/next)
### 非同期処理との組合せ
_以下を参照する。_
> * [JavaScript の ジェネレータ を極める！ – Qiita](http://qiita.com/kura07/items/d1a57ea64ef5c3de8528)
> * [generatorとJavaScriptの非同期処理 – Qiita](http://qiita.com/hitsujiwool/items/316f3e8a41fb7dc3a119)
> * [ジェネレータの解説と非同期への適用 – Block Rockin’ Codes](http://jxck.hatenablog.com/entry/2014-01-12/generator-screencaset)
> * [JavaScript Promiseの本](http://azu.github.io/promises-book/)
_[co](https://github.com/tj/co), [node-thunkify](https://github.com/tj/node-thunkify), [koa](https://github.com/koajs/koa)_
### Promise と Generator の現在。
– 今後、非同期処理を書く場合、API を Promise に統一しておく。
– Generator についてはサポートしたいプラットフォームの対応を待ってから、Promise と融合していくのが、安全な導入プラン。
## 第6章 標準化されたモジュール管理システム
– モジュール管理の仕組みが標準仕様として導入された。
### これまでのモジュール管理
– CommonJS モジュールは、Node.js で採用されているサーバサイド向けのモジュール管理仕様。`require` 関数で読み込む。
– Browserify などを使ってブラウザで実行可能なファイルにバンドルさせることができる。
– AMD は、ブラウザ向けに作られたモジュール機構。`define` 関数でモジュールを定義し、`require` 関数で読み込む。
– 記法が冗長で、性能が求められる場合には事前ビルドが必要となる。
– それぞれメリットデメリットがあったため、ES6 モジュールが考え出された。
### ES6 モジュールの基本
– import と export
> * [import – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import)
> * [export – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export)
– 名前付きエクスポート(named exports)では、`import` するために `export` されたメンバ名を知っている必要がある。
– ディフォルトエクスポート(default export)では、モジュール1つに対して1つのメンバに限り名前不要でインポートできる。
– ES6 モジュールでは、モジュールを細かく分割してディフォルトエクスポートを中心に利用していくのが良い。
– `import` と `export` はトップレベルに書く。関数宣言文と同じように巻き上げが発生し、どこで書いても冒頭で宣言した事になる。
– ES6 モジュール内は、必ず `strict` mode となる。トップレベルの `this` は `undefined` となる。
### ES6 モジュールの読み込み
– ES6 ではモジュールの文法のみを定義し、識別子の解決方法や読込方法は実行環境に委譲されている。
– 各実行環境(Node.js, Browser, Loader API)の仕様はまだ決まっていない。
> * [Loader](https://whatwg.github.io/loader/)
### いま ES6 モジュールを使う方法
– トランスパイラを利用することで ES6 モジュールを使うことができる。
> * [Babel · The compiler for writing next generation JavaScript](https://babeljs.io/)
> * [systemjs/systemjs: Universal dynamic module loader](https://github.com/systemjs/systemjs)
## 補遺
> * [ES2015で始めるJavaScript入門 – Qiita](http://qiita.com/ABCanG1015/items/824681cb88676da4f9a8)
> * [Let’s Learn ES6 – YouTube](https://www.youtube.com/playlist?list=PL57atfCFqj2h5fpdZD-doGEIs0NZxeJTX)
売り上げランキング: 778
> * [どうやってECMAScript 6を学び始めるか](http://azu.github.io/slide/nodejs-es6/how-to-learn.html)
[/markdown]