Kanazawa.js 1.7 with Mozilla で利用したスライド 容量 10MB 制限があった時期に SpeakerDeck に UP していたもの: http://speakerdeck.com/u/dynamis/p/kanazawajavascriptnext

1. JavaScript.Next
@ Kanazawa.js 1.7 with Mozilla
by Tomoya ASAI (dynamis)
Mozilla Japan - Technical Marketing
last update on 2012.03.30
see also: http://dynamis.jp/r

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

3. Agenda
latest topic
ECMAScript 5th
ECMAScript 6th
(Appendix)
(References)

4. 最近の怖い話。
怪談話にはまだ早い？

5. ちょっと古いデータでゴメン

6. JavaScript 超高速化！
ActionScript 遅いママ...

8. Flash ゲームにライセンス料
Flash のハードウェアアクセラ
レーションをバリバリ使った
(domain memory & Stage3D)
3D アプリで利益を上げたら
利益の 9% は Adobe が没収！

9. Adobe 怖い。
プロプラ怖い。
JavaScript は標準だから安心ですね

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

11. ECMAScript 5th
first release of Harmony...

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

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

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

16. 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}'

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

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

19. 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

20. 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

21. 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]
// parseInt は (文字列, 基数) を受け取る関数
// 関数には (要素, インデックス, 配列) が渡される

22. Ready! No Safari
Function.prototype.bind
"this" を固定した関数を定義
arguments も固定可能
Safari は未サポート
IE9+, Firefox4+, Chrome7+,
Opera11.60+ でサポート
WebKit Nightly も対応済み
Augment.js などで(ほぼ)後方互換

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

24. 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 に保持するので十分ですが...

25. 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

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

27. 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

28. 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

29. 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

30. more about Strict Mode...
with 使用禁止
arguments.caller/callee 禁止
関数中では this=null != global
eval 中のコードは外部スコープに
変数を定義できない
スクリプトまたは関数内のトップ
レベル以外での関数定義禁止
その他いろいろ...

31. Ready! No Shim
Getter & Setter
プロパティ値の取得・設定を行
うための特別なメソッド
getter 関数の返り値を取得
setter 関数を設定時に実行
__defineGetter__ などは非標準

32. 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; // -> "減らしちゃダメ！"

33. 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

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

35. 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

36. 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

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

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

39. ECMAScript 6th
Next release of Harmony...

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

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

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

44. 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
キーと引数の比較は === 演算子に近いが厳密には === とも異なる

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

46. 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

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

48. Proposal
Proxy
Firefox4+, Chrome18+
いずれも初期仕様の実装
Chrome は about:flags で有効化
仕様は Direct Proxies に移行
仕様変更されてるので詳細割愛
詳しくは MDN 参照
http://wiki.ecmascript.org/doku.php?id=harmony:proxies

49. 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

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

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

52. 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

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

54. 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

55. 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"

56. Proposal
for-of ループ
キーじゃなくて要素でループ
現在 Firefox13+ だけが対応
http://wiki.ecmascript.org/doku.php?id=harmony:iterators

57. 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) });
// 昔々:
for (var i=0; i<arr.length; i++)
console.log(arr[i]);

58. 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

59. 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]

60. 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

61. 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

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

63. 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

64. Ready! Strawman & Proposal
More Libraries...
未実装だが Shim で後方互換に
Math の拡張
cosh, sinh, tanh, arosh, asinh, atanh,
log1p, log2, log10, sign, trunc
String の拡張
startsWith, endsWith, contains, Repeat,
toArray, reverse
Number の拡張
isFinite, isNaN, isInteger, toInteger
MS はプロトタイプ実装をプラグインとして公開

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

66. JS.Next 楽しいね！
JS.Next 勉強会やりましょう (・・).

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

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

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

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

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

72. Any Question？

73. Appendix
other ideas...

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

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

76. WebCL
OpenCL を JavaScript から
Nvidia が Firefox に試験実装
Samsung が WebKit に試験実装
Web アプリでも GPU フル活用
パフォーマンス差は歴然。
http://www.khronos.org/webcl/

77. RiverTrail
並列計算用 API
Intel による提案・実装
Firefox 拡張機能として試験実装
http://blogs.intel.com/research/2011/09/15/pjs/
https://github.com/RiverTrail/RiverTrail

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

79. References
link list...

80. 現行仕様
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

81. 次世代仕様
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

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

83. 構文テストなど
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

84. 実装
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