Movatterモバイル変換

#KansumiB1JavaScript.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.PastHistory of JavaScript...

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

JavaScript の祖先 Java Scheme Self構文第一級関数 Prototypeprimitive/objectY2K バグ 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/

VSThe Boss of You Father of JS

ECMAScript 4th よ永遠に... VSThe 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 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/

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, ﬁlter, reduce, reduceRight 古くから広く実装されてきた Firefox 1.5 や 3 が最初に実装 IE6 8 には Augment.js など

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

Ready! No SafariFunction.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 ShimStrict 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-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

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

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

Ready! No Shimseal & freeze オブジェクトを静的に間違って書き換えるのを防止元に戻すことはできない seal: プロパティ追加・削除禁止 freeze: プロパティ変更禁止 Strict Mode では例外を発生 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.deﬁneProperty Object.getPrototypeOf Object.keys Object.getOwnPropertyNames ...

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

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

新しいといえば… 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

ProposalSimple Sets 他の言語にもある Set = Python: set, Ruby: Set, Java: java.util.HashSet, C++: std::unordered_set Firefox12+, Chrome18+ Chrome は about:ﬂags で有効化 Fx17 から Iterable (for-of など可) 未実装でも ec6-shim で互換に 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

ProposalSimple Maps 他の言語にもある Map = Python: dict, Ruby: Hash, Java: java.util.HashMap, C++: std::unorderd_map Firefox12+, Chrome18+ Chrome は about:ﬂags で有効化 Fx17 から Iterable (for-of など可) 未実装でも ec6-shim で互換に 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 キーと引数の比較は === 演算子に近いが厳密には === とも異なる

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

ProposalDirect Proxies オブジェクトの操作に Trap 独自の処理をする関数を定義 get, set, delete, has, hasOwn, enumerate, iterate, keys, apply... Firefox18+ Firefox4+, Chrome18+ は Proxies という古い実装だけサポート Chrome は about:ﬂags で有効化 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

Proposalconst, let & Block Scope let の実装は広がりつつある Firefox が昔から実装 Chrome18+: about:ﬂags 有効化 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

ProposalDestructuring (分割代入) 代入左辺を配列やオブジェクトのように書き一括・部分代入 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"

Proposalfor-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, 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]);

Proposaldefault parameter 関数の引数デフォルト値を設定 Firefox15+ のみサポートこれだって当然使いたい… 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() {}

Proposalrest parameter 残りの引数を配列で受け取る Firefox15+ のみサポートこれまた当然欲しい機能… 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;}

ProposalArray 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]

ProposalIterators & 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 SpecTyped 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

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

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

StrawmanGlobalization 日時や通貨などの文字列をロケール等に応じて出力 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

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

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

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

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

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

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/ﬁrefox/addon/domcrypt/

現行仕様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 Speciﬁcation http://wiki.ecmascript.org/doku.php? id=harmony:speciﬁcation_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

Movatterモバイル変換

Change Language

JavaScript.Next Returns

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

Similar to JavaScript.Next Returns

More from dynamis

JavaScript.Next Returns