Your SlideShare is downloading. ×
0
#KansumiB1JavaScript.Next.returns   @ Developers Summit 2012 Kansai       by Tomoya ASAI (dynamis)       Mozilla Japan - T...
about:dynamis (Tomoya ASAI)                  http:// dynamis.jp                    @dynamitter                  facebook.c...
JavaScript 最新事情- 開発者なら知っておきたい次世代 JS -     ECMAScript 5th & 6th Introduction   HTML5 や DOM API の話はしません
Agenda         JavaScript.Past         ECMAScript 5th         ECMAScript 6th         (Appendix)         (References)      ...
おことわり。    現行仕様は注目機能を抜粋    次世代仕様は実装ありを中心に     特に複数 and/or 長期実装あり     草案 (rev9) より広い範囲     提案 (proposal) を中心に扱うが          Pr...
See Also...Other Presentations...
開発者ツール紹介    一通りの機能と使い方    Firefox 標準の開発者ツール     隠し設定やビルトイン関数のリ     ファレンスなども含めています    Firebug とその拡張機能     アイコンや背景画像を変更する   ...
Firefox OS & Marketplace         Web プラットフォーム           Web API が進化を続けている         Marketplace           Web アプリ配信システム     ...
CSS 最新機能紹介     CSS の新機能紹介      新機能や昨年から変わった点              http://r.dynamis.jp/css2012
セキュリティ関連機能紹介    セキュリティ大事!      知っておくべき機能です    Content Security Policy      次世代セキュリティポリシー      Same Origin Policy はもう古い    ...
JavaScript.PastHistory of JavaScript...
1995.04          Brendan Eich、Netscape へ            「ブラウザに Scheme を」            という に食いついたが...          JavaScript の父     ...
JavaScript の祖先 Java              Scheme    Self構文                 第一級関数    Prototypeprimitive/objectY2K バグ               J...
1995.05          Brendan Eich、Mocha を実装            最初は 10 日程度でやっつけ実装            96年秋に再実装 (SpiderMonkey)          JavaScrip...
Microsoft in 1996          3月 MS が Java ライセンス取得            JavaScript ライセンスも含む          8月 JScript 対応の IE3 リリース           ...
やばい!標準化しよう!    ECMA での標準化を開始     当初は W3C (or IETF) のつもり     だったが拒否される... (・・,)     Netscape は W3C 標準を無視     してたから当然の反応... ...
余談: ECMA ミーティング              NOMBAS 創始者の挨拶:                  我々は JavaScript に                  何年も取り組んできた...              ...
ECMAScript 標準化       1997.06 ECMAScript 1st         最小限の言語仕様を標準化       1998.06 ECMAScript 2nd         ISO/IEC 16262 に合わせただ...
ECMAScript 4th へ...         ECMAScript 初の抜本的改訂           Class, Namespace etc...         Yahoo! & MS らは反対           別途 ECM...
Douglas Crockford@Yahoo!         Yahoo! JavaScript Architect           JSON, JavaScript Good Parts         JavaScript のセミナ...
VSThe Boss of You        Father of JS
ECMAScript 4th よ永遠に...                  VSThe Boss of You        Father of JS Win!                    Lose...
JavaScript の父、永遠に…           Mozilla の CTO です           4 時間前の姿です           生きてます。           念のため。             http://inst...
ECMAScript Harmony へ        2008.07 ECMA 3.1 ベースに注力          CodeName: Harmony          言語の抜本的改訂は断念        2009.12 ECMAScr...
その頃 JS エンジンは...       2006.xx Google V8 開発開始       2006.11 Adobe Tamarin 公開       2008.06 SquirrelFish 公開       2008.08 Tr...
進化する JS エンジン     2008.09 SquirrelFish Extreme     2010.12 Crankshaft for V8     2011.03 JägerMonkey (Fx4)     2011.09 Rive...
ECMAScript 5thfirst release of Harmony...
ECMAScript 5th            現行の標準仕様です               5 と 5.1 は区別する意味なし            IE9 以降はほぼフルサポート               Firefox4+, Ch...
後方互換スクリプト    最初に読み込んで後方互換に:    Augment.js      http://augmentjs.com/    ddr-ecma5      http://code.google.com/p/ddr-ecma5/...
Ready!Native JSON         ボスの作った仕様。         IE8+ その他広くサポート          IE6,7 には json2.js で対応          http://json.org/js.html...
Native JSON//	 JSON	 文字列から	 JavaScript	 オブジェクトを生成var	 obj1	 =	 JSON.parse([1,	 2,	 3,	 4]);var	 obj2	 =	 JSON.parse({"key"...
JSON 利用の注意      IE8 は UTF-8 文字列を stringify      でエスケープ (uXXXX) される        unescape(JSON.stringify("文字        列").replace(/...
Ready!Array Extra          配列操作メソッドを追加              indexOf, lastIndexOf,              every, some, forEach,              ...
Array Extra - Basic Usagefunction	 isPositive(e,	 i,	 arr)	 {	 return	 (e	 >	 0);	 }[1,3,-1,-3,5].filter(isPositive);//	 -...
Array Extra - Basic Usagefunction	 sum(a,b)	 {	 return	 a+b;	 }function	 concatArray(a,b)	 {	 return	 a.concat(b);	 }var	 ...
Array Extra - Extra Usage//	 文字列の各文字に対して処理する例function	 getcharcode(x)	 {	 return	 x.charCodeAt(0);	 }Array.prototype.map.c...
Ready!   No SafariFunction.prototype.bind                 "this" を固定した関数を定義                     arguments も固定可能           ...
Callback でも this を継承var	 obj	 =	 {	 	 before:	 function()	 {	 //	 this	 を	 self	 に保持する必要あり	 	 	 	 var	 self	 =	 this;	 	 	...
bind でメソッドを関数に//	 Arguments	 などを	 Array	 に変換するショートカット定義//	 call	 はメソッドとして使う必要があるので美しくないvar	 slice1	 =	 Array.prototype.sli...
bind で関数の引数を固定//	 2点間の距離function	 distance(x1,y1,	 x2,y2)	 {	 	 return	 Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2));}di...
No IE   No ShimStrict Mode                   良くあるミスをエラーとして検出                   IE9 未サポートに要注意                    IE10+, Fir...
Strict Mode//	 ファイル冒頭で	 "use	 strict";	 を書くとオンになる"use strict";var	 type	 =	 "foo";//	 未定義の変数への代入typo	 =	 "bar";//	 ×	 asig...
Strict Mode"use strict";//	 オブジェクトのプロパティ名や関数の引数名の重複var	 obj	 =	 {	 foo:	 1,	 foo:	 2	 }//	 ×	 property	 name	 foo	 appears...
Strict Mode//	 Strict	 Mode	 は関数単位でも利用できます(function	 dosomething()	 {	 	 "use	 strict";	 	 //	 関数内だけ	 Strict	 Mode	 に	 	 t...
more about Strict Mode...                      with 使用禁止                      arguments.caller/callee 禁止                  ...
Ready!   No ShimGetter & Setter                   プロパティ値の取得・設定を行                   うための特別なメソッド                   __defineGe...
Getter & Settervar	 incremantal	 =	 {	 	 _n:	 0,	 	 get	 next()	 {	 return	 this._n++;	 },	 //	 アクセス時に呼び出し	 	 set	 next(n)...
Memoization (Lazily Load)var	 obj	 =	 {	 	 get	 somethinglarge()	 {	 	 	 	 //	 getter	 自身を削除し、単なるプロパティに変更	 	 	 	 delete	 t...
Ready!   No Shimseal & freeze                   オブジェクトを静的に                    間違って書き換えるのを防止                    元に戻すことはできない...
sealvar	 obj	 =	 {	 foo:	 1,	 bar:	 2	 };obj.foo	 =	 3;obj.baz	 =	 4;delete	 obj.bar;console.log(obj);//	 ->	 {	 foo:	 3,	...
freeze"use	 strict";	 //	 黙って無視せず例外を発生させるvar	 obj	 =	 {	 foo:	 1,	 bar:	 2	 };obj.foo	 =	 3;obj.baz	 =	 4;delete	 obj.bar;...
and more...          オブジェクト指向サポート系              Object.create              Object.defineProperty              Object.getPro...
and more...          その他いろいろ...              String.prototype.trim              Array.isArray, Date.now              Date....
summary:ECMA5th        Strict Mode でミスを減少        JSON や Array 関数が便利に        オブジェクト指向周りも強化        基本的に構文は変化なし        後方互換は ...
New...Talk about New Thing...
新しいといえば…    iPhone 5 話題ですね。     新しい iPhone とは呼ばない…    個人的には電話いらないので    iPod touch の方が気になる     一応テスト用の iOS 端末いるし    個人的には京都...
ふぉくすふぉん!      これがホントの      新しい iPhone!?
ECMAScript 6thNext release of Harmony...
ECMAScript 6th の目標        より書きやすい言語            想定用途: 複雑なアプリ、ライブラリ            次仕様のコードジェネレータ        テスト可能な仕様へ        相互運用性を向...
この表古くてゴメン
後方互換スクリプト    最初に読み込んで後方互換に:    es6-shim      https://github.com/paulmillr/es6-shim
ProposalSimple Sets                        他の言語にもある Set                             = Python: set, Ruby: Set,             ...
Simple Setvar set = new Set();//	 集合に追加・確認・削除set.add("Firefox");set.add("Thunderbird");set.add(+0);	 set.add(NaN);set.has(...
ProposalSimple Maps                        他の言語にもある Map                             = Python: dict, Ruby: Hash,           ...
Simple Mapvar map = new Map();  var	 str = "Mozilla",	 obj = {}, func = function(){};// Map	 に値を格納map.set(str, "Firefox");...
ProposalWeak Maps             Firefox6+, Chrome18+                  Firefox は初期仕様の実装                  Chrome は about:flags ...
ProposalDirect Proxies                オブジェクトの操作に Trap                    独自の処理をする関数を定義                    get, set, delete...
Direct Proxiesvar	 handler	 =	 {  get:	 function(target,	 name)	 {	 //	 読み出し時に	 Trap    return	 name	 in	 target	 ?	 targe...
Proposalconst, let & Block Scope                        let の実装は広がりつつある                             Firefox が昔から実装        ...
const        const GoldenRatio = 1.61803;        定数を宣言(定義)          let 同様のブロックスコープ          宣言時に初期化(代入)が必須        現ブラウザの実...
const 利用の注意      const で逆に遅いこともある          過渡期仕様の欠陥による          const 変数が初期化済みかどうか          実行時に判断が必要な場合      ECMA 6th 準拠実...
let{	 	 //	 let	 定義:	 ブロックスコープ	 	 let	 a	 =	 1,	 b	 =	 10;	 	 //	 let	 式・文:	 let	 (...)	 に続く式・文中だけで有効	 	 let	 (a	 =	 100,	...
ProposalDestructuring (分割代入)               代入左辺を配列やオブジェクト               のように書き一括・部分代入                   Firefox で古くから実装済み ...
Destructuring (分割代入)//	 Array	 のサンプル://	 値の入れ替え[a,	 b]	 =	 [b,	 a];//	 関数から複数の値を返すvar	 [c,d]	 =	 (function	 f()	 {	 return...
Destructuring (分割代入)//	 Object	 のサンプルvar	 fx={	 name:"Firefox",	 vendor:"Mozilla",	 ver:13	 };var	 ch={	 name:"Chrome",	 	...
Proposalfor-of ループ           キーじゃなくて要素でループ              現在 Firefox13+ だけが対応           これくらい当然使いたい…           http://wiki.e...
for-of ループlet	 arr	 =	 ["Fx",	 "Ch",	 "IE"];for	 (let	 k	 in	 arr)	 	 console.log(k);//	 ->	 0,	 1,	 2for	 (let	 v	 of	 ar...
Proposaldefault parameter                       関数の引数デフォルト値を設定                           Firefox15+ のみサポート                ...
default parameterfunction	 win(browser="IE")	 {	 return	 browser	 }win()	 //	 ->	 "IE"win("Firefox")	 //	 ->	 "Firefox"//	...
Proposalrest parameter                  残りの引数を配列で受け取る                      Firefox15+ のみサポート                  これまた当然欲しい機能…...
rest parameterfunction	 f(a,	 b,	 ...args)	 {	 return	 args;	 }//function	 f(a,	 b){	 //	 従来の	 JS	 で書く場合://  var	 args	 =	...
ProposalArray Comprehensions                        配列の内包表記                            Python や Haskell にもあるやつ            ...
Array Comprehensions//	 配列のフィルタ[x	 for	 (x	 of	 [1,-4,5,3,-7])	 if	 (x	 >	 0)]//	 ->	 [1,	 5,	 3]//	 配列のマップ[x*x	 for	 (x	 ...
ProposalIterators & Generators            Python のジェネレータ的なヤツ                 Python などを参考に導入された            Firefox がサポート  ...
Strawman   WebGL SpecTyped Array                    型固定配列で高速数値演算                        元々 WebGL で導入され FileAPI,           ...
Typed Array         ArrayBuffer(byteLength)           メモリを確保するバッファ         The Typed Array View Types:           ArrayBuff...
Typed Array & View//	 16	 バイト長のバッファを確保var	 buffer	 =	 new	 ArrayBuffer(16);//	 32bit	 整数	 x	 4	 として読み出すビューを定義var	 int32Vie...
StrawmanParallelArray           並列演算用配列             CPU や GPU をフル活用           Firefox17+             旧 RiverTrail by Intel...
Ready!    Strawman & ProposalMore Libraries...                 未実装だが Shim で後方互換に                 Math の拡張                 ...
StrawmanGlobalization                  日時や通貨などの文字列をロ                  ケール等に応じて出力                       MS がプロトタイプ実装を IE の ...
summary:ECMA6th        標準クラスやメソッドの追加         Set, Map, WeakMap, DirectProxies,         Math.*, String.*, Globalization... ...
more:ECMAScript6th         今回は割愛しましたがまだまだ         いろんな機能が議論中…         ex. 大規模開発に…          Class や Modules         ex. テンプ...
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 の基本機能を標準化                  したスクリプト言語       ...
Versioning について        Harmony の後方非互換機能に        opt-inする方法は未確定         use version 6;? Module 利用時?        Firefox は 6th 専用...
DOMCrypt           暗号化処理サポート用 API             Firefox 拡張機能として試験実装           JavaScript 高速化             = エンジン高速化 + 専用 API ...
Referenceslink list...
現行仕様ECMAScript (ECMA-262) http://www.ecma-international.org/publications/standards/ Ecma-262.htmECMAScript 5th HTML 版 http...
次世代仕様ECMAScript Wiki http://wiki.ecmascript.orgECMAScript 6th Draft Specification http://wiki.ecmascript.org/doku.php? id=h...
ブラウザ実装状況Compatibility Table 単純検出なのでバグあり実装も含む&検出ミスもあり 更新頻度は程々なので開発版の実装状況は参考程度 http://kangax.github.com/es5-compat-table/Fir...
構文テストなどJSLint - by The Boss of You http://jslint.com/iv / js : ES.next - ES.next lexer and parser http://constellation.git...
実装SpiderMonkey Build Documentation https://developer.mozilla.org/en/SpiderMonkey/ Build_DocumentationHow to Download and B...
JavaScript.Next Returns
JavaScript.Next Returns
JavaScript.Next Returns
Upcoming SlideShare
Loading in...5
×

JavaScript.Next Returns

17,303

Published on

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

Published in: Technology

Transcript of "JavaScript.Next Returns"

  1. 1. #KansumiB1JavaScript.Next.returns @ Developers Summit 2012 Kansai by Tomoya ASAI (dynamis) Mozilla Japan - Technical Marketing last update on 2012.09.15
  2. 2. about:dynamis (Tomoya ASAI) http:// dynamis.jp @dynamitter facebook.com/ dynamis mailto: Tomoya ASAI (dynamis) <dynamis@mozilla-japan.org>
  3. 3. JavaScript 最新事情- 開発者なら知っておきたい次世代 JS - ECMAScript 5th & 6th Introduction HTML5 や DOM API の話はしません
  4. 4. Agenda JavaScript.Past ECMAScript 5th ECMAScript 6th (Appendix) (References) from Past to Future
  5. 5. おことわり。 現行仕様は注目機能を抜粋 次世代仕様は実装ありを中心に 特に複数 and/or 長期実装あり 草案 (rev9) より広い範囲 提案 (proposal) を中心に扱うが Proposal 試案 (strawman) も一部含む Strawman 流動的な Module とか割愛… 今回はネタ的な話は少なめです m(_ _)m
  6. 6. See Also...Other Presentations...
  7. 7. 開発者ツール紹介 一通りの機能と使い方 Firefox 標準の開発者ツール 隠し設定やビルトイン関数のリ ファレンスなども含めています Firebug とその拡張機能 アイコンや背景画像を変更する カスタマイズにも言及してます http://r.dynamis.jp/devtools
  8. 8. Firefox OS & Marketplace Web プラットフォーム Web API が進化を続けている Marketplace Web アプリ配信システム Firefox OS Web がネイティブな OS http://r.dynamis.jp/fxos
  9. 9. CSS 最新機能紹介 CSS の新機能紹介 新機能や昨年から変わった点 http://r.dynamis.jp/css2012
  10. 10. セキュリティ関連機能紹介 セキュリティ大事! 知っておくべき機能です Content Security Policy 次世代セキュリティポリシー Same Origin Policy はもう古い http://r.dynamis.jp/sec
  11. 11. JavaScript.PastHistory of JavaScript...
  12. 12. 1995.04 Brendan Eich、Netscape へ 「ブラウザに Scheme を」 という に食いついたが... JavaScript の父 現 Mozilla CTO 当時の写真ではありません
  13. 13. JavaScript の祖先 Java Scheme Self構文 第一級関数 Prototypeprimitive/objectY2K バグ JavaScript
  14. 14. 1995.05 Brendan Eich、Mocha を実装 最初は 10 日程度でやっつけ実装 96年秋に再実装 (SpiderMonkey) JavaScript と改名してリリース Netscape と Sun の共同発表 改名はマーケティング上の理由 JavaScript の商標権は Sun (現 Oracle) が保有 Netscape (現 Mozilla) は Sun との契約の元で利用
  15. 15. Microsoft in 1996 3月 MS が Java ライセンス取得 JavaScript ライセンスも含む 8月 JScript 対応の IE3 リリース MS Java 同様に非互換だらけ...
  16. 16. やばい!標準化しよう! ECMA での標準化を開始 当初は W3C (or IETF) のつもり だったが拒否される... (・・,) Netscape は W3C 標準を無視 してたから当然の反応... ブラウザ依存の API や DOM は ECMAScript 仕様には含まない
  17. 17. 余談: ECMA ミーティング NOMBAS 創始者の挨拶: 我々は JavaScript に 何年も取り組んできた... んなわけあるか! Brendan は聞いたことすらない MS は最初補欠部隊を投入し、 Brendan に負け精鋭部隊に交代 NOMBAS はスクリプト言語 Cmm による "Espresso Pages" を公開してた会社
  18. 18. 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)
  19. 19. ECMAScript 4th へ... ECMAScript 初の抜本的改訂 Class, Namespace etc... Yahoo! & MS らは反対 別途 ECMAScript 3.1 へ... Douglas Crockford@Yahoo! Chris Wilson@MS (現 Google)
  20. 20. Douglas Crockford@Yahoo! Yahoo! JavaScript Architect JSON, JavaScript Good Parts JavaScript のセミナーでも有名 職業: The Boss of You http://javascript.crockford.com/, http://crockford.com/
  21. 21. VSThe Boss of You Father of JS
  22. 22. ECMAScript 4th よ永遠に... VSThe Boss of You Father of JS Win! Lose...
  23. 23. JavaScript の父、永遠に… Mozilla の CTO です 4 時間前の姿です 生きてます。 念のため。 http://instagram.com/p/PiKLezxDWt/
  24. 24. 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 のために更新しただけ 合意が取れる範囲に絞って標準化が行われた
  25. 25. その頃 JS エンジンは... 2006.xx Google V8 開発開始 2006.11 Adobe Tamarin 公開 2008.06 SquirrelFish 公開 2008.08 TraceMonkey 公開 2008.09 Chrome & V8 公開 Brendan は 2006 年に V8 について知った時に OSS 化や 共同開発を提案したが Google は拒否し極秘開発を続けた...
  26. 26. 進化する 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) 高速化も高機能化もまだまだこれからです
  27. 27. ECMAScript 5thfirst release of Harmony...
  28. 28. ECMAScript 5th 現行の標準仕様です 5 と 5.1 は区別する意味なし IE9 以降はほぼフルサポート Firefox4+, Chrome13+, Opera11.60+ IE9+ (strict mode 以外) Safari 5.1+ (bind 以外) 詳細は互換表を参照: http://kangax.github.com/es5-compat-table/
  29. 29. 後方互換スクリプト 最初に読み込んで後方互換に: Augment.js http://augmentjs.com/ ddr-ecma5 http://code.google.com/p/ddr-ecma5/ es5-shim https://github.com/kriskowal/es5-shim/
  30. 30. Ready!Native JSON ボスの作った仕様。 IE8+ その他広くサポート IE6,7 には json2.js で対応 http://json.org/js.html http://json.org/
  31. 31. 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}
  32. 32. JSON 利用の注意 IE8 は UTF-8 文字列を stringify でエスケープ (uXXXX) される unescape(JSON.stringify("文字 列").replace(/u/g, %u)) stringify 第2引数には注意 古い Firefox 等にバグあり Date オブジェクトにも注意 ブラウザ間の挙動が異なる 受け渡しするデータによっては要注意
  33. 33. Ready!Array Extra 配列操作メソッドを追加 indexOf, lastIndexOf, every, some, forEach, map, filter, reduce, reduceRight 古くから広く実装されてきた Firefox 1.5 や 3 が最初に実装 IE6 8 には Augment.js など
  34. 34. 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
  35. 35. 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
  36. 36. 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) ...
  37. 37. Ready! No SafariFunction.prototype.bind "this" を固定した関数を定義 arguments も固定可能 Safari は未サポート IE9+, Firefox4+, Chrome7+, Safari5.3+ Opera11.60+ サポート 但し Safari は疑似実装か… Augment.js などで(ほぼ)後方互換
  38. 38. 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 に保持するのでも十分ですが...
  39. 39. 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 は便利...
  40. 40. 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
  41. 41. No IE No ShimStrict Mode 良くあるミスをエラーとして検出 IE9 未サポートに要注意 IE10+, Firefox4+, Chrome13+, Safari5.1+, Opera11.60+ が対応 IE10 はまだバグありだが期待... オンにするだけなら後方互換 非互換コードを使わなければ... テスト時だけ使うのもアリ特に理由なければ Strict Mode でエラーにならないコードを書く習慣を付けましょう
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. more about Strict Mode... with 使用禁止 arguments.caller/callee 禁止 再帰するなら関数に名前を付ける 関数中では this=null != global eval 中のコードは外部スコープに 変数を定義できない スクリプトまたは関数内のトップ レベル以外での関数定義禁止 その他いろいろ MDN 参照: https://developer.mozilla.org/en/JavaScript/Strict_mode
  46. 46. Ready! No ShimGetter & Setter プロパティ値の取得・設定を行 うための特別なメソッド __defineGetter__ などは非標準
  47. 47. 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; // -> "減らしちゃダメ!"
  48. 48. 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
  49. 49. Ready! No Shimseal & freeze オブジェクトを静的に 間違って書き換えるのを防止 元に戻すことはできない seal: プロパティ追加・削除禁止 freeze: プロパティ変更禁止 Strict Mode では例外を発生 seal/freeze されてるかどうかは isSealed/isFrozen で確認できる
  50. 50. 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
  51. 51. 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
  52. 52. and more... オブジェクト指向サポート系 Object.create Object.defineProperty Object.getPrototypeOf Object.keys Object.getOwnPropertyNames ...
  53. 53. and more... その他いろいろ... String.prototype.trim Array.isArray, Date.now Date.prototype.toISOString NaN, Infinity, undefined 定数化 preventExtensions,isExtensible perseInt("03") なども10進数に ...
  54. 54. summary:ECMA5th Strict Mode でミスを減少 JSON や Array 関数が便利に オブジェクト指向周りも強化 基本的に構文は変化なし 後方互換は Shim で対応
  55. 55. New...Talk about New Thing...
  56. 56. 新しいといえば… iPhone 5 話題ですね。 新しい iPhone とは呼ばない… 個人的には電話いらないので iPod touch の方が気になる 一応テスト用の iOS 端末いるし 個人的には京都銀行に ながーーーい iPhone して欲しい
  57. 57. ふぉくすふぉん! これがホントの 新しい iPhone!?
  58. 58. ECMAScript 6thNext release of Harmony...
  59. 59. ECMAScript 6th の目標 より書きやすい言語 想定用途: 複雑なアプリ、ライブラリ 次仕様のコードジェネレータ テスト可能な仕様へ 相互運用性を向上 可能ならデファクトを採用 バージョニングは単純に 静的検証も可能に 実行時エラーよりコンパイル時エラー http://wiki.ecmascript.org/doku.php?id=harmony:harmony
  60. 60. この表古くてゴメン
  61. 61. 後方互換スクリプト 最初に読み込んで後方互換に: es6-shim https://github.com/paulmillr/es6-shim
  62. 62. 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
  63. 63. 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
  64. 64. 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
  65. 65. 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 キーと引数の比較は === 演算子に近いが厳密には === とも異なる
  66. 66. 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
  67. 67. 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
  68. 68. 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
  69. 69. 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
  70. 70. const const GoldenRatio = 1.61803; 定数を宣言(定義) let 同様のブロックスコープ 宣言時に初期化(代入)が必須 現ブラウザの実装は古い 関数スコープ、初期化不要 http://wiki.ecmascript.org/doku.php?id=harmony:const
  71. 71. const 利用の注意 const で逆に遅いこともある 過渡期仕様の欠陥による const 変数が初期化済みかどうか 実行時に判断が必要な場合 ECMA 6th 準拠実装なら OK const は初期値必須になる etc... Fx: bug611388, JSC: bug31833 http://d.hatena.ne.jp/Constellation/20111201/1322678350
  72. 72. 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
  73. 73. ProposalDestructuring (分割代入) 代入左辺を配列やオブジェクト のように書き一括・部分代入 Firefox で古くから実装済み Opera も一部動作するが、実質 的には使い物にならない実装 JSON データ処理とか特に便利 http://wiki.ecmascript.org/doku.php?id=harmony:destructuring
  74. 74. 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
  75. 75. 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"
  76. 76. Proposalfor-of ループ キーじゃなくて要素でループ 現在 Firefox13+ だけが対応 これくらい当然使いたい… http://wiki.ecmascript.org/doku.php?id=harmony:iterators
  77. 77. 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]);
  78. 78. Proposaldefault parameter 関数の引数デフォルト値を設定 Firefox15+ のみサポート これだって当然使いたい… http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values
  79. 79. 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() {}
  80. 80. Proposalrest parameter 残りの引数を配列で受け取る Firefox15+ のみサポート これまた当然欲しい機能… http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters
  81. 81. 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;}
  82. 82. ProposalArray Comprehensions 配列の内包表記 Python や Haskell にもあるやつ JavaScript1.7 構文は Firefox2+ ECMA6th 構文は Firefox13+ for-each-in でなく for-of http://wiki.ecmascript.org/doku.php?id=harmony:array_comprehensions
  83. 83. 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]
  84. 84. 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
  85. 85. 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
  86. 86. Typed Array ArrayBuffer(byteLength) メモリを確保するバッファ The Typed Array View Types: ArrayBuffer 読み出し用ビュー Int8Array, Unit8Array, Int16Array, Uint16Array, Int32Array, Uinit32Array, Float32Array, Float64Array
  87. 87. 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
  88. 88. StrawmanParallelArray 並列演算用配列 CPU や GPU をフル活用 Firefox17+ 旧 RiverTrail by Intel & Mozilla まだ変更多そうなので今日は割愛 Interactive Shell (旧互換実装) http://rivertrail.github.com/ RiverTrail/interactive/
  89. 89. 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 は一部プロトタイプ実装プラグインあり
  90. 90. StrawmanGlobalization 日時や通貨などの文字列をロ ケール等に応じて出力 MS がプロトタイプ実装を IE の プラグインとして公開 IE 本体には未実装なので割愛 まだ単なる試案の段階 http://wiki.ecmascript.org/doku.php?id=globalization:globalization
  91. 91. summary:ECMA6th 標準クラスやメソッドの追加 Set, Map, WeakMap, DirectProxies, Math.*, String.*, Globalization... 無駄なコードが減り書きやすく destructing, defalut/rest param, for-of, array comprehensions... 高速処理にも Typed Array, ParallelArray...
  92. 92. more:ECMAScript6th 今回は割愛しましたがまだまだ いろんな機能が議論中… ex. 大規模開発に… Class や Modules ex. テンプレート文字列… Quasi-Literals
  93. 93. JS.Next 楽しいね!
  94. 94. JavaScript.Future 扱い易く書き易く サーバやエンタープライズも API は HTML & DOM で GPU やハードもフル活用
  95. 95. 10年前: 誰も尊敬してくれない Java のできそこない...
  96. 96. 現在:"HTML5" の基盤言語 何でも HTML5 = 何でも JavaScript
  97. 97. 10年後: Java と対等に 尊敬され愛される言語になりたい...
  98. 98. 10年後:いや、Java を越える! 父を乗り越えて一人前...
  99. 99. Any Question?
  100. 100. Appendixother ideas...
  101. 101. ECMAScript !== JavaScript ECMAScript JavaScript の基本機能を標準化 したスクリプト言語 JavaScript (広義) ECMAScript + ブラウザ用機能 JavaScript (狭義) Netscape/Firefox の実装 広義の JS にバージョンはありません (JS 1.x などは Firefox バージョンに対応)
  102. 102. Versioning について Harmony の後方非互換機能に opt-inする方法は未確定 use version 6;? Module 利用時? Firefox は 6th 専用モードなし V8 は現在 3 モード実装: classic, strict, extended --harmony フラグで extended 更に --harmony_scoping とか
  103. 103. DOMCrypt 暗号化処理サポート用 API Firefox 拡張機能として試験実装 JavaScript 高速化 = エンジン高速化 + 専用 API 一部 API は DOM で標準化 ECMAScript が全てではない JSON のように需要のある専用 API が定義されていく https://addons.mozilla.org/ja/firefox/addon/domcrypt/
  104. 104. Referenceslink list...
  105. 105. 現行仕様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
  106. 106. 次世代仕様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
  107. 107. ブラウザ実装状況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/
  108. 108. 構文テストなど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
  109. 109. 実装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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×