#KansumiB1
JavaScript.Next.returns
@ Developers Summit 2012 Kansai
by Tomoya ASAI (dynamis)
Mozilla Japan - Technical Marketing
last update on 2012.09.15

about:dynamis (Tomoya ASAI)
http:// dynamis.jp
@dynamitter
facebook.com/ dynamis
mailto: Tomoya ASAI (dynamis) <dynamis@mozilla-japan.org>

JavaScript 最新事情
- 開発者なら知っておきたい次世代 JS -
ECMAScript 5th & 6th Introduction
HTML5 や DOM API の話はしません

Agenda
JavaScript.Past
ECMAScript 5th
ECMAScript 6th
(Appendix)
(References)
from Past to Future

おことわり。
現行仕様は注目機能を抜粋
次世代仕様は実装ありを中心に
特に複数 and/or 長期実装あり
草案 (rev9) より広い範囲
提案 (proposal) を中心に扱うが
Proposal
試案 (strawman) も一部含む
Strawman
流動的な Module とか割愛…
今回はネタ的な話は少なめです m(_ _)m

See Also...
Other Presentations...

開発者ツール紹介
一通りの機能と使い方
Firefox 標準の開発者ツール
隠し設定やビルトイン関数のリ
ファレンスなども含めています
Firebug とその拡張機能
アイコンや背景画像を変更する
カスタマイズにも言及してます
http://r.dynamis.jp/devtools

Firefox OS & Marketplace
Web プラットフォーム
Web API が進化を続けている
Marketplace
Web アプリ配信システム
Firefox OS
Web がネイティブな OS
http://r.dynamis.jp/fxos

CSS 最新機能紹介
CSS の新機能紹介
新機能や昨年から変わった点
http://r.dynamis.jp/css2012

セキュリティ関連機能紹介
セキュリティ大事！
知っておくべき機能です
Content Security Policy
次世代セキュリティポリシー
Same Origin Policy はもう古い
http://r.dynamis.jp/sec

JavaScript.Past
History of JavaScript...

1995.04
Brendan Eich、Netscape へ
「ブラウザに Scheme を」
という に食いついたが...
JavaScript の父
現 Mozilla CTO
当時の写真ではありません

JavaScript の祖先
Java Scheme Self
構文 第一級関数 Prototype
primitive/object
Y2K バグ
JavaScript

1995.05
Brendan Eich、Mocha を実装
最初は 10 日程度でやっつけ実装
96年秋に再実装 (SpiderMonkey)
JavaScript と改名してリリース
Netscape と Sun の共同発表
改名はマーケティング上の理由
JavaScript の商標権は Sun (現 Oracle) が保有
Netscape (現 Mozilla) は Sun との契約の元で利用

Microsoft in 1996
3月 MS が Java ライセンス取得
JavaScript ライセンスも含む
8月 JScript 対応の IE3 リリース
MS Java 同様に非互換だらけ...

やばい！標準化しよう！
ECMA での標準化を開始
当初は W3C (or IETF) のつもり
だったが拒否される... (・・,)
Netscape は W3C 標準を無視
してたから当然の反応...
ブラウザ依存の API や DOM は
ECMAScript 仕様には含まない

余談: ECMA ミーティング
NOMBAS 創始者の挨拶:
我々は JavaScript に
何年も取り組んできた...
んなわけあるか！
Brendan は聞いたことすらない
MS は最初補欠部隊を投入し、
Brendan に負け精鋭部隊に交代
NOMBAS はスクリプト言語 Cmm による "Espresso Pages" を公開してた会社

ECMAScript 標準化
1997.06 ECMAScript 1st
最小限の言語仕様を標準化
1998.06 ECMAScript 2nd
ISO/IEC 16262 に合わせただけ
1999.12 ECMAScript 3rd
RegExp, try-catch etc...
2004.06 ECMAScript for XML (E4X)

ECMAScript 4th へ...
ECMAScript 初の抜本的改訂
Class, Namespace etc...
Yahoo! & MS らは反対
別途 ECMAScript 3.1 へ...
Douglas Crockford@Yahoo!
Chris Wilson@MS (現 Google)

Douglas Crockford@Yahoo!
Yahoo! JavaScript Architect
JSON, JavaScript Good Parts
JavaScript のセミナーでも有名
職業: The Boss of You
http://javascript.crockford.com/, http://crockford.com/

VS
The Boss of You Father of JS

ECMAScript 4th よ永遠に...
VS
The Boss of You Father of JS
Win! Lose...

JavaScript の父、永遠に…
Mozilla の CTO です
4 時間前の姿です
生きてます。
念のため。
http://instagram.com/p/PiKLezxDWt/

ECMAScript Harmony へ
2008.07 ECMA 3.1 ベースに注力
CodeName: Harmony
言語の抜本的改訂は断念
2009.12 ECMAScript 5th
Strict Mode, getter/setter etc...
2011.06 ECMAScript 5.1
ISO/IEC のために更新しただけ
合意が取れる範囲に絞って標準化が行われた

その頃 JS エンジンは...
2006.xx Google V8 開発開始
2006.11 Adobe Tamarin 公開
2008.06 SquirrelFish 公開
2008.08 TraceMonkey 公開
2008.09 Chrome & V8 公開
Brendan は 2006 年に V8 について知った時に OSS 化や
共同開発を提案したが Google は拒否し極秘開発を続けた...

進化する JS エンジン
2008.09 SquirrelFish Extreme
2010.12 Crankshaft for V8
2011.03 JägerMonkey (Fx4)
2011.09 RiverTrail (Intel & Moz)
2012.11 Firefox 17 に統合
2013.01 IonMonkey (Fx18)
高速化も高機能化もまだまだこれからです

ECMAScript 5th
first release of Harmony...

ECMAScript 5th
現行の標準仕様です
5 と 5.1 は区別する意味なし
IE9 以降はほぼフルサポート
Firefox4+, Chrome13+, Opera11.60+
IE9+ (strict mode 以外)
Safari 5.1+ (bind 以外)
詳細は互換表を参照: http://kangax.github.com/es5-compat-table/

後方互換スクリプト
最初に読み込んで後方互換に:
Augment.js
http://augmentjs.com/
ddr-ecma5
http://code.google.com/p/ddr-ecma5/
es5-shim
https://github.com/kriskowal/es5-shim/

Ready!
Native JSON
ボスの作った仕様。
IE8+ その他広くサポート
IE6,7 には json2.js で対応
http://json.org/js.html
http://json.org/

Native JSON
// JSON 文字列から JavaScript オブジェクトを生成
var obj1 = JSON.parse('[1, 2, 3, 4]');
var obj2 = JSON.parse('{"key": "value"}');
// JavaScript オブジェクトを JSON 文字列に変換
var obj = {};
obj.foo = "some property";
obj.bar = 1;
var json = JSON.stringify(obj);
// -> '{"foo":"some property","bar":1}'

JSON 利用の注意
IE8 は UTF-8 文字列を stringify
でエスケープ (uXXXX) される
unescape(JSON.stringify("文字
列").replace(/u/g, '%u'))
stringify 第2引数には注意
古い Firefox 等にバグあり
Date オブジェクトにも注意
ブラウザ間の挙動が異なる
受け渡しするデータによっては要注意

Ready!
Array Extra
配列操作メソッドを追加
indexOf, lastIndexOf,
every, some, forEach,
map, filter, reduce, reduceRight
古くから広く実装されてきた
Firefox 1.5 や 3 が最初に実装
IE6 8 には Augment.js など

Array Extra - Basic Usage
function isPositive(e, i, arr) { return (e > 0); }
[1,3,-1,-3,5].filter(isPositive);
// -> [1, 3, 5]
[2,5,10,3].every(isPositive);
// -> true
[3,2,-1,5].every(isPositive);
// -> false
[2,-5,1,3].some(isPositive);
// -> true
[-1,-20,0].every(isPositive);
// -> false

Array Extra - Basic Usage
function sum(a,b) { return a+b; }
function concatArray(a,b) { return a.concat(b); }
var nestedArray = [[0, 1], [2, 3], [4, 5]];
var flat1 = nestedArray.reduce(concatArray);
// -> [0, 1, 2, 3, 4, 5]
var flat2 = nestedArray.reduceRight(concatArray);
// -> [4, 5, 2, 3, 0, 1]
var total = flat1.reduce(sum);
// -> 15

Array Extra - Extra Usage
// 文字列の各文字に対して処理する例
function getcharcode(x) { return x.charCodeAt(0); }
Array.prototype.map.call("dynamis", getcharcode);
// [100, 121, 110, 97, 109, 105, 115]
// Array 以外にも Generic に使いたい場合は call する
// 関数定義を確認して使わないと予想外の結果になる例
[1,2,3,2,1].map(parseInt);
// [1, NaN, NaN, 2, 1]
// map はコールバック関数に (要素, インデックス, 配列)
// を渡すが parseInt は (文字列, 基数) を受け取る関数
// parseInt(1,0), parseInt(2,1), parseInt(3,2) ...

Ready! No Safari
Function.prototype.bind
"this" を固定した関数を定義
arguments も固定可能
Safari は未サポート
IE9+, Firefox4+, Chrome7+,
Safari5.3+ Opera11.60+ サポート
但し Safari は疑似実装か…
Augment.js などで(ほぼ)後方互換

Callback でも this を継承
var obj = {
before: function() { // this を self に保持する必要あり
var self = this;
document.addEventListener('click',
function(e) { self.handler(e) }, false);
},
after: function() { // bind 使えば self なしでシンプルに
document.addEventListener('click',
this.handler.bind(this), false);
},
handler: function(e) {
// イベントハンドラ呼び出し時にも this === obj にしたい
}
}
これだけのためなら bind 使わず self に保持するのでも十分ですが...

bind でメソッドを関数に
// Arguments などを Array に変換するショートカット定義
// call はメソッドとして使う必要があるので美しくない
var slice1 = Array.prototype.slice;
var argumentsArray1 = slice1.call(arguments);
argumentsArray1.every( ... ) // Array のメソッドが使える
// bind すれば関数として使えるシンプルなショートカットに
// this が固定されるのでメソッドとして使う必要なくなる
var slice2 = Function.prototype.call.bind(slice1);
var argumentsArray2 = slice2(arguments);
argumentsArray2.filter( ... ) // Array は便利...

bind で関数の引数を固定
// 2点間の距離
function distance(x1,y1, x2,y2) {
return Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2));
}
distance(2,11, 6,8);
// -> 5
// 原点からの距離 (最初の2つの引数を固定)
// 関数が this 使わないなら undefined で良い
var distanceFromOrigin = distance.bind(undefined, 0, 0);
distanceFromOrigin(6,8)
// -> 10

No IE No Shim
Strict Mode
良くあるミスをエラーとして検出
IE9 未サポートに要注意
IE10+, Firefox4+, Chrome13+,
Safari5.1+, Opera11.60+ が対応
IE10 はまだバグありだが期待...
オンにするだけなら後方互換
非互換コードを使わなければ...
テスト時だけ使うのもアリ
特に理由なければ Strict Mode でエラーにならないコードを書く習慣を付けましょう

Strict Mode
// ファイル冒頭で "use strict"; を書くとオンになる
"use strict";
var type = "foo";
// 未定義の変数への代入
typo = "bar";
// × asignment to undeclared variable typo
// 書き込み禁止や削除禁止のプロパティ操作
NaN = null;
// × NaN is read-only
delete Object.prototype;
// × property Object.prototype is non-configurable and
// can't be deleted
https://developer.mozilla.org/en/JavaScript/Strict_mode

Strict Mode
"use strict";
// オブジェクトのプロパティ名や関数の引数名の重複
var obj = { foo: 1, foo: 2 }
// × property name foo appears more than once in object
// literal
function f(bar, bar) { return bar; }
// × duplicate formal argument bar
var sum = 015 + // 8 進数リテラル (誤用)
197 +
142;
// × octal literals and octal escape sequences are
// deprecated
https://developer.mozilla.org/en/JavaScript/Strict_mode

Strict Mode
// Strict Mode は関数単位でも利用できます
(function dosomething() {
"use strict";
// 関数内だけ Strict Mode に
typo = "(・・)."; // × Error
})()
console.log(typo); // -> undefined
(function dootherthing() {
// こちらは Classic Mode
typo = "(・・)."; // グローバル変数を定義
})()
console.log(typo) // -> "(・・)."
https://developer.mozilla.org/en/JavaScript/Strict_mode

more about Strict Mode...
with 使用禁止
arguments.caller/callee 禁止
再帰するなら関数に名前を付ける
関数中では this=null != global
eval 中のコードは外部スコープに
変数を定義できない
スクリプトまたは関数内のトップ
レベル以外での関数定義禁止
その他いろいろ MDN 参照: https://developer.mozilla.org/en/JavaScript/Strict_mode

Ready! No Shim
Getter & Setter
プロパティ値の取得・設定を行
うための特別なメソッド
__defineGetter__ などは非標準

Getter & Setter
var incremantal = {
_n: 0,
get next() { return this._n++; }, // アクセス時に呼び出し
set next(n) { // 代入時に呼び出し
if (n >= this._n) this._n=n;
else throw "減らしちゃダメ！"
}
}
incremantal.next; // -> 0
incremantal.next; // -> 1
incremantal.next = 3;
incremantal.next; // -> 3
incremantal.next = 1; // -> "減らしちゃダメ！"

Memoization (Lazily Load)
var obj = {
get somethinglarge() {
// getter 自身を削除し、単なるプロパティに変更
delete this.somethinglarge;
return this.somethinglarge = new Large();
}
}
// ここまで読み込んだだけでは new Large() されない
// = getter 定義のコストしかかからない
... obj.somethinglarge ...
// 最初にアクセスした時に new Large() される
... obj.somethinglarge ...
// 2 度目からは new されずに再利用される
使うと限らないが繰り返し使う大きなオブジェクトがある時の Perf Tips

Ready! No Shim
seal & freeze
オブジェクトを静的に
間違って書き換えるのを防止
元に戻すことはできない
seal: プロパティ追加・削除禁止
freeze: プロパティ変更禁止
Strict Mode では例外を発生
seal/freeze されてるかどうかは isSealed/isFrozen で確認できる

seal
var obj = { foo: 1, bar: 2 };
obj.foo = 3;
obj.baz = 4;
delete obj.bar;
console.log(obj);
// -> { foo: 3, baz: 4 }
Object.seal(obj);
obj.foo = 5; // 既存プロパティは変更可能
obj.bar = 6; // プロパティ追加は黙って無視
console.log(obj);
// -> { foo: 5, baz: 4 }
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/seal

freeze
"use strict"; // 黙って無視せず例外を発生させる
var obj = { foo: 1, bar: 2 };
obj.foo = 3;
obj.baz = 4;
delete obj.bar;
console.log(obj);
// -> { foo: 3, baz: 4 }
Object.freeze(obj);
obj.foo = 5; // × obj.foo is read-only
obj.bar = 6; // × obj.bar is not extensible
console.log(obj);
// -> { foo: 3, baz: 4 }
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/freeze

and more...
オブジェクト指向サポート系
Object.create
Object.defineProperty
Object.getPrototypeOf
Object.keys
Object.getOwnPropertyNames
...

and more...
その他いろいろ...
String.prototype.trim
Array.isArray, Date.now
Date.prototype.toISOString
NaN, Infinity, undefined 定数化
preventExtensions,isExtensible
perseInt("03") なども10進数に
...

summary:ECMA5th
Strict Mode でミスを減少
JSON や Array 関数が便利に
オブジェクト指向周りも強化
基本的に構文は変化なし
後方互換は Shim で対応

New...
Talk about New Thing...

新しいといえば…
iPhone 5 話題ですね。
新しい iPhone とは呼ばない…
個人的には電話いらないので
iPod touch の方が気になる
一応テスト用の iOS 端末いるし
個人的には京都銀行に
ながーーーい iPhone して欲しい

ふぉくすふぉん！
これがホントの
新しい iPhone!?

ECMAScript 6th
Next release of Harmony...

ECMAScript 6th の目標
より書きやすい言語
想定用途: 複雑なアプリ、ライブラリ
次仕様のコードジェネレータ
テスト可能な仕様へ
相互運用性を向上
可能ならデファクトを採用
バージョニングは単純に
静的検証も可能に
実行時エラーよりコンパイル時エラー
http://wiki.ecmascript.org/doku.php?id=harmony:harmony

この表古くてゴメン

後方互換スクリプト
最初に読み込んで後方互換に:
es6-shim
https://github.com/paulmillr/es6-shim

Proposal
Simple Sets
他の言語にもある Set
= Python: set, Ruby: Set,
Java: java.util.HashSet,
C++: std::unordered_set
Firefox12+, Chrome18+
Chrome は about:flags で有効化
Fx17 から Iterable (for-of など可)
未実装でも ec6-shim で互換に
http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets

Simple Set
var set = new Set();
// 集合に追加・確認・削除
set.add("Firefox");
set.add("Thunderbird");
set.add(+0); set.add(NaN);
set.has("Firefox"); // -> true
set.has("Sunbird"); // -> false
set.delete("Firefox");
set.has("Firefox"); // -> false
// -0 と +0 は区別される, NaN は区別されない
set.has(-0); // -> false
set.has(NaN); // -> true

Proposal
Simple Maps
他の言語にもある Map
= Python: dict, Ruby: Hash,
Java: java.util.HashMap,
C++: std::unorderd_map
Firefox12+, Chrome18+
Chrome は about:flags で有効化
Fx17 から Iterable (for-of など可)
未実装でも ec6-shim で互換に
http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets

Simple Map
var map = new Map();
var str = "Mozilla", obj = {}, func = function(){};
// Map に値を格納
map.set(str, "Firefox");
map.set(obj, "Thunderbird");
map.set(func, "Japan");
// キーに対応する値を取得
map.get(str); // -> "Firefox"
map.get(obj); // -> "Thunderbird"
map.get(func); // -> "Japan"
// 設定したキーと引数を === 的に比較して検索されることに注意
map.get("Mozilla"); // -> "Firefox"
map.get({}); // -> undefined
map.get(function(){}) // -> undefined
キーと引数の比較は === 演算子に近いが厳密には === とも異なる

Proposal
Weak Maps
Firefox6+, Chrome18+
Firefox は初期仕様の実装
Chrome は about:flags で有効化
未実装でも ec6-shim で互換に
Map のキーは弱参照＝GC対象
ほぼ Simple Maps 同様 (詳細割愛)
詳しくは MDN 参照
http://wiki.ecmascript.org/doku.php?id=harmony:weak_maps

Proposal
Direct Proxies
オブジェクトの操作に Trap
独自の処理をする関数を定義
get, set, delete, has, hasOwn,
enumerate, iterate, keys, apply...
Firefox18+
Firefox4+, Chrome18+ は Proxies
という古い実装だけサポート
Chrome は about:flags で有効化
http://wiki.ecmascript.org/doku.php?id=harmony:direct_proxies

Direct Proxies
var handler = {
get: function(target, name) { // 読み出し時に Trap
return name in target ? target[name] : "Secret!";
}
}
var t = {};
var p = new Proxy(t, handler);
p.name = "Foxkeh" // target.name = "Foxkeh"
p.age = 6; // target.age = 6
console.log(p.name, p.age); // -> "Foxkeh", 6
console.log('tel' in p, p.tel); // -> false, "Secret!"
console.log(t.name, t.tel) // -> "Foxkeh", undefined
https://developer.mozilla.org/ja/docs/JavaScript/Reference/Global_Objects/Proxy

Proposal
const, let & Block Scope
let の実装は広がりつつある
Firefox が昔から実装
Chrome18+: about:flags 有効化
const は広くサポート
但し最新仕様準拠はなし
Safari/Opera は var と一緒
IE は const 非サポート
http://wiki.ecmascript.org/doku.php?id=harmony:block_scoped_bindings

const
const GoldenRatio = 1.61803;
定数を宣言(定義)
let 同様のブロックスコープ
宣言時に初期化(代入)が必須
現ブラウザの実装は古い
関数スコープ、初期化不要
http://wiki.ecmascript.org/doku.php?id=harmony:const

const 利用の注意
const で逆に遅いこともある
過渡期仕様の欠陥による
const 変数が初期化済みかどうか
実行時に判断が必要な場合
ECMA 6th 準拠実装なら OK
const は初期値必須になる etc...
Fx: bug611388, JSC: bug31833
http://d.hatena.ne.jp/Constellation/20111201/1322678350

let
{
// let 定義: ブロックスコープ
let a = 1, b = 10;
// let 式・文: let (...) に続く式・文中だけで有効
let (a = 100, c = 300) console.log(a); // -> 100
// for 文などでの let
for (let a=0; a<3; a++) {
console.log(a+b); // -> 10, 11, 12
}
console.log(a); // -> 1
}
console.log(a); // × ReferenceError: a is not defined
http://wiki.ecmascript.org/doku.php?id=harmony:let

Proposal
Destructuring (分割代入)
代入左辺を配列やオブジェクト
のように書き一括・部分代入
Firefox で古くから実装済み
Opera も一部動作するが、実質
的には使い物にならない実装
JSON データ処理とか特に便利
http://wiki.ecmascript.org/doku.php?id=harmony:destructuring

Destructuring (分割代入)
// Array のサンプル:
// 値の入れ替え
[a, b] = [b, a];
// 関数から複数の値を返す
var [c,d] = (function f() { return [1,2]; })();
// -> c=1, d=2
// 一部省略や入れ子も可能
var [e,,[x,y]] = (function f(){return [3,4,[10,20]]})();
// -> e=3,x=10,y=20

Destructuring (分割代入)
// Object のサンプル
var fx={ name:"Firefox", vendor:"Mozilla", ver:13 };
var ch={ name:"Chrome", vendor:"Google", ver:19 };
var browsers={ firefox: fx, chrome: ch }
// 欲しいプロパティだけ一括代入
var { name: n, ver: v } = fx;
// -> n="Firefox", v=13
// for-each-in などとの組み合わせも
for each ( let { vendor: ven, ver: ver } in browsers )
console.log(ven)
// -> "Mozilla", "Google"

Proposal
for-of ループ
キーじゃなくて要素でループ
現在 Firefox13+ だけが対応
これくらい当然使いたい…
http://wiki.ecmascript.org/doku.php?id=harmony:iterators

for-of ループ
let arr = ["Fx", "Ch", "IE"];
for (let k in arr)
console.log(k);
// -> 0, 1, 2
for (let v of arr)
console.log(v);
// -> "Fx", "Ch", "IE"
// ECMAScript 5th でやると:
arr.forEach(function(v) { console.log(v) });
// 太古の JavaScript では:
for (var i=0; i<arr.length; i++)
console.log(arr[i]);

Proposal
default parameter
関数の引数デフォルト値を設定
Firefox15+ のみサポート
これだって当然使いたい…
http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values

default parameter
function win(browser="IE") { return browser }
win() // -> "IE"
win("Firefox") // -> "Firefox"
// 以下のような場合の挙動は仕様上はまだ未定義か…⋯
function f(a=alert(rest), ...rest) { return a }
f() // -> undefined (alert でも undefined 表示される)
f(1) // -> 1 (alert 表示されない)
function f(a=42) { return a; function a() {} }
f() // -> function a() {}

Proposal
rest parameter
残りの引数を配列で受け取る
Firefox15+ のみサポート
これまた当然欲しい機能…
http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters

rest parameter
function f(a, b, ...args) { return args; }
//function f(a, b){ // 従来の JS で書く場合:
// var args = Array.prototype.slice.call(arguments,2);
// return args;
//}
f("IE", "Chrome"); // -> []
f("IE", "Chrome", "Firefox"); // -> ["Firefox"]
// rest arguments は Array のメソッドが使える！
function sortRestArgs(...theArgs) {
var sortedArgs = theArgs.sort();
return sortedArgs;
}

Proposal
Array Comprehensions
配列の内包表記
Python や Haskell にもあるやつ
JavaScript1.7 構文は Firefox2+
ECMA6th 構文は Firefox13+
for-each-in でなく for-of
http://wiki.ecmascript.org/doku.php?id=harmony:array_comprehensions

Array Comprehensions
// 配列のフィルタ
[x for (x of [1,-4,5,3,-7]) if (x > 0)]
// -> [1, 5, 3]
// 配列のマップ
[x*x for (x of [2,4,6])]
// -> [4, 16, 36]
// 2つの配列のデカルト積
[ i*j for (i of [0,2,4]) for (j of [5,3]) ]
// -> [0, 0, 10, 6, 20, 12]

Proposal
Iterators & Generators
Python のジェネレータ的なヤツ
Python などを参考に導入された
Firefox がサポート
yield は JS バージョン指定必須
<script type="application/
javascript;version=1.7"> ...
opt-in 必須なので今日は割愛...
http://wiki.ecmascript.org/doku.php?id=harmony:generators

Strawman WebGL Spec
Typed Array
型固定配列で高速数値演算
元々 WebGL で導入され FileAPI,
XHR2, WebSocket などでも採用
分離して ECMA6th にも入った
IE9 非サポートに注意
IE10+, Fx4+, Chrome9+,
Safari5.1+, Opera12+
http://wiki.ecmascript.org/doku.php?id=strawman:typed_arrays

Typed Array
ArrayBuffer(byteLength)
メモリを確保するバッファ
The Typed Array View Types:
ArrayBuffer 読み出し用ビュー
Int8Array, Unit8Array,
Int16Array, Uint16Array,
Int32Array, Uinit32Array,
Float32Array, Float64Array

Typed Array & View
// 16 バイト長のバッファを確保
var buffer = new ArrayBuffer(16);
// 32bit 整数 x 4 として読み出すビューを定義
var int32View = new Int32Array(buffer);
// 32bit 整数として 0, 2, 4, 6 を格納
for (var i=0; i<int32View.length; i++) { int32View[i]=i*2; }
// 16bit 整数 x 8 として同じバッファを読み出すビュー
var int16View = new Int16Array(buffer);
// 実際に読み出してみる
for (var i=0; i<int16View.length; i++) {
console.log(int16View[i]);
}
// -> 0, 0, 2, 0, 4, 0, 6, 0

Strawman
ParallelArray
並列演算用配列
CPU や GPU をフル活用
Firefox17+
旧 RiverTrail by Intel & Mozilla
まだ変更多そうなので今日は割愛
Interactive Shell (旧互換実装)
http://rivertrail.github.com/
RiverTrail/interactive/

Ready! Strawman & Proposal
More Libraries...
未実装だが Shim で後方互換に
Math の拡張
cosh, sinh, tanh, arosh, asinh, atanh,
log1p, log2, log10, sign, trunc
String の拡張
startsWith, endsWith, contains - Fx17+
repeat, reverse - ブラウザは未実装
Number の拡張
isFinite, isNaN, isInteger, toInteger
iv で試せる実装済みも多い MS は一部プロトタイプ実装プラグインあり

Strawman
Globalization
日時や通貨などの文字列をロ
ケール等に応じて出力
MS がプロトタイプ実装を IE の
プラグインとして公開
IE 本体には未実装なので割愛
まだ単なる試案の段階
http://wiki.ecmascript.org/doku.php?id=globalization:globalization

summary:ECMA6th
標準クラスやメソッドの追加
Set, Map, WeakMap, DirectProxies,
Math.*, String.*, Globalization...
無駄なコードが減り書きやすく
destructing, defalut/rest param,
for-of, array comprehensions...
高速処理にも
Typed Array, ParallelArray...

more:ECMAScript6th
今回は割愛しましたがまだまだ
いろんな機能が議論中…
ex. 大規模開発に…
Class や Modules
ex. テンプレート文字列…
Quasi-Literals

JS.Next 楽しいね！

JavaScript.Future
扱い易く書き易く
サーバやエンタープライズも
API は HTML & DOM で
GPU やハードもフル活用

10年前:
誰も尊敬してくれない
Java のできそこない...

現在:
"HTML5" の基盤言語
何でも HTML5 ＝ 何でも JavaScript

10年後:
Java と対等に
尊敬され愛される言語になりたい...

10年後:
いや、Java を越える！
父を乗り越えて一人前...

Any Question？

Appendix
other ideas...

ECMAScript !== JavaScript
ECMAScript
JavaScript の基本機能を標準化
したスクリプト言語
JavaScript (広義)
ECMAScript ＋ ブラウザ用機能
JavaScript (狭義)
Netscape/Firefox の実装
広義の JS にバージョンはありません (JS 1.x などは Firefox バージョンに対応)

Versioning について
Harmony の後方非互換機能に
opt-inする方法は未確定
use version 6;？ Module 利用時？
Firefox は 6th 専用モードなし
V8 は現在 3 モード実装:
classic, strict, extended
--harmony フラグで extended
更に --harmony_scoping とか

DOMCrypt
暗号化処理サポート用 API
Firefox 拡張機能として試験実装
JavaScript 高速化
＝ エンジン高速化 ＋ 専用 API
一部 API は DOM で標準化
ECMAScript が全てではない
JSON のように需要のある専用 API が定義されていく
https://addons.mozilla.org/ja/firefox/addon/domcrypt/

References
link list...

現行仕様
ECMAScript (ECMA-262)
http://www.ecma-international.org/publications/standards/
Ecma-262.htm
ECMAScript 5th HTML 版
http://es5.github.com/
ECMAScript for XML (E4X, ECMA-357)
http://www.ecma-international.org/publications/standards/
Ecma-357.htm
ECMAScript 3.1 時代からの草案
http://wiki.ecmascript.org/doku.php?
id=es3.1:es3.1_proposal_working_draft

次世代仕様
ECMAScript Wiki
http://wiki.ecmascript.org
ECMAScript 6th Draft Specification
http://wiki.ecmascript.org/doku.php?
id=harmony:specification_drafts
Harmony Proposals
http://wiki.ecmascript.org/doku.php?id=harmony:proposals
Harmony Strawman
http://wiki.ecmascript.org/doku.php?id=strawman:strawman

ブラウザ実装状況
Compatibility Table
単純検出なのでバグあり実装も含む＆検出ミスもあり
更新頻度は程々なので開発版の実装状況は参考程度
http://kangax.github.com/es5-compat-table/
Firefox の ECMAScript 6th サポート状況
https://developer.mozilla.org/ja/docs/JavaScript/
ECMAScript_6_support_in_Mozilla
MDN で個別機能ページ末尾を確認するのが比較的確実
https://developer.mozilla.org/

構文テストなど
JSLint - by The Boss of You
http://jslint.com/
iv / js : ES.next - ES.next lexer and parser
http://constellation.github.com/iv/js/es.next.html
ECMAScript 6th Syntax Grammer
http://teramako.github.com/ECMAScript/
ecma6th_syntax.html
Try Strict by MS
http://ie.microsoft.com/testdrive/HTML5/TryStrict/
Default.html

実装
SpiderMonkey Build Documentation
https://developer.mozilla.org/en/SpiderMonkey/
Build_Documentation
How to Download and Build V8
http://code.google.com/intl/ja/apis/v8/build.html
JavaScriptCore
http://trac.webkit.org/wiki/JavaScriptCore
lv5 - ECMA262 5.1 エンジン by @Constellation
https://github.com/Constellation/iv
vimperator で ES.next
http://d.hatena.ne.jp/caisui/20111217/1324098318