JavaScript.Next.returns

@ Developers Summit 2012 Kansaiby Tomoya ASAI (dynamis)Mozilla Japan - Technical Marketing

last update on 2012.09.15

#KansumiB1

about:dynamis (Tomoya ASAI)

http:// dynamis.jp

@dynamitter

facebook.com/ dynamismailto: Tomoya ASAI (dynamis) <dynamis mozilla-japan.org>@

JavaScript 最新事情- 開発者なら知っておきたい次世代 JS -

ECMAScript 5th & 6th IntroductionHTML5 や DOM API の話はしません

JavaScript.Past ECMAScript 5th ECMAScript 6th (Appendix) (References)

Agenda

from Past to Future

おことわり。 現行仕様は注目機能を抜粋 次世代仕様は実装ありを中心に

特に複数 and/or 長期実装あり 草案 (rev9) より広い範囲 提案 (proposal) を中心に扱うが試案 (strawman) も一部含む

流動的な Module とか割愛…

Proposal

Strawman

今回はネタ的な話は少なめです 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.PastHistory of JavaScript...

1995.04 Brendan Eich、Netscape へ

「ブラウザに Scheme を」という餌に食いついたが...

JavaScript の父 現 Mozilla CTO

当時の写真ではありません

JavaScript の祖先Java Scheme Self

JavaScript

構文

Y2K バグprimitive/object

第一級関数 Prototype

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 創始者の挨拶:

んなわけあるか！ Brendan は聞いたことすらない

MS は最初補欠部隊を投入し、 Brendan に負け精鋭部隊に交代

NOMBAS はスクリプト言語 Cmm による "Espresso Pages" を公開してた会社

我々は JavaScript に何年も取り組んできた...

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/

VSThe Boss of You Father of JS

ECMAScript 4th よ永遠に...

Win! Lose...

VSThe Boss of You Father of JS

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 5thfirst 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/

Native JSON ボスの作った仕様。 IE8+ その他広くサポート

IE6,7 には json2.js で対応 http://json.org/js.html

Ready!

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 オブジェクトにも注意 ブラウザ間の挙動が異なる

受け渡しするデータによっては要注意

Array Extra 配列操作メソッドを追加

indexOf, lastIndexOf,every, some, forEach,map, filter, reduce, reduceRight

古くから広く実装されてきた Firefox 1.5 や 3 が最初に実装

IE6~8 には Augment.js など

Ready!

Array Extra - Basic Usagefunction 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 Usagefunction 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) ...

Function.prototype.bind "this" を固定した関数を定義

arguments も固定可能 Safari は未サポート

IE9+, Firefox4+, Chrome7+,Safari5.3+ Opera11.60+ サポート

但し Safari は疑似実装か…

Augment.js などで(ほぼ)後方互換

No SafariReady!

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

Strict Mode 良くあるミスをエラーとして検出 IE9 未サポートに要注意

IE10+, Firefox4+, Chrome13+, Safari5.1+, Opera11.60+ が対応

IE10 はまだバグありだが期待...

オンにするだけなら後方互換 非互換コードを使わなければ... テスト時だけ使うのもアリ

No IE

特に理由なければ Strict Mode でエラーにならないコードを書く習慣を付けましょう

No Shim

Strict Mode// ファイル冒頭で "use strict"; を書くとオンになる"use strict";var type = "foo";// 未定義の変数への代入typo = "bar";// × asignment to undeclared variable typo// 書き込み禁止や削除禁止のプロパティ操作NaN = null;// × NaN is read-onlydelete 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// literalfunction f(bar, bar) { return bar; }// × duplicate formal argument barvar 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

Getter & Setter プロパティ値の取得・設定を行うための特別なメソッド

__defineGetter__ などは非標準

Ready! No Shim

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

seal & freeze オブジェクトを静的に

間違って書き換えるのを防止 元に戻すことはできない

seal: プロパティ追加・削除禁止 freeze: プロパティ変更禁止

Strict Mode では例外を発生

Ready! No Shim

seal/freeze されてるかどうかは isSealed/isFrozen で確認できる

sealvar 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-onlyobj.bar = 6; // × obj.bar is not extensibleconsole.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 6thNext release of Harmony...

ECMAScript 6th の目標 より書きやすい言語

想定用途: 複雑なアプリ、ライブラリ次仕様のコードジェネレータ

テスト可能な仕様へ 相互運用性を向上

可能ならデファクトを採用 バージョニングは単純に 静的検証も可能に

実行時エラーよりコンパイル時エラーhttp://wiki.ecmascript.org/doku.php?id=harmony:harmony

この表古くてゴメン

後方互換スクリプト 最初に読み込んで後方互換に: es6-shim

https://github.com/paulmillr/es6-shim

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 で互換に

Proposal

http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets

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

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 で互換に

Proposal

http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets

Simple Mapvar 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({});         // -> undefinedmap.get(function(){}) // -> undefined

キーと引数の比較は === 演算子に近いが厳密には === とも異なる

Weak Maps Firefox6+, Chrome18+

Firefox は初期仕様の実装 Chrome は about:flags で有効化 未実装でも ec6-shim で互換に

Map のキーは弱参照＝GC対象 ほぼ Simple Maps 同様 (詳細割愛) 詳しくは MDN 参照

Proposal

http://wiki.ecmascript.org/doku.php?id=harmony:weak_maps

Direct Proxies オブジェクトの操作に Trap

独自の処理をする関数を定義 get, set, delete, has, hasOwn, enumerate, iterate, keys, apply...

Firefox18+ Firefox4+, Chrome18+ は Proxies という古い実装だけサポート

Chrome は about:flags で有効化

Proposal

http://wiki.ecmascript.org/doku.php?id=harmony:direct_proxies

Direct Proxiesvar 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 = 6console.log(p.name, p.age); // -> "Foxkeh", 6console.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

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

Proposal

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

Destructuring (分割代入) 代入左辺を配列やオブジェクトのように書き一括・部分代入 Firefox で古くから実装済み Opera も一部動作するが、実質的には使い物にならない実装

JSON データ処理とか特に便利

Proposal

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"

for-of ループ キーじゃなくて要素でループ

現在 Firefox13+ だけが対応 これくらい当然使いたい…

http://wiki.ecmascript.org/doku.php?id=harmony:iterators

Proposal

for-of ループlet arr = ["Fx", "Ch", "IE"];

for (let k in arr) console.log(k);// -> 0, 1, 2for (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]);

default parameter 関数の引数デフォルト値を設定

Firefox15+ のみサポート これだって当然使いたい…

Proposal

http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values

default parameterfunction 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() {}

rest parameter 残りの引数を配列で受け取る

Firefox15+ のみサポート これまた当然欲しい機能…

Proposal

http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters

rest parameterfunction 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;}

Array Comprehensions 配列の内包表記

Python や Haskell にもあるやつ

JavaScript1.7 構文は Firefox2+ ECMA6th 構文は Firefox13+

for-each-in でなく for-of

Proposal

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]

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

Proposal

Typed Array 型固定配列で高速数値演算

元々 WebGL で導入され FileAPI, XHR2, WebSocket などでも採用

分離して ECMA6th にも入った

IE9 非サポートに注意 IE10+, Fx4+, Chrome9+, Safari5.1+, Opera12+

Strawman

http://wiki.ecmascript.org/doku.php?id=strawman:typed_arrays

WebGL Spec

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

ParallelArray 並列演算用配列

CPU や GPU をフル活用 Firefox17+

旧 RiverTrail by Intel & Mozilla まだ変更多そうなので今日は割愛 Interactive Shell (旧互換実装)

http://rivertrail.github.com/RiverTrail/interactive/

Strawman

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 は一部プロトタイプ実装プラグインあり

ProposalStrawman &Ready!

Globalization 日時や通貨などの文字列をロケール等に応じて出力 MS がプロトタイプ実装を IE のプラグインとして公開

IE 本体には未実装なので割愛 まだ単なる試案の段階

Strawman

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 やハードもフル活用

誰も尊敬してくれない

Java のできそこない...

10年前:

"HTML5" の基盤言語

何でも HTML5 ＝ 何でも JavaScript

現在:

Java と対等に

尊敬され愛される言語になりたい...

10年後:

いや、Java を越える！

父を乗り越えて一人前...

10年後:

Any Question？

Appendixother 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/

Referenceslink list...

現行仕様ECMAScript (ECMA-262)

http://www.ecma-international.org/publications/standards/Ecma-262.htmECMAScript 5th HTML 版

http://es5.github.com/ECMAScript for XML (E4X, ECMA-357)

http://www.ecma-international.org/publications/standards/Ecma-357.htmECMAScript 3.1 時代からの草案

http://wiki.ecmascript.org/doku.php?id=es3.1:es3.1_proposal_working_draft

次世代仕様ECMAScript Wiki

http://wiki.ecmascript.orgECMAScript 6th Draft Specification

http://wiki.ecmascript.org/doku.php?id=harmony:specification_draftsHarmony Proposals

http://wiki.ecmascript.org/doku.php?id=harmony:proposalsHarmony 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_MozillaMDN で個別機能ページ末尾を確認するのが比較的確実

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.htmlECMAScript 6th Syntax Grammer

http://teramako.github.com/ECMAScript/ecma6th_syntax.htmlTry Strict by MS

http://ie.microsoft.com/testdrive/HTML5/TryStrict/Default.html

実装SpiderMonkey Build Documentation

https://developer.mozilla.org/en/SpiderMonkey/Build_DocumentationHow to Download and Build V8

http://code.google.com/intl/ja/apis/v8/build.htmlJavaScriptCore

http://trac.webkit.org/wiki/JavaScriptCorelv5 - ECMA262 5.1 エンジン by @Constellation

https://github.com/Constellation/ivvimperator で ES.next

http://d.hatena.ne.jp/caisui/20111217/1324098318