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