ES6+カジュアルトーク - connpass

ES6+カジュアルトーク に参加と発表してきました。

自分は明日には使えなくなるES7トークというES7の話をしてきました。

「runstant 始めるEcmaScript6 入門」 by @phi_jp

EcmaScript 6 のサンプル集 | runstant

  • runstant
    • jsfiddle的なツール
  • ハンズオン
  • let
  • 2進数を直接書ける
  • デフォルトパラメータ
    • 引数にデフォルト値を設定出来る
  • 分割代入
  • template strings
    • バッククオートでヒアドキュメントを書ける
  • class syntax

「Node.js v0.12で使えるようになるES6+αの機能」 by @yosuke_furukawa

Node.js v0.12で使えるようになるES6+の機能一覧 // Speaker Deck

  • Node.jsの0.12のビルドして入ってるV8のES6の機能について
  • --harmony-typeofが消えた
    • typeof nullが消えた
    • これからもtypeof nullはobjectのまま
  • harmony_arrow_function
    • =>

v0.12でデフォルトになった機能

  • Symbol
    • オブジェクトのkeyに利用できる特殊なキー
    • Symbolを使うと外のスコープから見えないキーを作れる
    • 外からキーを指定できないので、Privateなプロパティを作れる
    • Private properties in JavaScript — Curiosity driven
  • Map/Set
    • Collectionとなるオブジェクト
    • いわゆるマップオブジェクト
  • Set
  • for-of
    • iterableなものを繰り返し辿れる
    • Arrayなども回せる
    • Generatorはiterableなもの(nextで次へ行ける)
    • for-ofでGnerator関数を回せる
    • 自分でiteratorを作ることも出来る
 [Symbol.iterator](){
 
 }
  • Promise
    • 非同期関数をPromiseでラップして処理する
  • Object.observe
    • ES7の機能
    • ArrayやObjectの変更を正しく監視出来る

「ECMAScript6による 関数型プログラミング」 by @TanUkkii007

ECMAScript6による 関数型プログラミング

  • 関数型プログラミングの構成要素
  • const
    • 再代入できない変数
    • strict mode
  • 分割代入(デストラクチャリング)
    • 配列やオブジェクトからパターンで値を抽出
  • 再帰で繰り返し処理
    • ES6では末尾呼び出し最適化が入る
  • プロキシ
    • 既存のオブジェクトをラップしてその一部の内部メソッドの挙動を変えることが出来る
    • ラップする内部の挙動(トラップ)を指定して、既存処理に対して処理を割り込める
  • 配列に割り込んでコピーを返すようにする = 不変配列を作れる
    • getトラップの中で呼び出されたメソッド破壊的なメソッドだったら、sliceでコピーを返す
    • 透過的なAPIを保ちながら不変配列を作れる
    • Immutable Array

「Introduing Break the Web: Array extra methods case」by @Constellation

  • ES6でメソッドが追加されて
    • Array.prototype.values
    • Array.prototype.keys
    • Array.prototype.entries
    • 等便利なメソッドが入った
  • 既に同じ名前で定義してるやつがあるのでは…
    • 全く同じ挙動ならいいけどそうではない
  • withブロックの中ではES6の配列拡張は隠れてる
    • @@unscopablesというプロパティにvalues等が入ってる
    • Safe break the web
    • このハックによりES6になっても壊れない
  • MooTools
    • Array#contains
    • enumableなものとして定義してる
    • ES5ではcontainsはnon-enumable
    • ES6では変わった
    • jsfiddleやoutlook.com等が壊れた
  • Case Study 2
    • Array.prototype.valuesをChromeにPublicにした
    • "values" in という判定で処理をわけてた
      • Chromeでは常にtrueになるので壊れた
  • 学び
    • 短縮された判定をするな(in)
      • hasOwnProperty等を使いましょう
    • 今のオブジェクトの形に依存するな
      • 今定義されてるメソッド一覧の配列で定義しないで、列挙を使って実行時に取り出そう
      • ✘ ["map", "each"...]
    • use strictを使おう

「Closure CompilerのES6対応 あるいは ES6時代のAltJS生存戦略」 by @teppeis

Closure CompilerのES6対応 あるいはES6時代のAltJS生存戦略

  • Closure Compiler
    • JavaScript to JavaScript
    • 圧縮、最適化
    • JSDocベースの静的型付け
    • RefasterJS(自動リファクタリング)
  • Conformance(規約チェック)
  • JSDocベースの静的型付け
    • 冗長だけど、既存のJSとの親和がある
    • JavaScriptの進化に追従できる
    • コンパイルなしでも実行可能
  • Compile ES6 to ES3
    • in,outで指定出来る
    • 結構色々サポートしてる
  • ECMAScript 6 compatibility table
  • なぜClosure CompilerはTraceurを使わないか
    • Traceurは変換結果にコメントを残せない
    • Closure CompilerはJSDocが大事
    • パフォーマンスの問題
      • Closure Compiler + Traceurに変換が二重になる
  • Traceurの微妙なところ
    • 自前で実装する基準が良く分からない
    • ランタイムがでかくなる
    • コンパイル不要な機能も入ってる
  • AltJS
    • 各種AltJSが色々できた
    • ES6/7だけでも十分モダンなsyntaxに
    • 各ブラウザとかコンパイラがES6対応していってる
  • AltJSの選定基準
    • コンテキストにおけるJSの不満を解決
    • AltJSからの出口戦略
    • プロダクトとAltJSどっちが長生きかどうか
      • 開発の継続性
      • 移行コスト
  • Closure CompilerはECMAScript準拠の強み
    • JSDocなので、基本的に移行には強い
  • ES6時代のAltJS
  • 最強の出口は標準化してしまうこと
  • 大統一言語

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

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

明日には使えなくなるかもしれないES7+で提案されてる仕様についての発表をしてきました。

まだ実装もないような仕様についてが中心です。

ECMAScript 7の策定プロセス

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

このプロセスに沿ったStageごとに仕様紹介と最近話題のTypesやAtScript、Flowといった話についてをしました。

詳しくは明日には使えなくなるES7トークを下にスクロールするとキャプションが見えます。

メモ

  • FoldingText
  • Deckset

懇談会