More Related Content Similar to traceur-compilerで ECMAScript6を体験 (20) More from Toshio Ehara (20) traceur-compilerで 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/
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で試しにアプリを書いてみました。
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
17. ES6は For Of で値をループできます。
// ES5
this.listeners.forEach(function (listener) {
listener();
});
// ES6
for (let listener of this.listeners) {
listener();
}
“for in” はkeyのループ。”for of”は値のループ。
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が
1つの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
);
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() { ...省略... }
}
( ∵ 継承もすっきり!
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;
}};
}); こんな感じでコンパイル済みを結合してます..
(結合せずに読み込めるかは..調査不足…)
30. Viewの基本機能をもつクラスをつくりました。
// ES5
var BaseView = function(cssClassNm, models) {
models = models || {};
デフォルト
this.el = document.getElementsByClassName(cssClassNm)[0];
// ... 省略 パラメータ
...
}
コンストラクタ関数の第2引数が
省略時は {object} を設定するをES6で書くと…
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];
}
}
コンストラクタ関数の第2引数が
省略時は {object} を設定するをES6で書くと…
33. テンプレートリテラルで計算結果を表示しました。
// ES6
render() {
var pay = this.salary.compute().toLocaleString();
this.resultEl.textContent = `支給額:${pay}円`;
}
バッククォートで囲った文字は文字列中に変数を埋め込めます。
35. 初期値は起動時にAPIからAjaxで取得してます。
サンプルアプリはこんな感じで
数値入力View
計算結果表示View
時給計算Model
̶̶̶̶̶̶̶̶̶̶̶
時給
時間
支給額計算メソッド
APIサーバから初期値取得
APIサーバは
Spring Boot
はじめてのSpring Boot―「Spring Framework」で簡単Java
http://www.amazon.co.jp/gp/product/4777518655
数字を2つ入力すると掛け算する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に設定する変数が同じ場合は省略できる
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プロパティから変数設定!
変数値の交換やオブジェクトの値を変数に設定したりできます。
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/