SlideShare a Scribd company logo
1 of 94
Download to read offline
Slide DL: JSNext.org




     JavaScript.Next
          @ Developers Summit 2012
           by Tomoya ASAI (dynamis)
           Mozilla Japan - Technical Marketing




 16-C-5                     last update on 2012.02.15
                        see also: http://dynamis.jp/r
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 長期実装あり
     草案 (rev5) より広い範囲
     提案 (proposal) を中心に扱うが
          Proposal
     試案 (strawman) も一部含む
         Strawman

    <¦ 演算子とか扱いません。
          今回はネタ的な話は少なめです m(_ _)m
"HTML5" を期待された方へ
      HTML や CSS 関連が主題:
       about:HTML&Firefox
       HTML5 for Designers
       Firefox with HTML+CSS
      セキュリティ関連特集:
       Firefox Security Features
      開発者向けツール: (やや古い)
       Firefox Developer Tools
         必要に応じて他の講演スライドもご参照ください
JavaScript.Past
History of JavaScript...
1995.04
          Brendan Eich、Netscape へ
            「ブラウザに Scheme を」
            という に食いついたが...


          JavaScript の父
          現 Mozilla CTO


                          当時の写真ではありません
JavaScript の祖先
 Java              Scheme    Self
構文                 第一級関数    Prototype
primitive/object
Y2K バグ




               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/
VS
The Boss of You        Father of JS
ECMAScript 4th よ永遠に...



                  VS
The Boss of You        Father of JS

 Win!                    Lose...
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 は拒否し極秘開発を続けた...
ECMAScript 5th
first 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 Usage
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
Array Extra - Basic Usage
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
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]
//	 parseInt	 は	 (文字列,	 基数)	 を受け取る関数
//	 関数には	 (要素,	 インデックス,	 配列)	 が渡される
Ready!   No Safari



Function.prototype.bind
                 "this" を固定した関数を定義
                     arguments も固定可能
                 Safari は未サポート
                     IE9+, Firefox4+, Chrome7+,
                     Opera11.60+ でサポート
                     WebKit Nightly も対応済み
                 Augment.js などで(ほぼ)後方互換
Function.prototype.bind
//	 Arguments	 などを	 Array	 に変換するショートカット定義
var	 slice1	 =	 Array.prototype.slice;
slice1.call(arguments);
//	 ->	 Array	 に変換された	 arguments

var	 slice2	 =	 Function.prototype.call.bind(slice1);
slice2(arguments);
//	 単なる関数呼び出しのようにシンプルに
Function.prototype.bind
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 に保持するので十分ですが...
Function.prototype.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 Shim



Strict 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-only
delete	 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
//	 	 	 	 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
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 中のコードは外部スコープに
          変数を定義できない
          スクリプトまたは関数内のトップ
          レベル以外での関数定義禁止
          その他いろいろ...
Ready!   No Shim



Getter & Setter
                   プロパティ値の取得・設定を行
                   うための特別なメソッド
                   __defineGetter__ などは非標準
Getter & Setter
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;	 //	 ->	 "減らしちゃダメ!"
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 Shim



seal & freeze
                   オブジェクトを静的に
                    間違って書き換えるのを防止
                    元に戻すことはできない

                   seal: プロパティ追加・削除禁止
                   freeze: プロパティ変更禁止
                    Strict Mode では例外を発生


          seal/freeze されてるかどうかは isSealed/isFrozen で確認できる
seal
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
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-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
and more...
          String.prototype.trim
          Array.isArray, Date.now
          Date.prototype.toISOString
          NaN, Infinity, undefined 定数化
          preventExtensions,isExtensible
          perseInt("03") なども10進数に
          その他いろいろ...
about:ECMA5th
        Strict Mode でミスを減少
        JSON や Array 関数が便利に
        オブジェクト指向周りも強化
        基本的に構文は変化なし
        後方互換は Shim で対応
ECMAScript 6th
Next release of Harmony...
ECMAScript 6th の目標
        より書きやすい言語
            複雑なアプリ、ライブラリ、
            次仕様のコードジェネレータ
        テスト可能な仕様へ
        相互運用性を向上
            可能ならデファクトを採用
        バージョニングは単純に
        静的検証も可能に
        http://wiki.ecmascript.org/doku.php?id=harmony:harmony
後方互換スクリプト
    最初に読み込んで後方互換に:
    es6-shim
      https://github.com/paulmillr/es6-shim
Proposal



Simple Maps
                        他の言語にもある Map
                             = Python: dict, Ruby: Hash,
                             Java: java.util.HashMap,
                             C++: std::unorderd_map

                        Firefox12+, Chrome18+
                             Chrome は about:flags で有効化
                             未実装でも ec6-shim で互換に

           http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets
Simple Map
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
              キーと引数の比較は === 演算子に近いが厳密には === とも異なる
Proposal



Simple Sets
                        他の言語にもある Set
                             = Python: set, Ruby: Set,
                             Java: java.util.HashSet,
                             C++: std::unordered_set

                        Firefox12+, Chrome18+
                             Chrome は about:flags で有効化
                             未実装でも ec6-shim で互換に

           http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets
Simple Set
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
Proposal



Weak Maps
             Firefox6+, Chrome18+
                  Firefox は初期仕様の実装
                  Chrome は about:flags で有効化
                  未実装でも ec6-shim で互換に

             Map のキーは弱参照=GC対象
                  仕様変更されてるので詳細割愛
                  詳しくは MDN 参照
           http://wiki.ecmascript.org/doku.php?id=harmony:weak_maps
Proposal



Proxy
           Firefox4+, Chrome18+
             いずれも初期仕様の実装
             Chrome は about:flags で有効化

           仕様は Direct Proxies に移行
             仕様変更されてるので詳細割愛
             詳しくは MDN 参照


           http://wiki.ecmascript.org/doku.php?id=harmony:proxies
Proposal



const, 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
Proposal



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



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



Array 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]
Proposal



Iterators & 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 Spec



Typed 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
Ready!   Strawman & Proposal



More Libraries...
                未実装だが Shim で後方互換に
                Math の拡張
                   cosh, sinh, tanh, arosh, asinh, atanh,
                   log1p, log2, log10, sign, trunc
                String の拡張
                   startsWith, endsWith, contains, Repeat,
                   toArray, reverse
                Number の拡張
                   isFinite, isNaN, isInteger, toInteger
                      MS はプロトタイプ実装をプラグインとして公開
Strawman



Globalization
                  日時や通貨などの文字列をロ
                  ケール等に応じて出力
                       MS がプロトタイプ実装をプラグ
                       インとして公開

                  IE 本体には未実装なので割愛
                       まだ単なる試案の段階



           http://wiki.ecmascript.org/doku.php?id=globalization:globalization
JS.Next 楽しいね!


 JS.Next 勉強会やりましょう (・・).
JavaScript.Future
          扱い易く書き易く
          サーバやエンタープライズも
          API は HTML & DOM で
          GPU やハードもフル活用
10年前:

 誰も尊敬してくれない



        Java のできそこない...
現在:

"HTML5" の基盤言語



  何でも HTML5 = 何でも JavaScript
10年後:

   Java と対等に



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

いや、Java を越える!



    父を乗り越えて一人前...
Any Question?
Appendix
other 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 とか
WebCL
        OpenCL を JavaScript から
          Nvidia が Firefox に試験実装
          Samsung が WebKit に試験実装

        Web アプリでも GPU フル活用
          パフォーマンス差は歴然。




                     http://www.khronos.org/webcl/
RiverTrail
             並列計算用 API
              Intel による提案・実装
              Firefox 拡張機能として試験実装




                http://blogs.intel.com/research/2011/09/15/pjs/
                         https://github.com/RiverTrail/RiverTrail
DOMCrypt
           暗号化処理サポート用 API
             Firefox 拡張機能として試験実装
           JavaScript 高速化
             = エンジン高速化 + 専用 API

           一部 API は DOM で標準化
             ECMAScript が全てではない
            JSON のように需要のある専用 API が定義されていく
             https://addons.mozilla.org/ja/firefox/addon/domcrypt/
References
link list...
現行仕様
ECMAScript (ECMA-262)
 http://www.ecma-international.org/publications/standards/
 Ecma-262.htm
ECMAScript 5th HTML 版
 http://es5.github.com/
ECMAScript for XML (E4X, ECMA-357)
 http://www.ecma-international.org/publications/standards/
 Ecma-357.htm
ECMAScript 3.1 時代からの草案
 http://wiki.ecmascript.org/doku.php?
 id=es3.1:es3.1_proposal_working_draft
次世代仕様
ECMAScript Wiki
 http://wiki.ecmascript.org
ECMAScript 6th Draft Specification
 http://wiki.ecmascript.org/doku.php?
 id=harmony:specification_drafts
Harmony Proposals
 http://wiki.ecmascript.org/doku.php?id=harmony:proposals
Harmony Strawman
 http://wiki.ecmascript.org/doku.php?id=strawman:strawman
ブラウザ実装状況
Compatibility Table
 単純検出なのでバグあり実装も含む&検出ミスもあり
 更新頻度は程々なので開発版の実装状況は参考程度
 http://kangax.github.com/es5-compat-table/
MDN で個別機能ページ末尾を確認するのが比較的確実
 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.html
ECMAScript 6th Syntax Grammer
 http://teramako.github.com/ECMAScript/
 ecma6th_syntax.html
Try Strict by MS
 http://ie.microsoft.com/testdrive/HTML5/TryStrict/
 Default.html
実装
SpiderMonkey Build Documentation
 https://developer.mozilla.org/en/SpiderMonkey/
 Build_Documentation
How to Download and Build V8
 http://code.google.com/intl/ja/apis/v8/build.html
JavaScriptCore
 http://trac.webkit.org/wiki/JavaScriptCore
lv5 - ECMA262 5.1 エンジン by @Constellation
 https://github.com/Constellation/iv
vimperator で ES.next
 http://d.hatena.ne.jp/caisui/20111217/1324098318

More Related Content

What's hot

[デブサミ2012]趣味と実益の脆弱性発見
[デブサミ2012]趣味と実益の脆弱性発見[デブサミ2012]趣味と実益の脆弱性発見
[デブサミ2012]趣味と実益の脆弱性発見Yosuke HASEGAWA
 
Jjug ccc 2016 spring i 5 javaデスクトッププログラムを云々
Jjug ccc 2016 spring i 5 javaデスクトッププログラムを云々Jjug ccc 2016 spring i 5 javaデスクトッププログラムを云々
Jjug ccc 2016 spring i 5 javaデスクトッププログラムを云々torutk
 
PHPの今とこれから2016
PHPの今とこれから2016PHPの今とこれから2016
PHPの今とこれから2016Rui Hirokawa
 
Spring frameworkが大好きなおはなし
Spring frameworkが大好きなおはなしSpring frameworkが大好きなおはなし
Spring frameworkが大好きなおはなしSatoshi Kisanuki
 
自宅で出来る!ゲームサーバの作り方
自宅で出来る!ゲームサーバの作り方自宅で出来る!ゲームサーバの作り方
自宅で出来る!ゲームサーバの作り方光晶 上原
 
メッセージングプラットフォーム Zimbra の紹介とその活用術 - JJUG ナイトセミナー2013/3
メッセージングプラットフォーム Zimbra の紹介とその活用術 - JJUG ナイトセミナー2013/3メッセージングプラットフォーム Zimbra の紹介とその活用術 - JJUG ナイトセミナー2013/3
メッセージングプラットフォーム Zimbra の紹介とその活用術 - JJUG ナイトセミナー2013/3日本Javaユーザーグループ
 
PHP in Java -Quercus- によるレガシーマイグレーション実例 #jjug_ccc #ccc_r12
PHP in Java -Quercus- によるレガシーマイグレーション実例 #jjug_ccc #ccc_r12PHP in Java -Quercus- によるレガシーマイグレーション実例 #jjug_ccc #ccc_r12
PHP in Java -Quercus- によるレガシーマイグレーション実例 #jjug_ccc #ccc_r12Ryuji Yamashita
 
OpenJDK トラブルシューティング #javacasual
OpenJDK トラブルシューティング #javacasualOpenJDK トラブルシューティング #javacasual
OpenJDK トラブルシューティング #javacasualYuji Kubota
 
java.lang.OutOfMemoryError #渋谷java
java.lang.OutOfMemoryError #渋谷javajava.lang.OutOfMemoryError #渋谷java
java.lang.OutOfMemoryError #渋谷javaYuji Kubota
 
Java EE 8先取り!MVC 1.0入門 [EDR2対応版] 2015-10-10更新
Java EE 8先取り!MVC 1.0入門 [EDR2対応版] 2015-10-10更新Java EE 8先取り!MVC 1.0入門 [EDR2対応版] 2015-10-10更新
Java EE 8先取り!MVC 1.0入門 [EDR2対応版] 2015-10-10更新Masatoshi Tada
 
WildFly Swarmではじめる「パーツとしてのJavaEE」
WildFly Swarmではじめる「パーツとしてのJavaEE」WildFly Swarmではじめる「パーツとしてのJavaEE」
WildFly Swarmではじめる「パーツとしてのJavaEE」Hiroaki NAKADA
 
Tomcatの実装から学ぶクラスローダリーク #渋谷Java
Tomcatの実装から学ぶクラスローダリーク #渋谷JavaTomcatの実装から学ぶクラスローダリーク #渋谷Java
Tomcatの実装から学ぶクラスローダリーク #渋谷JavaNorito Agetsuma
 
Java EE 再入門
Java EE 再入門Java EE 再入門
Java EE 再入門minazou67
 
Play framework 2.0のおすすめと1.2からのアップグレード
Play framework 2.0のおすすめと1.2からのアップグレードPlay framework 2.0のおすすめと1.2からのアップグレード
Play framework 2.0のおすすめと1.2からのアップグレードKazuhiro Hara
 
JVM のいろはにほ #javajo
JVM のいろはにほ #javajoJVM のいろはにほ #javajo
JVM のいろはにほ #javajoYuji Kubota
 
#jjug_ccc #ccc_f1 広告システム刷新の舞台裏 - PHPからJavaに変えてみました
#jjug_ccc #ccc_f1 広告システム刷新の舞台裏 - PHPからJavaに変えてみました#jjug_ccc #ccc_f1 広告システム刷新の舞台裏 - PHPからJavaに変えてみました
#jjug_ccc #ccc_f1 広告システム刷新の舞台裏 - PHPからJavaに変えてみましたYahoo!デベロッパーネットワーク
 
JavaOne 2015 報告会 @ 東京 「About MVC 1.0 & JSON-P」
JavaOne 2015 報告会 @ 東京 「About MVC 1.0 & JSON-P」JavaOne 2015 報告会 @ 東京 「About MVC 1.0 & JSON-P」
JavaOne 2015 報告会 @ 東京 「About MVC 1.0 & JSON-P」Hiroyuki Ohnaka
 

What's hot (20)

[デブサミ2012]趣味と実益の脆弱性発見
[デブサミ2012]趣味と実益の脆弱性発見[デブサミ2012]趣味と実益の脆弱性発見
[デブサミ2012]趣味と実益の脆弱性発見
 
Jjug ccc 2016 spring i 5 javaデスクトッププログラムを云々
Jjug ccc 2016 spring i 5 javaデスクトッププログラムを云々Jjug ccc 2016 spring i 5 javaデスクトッププログラムを云々
Jjug ccc 2016 spring i 5 javaデスクトッププログラムを云々
 
PHPの今とこれから2016
PHPの今とこれから2016PHPの今とこれから2016
PHPの今とこれから2016
 
Spring frameworkが大好きなおはなし
Spring frameworkが大好きなおはなしSpring frameworkが大好きなおはなし
Spring frameworkが大好きなおはなし
 
自宅で出来る!ゲームサーバの作り方
自宅で出来る!ゲームサーバの作り方自宅で出来る!ゲームサーバの作り方
自宅で出来る!ゲームサーバの作り方
 
メッセージングプラットフォーム Zimbra の紹介とその活用術 - JJUG ナイトセミナー2013/3
メッセージングプラットフォーム Zimbra の紹介とその活用術 - JJUG ナイトセミナー2013/3メッセージングプラットフォーム Zimbra の紹介とその活用術 - JJUG ナイトセミナー2013/3
メッセージングプラットフォーム Zimbra の紹介とその活用術 - JJUG ナイトセミナー2013/3
 
PHP in Java -Quercus- によるレガシーマイグレーション実例 #jjug_ccc #ccc_r12
PHP in Java -Quercus- によるレガシーマイグレーション実例 #jjug_ccc #ccc_r12PHP in Java -Quercus- によるレガシーマイグレーション実例 #jjug_ccc #ccc_r12
PHP in Java -Quercus- によるレガシーマイグレーション実例 #jjug_ccc #ccc_r12
 
OpenJDK トラブルシューティング #javacasual
OpenJDK トラブルシューティング #javacasualOpenJDK トラブルシューティング #javacasual
OpenJDK トラブルシューティング #javacasual
 
java.lang.OutOfMemoryError #渋谷java
java.lang.OutOfMemoryError #渋谷javajava.lang.OutOfMemoryError #渋谷java
java.lang.OutOfMemoryError #渋谷java
 
Java EE 8先取り!MVC 1.0入門 [EDR2対応版] 2015-10-10更新
Java EE 8先取り!MVC 1.0入門 [EDR2対応版] 2015-10-10更新Java EE 8先取り!MVC 1.0入門 [EDR2対応版] 2015-10-10更新
Java EE 8先取り!MVC 1.0入門 [EDR2対応版] 2015-10-10更新
 
WildFly Swarmではじめる「パーツとしてのJavaEE」
WildFly Swarmではじめる「パーツとしてのJavaEE」WildFly Swarmではじめる「パーツとしてのJavaEE」
WildFly Swarmではじめる「パーツとしてのJavaEE」
 
Tomcatの実装から学ぶクラスローダリーク #渋谷Java
Tomcatの実装から学ぶクラスローダリーク #渋谷JavaTomcatの実装から学ぶクラスローダリーク #渋谷Java
Tomcatの実装から学ぶクラスローダリーク #渋谷Java
 
Java EE8 Report
Java EE8 ReportJava EE8 Report
Java EE8 Report
 
Java EE 再入門
Java EE 再入門Java EE 再入門
Java EE 再入門
 
Spring3.1概要x di
Spring3.1概要x diSpring3.1概要x di
Spring3.1概要x di
 
Play framework 2.0のおすすめと1.2からのアップグレード
Play framework 2.0のおすすめと1.2からのアップグレードPlay framework 2.0のおすすめと1.2からのアップグレード
Play framework 2.0のおすすめと1.2からのアップグレード
 
JVM のいろはにほ #javajo
JVM のいろはにほ #javajoJVM のいろはにほ #javajo
JVM のいろはにほ #javajo
 
Hello Java
Hello JavaHello Java
Hello Java
 
#jjug_ccc #ccc_f1 広告システム刷新の舞台裏 - PHPからJavaに変えてみました
#jjug_ccc #ccc_f1 広告システム刷新の舞台裏 - PHPからJavaに変えてみました#jjug_ccc #ccc_f1 広告システム刷新の舞台裏 - PHPからJavaに変えてみました
#jjug_ccc #ccc_f1 広告システム刷新の舞台裏 - PHPからJavaに変えてみました
 
JavaOne 2015 報告会 @ 東京 「About MVC 1.0 & JSON-P」
JavaOne 2015 報告会 @ 東京 「About MVC 1.0 & JSON-P」JavaOne 2015 報告会 @ 東京 「About MVC 1.0 & JSON-P」
JavaOne 2015 報告会 @ 東京 「About MVC 1.0 & JSON-P」
 

Viewers also liked

20120216 デブサミ 座談会
20120216 デブサミ 座談会20120216 デブサミ 座談会
20120216 デブサミ 座談会akihiro uehara
 
Startup groovy op
Startup groovy opStartup groovy op
Startup groovy opkyon mm
 
大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)
大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)
大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)Yuuki Namikawa
 
Developers Summit 2012 16-E-1
Developers Summit 2012 16-E-1Developers Summit 2012 16-E-1
Developers Summit 2012 16-E-1Kohei Kumazawa
 
Japan Developer Summit (jp) - Cloud Foundry, the Open Platform As A Service
Japan Developer Summit (jp) - Cloud Foundry, the Open Platform As A ServiceJapan Developer Summit (jp) - Cloud Foundry, the Open Platform As A Service
Japan Developer Summit (jp) - Cloud Foundry, the Open Platform As A ServicePatrick Chanezon
 
Japan Developer Summit (en) - Cloud Foundry, the Open Platform As A Service
Japan Developer Summit (en) - Cloud Foundry, the Open Platform As A ServiceJapan Developer Summit (en) - Cloud Foundry, the Open Platform As A Service
Japan Developer Summit (en) - Cloud Foundry, the Open Platform As A ServicePatrick Chanezon
 
横浜道場紹介 第2版
横浜道場紹介 第2版横浜道場紹介 第2版
横浜道場紹介 第2版Takao Kimura
 
2012.03.24 Agile Samurai Dojo Gathering 講演資料
2012.03.24 Agile Samurai Dojo Gathering 講演資料2012.03.24 Agile Samurai Dojo Gathering 講演資料
2012.03.24 Agile Samurai Dojo Gathering 講演資料Toshihiro Hirota
 
【16-C-4】次期Internet Explorer、IE10とHTML5 API
【16-C-4】次期Internet Explorer、IE10とHTML5 API【16-C-4】次期Internet Explorer、IE10とHTML5 API
【16-C-4】次期Internet Explorer、IE10とHTML5 APIMicrosoft
 
Agile Samurai Dojo Gathering
Agile Samurai Dojo GatheringAgile Samurai Dojo Gathering
Agile Samurai Dojo Gatheringirasally omuko
 
CouchDB JP Developers Dummit LT
CouchDB JP Developers Dummit LTCouchDB JP Developers Dummit LT
CouchDB JP Developers Dummit LTKoji Kawamura
 
Project Facilitation From Hiranabe
Project Facilitation From HiranabeProject Facilitation From Hiranabe
Project Facilitation From HiranabeYasui Tsutomu
 
デブサミ2012【16-D-7】「iOS, Android, Windows Phoneアプリを同時開発せよ!!!」(後半)
デブサミ2012【16-D-7】「iOS, Android, Windows Phoneアプリを同時開発せよ!!!」(後半)デブサミ2012【16-D-7】「iOS, Android, Windows Phoneアプリを同時開発せよ!!!」(後半)
デブサミ2012【16-D-7】「iOS, Android, Windows Phoneアプリを同時開発せよ!!!」(後半)hyoromo
 
鼻メガネの会 Rush 3 hits combo
鼻メガネの会 Rush 3 hits combo鼻メガネの会 Rush 3 hits combo
鼻メガネの会 Rush 3 hits comboriskrisk
 
Startup groovysession1
Startup groovysession1Startup groovysession1
Startup groovysession1kyon mm
 
デブサミ2012【16-D-7】「iOS, Android, Windows Phoneアプリを同時開発せよ!!!」(前半)
デブサミ2012【16-D-7】「iOS, Android, Windows Phoneアプリを同時開発せよ!!!」(前半)デブサミ2012【16-D-7】「iOS, Android, Windows Phoneアプリを同時開発せよ!!!」(前半)
デブサミ2012【16-D-7】「iOS, Android, Windows Phoneアプリを同時開発せよ!!!」(前半)hyoromo
 
【16-D-6】比べてわかるフィーチャーフォンとスマホのアプリ開発・運用のポイント
【16-D-6】比べてわかるフィーチャーフォンとスマホのアプリ開発・運用のポイント【16-D-6】比べてわかるフィーチャーフォンとスマホのアプリ開発・運用のポイント
【16-D-6】比べてわかるフィーチャーフォンとスマホのアプリ開発・運用のポイントDevelopers Summit
 
【16-D-1】UI のこれまでの10年とこれから
【16-D-1】UI のこれまでの10年とこれから【16-D-1】UI のこれまでの10年とこれから
【16-D-1】UI のこれまでの10年とこれからKen Azuma
 

Viewers also liked (20)

20120216 デブサミ 座談会
20120216 デブサミ 座談会20120216 デブサミ 座談会
20120216 デブサミ 座談会
 
Startup groovy op
Startup groovy opStartup groovy op
Startup groovy op
 
大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)
大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)
大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)
 
Developers Summit 2012 16-E-1
Developers Summit 2012 16-E-1Developers Summit 2012 16-E-1
Developers Summit 2012 16-E-1
 
Japan Developer Summit (jp) - Cloud Foundry, the Open Platform As A Service
Japan Developer Summit (jp) - Cloud Foundry, the Open Platform As A ServiceJapan Developer Summit (jp) - Cloud Foundry, the Open Platform As A Service
Japan Developer Summit (jp) - Cloud Foundry, the Open Platform As A Service
 
Japan Developer Summit (en) - Cloud Foundry, the Open Platform As A Service
Japan Developer Summit (en) - Cloud Foundry, the Open Platform As A ServiceJapan Developer Summit (en) - Cloud Foundry, the Open Platform As A Service
Japan Developer Summit (en) - Cloud Foundry, the Open Platform As A Service
 
横浜道場紹介 第2版
横浜道場紹介 第2版横浜道場紹介 第2版
横浜道場紹介 第2版
 
2012.03.24 Agile Samurai Dojo Gathering 講演資料
2012.03.24 Agile Samurai Dojo Gathering 講演資料2012.03.24 Agile Samurai Dojo Gathering 講演資料
2012.03.24 Agile Samurai Dojo Gathering 講演資料
 
【16-C-4】次期Internet Explorer、IE10とHTML5 API
【16-C-4】次期Internet Explorer、IE10とHTML5 API【16-C-4】次期Internet Explorer、IE10とHTML5 API
【16-C-4】次期Internet Explorer、IE10とHTML5 API
 
Agile Samurai Dojo Gathering
Agile Samurai Dojo GatheringAgile Samurai Dojo Gathering
Agile Samurai Dojo Gathering
 
CouchDB JP Developers Dummit LT
CouchDB JP Developers Dummit LTCouchDB JP Developers Dummit LT
CouchDB JP Developers Dummit LT
 
Project Facilitation From Hiranabe
Project Facilitation From HiranabeProject Facilitation From Hiranabe
Project Facilitation From Hiranabe
 
埼玉道場
埼玉道場埼玉道場
埼玉道場
 
デブサミ2012【16-D-7】「iOS, Android, Windows Phoneアプリを同時開発せよ!!!」(後半)
デブサミ2012【16-D-7】「iOS, Android, Windows Phoneアプリを同時開発せよ!!!」(後半)デブサミ2012【16-D-7】「iOS, Android, Windows Phoneアプリを同時開発せよ!!!」(後半)
デブサミ2012【16-D-7】「iOS, Android, Windows Phoneアプリを同時開発せよ!!!」(後半)
 
鼻メガネの会 Rush 3 hits combo
鼻メガネの会 Rush 3 hits combo鼻メガネの会 Rush 3 hits combo
鼻メガネの会 Rush 3 hits combo
 
Startup groovysession1
Startup groovysession1Startup groovysession1
Startup groovysession1
 
鼻メガネv2
鼻メガネv2鼻メガネv2
鼻メガネv2
 
デブサミ2012【16-D-7】「iOS, Android, Windows Phoneアプリを同時開発せよ!!!」(前半)
デブサミ2012【16-D-7】「iOS, Android, Windows Phoneアプリを同時開発せよ!!!」(前半)デブサミ2012【16-D-7】「iOS, Android, Windows Phoneアプリを同時開発せよ!!!」(前半)
デブサミ2012【16-D-7】「iOS, Android, Windows Phoneアプリを同時開発せよ!!!」(前半)
 
【16-D-6】比べてわかるフィーチャーフォンとスマホのアプリ開発・運用のポイント
【16-D-6】比べてわかるフィーチャーフォンとスマホのアプリ開発・運用のポイント【16-D-6】比べてわかるフィーチャーフォンとスマホのアプリ開発・運用のポイント
【16-D-6】比べてわかるフィーチャーフォンとスマホのアプリ開発・運用のポイント
 
【16-D-1】UI のこれまでの10年とこれから
【16-D-1】UI のこれまでの10年とこれから【16-D-1】UI のこれまでの10年とこれから
【16-D-1】UI のこれまでの10年とこれから
 

Similar to JavaScript.Next

Kanazawa.js.Next
Kanazawa.js.NextKanazawa.js.Next
Kanazawa.js.Nextdynamis
 
JavaScript (ECMAScript) 2013
JavaScript (ECMAScript) 2013JavaScript (ECMAScript) 2013
JavaScript (ECMAScript) 2013dynamis
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップYasuhito Yabe
 
JavaScript Tips 2015(PDF 版)
JavaScript Tips 2015(PDF 版)JavaScript Tips 2015(PDF 版)
JavaScript Tips 2015(PDF 版)taskie
 
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejsTakayoshi Tanaka
 
Node.js勉強会 Framework Koa
Node.js勉強会 Framework KoaNode.js勉強会 Framework Koa
Node.js勉強会 Framework Koakamiyam .
 
モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目大樹 小倉
 
TDC20111031_Groovy_Geb
TDC20111031_Groovy_GebTDC20111031_Groovy_Geb
TDC20111031_Groovy_GebNobuhiro Sue
 
TypeScript 言語処理系ことはじめ
TypeScript 言語処理系ことはじめTypeScript 言語処理系ことはじめ
TypeScript 言語処理系ことはじめYu Nobuoka
 
SDLoader SeasarCon 2009 Whire
SDLoader SeasarCon 2009 WhireSDLoader SeasarCon 2009 Whire
SDLoader SeasarCon 2009 WhireAkio Katayama
 
ガラケーで楽しむオレJSの勧め
ガラケーで楽しむオレJSの勧めガラケーで楽しむオレJSの勧め
ガラケーで楽しむオレJSの勧めHiroshi Tokumaru
 
React Native GUIDE
React Native GUIDEReact Native GUIDE
React Native GUIDEdcubeio
 
ES6,7で書ける JavaScript
ES6,7で書ける JavaScriptES6,7で書ける JavaScript
ES6,7で書ける JavaScriptShin Sekaryo
 
Java/Androidセキュアコーディング
Java/AndroidセキュアコーディングJava/Androidセキュアコーディング
Java/AndroidセキュアコーディングMasaki Kubo
 
Java fx勉強会lt 第8回
Java fx勉強会lt 第8回Java fx勉強会lt 第8回
Java fx勉強会lt 第8回Taiji Miyabe
 
ScalaでAndroidアプリ開発
ScalaでAndroidアプリ開発ScalaでAndroidアプリ開発
ScalaでAndroidアプリ開発papamitra
 
Ruby on Rails3 Tutorial Chapter3
Ruby on Rails3 Tutorial Chapter3Ruby on Rails3 Tutorial Chapter3
Ruby on Rails3 Tutorial Chapter3Sea Mountain
 

Similar to JavaScript.Next (20)

Kanazawa.js.Next
Kanazawa.js.NextKanazawa.js.Next
Kanazawa.js.Next
 
JavaScript (ECMAScript) 2013
JavaScript (ECMAScript) 2013JavaScript (ECMAScript) 2013
JavaScript (ECMAScript) 2013
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
 
JavaScript Tips 2015(PDF 版)
JavaScript Tips 2015(PDF 版)JavaScript Tips 2015(PDF 版)
JavaScript Tips 2015(PDF 版)
 
Startup JavaScript
Startup JavaScriptStartup JavaScript
Startup JavaScript
 
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
 
Node.js勉強会 Framework Koa
Node.js勉強会 Framework KoaNode.js勉強会 Framework Koa
Node.js勉強会 Framework Koa
 
モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目
 
TDC20111031_Groovy_Geb
TDC20111031_Groovy_GebTDC20111031_Groovy_Geb
TDC20111031_Groovy_Geb
 
TypeScript 言語処理系ことはじめ
TypeScript 言語処理系ことはじめTypeScript 言語処理系ことはじめ
TypeScript 言語処理系ことはじめ
 
SDLoader SeasarCon 2009 Whire
SDLoader SeasarCon 2009 WhireSDLoader SeasarCon 2009 Whire
SDLoader SeasarCon 2009 Whire
 
ガラケーで楽しむオレJSの勧め
ガラケーで楽しむオレJSの勧めガラケーで楽しむオレJSの勧め
ガラケーで楽しむオレJSの勧め
 
React Native GUIDE
React Native GUIDEReact Native GUIDE
React Native GUIDE
 
ES6,7で書ける JavaScript
ES6,7で書ける JavaScriptES6,7で書ける JavaScript
ES6,7で書ける JavaScript
 
Java/Androidセキュアコーディング
Java/AndroidセキュアコーディングJava/Androidセキュアコーディング
Java/Androidセキュアコーディング
 
Java fx勉強会lt 第8回
Java fx勉強会lt 第8回Java fx勉強会lt 第8回
Java fx勉強会lt 第8回
 
ScalaでAndroidアプリ開発
ScalaでAndroidアプリ開発ScalaでAndroidアプリ開発
ScalaでAndroidアプリ開発
 
Ruby on Rails3 Tutorial Chapter3
Ruby on Rails3 Tutorial Chapter3Ruby on Rails3 Tutorial Chapter3
Ruby on Rails3 Tutorial Chapter3
 
Mvc conf session_5_isami
Mvc conf session_5_isamiMvc conf session_5_isami
Mvc conf session_5_isami
 
Android T2 on cloud
Android T2 on cloudAndroid T2 on cloud
Android T2 on cloud
 

More from dynamis

HTTP and 5G (fixed1)
HTTP and 5G (fixed1)HTTP and 5G (fixed1)
HTTP and 5G (fixed1)dynamis
 
HTTP and 5G
HTTP and 5GHTTP and 5G
HTTP and 5Gdynamis
 
HTTP and 5G partial draft
HTTP and 5G partial draftHTTP and 5G partial draft
HTTP and 5G partial draftdynamis
 
Web App Platform Strategy
Web App Platform StrategyWeb App Platform Strategy
Web App Platform Strategydynamis
 
HTML5 & Renesas RZ/G
HTML5 & Renesas RZ/GHTML5 & Renesas RZ/G
HTML5 & Renesas RZ/Gdynamis
 
Life of html5 (osaka)
Life of html5 (osaka)Life of html5 (osaka)
Life of html5 (osaka)dynamis
 
Web updates 2017
Web updates 2017Web updates 2017
Web updates 2017dynamis
 
Life of HTML5
Life of HTML5Life of HTML5
Life of HTML5dynamis
 
Browsers in IoT Era
Browsers in IoT EraBrowsers in IoT Era
Browsers in IoT Eradynamis
 
New Norm of HTML5
New Norm of HTML5New Norm of HTML5
New Norm of HTML5dynamis
 
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)dynamis
 
OSC2016.Enterprise Lightnig Talk
OSC2016.Enterprise Lightnig TalkOSC2016.Enterprise Lightnig Talk
OSC2016.Enterprise Lightnig Talkdynamis
 
Demo for Gecko Embedded
Demo for Gecko EmbeddedDemo for Gecko Embedded
Demo for Gecko Embeddeddynamis
 
Project Gecko Embedded
Project Gecko EmbeddedProject Gecko Embedded
Project Gecko Embeddeddynamis
 
The New Norm of The Web
The New Norm of The WebThe New Norm of The Web
The New Norm of The Webdynamis
 
Progressive Mobile Web Apps
Progressive Mobile Web AppsProgressive Mobile Web Apps
Progressive Mobile Web Appsdynamis
 
Modern Mobile Web Apps
Modern Mobile Web AppsModern Mobile Web Apps
Modern Mobile Web Appsdynamis
 
Web Tech & Architecture
Web Tech & ArchitectureWeb Tech & Architecture
Web Tech & Architecturedynamis
 
Java script.trend(spec)
Java script.trend(spec)Java script.trend(spec)
Java script.trend(spec)dynamis
 
Data Privacy meeting
Data Privacy meetingData Privacy meeting
Data Privacy meetingdynamis
 

More from dynamis (20)

HTTP and 5G (fixed1)
HTTP and 5G (fixed1)HTTP and 5G (fixed1)
HTTP and 5G (fixed1)
 
HTTP and 5G
HTTP and 5GHTTP and 5G
HTTP and 5G
 
HTTP and 5G partial draft
HTTP and 5G partial draftHTTP and 5G partial draft
HTTP and 5G partial draft
 
Web App Platform Strategy
Web App Platform StrategyWeb App Platform Strategy
Web App Platform Strategy
 
HTML5 & Renesas RZ/G
HTML5 & Renesas RZ/GHTML5 & Renesas RZ/G
HTML5 & Renesas RZ/G
 
Life of html5 (osaka)
Life of html5 (osaka)Life of html5 (osaka)
Life of html5 (osaka)
 
Web updates 2017
Web updates 2017Web updates 2017
Web updates 2017
 
Life of HTML5
Life of HTML5Life of HTML5
Life of HTML5
 
Browsers in IoT Era
Browsers in IoT EraBrowsers in IoT Era
Browsers in IoT Era
 
New Norm of HTML5
New Norm of HTML5New Norm of HTML5
New Norm of HTML5
 
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
 
OSC2016.Enterprise Lightnig Talk
OSC2016.Enterprise Lightnig TalkOSC2016.Enterprise Lightnig Talk
OSC2016.Enterprise Lightnig Talk
 
Demo for Gecko Embedded
Demo for Gecko EmbeddedDemo for Gecko Embedded
Demo for Gecko Embedded
 
Project Gecko Embedded
Project Gecko EmbeddedProject Gecko Embedded
Project Gecko Embedded
 
The New Norm of The Web
The New Norm of The WebThe New Norm of The Web
The New Norm of The Web
 
Progressive Mobile Web Apps
Progressive Mobile Web AppsProgressive Mobile Web Apps
Progressive Mobile Web Apps
 
Modern Mobile Web Apps
Modern Mobile Web AppsModern Mobile Web Apps
Modern Mobile Web Apps
 
Web Tech & Architecture
Web Tech & ArchitectureWeb Tech & Architecture
Web Tech & Architecture
 
Java script.trend(spec)
Java script.trend(spec)Java script.trend(spec)
Java script.trend(spec)
 
Data Privacy meeting
Data Privacy meetingData Privacy meeting
Data Privacy meeting
 

Recently uploaded

PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000Shota Ito
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdfUPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdffurutsuka
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directoryosamut
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムsugiuralab
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略Ryo Sasaki
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxAtomu Hidaka
 

Recently uploaded (9)

PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
 
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdfUPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
 

JavaScript.Next

  • 1. Slide DL: JSNext.org JavaScript.Next @ Developers Summit 2012 by Tomoya ASAI (dynamis) Mozilla Japan - Technical Marketing 16-C-5 last update on 2012.02.15 see also: http://dynamis.jp/r
  • 2. about:dynamis (Tomoya ASAI) http:// dynamis.jp @dynamitter facebook.com/ dynamis mailto: Tomoya ASAI (dynamis) <dynamis@mozilla-japan.org>
  • 3. JavaScript 最新事情 - 開発者なら知っておきたい次世代 JS - ECMAScript 5th & 6th Introduction HTML5 や DOM API の話はしません
  • 4. Agenda JavaScript.Past ECMAScript 5th ECMAScript 6th (Appendix) (References) from Past to Future
  • 5. おことわり。 現行仕様は注目機能を抜粋 次世代仕様は実装ありを中心に 特に複数 and/or 長期実装あり 草案 (rev5) より広い範囲 提案 (proposal) を中心に扱うが Proposal 試案 (strawman) も一部含む Strawman <¦ 演算子とか扱いません。 今回はネタ的な話は少なめです m(_ _)m
  • 6. "HTML5" を期待された方へ HTML や CSS 関連が主題: about:HTML&Firefox HTML5 for Designers Firefox with HTML+CSS セキュリティ関連特集: Firefox Security Features 開発者向けツール: (やや古い) Firefox Developer Tools 必要に応じて他の講演スライドもご参照ください
  • 8. 1995.04 Brendan Eich、Netscape へ 「ブラウザに Scheme を」 という に食いついたが... JavaScript の父 現 Mozilla CTO 当時の写真ではありません
  • 9. JavaScript の祖先 Java Scheme Self 構文 第一級関数 Prototype primitive/object Y2K バグ JavaScript
  • 10. 1995.05 Brendan Eich、Mocha を実装 最初は 10 日程度でやっつけ実装 96年秋に再実装 (SpiderMonkey) JavaScript と改名してリリース Netscape と Sun の共同発表 改名はマーケティング上の理由 JavaScript の商標権は Sun (現 Oracle) が保有 Netscape (現 Mozilla) は Sun との契約の元で利用
  • 11. Microsoft in 1996 3月 MS が Java ライセンス取得 JavaScript ライセンスも含む 8月 JScript 対応の IE3 リリース MS Java 同様に非互換だらけ...
  • 12. やばい!標準化しよう! ECMA での標準化を開始 当初は W3C (or IETF) のつもり だったが拒否される... (・・,) Netscape は W3C 標準を無視 してたから当然の反応... ブラウザ依存の API や DOM は ECMAScript 仕様には含まない
  • 13. 余談: ECMA ミーティング NOMBAS 創始者の挨拶: 我々は JavaScript に 何年も取り組んできた... んなわけあるか! Brendan は聞いたことすらない MS は最初補欠部隊を投入し、 Brendan に負け精鋭部隊に交代 NOMBAS はスクリプト言語 Cmm による "Espresso Pages" を公開してた会社
  • 14. 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)
  • 15. ECMAScript 4th へ... ECMAScript 初の抜本的改訂 Class, Namespace etc... Yahoo! & MS らは反対 別途 ECMAScript 3.1 へ... Douglas Crockford@Yahoo! Chris Wilson@MS (現 Google)
  • 16. Douglas Crockford@Yahoo! Yahoo! JavaScript Architect JSON, JavaScript Good Parts JavaScript のセミナーでも有名 職業: The Boss of You http://javascript.crockford.com/, http://crockford.com/
  • 17. VS The Boss of You Father of JS
  • 18. ECMAScript 4th よ永遠に... VS The Boss of You Father of JS Win! Lose...
  • 19. 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 のために更新しただけ 合意が取れる範囲に絞って標準化が行われた
  • 20. その頃 JS エンジンは... 2006.xx Google V8 開発開始 2006.11 Adobe Tamarin 公開 2008.06 SquirrelFish 公開 2008.08 TraceMonkey 公開 2008.09 Chrome & V8 公開 Brendan は 2006 年に V8 について知った時に OSS 化や 共同開発を提案したが Google は拒否し極秘開発を続けた...
  • 22. ECMAScript 5th 現行の標準仕様です 5 と 5.1 は区別する意味なし IE9 以降はほぼフルサポート Firefox4+, Chrome13+, Opera11.60+ IE9+ (strict mode 以外) Safari 5.1+ (bind 以外) 詳細は互換表を参照: http://kangax.github.com/es5-compat-table/
  • 23.
  • 24. 後方互換スクリプト 最初に読み込んで後方互換に: Augment.js http://augmentjs.com/ ddr-ecma5 http://code.google.com/p/ddr-ecma5/ es5-shim https://github.com/kriskowal/es5-shim/
  • 25. Ready! Native JSON ボスの作った仕様。 IE8+ その他広くサポート IE6,7 には json2.js で対応 http://json.org/js.html http://json.org/
  • 26. 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}'
  • 27. JSON 利用の注意 IE8 は UTF-8 文字列を stringify でエスケープ (uXXXX) される unescape(JSON.stringify("文字 列").replace(/u/g, '%u')) stringify 第2引数には注意 古い Firefox 等にバグあり Date オブジェクトにも注意 ブラウザ間の挙動が異なる 受け渡しするデータによっては要注意
  • 28. Ready! Array Extra 配列操作メソッドを追加 indexOf, lastIndexOf, every, some, forEach, map, filter, reduce, reduceRight 古くから広く実装されてきた Firefox 1.5 や 3 が最初に実装 IE6 8 には Augment.js など
  • 29. Array Extra - Basic Usage 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
  • 30. Array Extra - Basic Usage 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
  • 31. 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] // parseInt は (文字列, 基数) を受け取る関数 // 関数には (要素, インデックス, 配列) が渡される
  • 32. Ready! No Safari Function.prototype.bind "this" を固定した関数を定義 arguments も固定可能 Safari は未サポート IE9+, Firefox4+, Chrome7+, Opera11.60+ でサポート WebKit Nightly も対応済み Augment.js などで(ほぼ)後方互換
  • 33. Function.prototype.bind // Arguments などを Array に変換するショートカット定義 var slice1 = Array.prototype.slice; slice1.call(arguments); // -> Array に変換された arguments var slice2 = Function.prototype.call.bind(slice1); slice2(arguments); // 単なる関数呼び出しのようにシンプルに
  • 34. Function.prototype.bind 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 に保持するので十分ですが...
  • 35. Function.prototype.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
  • 36. No IE No Shim Strict Mode 良くあるミスをエラーとして検出 IE9 未サポートに要注意 IE10+, Firefox4+, Chrome13+, Safari5.1+, Opera11.60+ が対応 IE10 はまだバグありだが期待... オンにするだけなら後方互換 非互換コードを使わなければ... テスト時だけ使うのもアリ 特に理由なければ Strict Mode でエラーにならないコードを書く習慣を付けましょう
  • 37. Strict Mode // ファイル冒頭で "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
  • 38. Strict Mode "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
  • 39. 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
  • 40. more about Strict Mode... with 使用禁止 arguments.caller/callee 禁止 関数中では this=null != global eval 中のコードは外部スコープに 変数を定義できない スクリプトまたは関数内のトップ レベル以外での関数定義禁止 その他いろいろ...
  • 41. Ready! No Shim Getter & Setter プロパティ値の取得・設定を行 うための特別なメソッド __defineGetter__ などは非標準
  • 42. Getter & Setter 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; // -> "減らしちゃダメ!"
  • 43. 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
  • 44. Ready! No Shim seal & freeze オブジェクトを静的に 間違って書き換えるのを防止 元に戻すことはできない seal: プロパティ追加・削除禁止 freeze: プロパティ変更禁止 Strict Mode では例外を発生 seal/freeze されてるかどうかは isSealed/isFrozen で確認できる
  • 45. seal 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
  • 46. 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-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
  • 47. and more... String.prototype.trim Array.isArray, Date.now Date.prototype.toISOString NaN, Infinity, undefined 定数化 preventExtensions,isExtensible perseInt("03") なども10進数に その他いろいろ...
  • 48. about:ECMA5th Strict Mode でミスを減少 JSON や Array 関数が便利に オブジェクト指向周りも強化 基本的に構文は変化なし 後方互換は Shim で対応
  • 50. ECMAScript 6th の目標 より書きやすい言語 複雑なアプリ、ライブラリ、 次仕様のコードジェネレータ テスト可能な仕様へ 相互運用性を向上 可能ならデファクトを採用 バージョニングは単純に 静的検証も可能に http://wiki.ecmascript.org/doku.php?id=harmony:harmony
  • 51.
  • 52. 後方互換スクリプト 最初に読み込んで後方互換に: es6-shim https://github.com/paulmillr/es6-shim
  • 53. Proposal Simple Maps 他の言語にもある Map = Python: dict, Ruby: Hash, Java: java.util.HashMap, C++: std::unorderd_map Firefox12+, Chrome18+ Chrome は about:flags で有効化 未実装でも ec6-shim で互換に http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets
  • 54. Simple Map 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 キーと引数の比較は === 演算子に近いが厳密には === とも異なる
  • 55. Proposal Simple Sets 他の言語にもある Set = Python: set, Ruby: Set, Java: java.util.HashSet, C++: std::unordered_set Firefox12+, Chrome18+ Chrome は about:flags で有効化 未実装でも ec6-shim で互換に http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets
  • 56. Simple Set 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
  • 57. Proposal Weak Maps Firefox6+, Chrome18+ Firefox は初期仕様の実装 Chrome は about:flags で有効化 未実装でも ec6-shim で互換に Map のキーは弱参照=GC対象 仕様変更されてるので詳細割愛 詳しくは MDN 参照 http://wiki.ecmascript.org/doku.php?id=harmony:weak_maps
  • 58. Proposal Proxy Firefox4+, Chrome18+ いずれも初期仕様の実装 Chrome は about:flags で有効化 仕様は Direct Proxies に移行 仕様変更されてるので詳細割愛 詳しくは MDN 参照 http://wiki.ecmascript.org/doku.php?id=harmony:proxies
  • 59. Proposal const, 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
  • 60. const const GoldenRatio = 1.61803; 定数を宣言(定義) let 同様のブロックスコープ 宣言時に初期化(代入)が必須 現ブラウザの実装は古い 関数スコープ、初期化不要 http://wiki.ecmascript.org/doku.php?id=harmony:const
  • 61. const 利用の注意 const で逆に遅いこともある 過渡期仕様の欠陥による const 変数が初期化済みかどうか 実行時に判断が必要な場合 ECMA 6th 準拠実装なら OK const は初期値必須になる etc... Fx: bug611388, JSC: bug31833 http://d.hatena.ne.jp/Constellation/20111201/1322678350
  • 62. 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
  • 63. Proposal Destructuring (分割代入) 代入左辺を配列やオブジェクト のように書き一括・部分代入 Firefox で古くから実装済み Opera も一部動作するが、実質 的には使い物にならない実装 JSON データ処理とか特に便利 http://wiki.ecmascript.org/doku.php?id=harmony:destructuring
  • 64. 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
  • 65. 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"
  • 66. Proposal for-of ループ キーじゃなくて要素でループ 現在 Firefox13+ だけが対応 http://wiki.ecmascript.org/doku.php?id=harmony:iterators
  • 67. for-of ループ 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]);
  • 68. Proposal Array Comprehensions 配列の内包表記 Python や Haskell にもあるやつ JavaScript1.7 構文は Firefox2+ ECMA6th 構文は Firefox13+ for-each-in でなく for-of http://wiki.ecmascript.org/doku.php?id=harmony:array_comprehensions
  • 69. 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]
  • 70. Proposal Iterators & Generators Python のジェネレータ的なヤツ Python などを参考に導入された Firefox がサポート yield は JS バージョン指定必須 <script type="application/ javascript;version=1.7"> ... opt-in 必須なので今日は割愛... http://wiki.ecmascript.org/doku.php?id=harmony:generators
  • 71. Strawman WebGL Spec Typed Array 型固定配列で高速数値演算 元々 WebGL で導入され FileAPI, XHR2, WebSocket などでも採用 ECMA6th にも入る? IE9 非サポートに注意 IE10+, Fx4+, Chrome9+, Safari5.1+, Opera12+ http://wiki.ecmascript.org/doku.php?id=strawman:typed_arrays
  • 72. Typed Array ArrayBuffer(byteLength) メモリを確保するバッファ The Typed Array View Types: ArrayBuffer 読み出し用ビュー Int8Array, Unit8Array, Int16Array, Uint16Array, Int32Array, Uinit32Array, Float32Array, Float64Array
  • 73. 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
  • 74. Ready! Strawman & Proposal More Libraries... 未実装だが Shim で後方互換に Math の拡張 cosh, sinh, tanh, arosh, asinh, atanh, log1p, log2, log10, sign, trunc String の拡張 startsWith, endsWith, contains, Repeat, toArray, reverse Number の拡張 isFinite, isNaN, isInteger, toInteger MS はプロトタイプ実装をプラグインとして公開
  • 75. Strawman Globalization 日時や通貨などの文字列をロ ケール等に応じて出力 MS がプロトタイプ実装をプラグ インとして公開 IE 本体には未実装なので割愛 まだ単なる試案の段階 http://wiki.ecmascript.org/doku.php?id=globalization:globalization
  • 76. JS.Next 楽しいね! JS.Next 勉強会やりましょう (・・).
  • 77. JavaScript.Future 扱い易く書き易く サーバやエンタープライズも API は HTML & DOM で GPU やハードもフル活用
  • 78. 10年前: 誰も尊敬してくれない Java のできそこない...
  • 79. 現在: "HTML5" の基盤言語 何でも HTML5 = 何でも JavaScript
  • 80. 10年後: Java と対等に 尊敬され愛される言語になりたい...
  • 81. 10年後: いや、Java を越える! 父を乗り越えて一人前...
  • 84. ECMAScript !== JavaScript ECMAScript JavaScript の基本機能を標準化 したスクリプト言語 JavaScript (広義) ECMAScript + ブラウザ用機能 JavaScript (狭義) Netscape/Firefox の実装 広義の JS にバージョンはありません (JS 1.x などは Firefox バージョンに対応)
  • 85. Versioning について Harmony の後方非互換機能に opt-inする方法は未確定 use version 6;? Module 利用時? Firefox は 6th 専用モードなし V8 は現在 3 モード実装: classic, strict, extended --harmony フラグで extended 更に --harmony_scoping とか
  • 86. WebCL OpenCL を JavaScript から Nvidia が Firefox に試験実装 Samsung が WebKit に試験実装 Web アプリでも GPU フル活用 パフォーマンス差は歴然。 http://www.khronos.org/webcl/
  • 87. RiverTrail 並列計算用 API Intel による提案・実装 Firefox 拡張機能として試験実装 http://blogs.intel.com/research/2011/09/15/pjs/ https://github.com/RiverTrail/RiverTrail
  • 88. DOMCrypt 暗号化処理サポート用 API Firefox 拡張機能として試験実装 JavaScript 高速化 = エンジン高速化 + 専用 API 一部 API は DOM で標準化 ECMAScript が全てではない JSON のように需要のある専用 API が定義されていく https://addons.mozilla.org/ja/firefox/addon/domcrypt/
  • 90. 現行仕様 ECMAScript (ECMA-262) http://www.ecma-international.org/publications/standards/ Ecma-262.htm ECMAScript 5th HTML 版 http://es5.github.com/ ECMAScript for XML (E4X, ECMA-357) http://www.ecma-international.org/publications/standards/ Ecma-357.htm ECMAScript 3.1 時代からの草案 http://wiki.ecmascript.org/doku.php? id=es3.1:es3.1_proposal_working_draft
  • 91. 次世代仕様 ECMAScript Wiki http://wiki.ecmascript.org ECMAScript 6th Draft Specification http://wiki.ecmascript.org/doku.php? id=harmony:specification_drafts Harmony Proposals http://wiki.ecmascript.org/doku.php?id=harmony:proposals Harmony Strawman http://wiki.ecmascript.org/doku.php?id=strawman:strawman
  • 92. ブラウザ実装状況 Compatibility Table 単純検出なのでバグあり実装も含む&検出ミスもあり 更新頻度は程々なので開発版の実装状況は参考程度 http://kangax.github.com/es5-compat-table/ MDN で個別機能ページ末尾を確認するのが比較的確実 https://developer.mozilla.org/
  • 93. 構文テストなど 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.html ECMAScript 6th Syntax Grammer http://teramako.github.com/ECMAScript/ ecma6th_syntax.html Try Strict by MS http://ie.microsoft.com/testdrive/HTML5/TryStrict/ Default.html
  • 94. 実装 SpiderMonkey Build Documentation https://developer.mozilla.org/en/SpiderMonkey/ Build_Documentation How to Download and Build V8 http://code.google.com/intl/ja/apis/v8/build.html JavaScriptCore http://trac.webkit.org/wiki/JavaScriptCore lv5 - ECMA262 5.1 エンジン by @Constellation https://github.com/Constellation/iv vimperator で ES.next http://d.hatena.ne.jp/caisui/20111217/1324098318