Learn
ES2015(ES6)

自己紹介
me = {
name: "muyuu",
twitter: "@anticyborg",
belongs: "freelance",
job: "Web Front-End Engineer"
};

About
ES2015

history
• 2000年あたりのAJAX以降、Web開発における
フロントエンドの重要性は高まっていく一方
• EcmaScriptの進化はWeb開発の速度に追いつ
いていない
• JavaScript独自の仕様を好まない開発者も多い

そうだ
コンパイルしよう

Alt JS
• CoffeeScript
• TypeScript
• Haxe
• Scala.js

ES2015策定
• 大規模開発に必要な機能
• 後方互換性
• 良い感じに書ける

ブラウザ対応
ECMAScript 6 compatibility table

ブラウザ対応
• IEは11でもほとんど対応してない（Edgeは積
極的に対応）
• IE11はあと4年くらいサポートする

そうだ！！！
コンパイルだ！

Babel
ES2015をES5に変換するトランスパイラ
https://babeljs.io/

今から
ES2015で
書ける！

注意点
• IE8対応案件はまだ普通にある
• IE8はそもそもES3
• Babelは基本的に ES2015->ES5
• class構文とか、使えないものも多い
お気をつけて

use babel
https://babeljs.io/repl/

use babel
install
$ node install -g babel
run
$ babel es6/a.js > es5/a.js

with browserify
• install
$ npm install --save-dev babelify
$ browserify main.js -t babelify -o bundle.js

with gulp
• install
$ npm install --save-dev gulp gulp-babel

with gulp
• gulpfile.js
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('default', function () {
return gulp.src('src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});

New Syntax

アロー関数
var add = (a, b)=>{
return a + b;
}
var factorial = x => x * x;

thisの束縛
// es5
var muyuu = {
name: 'muyuu',
greet: function(){
// setTimeoutのコールバック関数内のthisはwindowになるため
// _this に this を格納しておく
var _this = this;
setTimeout(()=>{
console.log("hello I'm " + _this.name);
// _this を使用
}, 1000);
}
}

thisの束縛
// es2015
var muyuu = {
name: 'muyuu',
greet: function(){
setTimeout(()=>{
console.log("hello I'm " + this.name);
// アロー関数を使った場合、thisはそのオブジェクトになる
}, 1000);
}
}

ブロックスコープ
• JavaScriptのスコープは関数スコープ
• var ではなく let でブロックスコープの変数を
宣言できる

関数スコープ
var a = 1;
function b(){
var a = 2;
console.log(a);
}
b(); // 2
console.log(a); // 1

ブロックスコープ
// es2015
function b() {
let a = 1;
if (true) {
let a = 2;
}
return a;
}
console.log( b() ); // 1

定数
• const で定数を宣言できる
• 定数なので値を読み取る、再度宣言はできない
// es2015
const a = 1;
const a = 2; // Error!
a = 3; // Error!

デフォルト引数
• 関数の引数にデフォルト値を設定できる
// es5
function add(x, y){
if(typeof y === 'undefined') y = 1;
return x + y;
}
// es2015
function add(x, y = 1){
return x + y;
}

可変長引数
引数の長さが決まってない場合
// es5
function a(x){
// arguments を使って頑張って配列のように扱う
var y = Array.prototype.slice.call(arguments, 1);
console.log(x, y);
}
a(1,2,3); // 1 [2, 3]

可変長引数
// es2015
function a(x, ...rest){
// ... に続けて書かれた引数は配列として扱われる
console.log(x, rest);
}
a(1,2,3); // 1 [2, 3]

分割代入
配列・オブジェクトからデータを取り出す
var arr = ["one", "two", "three"];
// es5
var one = arr[0];
var two = arr[1];
var three = arr[2];
// es2015
var [one, two, three] = arr;

分割代入
• 関数の引数にも分割代入は使える
// es2015
function c({a, b}) {
console.log(a, b);
}
c({a: 1, b: 2}); // 1 2

スプレッド演算子
• 配列を関数の引数として使用したい場合
function f(x, y, z) { }
var args = [0, 1, 2];
// es5
f.apply(null, args);
// es2015
f(...args);

プロパティの省略
• オブジェクトプロパティのキー名と値の変数名
が等しい場合、省略記法で書ける
var a = 0, b = 1;
// es5
var obj = {a: a, b: b};
// es2015
var obj = {foo, bar};

式をプロパティに使う
• 変数の値文字列をキーにしたい場合、ES5まで
は一度オブジェクトを作る必要があった
• ES2015ではオブジェクト生成時に直接変数、
式を代入できる

式をプロパティに使う
var key = "aaa";
// es5
var obj = {};
obj[key] = 0;
// es2015
var obj = {
[key]: 0
};
console.log(obj.aaa); // 0

メソッドの定義
• メソッドの記述方法が簡易になる
// es5
var obj = {
b: function(){
console.log('this is obj');
}
};
// es2015
var obj = {
b(){
console.log('this is obj');
}
};

for of
• 列挙できるオブジェクト(配列・文字列等)を繰
り返す汎用的な処理
// es2015
var arr = [2,3,6,7];
for ( var x of arr ){
console.log(x);
}

テンプレートリテラル
• バッククオートで囲んだ場合、文字列の中に変
数を埋め込める
var arr = a = 1, b = 2 ;
// es5
console.log(a + " + " + b + " = " + (a + b));
// es2015
console.log(`${a} + ${b} = ${a + b}`);

class
class Human {
constructor(name) {
this.name = name;
}
greet() {
console.log("Hello, I'm " + this.name);
}
static create(name) {
return new Human(name);
}
}

継承
class Enemy extends Human {
constructor(name) {
super(name); // 親コンストラクタ呼び出し
}
greet() {
super.greet();
console.log("You are Die!");
}
}

モジュール
• たいぼうの もじゅーる かんり
• 言語仕様外でcommonJS、AMDというモジュ
ール機構
• シンプルで宣言的な記述

エクスポート
// module.js
export var a = "a!";
export function b() {}
export class C {
d() {}
}

インポート
// import.js
// メンバごとにインポート
import {a, b, C} from "./module";
console.log(a); // "a!"
b();
new C();

インポート
// インポートする変数名の指定
import {a as p} from "./module";
console.log(p); // "a!"

インポート
// モジュールをまとめてインポート
import * as module from "./module";
console.log(module.a); // "a!"

モジュールを使う
• 現在ネイティブで実装している環境はない
• BabelでCommonJSモジュールに変換

モジュールを使う
//es2015 module
import {a, b} from "./module";
export var c = 1;
//commonJS module
var module = require("./module");
var a = module.a;
var b = module.b;
exports.c = 1;

Promise
// Promisオブジェクトを返す関数を作成
function sleep(msec) {
// promiseオブジェクトを返す
return new Promise((resolve, reject)=>{
// 非同期処理を記述
setTimeout(resolve, msec);
});
}
// Promiseの実行
sleep(1000).then(()=>{
// resolve実行時にここが呼び出される
console.log('wake!');
});