今日から使って先取り ecmascript6

© IMJ Corporation. All Rights Reserved.

今日から使って先取りECMAScript6HTML5minutes！〜triton-js〜

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 }];


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

しょうか。


サンプル

https://github.com/one-a/es6to5_sample


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

今日から使って先取り ecmascript6

Engineering