Movatterモバイル変換


[0]ホーム

URL:


dynamis , profile picture
Uploaded bydynamis
PDF, PPTX28,839 views

JavaScript.Next

Developers Summit 2012 で使用したスライド後半を抜き出し少し更新したものはこちら:http://www.slideshare.net/dynamis/kanazawajsnext

Embed presentation

Download as PDF, PPTX
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.PastHistory of JavaScript...
1995.04          Brendan Eich、Netscape へ            「ブラウザに Scheme を」            という に食いついたが...          JavaScript の父          現 Mozilla CTO                          当時の写真ではありません
JavaScript の祖先 Java              Scheme    Self構文                 第一級関数    Prototypeprimitive/objectY2K バグ               JavaScript
1995.05          Brendan Eich、Mocha を実装            最初は 10 日程度でやっつけ実装            96年秋に再実装 (SpiderMonkey)          JavaScript と改名してリリース            Netscape と Sun の共同発表            改名はマーケティング上の理由               JavaScript の商標権は Sun (現 Oracle) が保有             Netscape (現 Mozilla) は Sun との契約の元で利用
Microsoft in 1996          3月 MS が Java ライセンス取得            JavaScript ライセンスも含む          8月 JScript 対応の IE3 リリース            MS Java 同様に非互換だらけ...
やばい!標準化しよう!    ECMA での標準化を開始     当初は W3C (or IETF) のつもり     だったが拒否される... (・・,)     Netscape は W3C 標準を無視     してたから当然の反応...    ブラウザ依存の API や DOM は    ECMAScript 仕様には含まない
余談: ECMA ミーティング              NOMBAS 創始者の挨拶:                  我々は JavaScript に                  何年も取り組んできた...              んなわけあるか!                 Brendan は聞いたことすらない              MS は最初補欠部隊を投入し、              Brendan に負け精鋭部隊に交代 NOMBAS はスクリプト言語 Cmm による "Espresso Pages" を公開してた会社
ECMAScript 標準化       1997.06 ECMAScript 1st         最小限の言語仕様を標準化       1998.06 ECMAScript 2nd         ISO/IEC 16262 に合わせただけ       1999.12 ECMAScript 3rd         RegExp, try-catch etc...       2004.06 ECMAScript for XML (E4X)
ECMAScript 4th へ...         ECMAScript 初の抜本的改訂           Class, Namespace etc...         Yahoo! & MS らは反対           別途 ECMAScript 3.1 へ...           Douglas Crockford@Yahoo!           Chris Wilson@MS (現 Google)
Douglas Crockford@Yahoo!         Yahoo! JavaScript Architect           JSON, JavaScript Good Parts         JavaScript のセミナーでも有名         職業: The Boss of You           http://javascript.crockford.com/, http://crockford.com/
VSThe Boss of You        Father of JS
ECMAScript 4th よ永遠に...                  VSThe Boss of You        Father of JS Win!                    Lose...
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 5thfirst release of Harmony...
ECMAScript 5th            現行の標準仕様です               5 と 5.1 は区別する意味なし            IE9 以降はほぼフルサポート               Firefox4+, Chrome13+, Opera11.60+               IE9+ (strict mode 以外)               Safari 5.1+ (bind 以外)      詳細は互換表を参照: http://kangax.github.com/es5-compat-table/
後方互換スクリプト    最初に読み込んで後方互換に:    Augment.js      http://augmentjs.com/    ddr-ecma5      http://code.google.com/p/ddr-ecma5/    es5-shim      https://github.com/kriskowal/es5-shim/
Ready!Native JSON         ボスの作った仕様。         IE8+ その他広くサポート          IE6,7 には json2.js で対応          http://json.org/js.html                                    http://json.org/
Native JSON// JSON 文字列から JavaScript オブジェクトを生成var obj1 = JSON.parse('[1, 2, 3, 4]');var obj2 = JSON.parse('{"key": "value"}');// JavaScript オブジェクトを JSON 文字列に変換var obj = {};obj.foo = "some property";obj.bar = 1;var json = JSON.stringify(obj);// -> '{"foo":"some property","bar":1}'
JSON 利用の注意      IE8 は UTF-8 文字列を stringify      でエスケープ (uXXXX) される        unescape(JSON.stringify("文字        列").replace(/u/g, '%u'))      stringify 第2引数には注意        古い Firefox 等にバグあり      Date オブジェクトにも注意        ブラウザ間の挙動が異なる                 受け渡しするデータによっては要注意
Ready!Array Extra          配列操作メソッドを追加              indexOf, lastIndexOf,              every, some, forEach,              map, filter, reduce, reduceRight          古くから広く実装されてきた              Firefox 1.5 や 3 が最初に実装          IE6 8 には Augment.js など
Array Extra - Basic Usagefunction isPositive(e, i, arr) { return (e > 0); }[1,3,-1,-3,5].filter(isPositive);// -> [1, 3, 5][2,5,10,3].every(isPositive);// -> true[3,2,-1,5].every(isPositive);// -> false[2,-5,1,3].some(isPositive);// -> true[-1,-20,0].every(isPositive);// -> false
Array Extra - Basic Usagefunction sum(a,b) { return a+b; }function concatArray(a,b) { return a.concat(b); }var nestedArray = [[0, 1], [2, 3], [4, 5]];var flat1 = nestedArray.reduce(concatArray);// -> [0, 1, 2, 3, 4, 5]var flat2 = nestedArray.reduceRight(concatArray);// -> [4, 5, 2, 3, 0, 1]var total = flat1.reduce(sum);// -> 15
Array Extra - Extra Usagefunction 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 SafariFunction.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 に変換された argumentsvar slice2 = Function.prototype.call.bind(slice1);slice2(arguments);// 単なる関数呼び出しのようにシンプルに
Function.prototype.bindvar 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 ShimStrict Mode                   良くあるミスをエラーとして検出                   IE9 未サポートに要注意                    IE10+, Firefox4+, Chrome13+,                    Safari5.1+, Opera11.60+ が対応                    IE10 はまだバグありだが期待...                   オンにするだけなら後方互換                    非互換コードを使わなければ...                    テスト時だけ使うのもアリ特に理由なければ Strict Mode でエラーにならないコードを書く習慣を付けましょう
Strict Mode// ファイル冒頭で "use strict"; を書くとオンになる"use strict";var type = "foo";// 未定義の変数への代入typo = "bar";// × asignment to undeclared variable typo// 書き込み禁止や削除禁止のプロパティ操作NaN = null;// × NaN is read-onlydelete Object.prototype;// × property Object.prototype is non-configurable and//    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//    literalfunction f(bar, bar) { return bar; }// × duplicate formal argument barvar sum = 015 + // 8 進数リテラル (誤用)          197 +            142;  // × octal literals and octal escape sequences are//    deprecated                         https://developer.mozilla.org/en/JavaScript/Strict_mode
Strict Mode// Strict Mode は関数単位でも利用できます(function dosomething() {  "use strict";  // 関数内だけ Strict Mode に  typo = "(・・)."; // × Error})()console.log(typo); // -> undefined(function dootherthing() {  // こちらは Classic Mode  typo = "(・・)."; // グローバル変数を定義})()console.log(typo) // -> "(・・)."                   https://developer.mozilla.org/en/JavaScript/Strict_mode
more about Strict Mode...          with 使用禁止          arguments.caller/callee 禁止          関数中では this=null != global          eval 中のコードは外部スコープに          変数を定義できない          スクリプトまたは関数内のトップ          レベル以外での関数定義禁止          その他いろいろ...
Ready!   No ShimGetter & Setter                   プロパティ値の取得・設定を行                   うための特別なメソッド                   __defineGetter__ などは非標準
Getter & Settervar incremantal = {  _n: 0,  get next() { return this._n++; },  set next(n) {    if (n >= this._n) this._n=n;    else throw "減らしちゃダメ!"  }}incremantal.next; // -> 0incremantal.next; // -> 1incremantal.next = 3;incremantal.next; // -> 3incremantal.next = 1; // -> "減らしちゃダメ!"
Memoization (Lazily Load)var obj = {  get somethinglarge() {    // getter 自身を削除し、単なるプロパティに変更    delete this.somethinglarge;    return this.somethinglarge = new Large();  }}// ここまで読み込んだだけでは new Large() されない//   = getter 定義のコストしかかからない  ... obj.somethinglarge ...// 最初にアクセスした時に new Large() される  ... obj.somethinglarge ...// 2 度目からは new されずに再利用される            使うと限らないが繰り返し使う大きなオブジェクトがある時の Perf Tips
Ready!   No Shimseal & freeze                   オブジェクトを静的に                    間違って書き換えるのを防止                    元に戻すことはできない                   seal: プロパティ追加・削除禁止                   freeze: プロパティ変更禁止                    Strict Mode では例外を発生          seal/freeze されてるかどうかは isSealed/isFrozen で確認できる
sealvar obj = { foo: 1, bar: 2 };obj.foo = 3;obj.baz = 4;delete obj.bar;console.log(obj);// -> { foo: 3, baz: 4 }Object.seal(obj);obj.foo = 5; // 既存プロパティは変更可能obj.bar = 6; // プロパティ追加は黙って無視console.log(obj);// -> { foo: 5, baz: 4 }      https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/seal
freeze"use strict"; // 黙って無視せず例外を発生させるvar obj = { foo: 1, bar: 2 };obj.foo = 3;obj.baz = 4;delete obj.bar;console.log(obj);// -> { foo: 3, baz: 4 }Object.freeze(obj);obj.foo = 5; // × obj.foo is read-onlyobj.bar = 6; // × obj.bar is not extensibleconsole.log(obj);// -> { foo: 3, baz: 4 }    https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/freeze
and more...          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 6thNext release of Harmony...
ECMAScript 6th の目標        より書きやすい言語            複雑なアプリ、ライブラリ、            次仕様のコードジェネレータ        テスト可能な仕様へ        相互運用性を向上            可能ならデファクトを採用        バージョニングは単純に        静的検証も可能に        http://wiki.ecmascript.org/doku.php?id=harmony:harmony
後方互換スクリプト    最初に読み込んで後方互換に:    es6-shim      https://github.com/paulmillr/es6-shim
ProposalSimple 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 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              キーと引数の比較は === 演算子に近いが厳密には === とも異なる
ProposalSimple 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 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
ProposalWeak Maps             Firefox6+, Chrome18+                  Firefox は初期仕様の実装                  Chrome は about:flags で有効化                  未実装でも ec6-shim で互換に             Map のキーは弱参照=GC対象                  仕様変更されてるので詳細割愛                  詳しくは MDN 参照           http://wiki.ecmascript.org/doku.php?id=harmony:weak_maps
ProposalProxy           Firefox4+, Chrome18+             いずれも初期仕様の実装             Chrome は about:flags で有効化           仕様は Direct Proxies に移行             仕様変更されてるので詳細割愛             詳しくは MDN 参照           http://wiki.ecmascript.org/doku.php?id=harmony:proxies
Proposalconst, let & Block Scope                        let の実装は広がりつつある                             Firefox が昔から実装                             Chrome18+: about:flags 有効化                        const は広くサポート                             但し最新仕様準拠はなし                             Safari/Opera は var と一緒                             IE は const 非サポート           http://wiki.ecmascript.org/doku.php?id=harmony:block_scoped_bindings
const        const GoldenRatio = 1.61803;        定数を宣言(定義)          let 同様のブロックスコープ          宣言時に初期化(代入)が必須        現ブラウザの実装は古い          関数スコープ、初期化不要         http://wiki.ecmascript.org/doku.php?id=harmony:const
const 利用の注意      const で逆に遅いこともある          過渡期仕様の欠陥による          const 変数が初期化済みかどうか          実行時に判断が必要な場合      ECMA 6th 準拠実装なら OK          const は初期値必須になる etc...          Fx: bug611388, JSC: bug31833      http://d.hatena.ne.jp/Constellation/20111201/1322678350
let{  // let 定義: ブロックスコープ  let a = 1, b = 10;  // let 式・文: let (...) に続く式・文中だけで有効  let (a = 100, c = 300) console.log(a); // -> 100  // for 文などでの let  for (let a=0; a<3; a++) {      console.log(a+b); // -> 10, 11, 12  }  console.log(a); // -> 1}console.log(a); // × ReferenceError: a is not defined                            http://wiki.ecmascript.org/doku.php?id=harmony:let
ProposalDestructuring (分割代入)               代入左辺を配列やオブジェクト               のように書き一括・部分代入                   Firefox で古くから実装済み                   Opera も一部動作するが、実質                   的には使い物にならない実装               JSON データ処理とか特に便利           http://wiki.ecmascript.org/doku.php?id=harmony:destructuring
Destructuring (分割代入)// Array のサンプル:// 値の入れ替え[a, b] = [b, a];// 関数から複数の値を返すvar [c,d] = (function f() { return [1,2]; })();// -> c=1, d=2// 一部省略や入れ子も可能var [e,,[x,y]] = (function f(){return [3,4,[10,20]]})();// -> e=3,x=10,y=20
Destructuring (分割代入)// Object のサンプルvar fx={ name:"Firefox", vendor:"Mozilla", ver:13 };var ch={ name:"Chrome",  vendor:"Google",  ver:19 };var browsers={ firefox: fx, chrome: ch }// 欲しいプロパティだけ一括代入var { name: n, ver: v } = fx;// -> n="Firefox", v=13// for-each-in などとの組み合わせもfor each ( let { vendor: ven, ver: ver } in browsers )  console.log(ven)// -> "Mozilla", "Google"
Proposalfor-of ループ           キーじゃなくて要素でループ              現在 Firefox13+ だけが対応           http://wiki.ecmascript.org/doku.php?id=harmony:iterators
for-of ループlet arr = ["Fx", "Ch", "IE"];for (let k in arr)  console.log(k);// -> 0, 1, 2for (let v of arr)  console.log(v);// -> "Fx", "Ch", "IE"// ECMAScript 5th でやると:arr.forEach(function(v) { console.log(v) });// 昔々:for (var i=0; i<arr.length; i++)  console.log(arr[i]);
ProposalArray Comprehensions                        配列の内包表記                            Python や Haskell にもあるやつ                        JavaScript1.7 構文は Firefox2+                        ECMA6th 構文は Firefox13+                            for-each-in でなく for-of           http://wiki.ecmascript.org/doku.php?id=harmony:array_comprehensions
Array Comprehensions// 配列のフィルタ[x for (x of [1,-4,5,3,-7]) if (x > 0)]// -> [1, 5, 3]// 配列のマップ[x*x for (x of [2,4,6])]// -> [4, 16, 36]// 2つの配列のデカルト積[ i*j for (i of [0,2,4]) for (j of [5,3]) ]// -> [0, 0, 10, 6, 20, 12]
ProposalIterators & Generators            Python のジェネレータ的なヤツ                 Python などを参考に導入された            Firefox がサポート                 yield は JS バージョン指定必須                 <script type="application/                 javascript;version=1.7"> ...            opt-in 必須なので今日は割愛...           http://wiki.ecmascript.org/doku.php?id=harmony:generators
Strawman   WebGL SpecTyped Array                    型固定配列で高速数値演算                        元々 WebGL で導入され FileAPI,                        XHR2, WebSocket などでも採用                        ECMA6th にも入る?                    IE9 非サポートに注意                        IE10+, Fx4+, Chrome9+,                        Safari5.1+, Opera12+               http://wiki.ecmascript.org/doku.php?id=strawman:typed_arrays
Typed Array         ArrayBuffer(byteLength)           メモリを確保するバッファ         The Typed Array View Types:           ArrayBuffer 読み出し用ビュー           Int8Array, Unit8Array,           Int16Array, Uint16Array,           Int32Array, Uinit32Array,           Float32Array, Float64Array
Typed Array & View// 16 バイト長のバッファを確保var buffer = new ArrayBuffer(16);// 32bit 整数 x 4 として読み出すビューを定義var int32View = new Int32Array(buffer);// 32bit 整数として 0, 2, 4, 6 を格納for (var i=0; i<int32View.length; i++) { int32View[i]=i*2; }// 16bit 整数 x 8 として同じバッファを読み出すビュー var int16View = new Int16Array(buffer);// 実際に読み出してみるfor (var i=0; i<int16View.length; i++) {    console.log(int16View[i]);  }  // -> 0, 0, 2, 0, 4, 0, 6, 0
Ready!   Strawman & ProposalMore 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 はプロトタイプ実装をプラグインとして公開
StrawmanGlobalization                  日時や通貨などの文字列をロ                  ケール等に応じて出力                       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?
Appendixother ideas...
ECMAScript !== JavaScript               ECMAScript                  JavaScript の基本機能を標準化                  したスクリプト言語               JavaScript (広義)                  ECMAScript + ブラウザ用機能               JavaScript (狭義)                  Netscape/Firefox の実装  広義の JS にバージョンはありません (JS 1.x などは Firefox バージョンに対応)
Versioning について        Harmony の後方非互換機能に        opt-inする方法は未確定         use version 6;? Module 利用時?        Firefox は 6th 専用モードなし        V8 は現在 3 モード実装:         classic, strict, extended         --harmony フラグで extended         更に --harmony_scoping とか
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/
Referenceslink list...
現行仕様ECMAScript (ECMA-262) http://www.ecma-international.org/publications/standards/ Ecma-262.htmECMAScript 5th HTML 版 http://es5.github.com/ECMAScript for XML (E4X, ECMA-357) http://www.ecma-international.org/publications/standards/ Ecma-357.htmECMAScript 3.1 時代からの草案 http://wiki.ecmascript.org/doku.php? id=es3.1:es3.1_proposal_working_draft
次世代仕様ECMAScript Wiki http://wiki.ecmascript.orgECMAScript 6th Draft Specification http://wiki.ecmascript.org/doku.php? id=harmony:specification_draftsHarmony Proposals http://wiki.ecmascript.org/doku.php?id=harmony:proposalsHarmony Strawman http://wiki.ecmascript.org/doku.php?id=strawman:strawman
ブラウザ実装状況Compatibility Table 単純検出なのでバグあり実装も含む&検出ミスもあり 更新頻度は程々なので開発版の実装状況は参考程度 http://kangax.github.com/es5-compat-table/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.htmlECMAScript 6th Syntax Grammer http://teramako.github.com/ECMAScript/ ecma6th_syntax.htmlTry Strict by MS http://ie.microsoft.com/testdrive/HTML5/TryStrict/ Default.html
実装SpiderMonkey Build Documentation https://developer.mozilla.org/en/SpiderMonkey/ Build_DocumentationHow to Download and Build V8 http://code.google.com/intl/ja/apis/v8/build.htmlJavaScriptCore http://trac.webkit.org/wiki/JavaScriptCorelv5 - ECMA262 5.1 エンジン by @Constellation https://github.com/Constellation/ivvimperator で ES.next http://d.hatena.ne.jp/caisui/20111217/1324098318

Recommended

PDF
JavaScript.Next Returns
PDF
Java scriptの進化
PPTX
.NET Compiler Platform
PDF
Java仮想マシンの実装技術
PDF
Java EEを補完する仕様 MicroProfile
PDF
20160521 大規模映像配信サービスの Java8による全面リニューアルの裏側
PPTX
Java EE パフォーマンスTips #glassfish_jp
PDF
[デブサミ2012]趣味と実益の脆弱性発見
PDF
Jjug ccc 2016 spring i 5 javaデスクトッププログラムを云々
 
PDF
PHPの今とこれから2016
PPTX
Spring frameworkが大好きなおはなし
PDF
自宅で出来る!ゲームサーバの作り方
PDF
メッセージングプラットフォーム Zimbra の紹介とその活用術 - JJUG ナイトセミナー2013/3
PDF
PHP in Java -Quercus- によるレガシーマイグレーション実例 #jjug_ccc #ccc_r12
PDF
OpenJDK トラブルシューティング #javacasual
PPTX
java.lang.OutOfMemoryError #渋谷java
PDF
WildFly Swarmではじめる「パーツとしてのJavaEE」
PPTX
Tomcatの実装から学ぶクラスローダリーク #渋谷Java
PPTX
Java EE8 Report
PDF
Java EE 再入門
PDF
Spring3.1概要x di
PDF
Play framework 2.0のおすすめと1.2からのアップグレード
PDF
JVM のいろはにほ #javajo
PDF
Hello Java
PDF
#jjug_ccc #ccc_f1 広告システム刷新の舞台裏 - PHPからJavaに変えてみました
PDF
JavaOne 2015 報告会 @ 東京 「About MVC 1.0 & JSON-P」
PDF
Jsug 20160422 slides
KEY
20120216 デブサミ 座談会
KEY
Startup groovy op
PDF
大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)

More Related Content

PDF
JavaScript.Next Returns
PDF
Java scriptの進化
PPTX
.NET Compiler Platform
PDF
Java仮想マシンの実装技術
PDF
Java EEを補完する仕様 MicroProfile
PDF
20160521 大規模映像配信サービスの Java8による全面リニューアルの裏側
PPTX
Java EE パフォーマンスTips #glassfish_jp
PDF
[デブサミ2012]趣味と実益の脆弱性発見
JavaScript.Next Returns
Java scriptの進化
.NET Compiler Platform
Java仮想マシンの実装技術
Java EEを補完する仕様 MicroProfile
20160521 大規模映像配信サービスの Java8による全面リニューアルの裏側
Java EE パフォーマンスTips #glassfish_jp
[デブサミ2012]趣味と実益の脆弱性発見

What's hot

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

Viewers also liked

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

Similar to JavaScript.Next

PDF
Kanazawa.js.Next
PDF
JavaScript (ECMAScript) 2013
PDF
JSer Class #1
KEY
いまさらJavaScript
PPT
20090121 J QueryからはじめるJava Script~初級編~
PDF
Harmoware-VIS Tutorial
PDF
JavaScriptことはじめ
PDF
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
PDF
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
PPTX
Startup JavaScript
PPTX
キャッチアップJavaScriptビルド - ビルドから見るJSの今/2016春
PDF
Devsumi2010 Ecmascript5 (ISO/IEC JTC1/SC22)
PDF
ECMAScript没proposal追悼式
PPTX
JavaScript/TypeScript実力強化書 2章のアップデート Forkwell Library
PDF
これからのJavaScriptの話
PDF
ちょっと詳しくJavaScript 特別編【悪霊の神々】
PPTX
Facebook Parseの世界
PDF
TypeScript 勉強会
PDF
Effective JavaScript Ch.1
PDF
traceur-compilerで ECMAScript6を体験
Kanazawa.js.Next
JavaScript (ECMAScript) 2013
JSer Class #1
いまさらJavaScript
20090121 J QueryからはじめるJava Script~初級編~
Harmoware-VIS Tutorial
JavaScriptことはじめ
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
Startup JavaScript
キャッチアップJavaScriptビルド - ビルドから見るJSの今/2016春
Devsumi2010 Ecmascript5 (ISO/IEC JTC1/SC22)
ECMAScript没proposal追悼式
JavaScript/TypeScript実力強化書 2章のアップデート Forkwell Library
これからのJavaScriptの話
ちょっと詳しくJavaScript 特別編【悪霊の神々】
Facebook Parseの世界
TypeScript 勉強会
Effective JavaScript Ch.1
traceur-compilerで ECMAScript6を体験

More from dynamis

PDF
HTTP and 5G (fixed1)
PDF
HTTP and 5G
PDF
HTTP and 5G partial draft
PDF
Web App Platform Strategy
PDF
HTML5 & Renesas RZ/G
PDF
Life of html5 (osaka)
PDF
Web updates 2017
PDF
Life of HTML5
PDF
Browsers in IoT Era
PDF
New Norm of HTML5
PDF
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
PDF
OSC2016.Enterprise Lightnig Talk
PDF
Demo for Gecko Embedded
PDF
Project Gecko Embedded
PDF
The New Norm of The Web
PDF
Progressive Mobile Web Apps
PDF
Modern Mobile Web Apps
PDF
Web Tech & Architecture
PDF
Java script.trend(spec)
PDF
Data Privacy meeting
HTTP and 5G (fixed1)
HTTP and 5G
HTTP and 5G partial draft
Web App Platform Strategy
HTML5 & Renesas RZ/G
Life of html5 (osaka)
Web updates 2017
Life of HTML5
Browsers in IoT Era
New Norm of HTML5
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
OSC2016.Enterprise Lightnig Talk
Demo for Gecko Embedded
Project Gecko Embedded
The New Norm of The Web
Progressive Mobile Web Apps
Modern Mobile Web Apps
Web Tech & Architecture
Java script.trend(spec)
Data Privacy meeting

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 必要に応じて他の講演スライドもご参照ください
  • 7.
  • 8.
    1995.04 Brendan Eich、Netscape へ 「ブラウザに Scheme を」 という に食いついたが... JavaScript の父 現 Mozilla CTO 当時の写真ではありません
  • 9.
    JavaScript の祖先 Java Scheme Self構文 第一級関数 Prototypeprimitive/objectY2K バグ 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.
    VSThe Boss ofYou Father of JS
  • 18.
    ECMAScript 4th よ永遠に... VSThe 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 は拒否し極秘開発を続けた...
  • 21.
  • 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/
  • 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 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
  • 30.
    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
  • 31.
    Array Extra -Extra Usagefunction 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 SafariFunction.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 に変換された argumentsvar slice2 = Function.prototype.call.bind(slice1);slice2(arguments);// 単なる関数呼び出しのようにシンプルに
  • 34.
    Function.prototype.bindvar 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 ShimStrict 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-onlydelete 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";// オブジェクトのプロパティ名や関数の引数名の重複varobj = { 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
  • 39.
    Strict Mode// StrictMode は関数単位でも利用できます(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 StrictMode... with 使用禁止 arguments.caller/callee 禁止 関数中では this=null != global eval 中のコードは外部スコープに 変数を定義できない スクリプトまたは関数内のトップ レベル以外での関数定義禁止 その他いろいろ...
  • 41.
    Ready!No ShimGetter & Setter プロパティ値の取得・設定を行 うための特別なメソッド __defineGetter__ などは非標準
  • 42.
    Getter & Settervarincremantal = { _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; // -> "減らしちゃダメ!"
  • 43.
    Memoization (Lazily Load)varobj = { 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 Shimseal & freeze オブジェクトを静的に 間違って書き換えるのを防止 元に戻すことはできない seal: プロパティ追加・削除禁止 freeze: プロパティ変更禁止 Strict Mode では例外を発生 seal/freeze されてるかどうかは isSealed/isFrozen で確認できる
  • 45.
    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
  • 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-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
  • 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 で対応
  • 49.
  • 50.
    ECMAScript 6th の目標 より書きやすい言語 複雑なアプリ、ライブラリ、 次仕様のコードジェネレータ テスト可能な仕様へ 相互運用性を向上 可能ならデファクトを採用 バージョニングは単純に 静的検証も可能に http://wiki.ecmascript.org/doku.php?id=harmony:harmony
  • 52.
    後方互換スクリプト 最初に読み込んで後方互換に: es6-shim https://github.com/paulmillr/es6-shim
  • 53.
    ProposalSimple 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 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 キーと引数の比較は === 演算子に近いが厳密には === とも異なる
  • 55.
    ProposalSimple 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 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
  • 57.
    ProposalWeak Maps Firefox6+, Chrome18+ Firefox は初期仕様の実装 Chrome は about:flags で有効化 未実装でも ec6-shim で互換に Map のキーは弱参照=GC対象 仕様変更されてるので詳細割愛 詳しくは MDN 参照 http://wiki.ecmascript.org/doku.php?id=harmony:weak_maps
  • 58.
    ProposalProxy Firefox4+, Chrome18+ いずれも初期仕様の実装 Chrome は about:flags で有効化 仕様は Direct Proxies に移行 仕様変更されてるので詳細割愛 詳しくは MDN 参照 http://wiki.ecmascript.org/doku.php?id=harmony:proxies
  • 59.
    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
  • 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.
    ProposalDestructuring (分割代入) 代入左辺を配列やオブジェクト のように書き一括・部分代入 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.
    Proposalfor-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, 2for (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.
    ProposalArray 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// 配列のフィルタ[xfor (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.
    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
  • 71.
    StrawmanWebGL SpecTyped 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 & ProposalMore 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.
    StrawmanGlobalization 日時や通貨などの文字列をロ ケール等に応じて出力 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 を越える! 父を乗り越えて一人前...
  • 82.
  • 83.
  • 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/
  • 89.
  • 90.
    現行仕様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
  • 91.
    次世代仕様ECMAScript Wiki http://wiki.ecmascript.orgECMAScript6th 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
  • 92.
    ブラウザ実装状況Compatibility Table 単純検出なのでバグあり実装も含む&検出ミスもあり更新頻度は程々なので開発版の実装状況は参考程度 http://kangax.github.com/es5-compat-table/MDN で個別機能ページ末尾を確認するのが比較的確実 https://developer.mozilla.org/
  • 93.
    構文テストなどJSLint - byThe 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
  • 94.
    実装SpiderMonkey Build Documentationhttps://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

[8]ページ先頭

©2009-2025 Movatter.jp