More Related Content Similar to Learn ES2015 (20) More from Muyuu Fujita (12) Learn ES20152. 自己紹介
me = {
name: "muyuu",
twitter: "@anticyborg",
belongs: "freelance",
job: "Web Front-End Engineer"
};
18. 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'));
});
21. 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);
}
}
22. thisの束縛
// es2015
var muyuu = {
name: 'muyuu',
greet: function(){
setTimeout(()=>{
console.log("hello I'm " + this.name);
// アロー関数を使った場合、thisはそのオブジェクトになる
}, 1000);
}
}
24. 関数スコープ
var a = 1;
function b(){
var a = 2;
console.log(a);
}
b(); // 2
console.log(a); // 1
26. 定数
• const で定数を宣言できる
• 定数なので値を読み取る、再度宣言はできない
// es2015
const a = 1;
const a = 2; // Error!
a = 3; // Error!
35. 式をプロパティに使う
var key = "aaa";
// es5
var obj = {};
obj[key] = 0;
// es2015
var obj = {
[key]: 0
};
console.log(obj.aaa); // 0
40. 継承
class Enemy extends Human {
constructor(name) {
super(name); // 親コンストラクタ呼び出し
}
greet() {
super.greet();
console.log("You are Die!");
}
}
47. モジュールを使う
//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;