今日から使って先取り ecmascript6
TRANSCRIPT
![Page 1: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/1.jpg)
© IMJ Corporation. All Rights Reserved.
今日から使って先取りECMAScript6HTML5minutes!〜triton-js〜
IMJ Corporation. Ryo Ohe
2014.10.20
![Page 2: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/2.jpg)
© IMJ Corporation. All Rights Reserved.
大江遼 Ryo Ohe
フロントエンドエンジニア
@ryo_ohe
# golden_rookie
![Page 3: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/3.jpg)
© IMJ Corporation. All Rights Reserved.
昨今のJavaScript開発は、
CoffeeScript
TypeScript
など、altJSを使用する機会が多い。
![Page 4: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/4.jpg)
© IMJ Corporation. All Rights Reserved.
CoffeeScript
TypeScript
どちらも素晴らしいソリューションです。
![Page 5: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/5.jpg)
© IMJ Corporation. All Rights Reserved.
しかし、ECMAScript6で書くという手段もありま
す。
![Page 6: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/6.jpg)
© IMJ Corporation. All Rights Reserved.
ECMAScript6とは?
![Page 7: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/7.jpg)
© IMJ Corporation. All Rights Reserved.
JavaScriptの設計書です。
現在のJavaScriptはECMAScript5を基に作ら
れていますが、それの次期バージョンにあたる
ものです。
![Page 8: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/8.jpg)
© IMJ Corporation. All Rights Reserved.
ECMAScript6で追加される機能
Arrow functions
Class
Default function parameters
Modules
Template strings
Promise など
![Page 9: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/9.jpg)
© IMJ Corporation. All Rights Reserved.
Arrow functions
ES6
var square = x => x;
ES5
var square = function(x) {
return x;
};
![Page 10: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/10.jpg)
© IMJ Corporation. All Rights Reserved.
Class
class Greeter {
constructor(message) {
this.message = message;
}
greet() {
var element =
document.querySelector('#message');
element.innerHTML = this.message;
}
};
![Page 11: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/11.jpg)
© IMJ Corporation. All Rights Reserved.
ES6の文法や新機能をフルサポートしたブラウ
ザは現時点では存在しません。
![Page 12: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/12.jpg)
© IMJ Corporation. All Rights Reserved.
しかし、諦める必要はありません。
![Page 13: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/13.jpg)
© IMJ Corporation. All Rights Reserved.
6to5というツールがあります。
![Page 14: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/14.jpg)
© IMJ Corporation. All Rights Reserved.
6to5とは?
![Page 15: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/15.jpg)
© IMJ Corporation. All Rights Reserved.
ES6の形式で書かれたJavaScript をES5の
形式にコンパイルしてくれます。
![Page 16: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/16.jpg)
© 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;
}
![Page 17: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/17.jpg)
© IMJ Corporation. All Rights Reserved.
6to5を使うことのメリット
![Page 18: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/18.jpg)
© IMJ Corporation. All Rights Reserved.
メリット①
ES6は2015年6月に仕様FIX
新機能を今から使っておくことで、数年後一歩
リードできる。
![Page 19: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/19.jpg)
© IMJ Corporation. All Rights Reserved.
メリット②
ライブラリが不要になる。
ES6に対応したJavaScirptを使うことで、ライブ
ラリの機能が不要になり、依存ライブラリを減ら
すことができたり、altJSに頼らなくても豊富な言
語機能が扱える可能性が広がります。
![Page 20: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/20.jpg)
© IMJ Corporation. All Rights Reserved.
とは言え、今多く使われているaltJSではなく、な
ぜ今ES6を使うのか?
![Page 21: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/21.jpg)
© IMJ Corporation. All Rights Reserved.
次のAngularJSではES6 + Traceur compilerで
書かれると発表されました。
![Page 22: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/22.jpg)
© IMJ Corporation. All Rights Reserved.
Traceur compilerとは?
![Page 23: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/23.jpg)
© IMJ Corporation. All Rights Reserved.
基本的に6to5と同じく、ES6の変換ツールだが、
runtime.jsというファイルを別途読み込む必要
があるなど、やや使いづらい。
![Page 24: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/24.jpg)
© IMJ Corporation. All Rights Reserved.
数あるES6の変換ツールの中でなぜ6to5なの
か?
![Page 25: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/25.jpg)
© IMJ Corporation. All Rights Reserved.
ES6の変換ツールの比較
![Page 26: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/26.jpg)
© IMJ Corporation. All Rights Reserved.
コンパイルされたコードがきれい
ES6
var seattlers = [for (c of customers) if (c.city
== "Seattle") { name: c.name, age: c.age }];
![Page 27: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/27.jpg)
© 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
コンパイルされたコード
![Page 28: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/28.jpg)
© IMJ Corporation. All Rights Reserved.
ES6で書いて、一歩先をリードしてはいかがで
しょうか。
![Page 29: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/29.jpg)
© IMJ Corporation. All Rights Reserved.
サンプル
https://github.com/one-a/es6to5_sample
![Page 30: 今日から使って先取り ECMAScript6](https://reader034.vdocuments.net/reader034/viewer/2022042518/55a2d7e01a28ab927d8b45d5/html5/thumbnails/30.jpg)
© IMJ Corporation. All Rights Reserved.
ご清聴ありがとうございました。