Learn ES2015

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

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
• gulpﬁle.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'));
});

アロー関数
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!');
});

Learn ES2015

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Learn ES2015

Ähnlich wie Learn ES2015 (20)

Mehr von Muyuu Fujita

Mehr von Muyuu Fujita (12)

Learn ES2015