Download PDF

明日には使えなくなるES7トーク

^ 明日には使えなくなるかもしれないES7+で提案されてる仕様についての発表です。 まだ実装も無いケースが多いですし、仕様として策定されるかも未確定なため本当に明日から使えないものばかりです。

自己紹介

right

azu

@azu_re

Web scratch, JSer.info

^ 今週末にJSer.infoのイベントをやります。 この話に関連することを別アプローチについてちょっと話す予定です。

ES7 Proposals

tc39/ecma262

^ ES7 Process, New Proposal Homeでこのリポジトリが作成された。 Wikiの代わりにGitHub使いつつ議論を進めていくという方針が出た。

用語

  • TC : Technical Committee = 専門委員会
  • TC39: ECMAScriptを策定してる専門委員会
  • プロポーサル : 仕様の提案
  • ECMAScript: JavaScriptの仕様
  • ES7: ECMAScript7

fit

^ Node ForwardというNode.jsのリリースが遅い問題をどうにかしようというコミュニティでDomenicさんが"TC39 is moving to a feature-based model."と言っていた https://twitter.com/mikeal/status/520973415553851393

TC39 is moving to a feature-based model

  • ECMAScript 7は機能ごとに仕様を策定していく(方針)
  • 仕様同士を独立して進めていく事でスピードをあげる
  • 仕様のモジュール化
  • tc39/ecma262に現在のプロポーサルが一覧がある
  • それぞれの仕様はTC39のプロセスで策定が進められる

^ ECMAScriptの策定は機能ごとにプロポーサルをだして、Draftを書いて進めていく方針。 機能レベルで決まっていれば、polyfillだったりそういうものも安定したものが早い段階で作りやすい。

^このリリースプロセスの初出は2013年5月のTC39 MTGのES6, ES7, ES8... Mark's Strawman Roadmapだと思う。

ECMAScript 7の策定プロセス [^1]

  • Stage 0. Strawman : ESに入れたいアイデアを議論する段階
  • Stage 1. Proposal : Strawmanを具体化、デモ作成、分析
  • Stage 2. Draft : 正式な仕様定義の形式で仕様書を書く段階
  • Stage 3. Candidate: Draftの実装等をしてフィードバック
  • Stage 4. Finished: ECMAScriptに正式採用 - Test262へ実装

[^1]:参考 [JS] ECMAScript6をまるっと学ぶ。重要用語とか、仕様策定の進め方とか、新機能とか。 - YoheiM .NET

^ Proposalはapproved的な意味で使われる。 少なくても承認された感じ。

今日話すのはStage : 0の話が中心

明日なくなるかもしれない仕様の話

こんな提案あったんだーぐらいの感覚でどうぞ

Object.observe :star: Stage 2

^ 結構前からある Googleっぽい空気ある

Object.observe()

  • JavaScriptオブジェクトの変更を監視する仕様
  • inline Google Chrome 36には既に載ってる
  • Object.observe() でデータバインディング革命 - HTML5 Rocks
// データを持ったモデル
var model = {};
// modelを監視する
Object.observe(model, function(changes){
    changes.forEach(function(change) {
        // 変更内容
        console.log(change.type, change.name, change.oldValue);
    });
});
// modelを変更する
model.some = "追加";

Exponentiation Operator :star: Stage 2

  • ** 演算子(べき乗演算子)の仕様
  • x ** y == Math.pow(x,y) のこと
  • 9月のTC39 MTGでStage 2まで上がった
  • 5.8 Exponentiation Operator Update

^ @rwaldronさんがメイン かなり速度が早い仕様

Exponentiation Operator

  • Python, CoffeeScript, F#, Ruby, Perl 等他の言語にもある
  • 仕様自体はMath.powそのままなのでシンプル
  • Traceurに実装済み
  • Add support for the exponentiation operator by arv · Pull Request #1216 · google/traceur-compiler

^ モチベーションとしては他の言語にも実装が存在することが主だった

Async Functions :star: Stage 1

Async Functions

  • asyncとawaitの仕様
  • Task.jsのspawnのシンタックシュガー的な感じ
  • Generator関数とPromiseを使った同期的な非同期処理
  • regeneratorにTranspileの実装がある
  • Transform async functions and await expressions by benjamn · Pull Request #101 · facebook/regenerator

^ By MS 新しい構文ではあるけど、内容的にはGeneratorとPromiseをつかったシンタックシュガー。 C#のあれ

Async on ES7

Currently async functions are for ES 7, and async generators I'm proposing for ES 7. --ECMAScript 6 returns JavaScript to original intent | InfoWorld

Array.prototype.contains :star: Stage 1

Array.prototype.contains のモチベーション

if (arr.indexOf(el) !== -1) {
    ...
}

というコードを無くして次のようにしたい

if (arr.contains(el)){
    ...
}

^ ちなみにhasじゃなくてcontainsなのは第二引数でfromIndexが指定できるのでこちらの方が意味的に合ってるから

BREAK THE WEBの問題

  • 1075059 – non-enumerable Array.prototype.contains is not web-compatible (breaks jsfiddle.net)
  • gist:28953b01e455078fb4f8
  • Array.prototype.contains solutions

^ MooToolsがArray.containsを拡張していて、 BREAK THE WEBが発生する。

^ Array.prototype.values breaks the web でも最近同じ事がおきてた。 Issue 647703003: Don't expose Array.prototype.values as it breaks webcompat - Code Review

BREAK THE WEB

続きは次回のTC39 MTGで

Types and Type Annotation :star: Stage 0

tc39-notes/sept-25.md

^ By MS Typed Objectsとは別のプロポーサルです。 Typed ObjectsはTypedArrayみたいに内部的にコンパイルにもっと情報を教えるために書くためのAPIなので、ちょっと違うもの。 Typed Objects Status Report - Baby Steps

Types and Type Annotations

  • JSDocやTypeScript等色々な型注釈が溢れてる
  • 短期目標
    • まずはその構文を予約しておきたい
    • その構文を使った場合はSyntax Errorに落とす

Types and Type Annotations

  • 長期目標
    • その構文でType Annotationsの実装、型チェック
    • d.tsのようなAPIのドキュメント定義に使いたい
  • 類似研究
    • TypeScript
    • Python

AtScript :star: Stage NaN

^ By Google(Angluarチーム) Typesとやりたいことはほぼ同じで型注釈の定義をSyntaxとして定義することがある。

AtScript

fit,right

  • Angular 2.0で使われてる(まだ未公開)
  • ES6+A(Annotations)
  • TraceurでES6 validに変換できる
    • traceur-compiler 入門
  • まずはAssert.jsを使ったruntime assertから

^ Introspection は実際のコードから型情報を得るAPI(要はオブジェクトで型情報を取って検証出来る拡張)

AtScript is ES6+A(Annotations)

  • Type Annotations
    • TypeScriptでやるやつ
  • Metadata Annotations
    • メタデータを定義する@Directive
  • Introspection
    • DIなどで実行時に使えるメタ情報の提供

AtScript Roadmap

inline

AtScript Resources

  • Keynote: AtScript
  • ES6 & Traceur
  • AtScript Primer
    • AtScript (was "ES6 +A") Q&A

Flow (Facebook) :star: Stage NaN

Flow (Facebook)

  • @Scale 2014: Recap of Web Track | Engineering Blog | Facebook Code
  • 未公開のツール(2014年中にリリース)
  • Facebook社内のAlt TypeScript
    • ES6 + TypeScriptの型定義

-- 3分で分かるFacebook Flow - teppeis blog

Flow(Facebook)

  • Compatible TypeScript Syntax
  • Code Intelligent Server
  • Committed to evolved with JS standard
  • Integrated with React + JSX

-- youtu.be/M8x0bc81smU?t=12m47s

^ まだ出てもないので何ともいえないけど、 Flowは全てTypeをつけていくのではなく、Typeの浸透していくような大規模の目的に欲しい感じ。 1のファイルじゃなくて、全体としてのTypeをつけていきたい感じ。 Hack/HHVMみたいな話だと思う。 後、サーバにクエリを投げて返すような仕組みを作ってやってるとの話。 型推論に強い仕組み、hackificatorみたいに元のコードを型付きへ変換していく仕組み(フロー)を持ってる。 詳しくは @teppeis さんに聞きましょう。

ECMAScriptと型

  • AtScriptとFlow(Facebook) どちらもTypeScriptのSyntaxをベースに置いている
  • TypeScriptのチームとAtScript/Flowのチームは話し合ってる

The TypeScript team is working with both the Flow and AtScript teams to help ensure that resources -- http://blogs.msdn.com/b/typescript/archive/2014/10/22/typescript-and-the-road-to-2-0.aspx

^ MSのTypeScriptの人がTC39へ提案してる。 AtScriptとFlowもオープンになったら議論に参加してくる可能性は高い。 Type Annotationsの実行環境として既に3つ存在してるため、仕様が上手くまとまれてば仕様として入る可能性は考えられる。 Extensible Web Manifesto のやり方

型まとめ

Dr.Axelがまとめてくれたので読みましょう！

  • Statically typed JavaScript via Microsoft TypeScript, Facebook Flow and Google AtScript

global.asap :star: Stage 0

^ ＝as soon as possibleのこと Nodeのasapモジュールとは微妙に違う話

  • ES6でJob Queuesというキューの仕組みが入った
  • ES6 Promises等で利用している
  • global.asap はそのキューに優先度を付けたいという話
// high order queue
global.asap(function(){

});

Trailing Commas in Function Call Expressions and Declarations :star: Stage 1

jeffmo/es-trailing-function-commas

関数呼び出しと定義のケツカンマ問題

inline

関数呼び出しと定義のケツカンマ問題

  • 現在の仕様だと関数定義の引数の末尾に,があるとエラー
  • 同様に関数呼び出しの末尾に,があってもエラー
  • これを許容したいという提案
  • モチベーション
    • gitなどでのdiffのわかり易さ
    • コード生成のし易さ

inline

^ 分かりやすい変更！！

おわりに

  • rwaldron/tc39-notes にTC39のMTGノートがまとまってる
    • Follow inline @rwaldron
  • ポッドキャスト聞く感覚で読むと面白いと思います。
    • TC39 MTGのMTGをしたい
  • 次回のMTGで話す事はtc39/agendasにまとめられています