金標準先物...※取引最終日において、商品先物(現物先物取引)の「建玉残高概算」は「本受渡高」を意味する。最終日 建玉残高
今日から使って先取り ECMAScript6
-
Upload
ryo-ohe -
Category
Engineering
-
view
355 -
download
0
Transcript of 今日から使って先取り ECMAScript6
© IMJ Corporation. All Rights Reserved.
今日から使って先取りECMAScript6HTML5minutes!〜triton-js〜
IMJ Corporation. Ryo Ohe
2014.10.20
© IMJ Corporation. All Rights Reserved.
大江遼 Ryo Ohe
フロントエンドエンジニア
@ryo_ohe
# golden_rookie
© IMJ Corporation. All Rights Reserved.
昨今のJavaScript開発は、
CoffeeScript
TypeScript
など、altJSを使用する機会が多い。
© IMJ Corporation. All Rights Reserved.
CoffeeScript
TypeScript
どちらも素晴らしいソリューションです。
© IMJ Corporation. All Rights Reserved.
しかし、ECMAScript6で書くという手段もありま
す。
© IMJ Corporation. All Rights Reserved.
ECMAScript6とは?
© IMJ Corporation. All Rights Reserved.
JavaScriptの設計書です。
現在のJavaScriptはECMAScript5を基に作ら
れていますが、それの次期バージョンにあたる
ものです。
© IMJ Corporation. All Rights Reserved.
ECMAScript6で追加される機能
Arrow functions
Class
Default function parameters
Modules
Template strings
Promise など
© IMJ Corporation. All Rights Reserved.
Arrow functions
ES6
var square = x => x;
ES5
var square = function(x) {
return x;
};
© IMJ Corporation. All Rights Reserved.
Class
class Greeter {
constructor(message) {
this.message = message;
}
greet() {
var element =
document.querySelector('#message');
element.innerHTML = this.message;
}
};
© IMJ Corporation. All Rights Reserved.
ES6の文法や新機能をフルサポートしたブラウ
ザは現時点では存在しません。
© IMJ Corporation. All Rights Reserved.
しかし、諦める必要はありません。
© IMJ Corporation. All Rights Reserved.
6to5というツールがあります。
© IMJ Corporation. All Rights Reserved.
6to5とは?
© IMJ Corporation. All Rights Reserved.
ES6の形式で書かれたJavaScript をES5の
形式にコンパイルしてくれます。
© IMJ Corporation. All Rights Reserved.
コンパイル前
function multiply(a, b = 1) {
return a*b;
}
コンパイル後
function multiply(a, b) {
if (b === undefined)
b = 1;
return a*b;
}
© IMJ Corporation. All Rights Reserved.
6to5を使うことのメリット
© IMJ Corporation. All Rights Reserved.
メリット①
ES6は2015年6月に仕様FIX
新機能を今から使っておくことで、数年後一歩
リードできる。
© IMJ Corporation. All Rights Reserved.
メリット②
ライブラリが不要になる。
ES6に対応したJavaScirptを使うことで、ライブ
ラリの機能が不要になり、依存ライブラリを減ら
すことができたり、altJSに頼らなくても豊富な言
語機能が扱える可能性が広がります。
© IMJ Corporation. All Rights Reserved.
とは言え、今多く使われているaltJSではなく、な
ぜ今ES6を使うのか?
© IMJ Corporation. All Rights Reserved.
次のAngularJSではES6 + Traceur compilerで
書かれると発表されました。
© IMJ Corporation. All Rights Reserved.
Traceur compilerとは?
© IMJ Corporation. All Rights Reserved.
基本的に6to5と同じく、ES6の変換ツールだが、
runtime.jsというファイルを別途読み込む必要
があるなど、やや使いづらい。
© IMJ Corporation. All Rights Reserved.
数あるES6の変換ツールの中でなぜ6to5なの
か?
© IMJ Corporation. All Rights Reserved.
ES6の変換ツールの比較
© IMJ Corporation. All Rights Reserved.
コンパイルされたコードがきれい
ES6
var seattlers = [for (c of customers) if (c.city
== "Seattle") { name: c.name, age: c.age }];
© IMJ Corporation. All Rights Reserved.
var seattlers = (function() {
var c;
var $__20 = 0,
$__21 = [];
for (var $__22 =
customers[$traceurRuntime.toProperty(Symbol.iterator)](),
$__23; !($__23 = $__22.next()).done; ) {
c = $__23.value;
if (c.city == "Seattle")
$traceurRuntime.setProperty($__21, $__20++, {
name: c.name,
age: c.age
});
}
return $__21;
}());
var seattlers = customers.filter(function (c) {
return c.city == "Seattle";
}).map(function (c) {
return {
name: c.name,
age: c.age
};
});
6to5 Traceur compiler
コンパイルされたコード
© IMJ Corporation. All Rights Reserved.
ES6で書いて、一歩先をリードしてはいかがで
しょうか。
© IMJ Corporation. All Rights Reserved.
サンプル
https://github.com/one-a/es6to5_sample
© IMJ Corporation. All Rights Reserved.
ご清聴ありがとうございました。