• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript.Next Returns
 

JavaScript.Next Returns

on

  • 17,878 views

DevSumi 2012 Kansai で使用したスライドです

DevSumi 2012 Kansai で使用したスライドです

Statistics

Views

Total Views
17,878
Views on SlideShare
16,661
Embed Views
1,217

Actions

Likes
45
Downloads
105
Comments
0

24 Embeds 1,217

http://d.hatena.ne.jp 729
https://twitter.com 206
http://blog.basiloco.info 109
http://kamatamadai.hatenablog.com 55
http://girls.pgmy.jp 48
http://homepage1.nifty.com 18
http://webcache.googleusercontent.com 9
http://s.deeeki.com 9
http://text.world.coocan.jp 8
http://blueox.intermix.jp 6
https://si0.twimg.com 6
http://www.tumblr.com 2
https://web.tweetdeck.com 1
http://b.hatena.ne.jp 1
http://favtile.com 1
http://www.linkedin.com 1
http://twitter.com 1
http://yandex.ru 1
http://www.bing.com 1
http://131.253.14.66 1
http://pinterest.com 1
http://tweetedtimes.com 1
http://safe.tumblr.com 1
http://cache.yahoofs.jp 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaScript.Next Returns JavaScript.Next Returns Presentation Transcript

    • #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, filter, 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// cant 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 プロパティ値の取得・設定を行 うための特別なメソッド __defineGetter__ などは非標準
    • 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.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
    • ProposalSimple 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 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:flags で有効化 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:flags で有効化 未実装でも 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:flags で有効化 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: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
    • 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
    • JS.Next 楽しいね!
    • JavaScript.Future 扱い易く書き易く サーバやエンタープライズも API は HTML & DOM で GPU やハードもフル活用
    • 10年前: 誰も尊敬してくれない Java のできそこない...
    • 現在:"HTML5" の基盤言語 何でも HTML5 = 何でも JavaScript
    • 10年後: Java と対等に 尊敬され愛される言語になりたい...
    • 10年後:いや、Java を越える! 父を乗り越えて一人前...
    • 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