traceur-compilerで ECMAScript6を体験
2 likes1,163 views
HTML5+α @福岡 - 第22回 2014-12-05（金）19:30 - 21:30 http://html5fukuoka.doorkeeper.jp/events/17567
![Modelの基本機能をもつクラスをつくりました。
// ES5
var BaseModel = function() {
this.listner = [];
};
BaseModel.prototype.addListner = function (callback) {
this.listner.push(callback);
};
…省略…
今までだと…コンストラクタ関数と…
prototypeが離れていて…なんか…
一体感がかけるなぁ…](https://image.slidesharecdn.com/html520141205ecmascript6-141205061136-conversion-gate02/85/traceur-compiler-ECMAScript6-23-320.jpg)
![// ES5
var BaseModel = function() {
this.listner = [];
};
BaseModel.prototype.addListner = function (callback) {
this.listner.push(callback);
};
// ES6
class BaseModel {
constructor() {
this.listner = [];
}
addListner(callback) {
this.listner.push(callback);
}
}
( ∵ おお！
classぽい！](https://image.slidesharecdn.com/html520141205ecmascript6-141205061136-conversion-gate02/85/traceur-compiler-ECMAScript6-24-320.jpg)
![// ES6: BaseModel.js
export class BaseModel {
constructor() {
this.listner = [];
}
}
// ES6: Salary.js
import {BaseModel} from './BaseModel';
class Salary extends BaseModel {
constructor() {
super();
this._wage = 0;
}
compute() { ...省略... }
}
別ファイルのクラスも
importできる(?)
ううう..このデモアプリでは
ファイル結合してないと
importできませんでした…](https://image.slidesharecdn.com/html520141205ecmascript6-141205061136-conversion-gate02/85/traceur-compiler-ECMAScript6-27-320.jpg)
![System.register("js/src/es5/model/BaseModel", [], function() {
"use strict";
var __moduleName = "js/src/es5/model/BaseModel";
function require(path) {
return $traceurRuntime.require("js/src/es5/model/BaseModel", path);
}
var BaseModel = function BaseModel() {
this.listeners = [];
};
//…省略…
return {get BaseModel() {
return BaseModel;
}};
});
System.register("js/src/es5/model/Salary", [], function() {
"use strict";
var __moduleName = "js/src/es5/model/Salary";
function require(path) {
return $traceurRuntime.require("js/src/es5/model/Salary", path);
}
var BaseModel = System.get("js/src/es5/model/BaseModel").BaseModel;
//…省略…
return {get Salary() {
return Salary;
}};
}); こんな感じでコンパイル済みを結合してます..
（結合せずに読み込めるかは..調査不足…）](https://image.slidesharecdn.com/html520141205ecmascript6-141205061136-conversion-gate02/85/traceur-compiler-ECMAScript6-28-320.jpg)
![Viewの基本機能をもつクラスをつくりました。
// ES5
var BaseView = function(cssClassNm, models) {
models = models || {};
デフォルト
this.el = document.getElementsByClassName(cssClassNm)[0];
// ... 省略 パラメータ
...
}
コンストラクタ関数の第２引数が
省略時は {object} を設定するをES６で書くと…](https://image.slidesharecdn.com/html520141205ecmascript6-141205061136-conversion-gate02/85/traceur-compiler-ECMAScript6-30-320.jpg)
![// ES5
var BaseView = function(cssClassNm, models) {
models = models || {};
this.el = document.getElementsByClassName(cssClassNm)[0];
}
デフォルト
パラメータ
// ES6
class BaseView {
constructor(cssClassNm, models = {}) {
this.el = document.getElementsByClassName(cssClassNm)[0];
}
}
コンストラクタ関数の第２引数が
省略時は {object} を設定するをES６で書くと…](https://image.slidesharecdn.com/html520141205ecmascript6-141205061136-conversion-gate02/85/traceur-compiler-ECMAScript6-31-320.jpg)
![Array Comprehension (Array内包表記)
var arr1 = [for (i of [1, 2, 3]) i * i];
//=> [1, 4, 9]
var arr2 = [
for (x of ["A", "B"])
for (y of [0, 1, 2, 4])
x + '' + y ];
//=> ["A0", "A1", "A2", "A4", "B0", "B1", "B2", "B4"]
http://jsbin.com/qupex/2/edit?js,console
配列がイテレーションで作れるよ](https://image.slidesharecdn.com/html520141205ecmascript6-141205061136-conversion-gate02/85/traceur-compiler-ECMAScript6-43-320.jpg)
![Destructuring Assignment(デストラクチャリング)分配束縛
var goku = 10000, ginyu = 5000;
値の交換！
var [goku, ginyu] = [ginyu, goku];
console.log([goku, ginyu]);//=>[5000, 10000]
var saiyajin = {gohan: 10000, bejita: 8000};
var {gohan, bejita} = saiyajin;
console.log([gohan, bejita]);//=>[10000, 8000]
Objectプロパティから変数設定！
変数値の交換やオブジェクトの値を変数に設定したりできます。](https://image.slidesharecdn.com/html520141205ecmascript6-141205061136-conversion-gate02/85/traceur-compiler-ECMAScript6-44-320.jpg)
traceur-compilerで ECMAScript6を体験
- 1. traceur-compilerで ECMAScript6を体験 HTML5+α @福岡 - 第22回 2014-12-05（金） Photo by Web制作向け無料写真素材／ぱくたそ http://www.pakutaso.com
- 2. -自己紹介- 株式会社キャムの江原と申します。 Excelとかプログラムとかしてます。 twitter : @itokami1123 企業の経営戦略に役立つサービス「CAM MACS」を AWSにて提供してます。
- 5. ECMAScript6とは ” ECMAScript 6 は "Harmony" または "ES.next" のコードネームで呼称される、 JavaScript の次期標準仕様です。 Mozilla における ECMAScript 6 のサポートより https://developer.mozilla.org/ja/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla ” ECMAに提出する正式のリリースは2015年の6月となる予定 JSer.info 世界のJavaScriptを紹介するサイト http://jser.info/post/88276341744/2014-06-09-js-bluebird/
- 7. 対応ブラウザはまだまだ少ない状況なので ES6でアプリを書くには ES6 => ES5 に変換する必要がありますね。
- 9. どんなのがあるかちょっと調べてみました 6to5 GitHubの☆1,207 / 対応度 59% https://github.com/6to5/6to5 traceur-compiler GitHubの☆3,703 / 対応度 60% https://github.com/google/traceur-compiler echo-js GitHubの☆143 / 対応度 66% https://github.com/toshok/echo-js closure-compiler GitHubの☆786 / 対応度 30% https://github.com/google/closure-compiler echo-jsと迷いましたが星の数で決めて tracerurで試しにアプリを書いてみました。
- 10. ちなみに、tracer-compiler(トレーサーコンパイラー)は • Google製のコンパイラ • Node.jsで動くよ • AngularJS2の開発で使われている といった特徴があります https://github.com/google/traceur-compiler
- 11. Traceurは、↓ES6機能が試せみたいです。 - Iterators and For Of - Generator Comprehension - Generators - Modules - Numeric Literals - Property Method Assignment - Object Initializer Shorthand - Rest Parameters & Spread - Template Literals - Promises - Block Scoped Binding (Experimental) - Symbol (Experimental) https://github.com/google/traceur-compiler/wiki/LanguageFeatures
- 12. Traceurでこんな感じのサンプルを作って見ました 数値入力View 計算結果表示View 時給計算Model ̶̶̶̶̶̶̶̶̶̶̶ 時給 時間 支給額計算メソッド APIサーバから初期値取得 数字を２つ入力すると掛け算するMV*アプリ https://github.com/itokami1123dev/maven-grunt-traceur
- 13. このサンプルのTraceurは Maven=>Gruntで動かしています。 (JavaのMavenプロジェクトでJSを結合したり圧縮したり する際は、皆様何を使われてますか？？) APIサーバ (Spring Boot) ES6=>ES5変換 Traceur Maven Grunt compile 起動 MavenからGruntを起動する”grunt-maven-plugin"を使ってみました http://java-and-js.blogspot.jp/2014/11/mavengruntgrunt-maven-plugin.html
- 15. Arrayループで For Of
- 16. Array(配列)に格納された関数をループして呼び出し 時給計算Model ̶̶̶̶̶̶̶̶̶̶̶ this.listeners // ES5 this.listeners.forEach(function (listener) { listener(); }); 数値入力View 描画メソッド 計算結果表示View 描画メソッド 例) モデル変更時に this.listeners配列に格納された Viewの描画メソッドを起動 forEachで ループ！
- 17. ES6は For Of で値をループできます。 // ES5 this.listeners.forEach(function (listener) { listener(); }); // ES6 for (let listener of this.listeners) { listener(); } “for in” はkeyのループ。”for of”は値のループ。
- 18. アロー関数
- 19. さっきの配列ループはアロー関数でも短くかけますね。 // ES5 this.listeners.forEach(function (listener) { listener(); }); // ES6 this.listeners.forEach( listener => listener() );
- 20. デモアプリではイベントリスナーでアロー関数使ってます // ES6 setEvent() { this.wageView.addEventListener('change', (event) => { this.salary.wage = this.wageView.value; } ); this.timeView.addEventListener('change', event => this.salary.time = this.timeView.value ); } 引数が一つの時は()丸括弧を省略でき、関数bodyが １つのreturn文の時はブロックと「return」を省略できます～ 参考：アロー関数が実装された http://js-next.hatenablog.com/entry/2014/07/23/173147
- 21. ( ∵ あとfunction(){ }と違って thisが外側のthisと同じという事。嬉しいですね！ this.timeView.addEventListener('change', event => this.salary.time = this.timeView.value );
- 22. クラス定義と継承
- 23. Modelの基本機能をもつクラスをつくりました。 // ES5 var BaseModel = function() { this.listner = []; }; BaseModel.prototype.addListner = function (callback) { this.listner.push(callback); }; …省略… 今までだと…コンストラクタ関数と… prototypeが離れていて…なんか… 一体感がかけるなぁ…
- 24. // ES5 var BaseModel = function() { this.listner = []; }; BaseModel.prototype.addListner = function (callback) { this.listner.push(callback); }; // ES6 class BaseModel { constructor() { this.listner = []; } addListner(callback) { this.listner.push(callback); } } ( ∵ おお！ classぽい！
- 25. // ES5 var Salary = function() { BaseModel.call(this) this._wage = 0; }; Salary.prototype = Object.create(BaseModel.prototype); Salary.ptorotype.constructor = Salary; Salary.ptorotype.compute = function() { ...省略... } // ES6 class Salary extends BaseModel { constructor() { super(); this._wage = 0; } compute() { ...省略... } } ( ∵ 継承もすっきり！
- 26. モジュール機能
- 27. // ES6: BaseModel.js export class BaseModel { constructor() { this.listner = []; } } // ES6: Salary.js import {BaseModel} from './BaseModel'; class Salary extends BaseModel { constructor() { super(); this._wage = 0; } compute() { ...省略... } } 別ファイルのクラスも importできる(?) ううう..このデモアプリでは ファイル結合してないと importできませんでした…
- 28. System.register("js/src/es5/model/BaseModel", [], function() { "use strict"; var __moduleName = "js/src/es5/model/BaseModel"; function require(path) { return $traceurRuntime.require("js/src/es5/model/BaseModel", path); } var BaseModel = function BaseModel() { this.listeners = []; }; //…省略… return {get BaseModel() { return BaseModel; }}; }); System.register("js/src/es5/model/Salary", [], function() { "use strict"; var __moduleName = "js/src/es5/model/Salary"; function require(path) { return $traceurRuntime.require("js/src/es5/model/Salary", path); } var BaseModel = System.get("js/src/es5/model/BaseModel").BaseModel; //…省略… return {get Salary() { return Salary; }}; }); こんな感じでコンパイル済みを結合してます.. （結合せずに読み込めるかは..調査不足…）
- 29. 引数にデフォルトのパラメータ
- 30. Viewの基本機能をもつクラスをつくりました。 // ES5 var BaseView = function(cssClassNm, models) { models = models || {}; デフォルト this.el = document.getElementsByClassName(cssClassNm)[0]; // ... 省略 パラメータ ... } コンストラクタ関数の第２引数が 省略時は {object} を設定するをES６で書くと…
- 31. // ES5 var BaseView = function(cssClassNm, models) { models = models || {}; this.el = document.getElementsByClassName(cssClassNm)[0]; } デフォルト パラメータ // ES6 class BaseView { constructor(cssClassNm, models = {}) { this.el = document.getElementsByClassName(cssClassNm)[0]; } } コンストラクタ関数の第２引数が 省略時は {object} を設定するをES６で書くと…
- 33. テンプレートリテラルで計算結果を表示しました。 // ES6 render() { var pay = this.salary.compute().toLocaleString(); this.resultEl.textContent = `支給額：${pay}円`; } バッククォートで囲った文字は文字列中に変数を埋め込めます。
- 34. Promise
- 35. 初期値は起動時にAPIからAjaxで取得してます。 サンプルアプリはこんな感じで 数値入力View 計算結果表示View 時給計算Model ̶̶̶̶̶̶̶̶̶̶̶ 時給 時間 支給額計算メソッド APIサーバから初期値取得 APIサーバは Spring Boot はじめてのSpring Boot―「Spring Framework」で簡単Java http://www.amazon.co.jp/gp/product/4777518655 数字を２つ入力すると掛け算するMV*アプリを ES6で書いてみました。 https://github.com/itokami1123dev/maven-grunt-traceur
- 36. // ES6 class ApiService { constructor() {} call(url) { var xhr = new XMLHttpRequest(); return new Promise((resolve, reject) => { xhr.open('GET', url) xhr.onreadystatechange = () => { if (xhr.readyState != 4 || xhr.status != 200) { return; } resolve(xhr.response); } xhr.send() }) } } (new ApiService()).call("hogehoge").then( (response) => { var {wage, time} = JSON.parse(response); salary.wage = wage; } バッククォートで囲った文字は文字列中に変数を埋め込めます。 ); ①Promiseを返します。 ②API通信終了 ③thenに処理が続く ④初期値を設定
- 37. 詳しくはこちら！ JavaScript Promiseの本 http://azu.github.io/promises-book/ ” JavaScriptにおける非同期処理といえば、コールバック でも、異なる書き方をしても決して間違いではありません… promiseオブジェクトに用意されてるメソッド(ここでは then や catch) 以外は使えないため、 コールバックのように引数に何を入れるかが自由 に決められるわけではなく、一定のやり方に統一されます ”
- 39. Viewに渡す初期設定のオブジェクトを作る時に // ES5 var salary = new Salary(); var models = { salary: salary }; // ES6 var salary = new Salary(); var models = { salary }; 短い！ key名とvalueに設定する変数が同じ場合は省略できる
- 40. デモ
- 43. Array Comprehension (Array内包表記) var arr1 = [for (i of [1, 2, 3]) i * i]; //=> [1, 4, 9] var arr2 = [ for (x of ["A", "B"]) for (y of [0, 1, 2, 4]) x + '' + y ]; //=> ["A0", "A1", "A2", "A4", "B0", "B1", "B2", "B4"] http://jsbin.com/qupex/2/edit?js,console 配列がイテレーションで作れるよ
- 44. Destructuring Assignment(デストラクチャリング)分配束縛 var goku = 10000, ginyu = 5000; 値の交換！ var [goku, ginyu] = [ginyu, goku]; console.log([goku, ginyu]);//=>[5000, 10000] var saiyajin = {gohan: 10000, bejita: 8000}; var {gohan, bejita} = saiyajin; console.log([gohan, bejita]);//=>[10000, 8000] Objectプロパティから変数設定！ 変数値の交換やオブジェクトの値を変数に設定したりできます。
- 46. まとめ！ - ES6、はやく使いたいけどブラウザが対応するまで もう少し時間がかかりそう。 - Traceurなど変換コンパイラを使うと予習ができる！ 今から勉強しておくと将来モテるかも。 - 型がES6で入らなかったのが残念.. - Object.observeもES6で入らなかったのも残念..
- 48. 下記記事を参考にさせていただきました！ありがとうございます。 1. 2014-06-09のJS: Bluebird 2.0.0、ES6のリリーススケジュール、Nodeで 作るコマンドラインツール http://jser.info/post/88276341744/2014-06-09-js-bluebird/ 2. traceur-compiler 入門 http://yosuke-furukawa.hatenablog.com/entry/2014/07/31/093041 3. ECMAScript 6でモダンWebアプリケーションへ向かって https://www.xenophy.com/javascript/8447 4. JS.next JavaScriptの最新実装情報を追うブログ アロー関数が実装された http://js-next.hatenablog.com/entry/2014/07/23/173147 5. Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. http://vanilla-js.com/