今日から使って先取り ECMAScript6

今日から使って先取りECMAScript6
HTML5minutes！〜triton-js〜
© IMJ Corporation. All Rights Reserved.
IMJ Corporation. Ryo Ohe
2014.10.20

大江遼Ryo Ohe
フロントエンドエンジニア
@ryo_ohe
# golden_rookie

昨今のJavaScript開発は、
CoffeeScript
TypeScript
など、altJSを使用する機会が多い。

CoffeeScript
TypeScript
どちらも素晴らしいソリューションです。

しかし、ECMAScript6で書くという手段もありま
す。

ECMAScript6とは？

JavaScriptの設計書です。
現在のJavaScriptはECMAScript5を基に作ら
れていますが、それの次期バージョンにあたる
ものです。

ECMAScript6で追加される機能
Arrow functions
Class
Default function parameters
Modules
Template strings
Promise など

Arrow functions
ES6
var square = x => x;
ES5
var square = function(x) {
return x;
};

Class
class Greeter {
constructor(message) {
this.message = message;
}
greet() {
var element =
document.querySelector('#message');
element.innerHTML = this.message;
}
};

ES6の文法や新機能をフルサポートしたブラウ
ザは現時点では存在しません。

しかし、諦める必要はありません。

6to5というツールがあります。

6to5とは？

ES6の形式で書かれたJavaScript をES5の
形式にコンパイルしてくれます。

コンパイル前
function multiply(a, b = 1) {
return a*b;
}
コンパイル後
function multiply(a, b) {
if (b === undefined)
b = 1;
return a*b;
}

6to5を使うことのメリット

メリット①
ES6は2015年6月に仕様FIX
新機能を今から使っておくことで、数年後一歩
リードできる。

メリット②
ライブラリが不要になる。
ES6に対応したJavaScirptを使うことで、ライブ
ラリの機能が不要になり、依存ライブラリを減ら
すことができたり、altJSに頼らなくても豊富な言
語機能が扱える可能性が広がります。

とは言え、今多く使われているaltJSではなく、な
ぜ今ES6を使うのか？

次のAngularJSではES6 + Traceur compilerで
書かれると発表されました。

Traceur compilerとは？

基本的に6to5と同じく、ES6の変換ツールだが、
runtime.jsというファイルを別途読み込む必要
があるなど、やや使いづらい。

数あるES6の変換ツールの中でなぜ6to5なの
か？

ES6の変換ツールの比較

コンパイルされたコードがきれい
ES6
var seattlers = [for (c of customers) if (c.city
== "Seattle") { name: c.name, age: c.age }];

コンパイルされたコード
6to5 Traceur compiler
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
};
});

ES6で書いて、一歩先をリードしてはいかがで
しょうか。

サンプル
https://github.com/one-a/es6to5_sample

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

今日から使って先取り ECMAScript6

More Related Content

What's hot

Similar to 今日から使って先取り ECMAScript6

Recently uploaded

今日から使って先取り ECMAScript6

Editor's Notes