traceur-compilerで未来のJavaScriptを体験

traceur-compilerで
未来のJavaScriptを体験
altJS福岡勉強会第１回　発表資料
Photo by Web制作向け無料写真素材／ぱくたそ http://www.pakutaso.com

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

今日は未来のJavaScriptが体験出来る
Traceurについて発表したいと思います！

ふーん、で今日はなんで Traceurなの？
altJSはTypeScriptとかが有名じゃないの？
(
/ﾀ、ﾀｼｶﾆ…

うちの会社はAngularJS1.2を使って開発しています。
どうやらAngularJS2.0の開発は…
All code in AngularJS 2 is already being written in ES6. As ES6 doesn’t
run in browsers today, we’re using the Traceur compiler to generate the
nice ES5 that runs everywhere. We’re working with the Traceur team to
build support for a few extensions like annotations and assertions. We
call this set of extensions "ES6 +A".
http://blog.angularjs.org/2014/03/angular-20.html
次の２は Traceurつかって開発してるよ〜

という訳でAngularJS2に備えて
TraceurとES6について発表させてください！

Traceur(traceur-compiler)って何？聞いた事無いけど？
(
/ﾀ、ﾀｼｶﾆ…

tracer-compiler(トレーサーコンパイラー)とは
https://github.com/google/traceur-compiler

tracer-compiler(トレーサーコンパイラー)とは
https://github.com/google/traceur-compiler
• 新しいJavaScript(ES6)を今のJavaScript(ES5)へコンパ
イルして動作させる事ができる
• 価値がある新しいJavaScriptの機能の設計を知ることが目標
のような事が書いてあります(英語自信無し…)、なので実務では使えなさそう…

へ？ES6って何？
(
/ｿｳｲｴﾊﾞ…

ECMAScript6とは
Mozilla における ECMAScript 6 のサポートより 
https://developer.mozilla.org/ja/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla
"
”
ECMAScript 6 は "Harmony" または "ES.next" のコードネームで呼称される、
"
JavaScript の次期標準仕様です。
TC39 has decided to move the formal publication date of the
ECMAScript 6 standard to June 2015.
http://www.2ality.com/2014/06/es6-schedule.html
仕様確定は来年の6月みたい。来年は盛り上がるかも。

ではさっそくTraceurを使ってES6が
どんな風にかけるか確認してみましょう！

まずはインストールすべし！
$ npm install traceur -g
(
Node.jsは必要なんやねー

コンパイル！！
traceur --script src/es6/*.js --out dist/app.js
"
ここにある複数のES6を
コンパイルして1ファイルに

1. Array Comprehension ( Array内包表記 )

// 1. Array Comprehension ( Array内包表記 )
var array = [
for (x of ["A", "B"])
for (y of [0, 1, 2, 4])
x + '' + y ];
"
console.log(array);
["A0", "A1", "A2", "A4", "B0", "B1", "B2", "B4"]

2. Arrow Function（アロー関数）

// 2. Arrow Function（アロー関数）
var squareEs5 = function (x) {
return x * x;
};
var squareEs6 = (x) => {
return x * x;
};
console.log("squareEs5(2)=", squareEs5(2));
console.log("squareEs6(2)=", squareEs6(2));
squareEs5(2)= 4
squareEs6(2)= 4

// 引数カッコとreturnの省略
"
var squareEs6_min = x => x * x;
"
console.log("squareEs6_min(2)=", squareEs6_min(2));
"
squareEs6_min(2)= 4

// thisの動きが違うよ
var ore = {name: "nobio"};
ore.sayEs5 = function () {
var getName = function () {
return this.name;
};
return "My name is " + getName();
}
ore.sayEs6 = function () {
var getName = ()=> this.name;
return "My name is " + getName();
};
console.log("ore.sayEs5()=", ore.sayEs5());
console.log("ore.sayEs6()=", ore.sayEs6());
ore.sayEs5()= My name is
ore.sayEs6()= My name is nobio
"
function(){}の中のthisは新た
に作られるんですけど
"
=>は外のthisが
使えます！

Arrow Function便利ですね！
TypeScriptにもCoffeeScriptなどにもあるみたいですね。

angular.module("controllers").
controller("Es5Ctrl",
["$scope", "worldServ",
function ($scope, worldServ) {
$scope.data = worldServ.data;
$scope.didPush = function () {
worldServ.add();
};
}]);
普段、functionをいっぱい書いて開発すると思うんですけど…
※上の例はAngularJSのController

angular.module("controllers").
controller("Es6Ctrl",
["$scope", "worldServ",
($scope, worldServ) => {
$scope.data = worldServ.data;
$scope.didPush = () => {
worldServ.add();
};
}]);
ES6になると随分タイプ量が減るしすっきりかけますね。
この例はAngularJS1.2です。Angular2ではどんな風に書くんでしょうかねぇ…

class Robo {
constructor(id) {
this.id = id;
this.power_ = 100;
}
attack(robo) {
robo.power_ -= 110;
}
}
こんな風に普通のclassも書く事が出来ます。

class Nekogata extends Robo {
constructor(id, name) {
super(id);
}
attack(robo) {
super.attack(robo);
}
get isKO() {
return this.power_ < 0;
}
get genki() {
return this.power_;
}
set genki(value) {
this.power_ = value;
}
}
継承も使えます！
継承元のメソッドを呼べます
プロパティ取得時の
名称をつけれます。
プロパティ設定時の
名称をつけれます。

var doraemoon = new Nekogata(1);
var jibanyoon = new Nekogata(2);
"
doraemoon.attack(jibanyoon);
console.log("jibanyoon.genki=", jibanyoon.genki);
console.log("jibanyoon.isKO=", jibanyoon.isKO);
"
jibanyoon.genki = 100;
console.log("jibanyoon.genki=", jibanyoon.genki);
console.log("jibanyoon.isKO=", jibanyoon.isKO);
これを動かすと….
ドット(.)で値取得
ドット(.)で値設定
jibanyoon.genki= -10
jibanyoon.isKO= true
jibanyoon.genki= 100
jibanyoon.isKO= false

// 4. Default Parameter
var func01 = (name = "nanashi", age=99) => {
return name + " is " + age;
};
console.log(func01( "nobi", 10));
console.log(func01( "nobi" ));
console.log(func01( ));
引数にデフォルト値が設定できます。
nobi is 10
nobi is 99
nanashi is 99

var goku = 10000, ginyu = 5000;
"
console.log("goku,ginyu ", goku, ginyu);
var [goku, ginyu] = [ginyu, goku];
console.log("goku,ginyu ", goku, ginyu);
"
var saiya = {gohan: 10000, bejita: 8000};
var {gohan, bejita} = saiya;
console.log("gohan=",gohan,"bejita=", bejita);
変数値の交換やオブジェクトの値を変数に設定したりできます。
goku,ginyu 10000 5000
goku,ginyu 5000 10000
gohan= 10000 bejita= 8000
値の交換！
Objectプロパティから変数設定！

す、すみません..ここで力つきました…

まだまだ…たくさん機能があります。
- 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)

traceurについて分かるすばらしいブログがございます。
勉強してみたい方は是非↓こちらがお勧めです！
"
traceur-compiler 入門
http://yosuke-furukawa.hatenablog.com/entry/
2014/07/31/093041

まとめ！
"
- traceur-compilerはES6の機能が体験出来る！
"
- 将来の学習用としてよさそう！ 
"
- 実案件では…他のaltJSが良さそう 
（安定して実績が増えればいいのですけど..)

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

traceur-compilerで未来のJavaScriptを体験

More Related Content

What's hot (20)

Similar to traceur-compilerで未来のJavaScriptを体験 (20)

More from Toshio Ehara (20)

traceur-compilerで未来のJavaScriptを体験