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

Kanazawa.JavaScript.Next

dynamis
March 31, 2012

 Kanazawa.JavaScript.Next

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

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