by shigemk2

当面は技術的なことしか書かない

runstant 始めるEcmaScript6 入門 #es6_casual

ECMAScript

@phi

http://phi-jp.github.io/runstant/release/alpha/

みんなで一緒にコードを書いていこう

go to Runstant

jsdoitみたいなやつでECMAを書く

こんな感じでECMAのサンプルのシェアを

  • ネイティブに押され気味でJS使われなくなってきているのが悲しい
  • webglとか動くようになっているからJSの時代が来るはず

Node.js v0.12で使えるようになるES6+αの機能 #es6_casual

ECMAScript

Node.jsのECMA6対応状況

v0.12でのV8の採用バージョンは3.28(ちょっと古い)

どのJSから対応していくのか

v0.12で削除されたやつ

harmony_typeof

typeof null == 'null'になるようになるやつ(JSをdisるときの常套句 but もとから非推奨)

Brendan Eich

classのほうが価値があるし、opt-inのtypeof nullを"null"にするのは小さなアイデア

harmony_arrow_function

// before
var b = [1,2,3,4,5].map(function(x){return x * x};
// after
var a = [1,2,3,4,5].map(x => x * x)

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

Symbol

名前の衝突回避に使う

// before
var obj = {
_name :"kaicho"
}
// after
var _name = Symbol("_name")

Collectoins

var map = new Map()
map.set('yosuke', 'JavaScript')
// ループで回せる
// foreachが使える

var setp = new Set()
set.add("yosuke")
set.add("furukawa")
// foreachが使える

for-of

イテラブルなfor文

http://www.2ality.com/2012/06/for-of-ff13.html

generatorとfor-ofの組み合わせでイテラブルなやつが作れる

Promise

Object.Observe(ES7)

オブジェクトの監視

監視しているオブジェクトの何が更新されたかが分かる→更新検知

あとは非デフォルトのまま

ブロックスコープとか。

v0.12からのアレ

消えた

  • harmony_typeof

追加

  • Object.Observe
  • Promise
  • for-of
  • Collectoins
  • Symbol

待ち望まれているやつ

  • class
  • let
  • generator
  • String template

ES6による 関数型プログラミング #es6_casual

ECMAScript

関数型プログラミング

  • 副作用の排除
  • 関数オブジェクトを駆使

JSと関数型との関数

Schemeの第一級関数オブジェクトを受け継いだ言語

ECMA6

  • 変更不可能な変数宣言
  • パターンマッチ
  • 再帰による繰り返し
  • 不変なデータ構造

変更不可能な変数宣言

  • const(Scalaのvalみたいな束縛)

パターンマッチ

  • 代入の副作用を減らす
  • 分割代入 パターンによって値を抽出

再帰による繰り返し

  • 再帰のほうが代入の副作用を使わずに書けるが、スタックオーバーフローの危険がある
  • 末尾呼び出し最適化
  • 戻る位置をスタックに記憶しておく
  • 末尾呼び出し最適化が実装されたら解決される問題

不変なデータ構造

  • データ構造は不変なので、自身の値を変更しない

  • ECMAのプロキシオブジェクトを使えばそれが実現出来ちゃう

    • コードを実装して挙動を変えることを可能にする

  • プロキシによるイミュータブルな配列 破壊メソッドにsliceを挟んで非破壊メソッドに変えたり出来る

  • プロキシで作った不変配列と配列では使い方と挙動に違いはないが、破壊メソッドを使うときに挙動が変わってくる。不変配列でreserveとかを使っても操作後の配列の中身は変わらない

まとめ

関数型の機能をES6でどう実現化するか

  • const
  • 分割代入
  • 末尾呼び出し最適化
  • プロキシ

ESになっても完全な関数型にはならないが、表現力は上がっている

introducing break the web array extra methods case #es6_casual

ECMAScript

追加

Arrayまわりでいろいろ追加された

いろいろ問題

Array.prototypeってもうすでに個人で実装していないか？

genericな名前が多いので、便利メソッドが追加されたことで大問題

with

ES6が有効になった瞬間に壊れるコードがある

@@(あんすこーぱぶる)を利用してすごいダーティな実装をやってる

とりあえずwithやめろ

MooTools

enumerableだったのがES6になったらnon-enumerabuleになった

どうしようもない感じ

breaking outlook.com

chromeで一時期壊れる事件

まとめ

  • 短縮化されたコードを書くな
  • 今のオブジェクトのやり方をそのまま信じない 動的に対応出来る、将来対応できるような書き方をする
  • 正しいやり方をしましょう
  • with使うな

Closure Compiler 版 es6-table #es6_casual

ECMAScript
  • compile JS to better JS
  • 超圧縮と最適化
  • JSDocベースの静的型づけ

Google製品にはだいたい入っているので毎日使っているよ

JSDocベースの静的型づけ

  • 冗長but既存JSとの親和性(コンパイルいらない)
  • JSの進化に追随
  • コンパイルしない
  • どうせJSDoc書くだろ？

Githubに移行

対応

  • ES6
  • 型推論
  • RefasterJS(自動リファクタ)
  • Conformance(規約チェック)

compile ES6 to ES3

http://kangax.github.io/compat-table/es6/

対応チェックの自動化

Traceurを使わない理由

  • コメント残せない
  • パフォーマンス
  • 二重コンパイルしちゃう

微妙なところ

  • 自前実装の基準が不明
  • ランタイムがでかい
  • コンパイル不要部分はes6shimに任せたら?

AltJS

  • オレオレSyntax
  • うち有用なものをESにとりこむ
  • 型システム系のひとたちの不満解消
  • 学習コスト
  • AltJSとプロダクトはどちらが長生きするのか

ECMA準拠の強み

  • Closure Compilerは基本文法はJSそのまま
  • 独自syntaxのAltJSではそうはいかない

ES6時代のAltJS

  • 欲張らないES6ベース+独自色
  • でもビッグネームが型付きJSを始めたのは偶然ではない
  • ECMAScript Typesが提案に上がっている

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

ECMAScript

ES7

tc39/ecma262

  • stage0
  • stage1
  • stage2
  • stage3
  • stage4

今日はstage0の話

  • Exponentiation Operator stage2
  • Async Functions stage1
  • types and type annotation stage0(統一した構文に落としたい)
  • Flow(非公開)

まとめ

rwaldron/tc39-notes TC39のMTGノートがまとまってる ポッドキャスト感覚で読むといいかも

スライド集 #es6_casual

ECMAScript

集められたものだけ。

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

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

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

追記

追加しました。

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