Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Kanazawa.JavaScript.Next

Avatar for dynamis dynamis
March 31, 2012

 Kanazawa.JavaScript.Next

Kanazawa.js 1.7 with Mozilla で利用したスライド

Avatar for dynamis

dynamis

March 31, 2012
Tweet

More Decks by dynamis

Other Decks in Technology

Transcript

  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. ͓͜ͱΘΓɻ  ݱߦ࢓༷͸஫໨ػೳΛൈਮ  ࣍ੈ୅࢓༷͸࣮૷͋ΓΛத৺ʹ  ಛʹෳ਺BOEPS௕ظ࣮૷͋Γ ૲Ҋ SFW ΑΓ޿͍ൣғ

    ఏҊ QSPQPTBM Λத৺ʹѻ͏͕ ࢼҊ TUSBXNBO ΋Ұ෦ؚΉ  cԋࢉࢠͱ͔ѻ͍·ͤΜɻ Proposal Strawman ࠓճ͸ωλతͳ࿩͸গͳΊͰ͢ m(_ _)m
  3. &$."4DSJQUUI  ݱߦͷඪ४࢓༷Ͱ͢ ͱ͸۠ผ͢Δҙຯͳ͠  *&Ҏ߱͸΄΅ϑϧαϙʔτ 'JSFGPY $ISPNF 0QFSB *&

     TUSJDUNPEFҎ֎ 4BGBSJ  CJOEҎ֎  ৄࡉ͸ޓ׵දΛࢀর: http://kangax.github.com/es5-compat-table/
  4. /BUJWF+40/ // 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}'
  5. +40/ར༻ͷ஫ҙ  *&͸65'จࣈྻΛTUSJOHJGZ ͰΤεέʔϓ aV9999 ͞ΕΔ VOFTDBQF +40/TUSJOHJGZ จࣈ ྻ

    SFQMBDF aaVH V  TUSJOHJGZୈҾ਺ʹ͸஫ҙ  ݹ͍'JSFGPY౳ʹόά͋Γ  %BUFΦϒδΣΫτʹ΋஫ҙ  ϒϥ΢βؒͷڍಈ͕ҟͳΔ ड͚౉͢͠ΔσʔλʹΑͬͯ͸ཁ஫ҙ
  6. "SSBZ&YUSB  ഑ྻૢ࡞ϝιουΛ௥Ճ JOEFY0G MBTU*OEFY0G FWFSZ TPNF GPS&BDI NBQ pMUFS

    SFEVDF SFEVDF3JHIU  ݹ͔͘Β޿࣮͘૷͞Ε͖ͯͨ 'JSFGPY΍͕࠷ॳʹ࣮૷  *&dʹ͸"VHNFOUKTͳͲ Ready!
  7. "SSBZ&YUSB#BTJD6TBHF 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
  8. "SSBZ&YUSB#BTJD6TBHF 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
  9. "SSBZ&YUSB&YUSB6TBHF 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 は (文字列, 基数) を受け取る関数 // 関数には (要素, インデックス, 配列) が渡される
  10. 'VODUJPOQSPUPUZQFCJOE  UIJTΛݻఆͨؔ͠਺Λఆٛ  BSHVNFOUT΋ݻఆՄೳ  4BGBSJ͸ະαϙʔτ *& 'JSFGPY $ISPNF

     0QFSB Ͱαϙʔτ 8FC,JU/JHIUMZ΋ରԠࡁΈ  "VHNFOUKTͳͲͰ ΄΅ ޙํޓ׵ No Safari Ready!
  11. CJOEͰϝιουΛؔ਺ʹ // 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 は便利...
  12. $BMMCBDLͰ΋UIJTΛܧঝ 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 ʹอ࣋͢ΔͷͰे෼Ͱ͕͢...
  13. CJOEͰؔ਺ͷҾ਺Λݻఆ // 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
  14. 4USJDU.PEF  ྑ͋͘ΔϛεΛΤϥʔͱͯ͠ݕग़  *&ະαϙʔτʹཁ஫ҙ *& 'JSFGPY $ISPNF  4BGBSJ

    0QFSB ͕ରԠ *&͸·ͩόά͋Γ͕ͩظ଴  Φϯʹ͢Δ͚ͩͳΒޙํޓ׵  ඇޓ׵ίʔυΛ࢖Θͳ͚Ε͹ ςετ͚࣌ͩ࢖͏ͷ΋ΞϦ No IE ಛʹཧ༝ͳ͚Ε͹ Strict Mode ͰΤϥʔʹͳΒͳ͍ίʔυΛॻ͘श׳Λ෇͚·͠ΐ͏ No Shim
  15. 4USJDU.PEF // ファイル冒頭で "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
  16. 4USJDU.PEF "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
  17. 4USJDU.PEF // 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
  18. (FUUFS4FUUFS 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; // -> "減らしちゃダメ!"
  19. .FNPJ[BUJPO -B[JMZ-PBE 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
  20. TFBMGSFF[F  ΦϒδΣΫτΛ੩తʹ  ؒҧͬͯॻ͖׵͑ΔͷΛ๷ࢭ ݩʹ໭͢͜ͱ͸Ͱ͖ͳ͍  TFBMϓϩύςΟ௥Ճɾ࡟আېࢭ  GSFF[FϓϩύςΟมߋېࢭ

     4USJDU.PEFͰ͸ྫ֎Λൃੜ Ready! No Shim seal/freeze ͞ΕͯΔ͔Ͳ͏͔͸ isSealed/isFrozen Ͱ֬ೝͰ͖Δ
  21. TFBM 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
  22. GSFF[F "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
  23. BOENPSF  4USJOHQSPUPUZQFUSJN  "SSBZJT"SSBZ %BUFOPX  %BUFQSPUPUZQFUP*404USJOH  /B/

    *OpOJUZ VOEFpOFEఆ਺Խ  QSFWFOU&YUFOTJPOT JT&YUFOTJCMF  QFSTF*OU  ͳͲ΋ਐ਺ʹ  ͦͷଞ͍Ζ͍Ζ
  24. &$."4DSJQUUIͷ໨ඪ  ΑΓॻ͖΍͍͢ݴޠ ෳࡶͳΞϓϦɺϥΠϒϥϦɺ ࣍࢓༷ͷίʔυδΣωϨʔλ  ςετՄೳͳ࢓༷΁  ૬ޓӡ༻ੑΛ޲্ 

    ՄೳͳΒσϑΝΫτΛ࠾༻  όʔδϣχϯά͸୯७ʹ  ੩తݕূ΋Մೳʹ http://wiki.ecmascript.org/doku.php?id=harmony:harmony
  25. 4JNQMF.BQT  ଞͷݴޠʹ΋͋Δ.BQ 1ZUIPOEJDU 3VCZ)BTI +BWBKBWBVUJM)BTI.BQ $ TUEVOPSEFSE@NBQ  'JSFGPY

    $ISPNF $ISPNF͸BCPVUqBHTͰ༗ޮԽ ະ࣮૷Ͱ΋FDTIJNͰޓ׵ʹ Proposal http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets
  26. 4JNQMF.BQ 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 ΩʔͱҾ਺ͷൺֱ͸ === ԋࢉࢠʹ͍͕ۙݫີʹ͸ === ͱ΋ҟͳΔ
  27. 4JNQMF4FUT  ଞͷݴޠʹ΋͋Δ4FU 1ZUIPOTFU 3VCZ4FU +BWBKBWBVUJM)BTI4FU $ TUEVOPSEFSFE@TFU  'JSFGPY

    $ISPNF $ISPNF͸BCPVUqBHTͰ༗ޮԽ ະ࣮૷Ͱ΋FDTIJNͰޓ׵ʹ Proposal http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets
  28. 4JNQMF4FU 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
  29. DPOTU MFU#MPDL4DPQF  MFUͷ࣮૷͸޿͕Γͭͭ͋Δ 'JSFGPY͕ੲ͔Β࣮૷ $ISPNF BCPVUqBHT༗ޮԽ  DPOTU͸޿͘αϙʔτ 

    ୠ͠࠷৽࢓༷४ڌ͸ͳ͠ 4BGBSJ0QFSB͸WBSͱҰॹ *&͸DPOTUඇαϙʔτ http://wiki.ecmascript.org/doku.php?id=harmony:block_scoped_bindings Proposal
  30. DPOTU  DPOTU(PMEFO3BUJP  ఆ਺Λએݴ ఆٛ  MFUಉ༷ͷϒϩοΫείʔϓ  એݴ࣌ʹॳظԽ

    ୅ೖ ͕ඞਢ  ݱϒϥ΢βͷ࣮૷͸ݹ͍ ؔ਺είʔ ϓɺॳظԽෆཁ http://wiki.ecmascript.org/doku.php?id=harmony:const
  31. MFU { // 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
  32. %FTUSVDUVSJOH ෼ׂ୅ೖ // 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
  33. %FTUSVDUVSJOH ෼ׂ୅ೖ // 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"
  34. GPSPGϧʔϓ 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]);
  35. "SSBZ$PNQSFIFOTJPOT // 配列のフィルタ [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]
  36. 5ZQFE"SSBZ  ܕݻఆ഑ྻͰߴ଎਺஋ԋࢉ ݩʑ8FC(-Ͱಋೖ͞Ε'JMF"1*  9)3 8FC4PDLFUͳͲͰ΋࠾༻ &$."UIʹ΋ೖΔʁ  *&ඇαϙʔτʹ஫ҙ

    *& 'Y $ISPNF  4BGBSJ 0QFSB Strawman http://wiki.ecmascript.org/doku.php?id=strawman:typed_arrays WebGL Spec
  37. 5ZQFE"SSBZ  "SSBZ#VGGFS CZUF-FOHUI  ϝϞϦΛ֬อ͢ΔόοϑΝ  5IF5ZQFE"SSBZ7JFX5ZQFT  "SSBZ#VGGFSಡΈग़͠༻Ϗϡʔ

    *OU"SSBZ 6OJU"SSBZ *OU"SSBZ 6JOU"SSBZ *OU"SSBZ 6JOJU"SSBZ 'MPBU"SSBZ 'MPBU"SSBZ
  38. 5ZQFE"SSBZ7JFX // 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
  39. .PSF-JCSBSJFT  ະ࣮૷͕ͩ4IJNͰޙํޓ׵ʹ  .BUIͷ֦ு DPTI TJOI UBOI BSPTI BTJOI

    BUBOI  MPHQ MPH MPH TJHO USVOD  4USJOHͷ֦ு TUBSUT8JUI FOET8JUI DPOUBJOT 3FQFBU  UP"SSBZ SFWFSTF  /VNCFSͷ֦ு JT'JOJUF JT/B/ JT*OUFHFS UP*OUFHFS MS ͸ϓϩτλΠϓ࣮૷ΛϓϥάΠϯͱͯ͠ެ։ Proposal Strawman & Ready!
  40. &$."4DSJQU+BWB4DSJQU  &$."4DSJQU  +BWB4DSJQUͷجຊػೳΛඪ४Խ ͨ͠εΫϦϓτݴޠ  +BWB4DSJQU ޿ٛ 

    &$."4DSJQUʴϒϥ΢β༻ػೳ  +BWB4DSJQU ڱٛ  /FUTDBQF'JSFGPYͷ࣮૷ ޿ٛͷ JS ʹόʔδϣϯ͸͋Γ·ͤΜ (JS 1.x ͳͲ͸ Firefox όʔδϣϯʹରԠ)
  41. %0.$SZQU  ҉߸Խॲཧαϙʔτ༻"1* 'JSFGPY֦ுػೳͱͯ͠ࢼݧ࣮૷  +BWB4DSJQUߴ଎Խ  ʹΤϯδϯߴ଎Խʴઐ༻"1*  Ұ෦"1*͸%0.Ͱඪ४Խ

    &$."4DSJQU͕શͯͰ͸ͳ͍ JSON ͷΑ͏ʹधཁͷ͋Δઐ༻ API ͕ఆٛ͞Ε͍ͯ͘ https://addons.mozilla.org/ja/firefox/addon/domcrypt/
  42. ݱߦ࢓༷ &$."4DSJQU &$." http://www.ecma-international.org/publications/standards/ Ecma-262.htm &$."4DSJQUUI)5.-൛ http://es5.github.com/ &$."4DSJQUGPS9.- &9 &$."

    http://www.ecma-international.org/publications/standards/ Ecma-357.htm &$."4DSJQU࣌୅͔Βͷ૲Ҋ http://wiki.ecmascript.org/doku.php? id=es3.1:es3.1_proposal_working_draft