今日から使って先取り 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.

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