TypeScriptとECMAScript 6


来たる8/23(土)にLL Diverというイベントで[mozaic.fm出張版](http://ll.jus.or.jp/2014/program#mozaic.fm)があって、そこで適当にTypeScriptの何かを話す予定なので、ECMAScript 6の予習をしていきます。
司会のJxck先生は知識量豊富なので予習していかないとボコられて恥を晒して死んじゃうからね！
あんどうやすしさんは優しいと思うんだけど！！

## 参考資料

* [わかめのECMAScript6のはてブ](http://b.hatena.ne.jp/vvakame/ECMAScript6)
* [ECMAScript 6のドラフト(ログ)](http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts)
* [ECMAScript 6で提案されたもの](http://wiki.ecmascript.org/doku.php?id=harmony:proposals)
* [ECMAScript 6 compatibility table](http://kangax.github.io/compat-table/es6/)
* [es6-shim](https://github.com/paulmillr/es6-shim)
* [ECMAScript6をまるっと学ぶ。重要用語とか、仕様策定の進め方とか、新機能とか。](http://www.yoheim.net/blog.php?q=20140403)
* [traceur-compiler入門](http://yosuke-furukawa.hatenablog.com/entry/2014/07/31/093041)

`ECMAScript6をまるっと学ぶ。`はすごい参考になったのでぜひ読むべきそうすべき。
この辺りをガシガシ読んでこの記事を書いていきます。

## in TypeScript...

* [Aligning with ECMAScript 6](http://typescript.codeplex.com/wikipage?title=ECMAScript%206%20Status)

今やGitHubに開発の戦場を移して久しいTypeScriptですが、このページはGitHub wikiに移植されていなさそう。
一応[Roadmap](https://github.com/Microsoft/TypeScript/wiki/Roadmap)には2.0でpolyfillとか検討すんべみたいな感じ。

## 対応状況

[これ](http://wiki.ecmascript.org/doku.php?id=harmony:proposals)を見つつ対応状況を書いていく。
このページとドラフトrev26で採用されてる要素にすげー乖離がある気がするんだけどこれこういうものなの…。
まぁ、まだDraftのフェーズだからね…？っていうことなんすかね？
過不足とか正しい参照先とかあったら教えてください。

### arrow function syntax

* [arrow function syntax](http://wiki.ecmascript.org/doku.php?id=harmony:arrow_function_syntax)

TypeScript → [ある](https://github.com/teppeis/typescript-spec-md/blob/master/en/ch04.md#492-arrow-function-expressions) arrow function expression(アロー関数式)と呼ばれる。

### function to string

* [function to string](http://wiki.ecmascript.org/doku.php?id=harmony:function_to_string)

TypeScript → ランタイムの話なので関係ない。
AngularJSとかめっちゃこの仕様に依存してるので現状追認系の仕様なんじゃろか。

### function name property

* [function name property](http://wiki.ecmascript.org/doku.php?id=harmony:function_name_property)

```javascript
function f(){} assert(f.name === "f")
```

こういうやつらしい。

TypeScript → 動作するかはランタイムの話。コンパイルできるかは型として関数のnameプロパティにアクセスできれば良い。
現時点でのmaster/HEADではlib.d.tsに存在してないけどFunctionインタフェースを勝手に再オープンして追加すれば良い。
こんな感じ。

```typescript
interface Function {
  name: string;
}
```

### block scope bindings

* [block scope bindings](http://wiki.ecmascript.org/doku.php?id=harmony:block_scoped_bindings)
	* [let](http://wiki.ecmascript.org/doku.php?id=harmony:let)
	* [const](http://wiki.ecmascript.org/doku.php?id=harmony:const)
	* [block functions](http://wiki.ecmascript.org/doku.php?id=harmony:block_functions)?

TypeScript → [検討中 #19](https://github.com/Microsoft/TypeScript/issues/19)
個人的にはかなり欲しい。頑張れば arrow function expression のようにpolyfill的な実装を吐けると思うので、それやってほしいなぁ…。
Traceurちっくなことをつい求めたくなってしまうけど多分TypeScriptチームはそこはあんまし頑張る気がないと思う。

ていうか block functions ってなんなんじゃろ。

### destructuring

* [destructuring](http://wiki.ecmascript.org/doku.php?id=harmony:destructuring)
	* [refutable matching](http://wiki.ecmascript.org/doku.php?id=harmony:refutable_matching) これ現在のドラフトに入ってないよね？

分割代入のこと。[CoffeeScriptで昔から使える](http://coffeescript.org/#destructuring)ので知ってる人も多いと思う。
脱構造とかダサい訳をあてられてることもある気がする。

TypeScript → [検討中 #240](https://github.com/Microsoft/TypeScript/issues/240) [検討中 PR428](https://github.com/Microsoft/TypeScript/pull/428)

Arrayをtuple的に使うdestructuringについては既に実装が造られてin Reviewな感じっぽい。
フルサポートは多分TypeScript 2.0ぐらいになると思われる。

refutable matchingが`?`でoptionalを表現しているのはTypeScriptと一緒なんだけど、prefixとして使うのに対してTypeScriptでは`?`はpostfixな修飾として使っているのでわりと嫌な感じがする。まぁTypeScriptの仕様が変わっても自動変換ツール書けそうだからいいんだけど…。

### parameter default values

* [parameter default values](http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values)

TypeScript → [ある](https://github.com/teppeis/typescript-spec-md/blob/master/en/ch06.md#63-function-implementations) default values(デフォルト値付き引数)と呼ばれてる…かなぁ？

ES6のspecのRev26のドラフトだとGrammerにコレ書いてなくない…？記述が少ない全体的に。どういう状態なんじゃこれ。
wikiのほうの`Pattern Initialiser?`のPattenが何かわからない…。

### rest parameters

* [rest parameters](http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters)

TypeScript → [ある](https://github.com/teppeis/typescript-spec-md/blob/master/en/ch03.md#3722-parameter-list) rest parameter(可変長引数)と呼ばれている。

### spread

* [spread](http://wiki.ecmascript.org/doku.php?id=harmony:spread)

TypeScript → [検討中 #237](https://github.com/Microsoft/TypeScript/issues/237) [検討中 #238](https://github.com/Microsoft/TypeScript/issues/238)
たぶん2.0までこなさそう。

### proper tail calls

* [proper tail calls](http://wiki.ecmascript.org/doku.php?id=harmony:proper_tail_calls)

末尾再帰最適化の話かな。

TypeScript → ランタイムの話なので関係ない。
末尾再帰最適化できるできないについてコンパイラがサポートを与えるとかは可能な気がするけどまぁTypeScriptにはいらないんじゃないかな。

### direct proxies

* [direct proxies](http://wiki.ecmascript.org/doku.php?id=harmony:direct_proxies)
	* [proto climbing refactoring](http://wiki.ecmascript.org/doku.php?id=harmony:proto_climbing_refactoring)
	* [reflect api](http://wiki.ecmascript.org/doku.php?id=harmony:reflect_api)
	* [virtual object api](http://wiki.ecmascript.org/doku.php?id=harmony:virtual_object_api)
	* [proxies spec](http://wiki.ecmascript.org/doku.php?id=harmony:proxies_spec)
	* [extended object api](http://wiki.ecmascript.org/doku.php?id=harmony:extended_object_api)

あっこれmethod_missingとか実装できるやつや…(察し
耳から聞いた情報では、Dynamic ProxiesというAPI名だった気がするんだけど違ったらしい。

TypeScript → ハイパーくっそざっくり仕様を眺めた感じ、新しいsyntaxを導入するものではない(=ランタイムの話)になるのでユーザ側で対応可能な気がする。
後述するがmodule関連のところはもちろん難しい。

### simple maps and sets

* [simple maps and sets](http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets)

TypeScript → [一応定義はある](https://github.com/Microsoft/TypeScript/blob/master/bin/lib.d.ts#L1742) けど、generator関連のメソッドはなさそうな感じ？

### weak maps

* [weak maps](http://wiki.ecmascript.org/doku.php?id=harmony:proposals)

TypeScript → [一応定義はある](https://github.com/Microsoft/TypeScript/blob/master/bin/lib.d.ts#L1755) まぁMapやSetと同じ感じぽよい

### egal

* [egal](http://wiki.ecmascript.org/doku.php?id=harmony:egal)

`is`とか`isnt`みたいなオペレータが生える予定があったけど死んだっぽい。

TypeScript → function name propertyの項と同じで自分で適当に定義してやればよいだろう。

```typescript
interface Object {
  is(value1: any, value2: any): boolean;
}
```

### iterators

* [iterators](http://wiki.ecmascript.org/doku.php?id=harmony:iterators)

TypeScript → generatorがないと嬉しくなさそう。未定。
for-ofは[検討中 #7](https://github.com/Microsoft/TypeScript/issues/7)。

### generators

* [generators](http://wiki.ecmascript.org/doku.php?id=harmony:generators)

TypeScript → 未定。Issueすらない！
[Roadmap](https://github.com/Microsoft/TypeScript/wiki/Roadmap)によると、2.0で`Investigate async/await as a desugaring to ES6`とあるのでC#のasync/await相当の構文にしたいんだろうなぁ…という感じがする。
普通にgeneratorくれよ…。
async/awaitは[検討中 #5](https://github.com/Microsoft/TypeScript/issues/5)。うーん、これやる過程で入るような気もする…？

### generator expressions

* [generator expressions](http://wiki.ecmascript.org/doku.php?id=harmony:generator_expressions)

TypeScript → 未検討だと思う…。Issueなさそう。
マトリックスが簡単に生成できます的なやつ？嬉しさが微妙に理解できない。

### array comprehensions

* [array comprehensions](http://wiki.ecmascript.org/doku.php?id=harmony:array_comprehensions)

HaskellとかPythonでよくある配列内包表記ってやつすかね？

TypeScript → 未検討かなぁ…。Issueなさそう。
[for-of](https://github.com/Microsoft/TypeScript/issues/7)と一部ネタが被る。

### multiple globals

* [multiple globals](http://wiki.ecmascript.org/doku.php?id=harmony:multiple_globals)

なんのための仕様なんだこれは。現実として存在するシチュエーションに仕様を与える系のやつなのか？
モチベーションがわからん…。

TypeScript → たぶん型システムレベルで整合性取れれば問題ない気がするので現時点で対応可能だと思う。(Node.jsの`vm.runInNewContext`とかを想像して書いてる)

### modules

* [modules](http://wiki.ecmascript.org/doku.php?id=harmony:modules) (最新の仕様ではない)

TypeScript → [仕様確定待ち #117](https://github.com/Microsoft/TypeScript/issues/177) ES6での仕様が固まったら対応予定らしい。
TypeScriptの外部モジュールの仕様に変更があると思われる(派生して内部モジュールのimport句も多分変わりそう)。
destructuringの仕様を実装してからこっちの対応かなぁ。たぶん。

### modules standard

* [modules standard](http://wiki.ecmascript.org/doku.php?id=harmony:modules_standard)

おー。こういう定義になるんだ…。面白い。

TypeScript → modulesの対応がされないとこっちも解決されない。
lib.d.tsが分割される程度の影響じゃないかなぁ？

### object literals

* [object literals](http://wiki.ecmascript.org/doku.php?id=harmony:object_literals)

`<|`とかいう記法が導入されててビビる。
細かい記法が色々とあるなぁ…。
結論を先に書くと以下子要素全部未対応。

#### Set Literal [[Prototype]] Operator

TypeScript → [提案 #489](https://github.com/Microsoft/TypeScript/issues/489) が似てるけど蹴られてる。
後日ES6の気持ちをもっと理解したら聞いてみよう(聞かない可能性が高い

#### Object Literal Property Shorthands

TypeScript → 未対応。欲しがる人あまりいなさそうではある。

#### Object Literal Property Value Shorthand

TypeScript → [提案 #418](https://github.com/Microsoft/TypeScript/issues/418) 

#### Object Literal Computed Property Keys

TypeScript → 未対応。
そもそもSymbolがねぇ。

#### Object Initialiser super References

TypeScript → 未対応。
Set Literal [[Prototype]] Operator に依存してるのかな。

#### Object Extension Literal

de-destructuringみたいな…。

TypeScript → 未対応。

### maximally minimal classes

* [maximally minimal classes](http://wiki.ecmascript.org/doku.php?id=strawman:maximally_minimal_classes)

なんでこんな長い名前やねん。

TypeScript → [ある](https://github.com/teppeis/typescript-spec-md/blob/master/en/ch08.md)
generator method以外は全部あるんちゃうかなー。privateがあったりして独自の拡張もあり。
privateといってもSymbolを使っているわけではないのでJSに変換後のコードを見ると普通にアクセスできちゃう。
また、TypeScriptでは自由な式としてclassが記述できるわけではないので記述可能な箇所がES6に比べるとだいぶ制限される。
例えば関数の中にクラス定義を書いたりはできない。

### private name objects

* [private name objects](http://wiki.ecmascript.org/doku.php?id=harmony:private_name_objects)

gensymっぽい。つまりはLispだ！！(暴言

TypeScript → 未対応。

### quasis

* [quasis](http://wiki.ecmascript.org/doku.php?id=harmony:quasis)

かなり魅力的に見える。欲しい。

TypeScript → 未対応。
後日提案してみよう。

### typed object

* [typed object](http://wiki.ecmascript.org/doku.php?id=harmony:typed_objects)

TypeScript → 20秒仕様を眺めた感じ、型定義ファイルのレベルで対応できそうな気がする。`uint8`とかの型アノテーションぽく見えるやつは多分実際に存在するなんらかの値(Symbol？)だよね…？
あとはランタイムの問題。
わからん。実際やってみたらだめかも…？？

### observe

* [observe](http://wiki.ecmascript.org/doku.php?id=harmony:observe)

TypeScript → ランタイムの話なので関係ない。型定義ファイル作って頑張れ。

### その他

`Number.isFinite`などなど。だいたい便利関数生やした系だと思うので型定義ファイル作って気合でなんとかしろ！で収まるのではなかろうか。
たぶん。変な子が紛れ込んでたら教えてください。

### Promise

そういえばPromiseがないな…？？
[型定義ファイル](https://github.com/borisyankov/DefinitelyTyped/blob/master/es6-promise/es6-promise.d.ts)と適当なpolyfillでも使ってください。
azuさんの[Promise本](http://azu.github.io/promises-book/)は今後必読ということでいいと思います。

## ひとりごと

* こんすとさん知らないっていったらめっちゃdisられたけどES6調べてたらめっちゃこんすとさん出てきた
	* ていうか色々なスライドを読んだことがあった…
* JS界隈 必要とされる知識の範囲がクソほど幅広くてエッジな人々の話に混ざるのすごい大変だと思う
* ECMAScript 7の提案中の仕様とかってどこでチェックすればいいの…

## Postした後に得られた情報

コメントに @yosuke_furukawa が情報くれた。

コメントに [JS.next](http://js-next.hatenablog.com/) の hikaru_oao さんが情報をくれました。

<blockquote class="twitter-tweet" data-cards="hidden" lang="ja"><p>ES wikiってドラフト以外更新されてないきがするんだけど、今参照してもいいもんなのかなー? &quot;ECMAScript6 - TypeScriptとECMAScript 6 - Qiita&quot; <a href="http://t.co/EpqsmUrQE8">http://t.co/EpqsmUrQE8</a></p>&mdash; azu (@azu_re) <a href="https://twitter.com/azu_re/statuses/502258017316773888">2014, 8月 21</a></blockquote>

<blockquote class="twitter-tweet" data-cards="hidden" lang="ja"><p>少なくともTypedObject, Object.observeはES7以降にpostponeされたものなわけだが。ES6についてはDraft読んだ方が良いと思います。&#10;<a href="http://t.co/oi6nYjZlWb">http://t.co/oi6nYjZlWb</a></p>&mdash; さねさね (@saneyuki_s) <a href="https://twitter.com/saneyuki_s/statuses/502259436539613184">2014, 8月 21</a></blockquote>

<blockquote class="twitter-tweet" data-cards="hidden" lang="ja"><p>最新情報はメーリングリスト or <a href="http://t.co/jJo58cTrUd">http://t.co/jJo58cTrUd</a> とか、<a href="https://t.co/c67Unt772W">https://t.co/c67Unt772W</a> を読みましょう。 / “ECMAScript6 - TypeScriptとECMAScript …” <a href="http://t.co/YuPxw4Vjdf">http://t.co/YuPxw4Vjdf</a></p>&mdash; てらまこ (@teramako) <a href="https://twitter.com/teramako/statuses/502288334274584576">2014, 8月 21</a></blockquote>