HTML5+α @福岡 - 第22回 2014-12-05（金）19:30 - 21:30 http://html5fukuoka.doorkeeper.jp/events/17567

1. traceur-compilerで
ECMAScript6を体験
HTML5+α @福岡 - 第22回 2014-12-05（金）
Photo by Web制作向け無料写真素材／ぱくたそ http://www.pakutaso.com

2. -自己紹介-
株式会社キャムの江原と申します。
Excelとかプログラムとかしてます。
twitter : @itokami1123
企業の経営戦略に役立つサービス「CAM MACS」を
AWSにて提供してます。

3. 今日はそろそろ気になるECMAScript6について
発表したいと思います！

4. ECMAScript6って？

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/

6. 対応状況を調べるとボチボチ…次のIEは頑張るみたい
http://kangax.github.io/compat-table/es6/

7. 対応ブラウザはまだまだ少ない状況なので
ES6でアプリを書くには
ES6 => ES5 に変換する必要がありますね。

8. 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

14. サンプルアプリで使ったES6の機能を説明します

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６で書くと…

32. Template Literals

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)
以外は使えないため、 コールバックのように引数に何を入れるかが自由
に決められるわけではなく、一定のやり方に統一されます
”

38. Object Initializer Shorthand

39. Viewに渡す初期設定のオブジェクトを作る時に
// ES5
var salary = new Salary();
var models = {
salary: salary
};
// ES6
var salary = new Salary();
var models = {
salary
};
短い！
key名とvalueに設定する変数が同じ場合は省略できる

40. デモ

41. デモ
https://github.com/itokami1123dev/maven-grunt-traceur

42. デモでは使えなかったそのほかの機能

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プロパティから変数設定！
変数値の交換やオブジェクトの値を変数に設定したりできます。

45. 他にもES６の機能は色々あったのですけど
この資料はここまでです…
Generatorsとかyieldとか誰か教えて…

46. まとめ！
- ES6、はやく使いたいけどブラウザが対応するまで
もう少し時間がかかりそう。
- Traceurなど変換コンパイラを使うと予習ができる！
今から勉強しておくと将来モテるかも。
- 型がES6で入らなかったのが残念..
- Object.observeもES6で入らなかったのも残念..

47. 以上、ご清聴ありがとうございました！

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/