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