traceur-compilerで ECMAScript6を体験

HTML5+α @福岡 - 第22回 2014-12-05（金）

Photo by Web制作向け無料写真素材／ぱくたそ http://www.pakutaso.com

-自己紹介-

株式会社キャムの江原と申します。

Excelとかプログラムとかしてます。

twitter : @itokami1123

企業の経営戦略に役立つサービス「CAM MACS」を

AWSにて提供してます。

今日はそろそろ気になるECMAScript6について

発表したいと思います！

ECMAScript6って？

ECMAScript6とは

Mozilla における ECMAScript 6 のサポートよりhttps://developer.mozilla.org/ja/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla

” ECMAScript 6 は "Harmony" または "ES.next" のコードネームで呼称される、

JavaScript の次期標準仕様です。

” ECMAに提出する正式のリリースは2015年の6月となる予定

http://jser.info/post/88276341744/2014-06-09-js-bluebird/JSer.info 世界のJavaScriptを紹介するサイト

対応状況を調べるとボチボチ…次のIEは頑張るみたい

http://kangax.github.io/compat-table/es6/

対応ブラウザはまだまだ少ない状況なので

ES6でアプリを書くには

ES6 => ES5 に変換する必要がありますね。

ES6をES5に変換するコンパイラ

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で試しにアプリを書いてみました。

ちなみに、tracer-compiler(トレーサーコンパイラー)は

https://github.com/google/traceur-compiler

• Google製のコンパイラ

• Node.jsで動くよ

• AngularJS2の開発で使われている　 といった特徴があります

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

Traceurでこんな感じのサンプルを作って見ました

数値入力View

計算結果表示View

時給計算Model ̶̶̶̶̶̶̶̶̶̶̶

時給 時間

支給額計算メソッド

APIサーバから初期値取得

数字を２つ入力すると掛け算するMV*アプリ

https://github.com/itokami1123dev/maven-grunt-traceur

このサンプルのTraceurは Maven=>Gruntで動かしています。

(JavaのMavenプロジェクトでJSを結合したり圧縮したり

する際は、皆様何を使われてますか？？)

GruntMaven

APIサーバ (Spring Boot)

ES6=>ES5変換 Traceur

compile 起動

MavenからGruntを起動する”grunt-maven-plugin"を使ってみました http://java-and-js.blogspot.jp/2014/11/mavengruntgrunt-maven-plugin.html

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

Arrayループで For Of

// ES5 this.listeners.forEach(function (listener) { listener(); });

時給計算Model ̶̶̶̶̶̶̶̶̶̶̶

this.listeners

数値入力View 描画メソッド

計算結果表示View 描画メソッド

Array(配列)に格納された関数をループして呼び出し

例) モデル変更時に

this.listeners配列に格納された

Viewの描画メソッドを起動

forEachで ループ！

// ES5 this.listeners.forEach(function (listener) { listener(); });

// ES6 for (let listener of this.listeners) { listener(); }

ES6は For Of で値をループできます。

“for in” はkeyのループ。”for of”は値のループ。

アロー関数

// ES5 this.listeners.forEach(function (listener) { listener(); });

// ES6 this.listeners.forEach( listener => listener() );

さっきの配列ループはアロー関数でも短くかけますね。

// 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

this.timeView.addEventListener('change', event => this.salary.time = this.timeView.value );

( ∵ あとfunction(){ }と違って

thisが外側のthisと同じという事。嬉しいですね！

クラス定義と継承

Modelの基本機能をもつクラスをつくりました。

// ES5 var BaseModel = function() { this.listner = []; };

BaseModel.prototype.addListner = function (callback) { this.listner.push(callback); };

…省略…

今までだと…コンストラクタ関数と… prototypeが離れていて…なんか…

一体感がかけるなぁ…

// 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ぽい！

// 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() { ...省略... } }

( ∵ 継承もすっきり！

モジュール機能

// 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できませんでした…

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; }}; }); こんな感じでコンパイル済みを結合してます..

（結合せずに読み込めるかは..調査不足…）

引数にデフォルトのパラメータ

// ES5 var BaseView = function(cssClassNm, models) {

models = models || {};

this.el = document.getElementsByClassName(cssClassNm)[0]; // ... 省略 ... }

Viewの基本機能をもつクラスをつくりました。

デフォルト パラメータ

コンストラクタ関数の第２引数が 省略時は {object} を設定するをES６で書くと…

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

デフォルト パラメータ

Template Literals

バッククォートで囲った文字は文字列中に変数を埋め込めます。

// ES6 render() { var pay = this.salary.compute().toLocaleString(); this.resultEl.textContent = `支給額：${pay}円`; }

テンプレートリテラルで計算結果を表示しました。

Promise

サンプルアプリはこんな感じで

数値入力View

計算結果表示View

時給計算Model ̶̶̶̶̶̶̶̶̶̶̶

時給 時間

支給額計算メソッド

APIサーバから初期値取得

数字を２つ入力すると掛け算するMV*アプリを ES6で書いてみました。

https://github.com/itokami1123dev/maven-grunt-traceur

はじめてのSpring Boot―「Spring Framework」で簡単Java

http://www.amazon.co.jp/gp/product/4777518655

初期値は起動時にAPIからAjaxで取得してます。

APIサーバは Spring Boot

バッククォートで囲った文字は文字列中に変数を埋め込めます。

// 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に処理が続く

④初期値を設定

詳しくはこちら！

JavaScript Promiseの本

http://azu.github.io/promises-book/

”JavaScriptにおける非同期処理といえば、コールバック でも、異なる書き方をしても決して間違いではありません…

promiseオブジェクトに用意されてるメソッド(ここでは then や catch)以外は使えないため、 コールバックのように引数に何を入れるかが自由に決められるわけではなく、一定のやり方に統一されます ”

Object Initializer Shorthand

// ES5 var salary = new Salary(); var models = { salary: salary };

// ES6 var salary = new Salary(); var models = { salary };

key名とvalueに設定する変数が同じ場合は省略できる

短い！

Viewに渡す初期設定のオブジェクトを作る時に

デモ

https://github.com/itokami1123dev/maven-grunt-traceur

デモ

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

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"]

Array Comprehension (Array内包表記)

配列がイテレーションで作れるよ

http://jsbin.com/qupex/2/edit?js,console

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プロパティから変数設定！

Destructuring Assignment(デストラクチャリング)分配束縛

他にもES６の機能は色々あったのですけど この資料はここまでです…

Generatorsとかyieldとか誰か教えて…

まとめ！

- ES6、はやく使いたいけどブラウザが対応するまでもう少し時間がかかりそう。

- Traceurなど変換コンパイラを使うと予習ができる！今から勉強しておくと将来モテるかも。

- 型がES6で入らなかったのが残念..

- Object.observeもES6で入らなかったのも残念..

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

下記記事を参考にさせていただきました！ありがとうございます。

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/