ES2015 ͷݱࡏͱ
ESNext ͷະདྷ
@yosuke_furukawa in HTML Party ͔͝Μ·
Slide 2
Slide 2 text
Twitter: @yosuke_furukawa
Github: yosuke-furukawa
Slide 3
Slide 3 text
࠷ۙ
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
ࡱӨ͞Εͨসإ
Slide 6
Slide 6 text
ࢠͲ͕ੜ·ΕͨͷͰجຊͬ
ͯΔͷ
ύύͱOSSίϛολʔ
Slide 7
Slide 7 text
JavaScript
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
JavaScript is the world’s
most misunderstood
Programming Language
— Douglas Crockford
Slide 12
Slide 12 text
JavaScript Trap Examples
Slide 13
Slide 13 text
JavaScript Traps 1
var test = 'global';
function foo() {
console.log(test); // global?? local??
if (true) {
var test = 'local';
console.log(test); // global?? local??
}
}
foo();
Slide 14
Slide 14 text
JavaScript Traps 1
var test = 'global';
function foo() {
console.log(test); // undefined
if (true) {
var test = 'local';
console.log(test); // local
}
}
foo();
Slide 15
Slide 15 text
JavaScript Traps 1
var test = 'global';
function foo() {
var test;
console.log(test); // undefined
if (true) {
test = 'local';
console.log(test); // local
}
}
foo();
࣮ࡍͷ&OHJOFͷ
ղऍ͜͏ͳΔ
Slide 16
Slide 16 text
JavaScript Traps 1
var test = 'global';
function foo() {
console.log(test); // global?? local??
if (true) {
var test = 'local';
console.log(test); // global?? local??
}
}
foo();
ר্͖͛ࣄނ
Slide 17
Slide 17 text
JavaScript Traps 2
var Alice = function() {
this.name = 'Alice';
};
Alice.prototype.printNameInteval = function() {
console.log(this.name); // Alice?
setInterval(function() {
console.log(this.name); // Alice???
}, 1000);
};
var alice = new Alice();
alice.printNameInteval();
Slide 18
Slide 18 text
JavaScript Traps 2
var Alice = function() {
this.name = 'Alice';
};
Alice.prototype.printNameInteval = function() {
console.log(this.name); // Alice
setInterval(function() {
console.log(this.name); // undefined
}, 1000);
};
var alice = new Alice();
alice.printNameTick();
Slide 19
Slide 19 text
JavaScript Traps 2
var Alice = function() {
this.name = 'Alice';
};
Alice.prototype.printNameTick = function() {
console.log(this.name); // this => Alice
setInterval(function() {
console.log(this.name); // this => ????? (browserwindow, node
Timer
}, 1000);
};
var alice = new Alice();
alice.printNameTick();
UIJT͕ࢦ͍ͯ͠Δͷ͕
มΘΔ
Slide 20
Slide 20 text
JavaScript Traps 2
var Alice = function() {
this.name = 'Alice';
};
Alice.prototype.printNameTick = function() {
console.log(this.name); // Alice
setInterval(function() {
console.log(this.name); // undefined
}, 1000);
};
var alice = new Alice();
alice.printNameTick();
ϰΝχογϡUIJT
JavaScript Traps 1
var test = 'global';
function foo() {
console.log(test); // global?? local??
if (true) {
var test = 'local';
console.log(test); // global?? local??
}
}
foo();
ר্͖͛ࣄނ
Slide 30
Slide 30 text
Use let or const
Slide 31
Slide 31 text
JavaScript Traps 1
const test = 'global';
function foo() {
console.log(test); // global
if (true) {
const test = 'local';
console.log(test); // local
}
}
foo();
Slide 32
Slide 32 text
JavaScript Traps 1
const test = 'global';
function foo() {
console.log(test); // global
if (true) {
const test = 'local';
console.log(test); // local
}
}
foo();
LGTM
Slide 33
Slide 33 text
let ͱ const
• block scope ͱݴͬͯมείʔϓ͕ϒϨʔε{}ͷதʹ
ด͡Δ
• let ࠶ೖՄೳͳม
• const ࠶ೖෆՄೳͳม
• جຊతʹ const Λͬͯ let ೖՄೳͳͷʹͷ
Έ͏ͷ͕ίʔυϚφʔʹͳΓͭͭ͋Δ
Slide 34
Slide 34 text
JavaScript Traps 2
var Alice = function() {
this.name = 'Alice';
};
Alice.prototype.printNameTick = function() {
console.log(this.name); // Alice
setInterval(function() {
console.log(this.name); // undefined
}, 1000);
};
var alice = new Alice();
alice.printNameTick();
ϰΝχογϡUIJT
Slide 35
Slide 35 text
Use arrow function
Slide 36
Slide 36 text
JavaScript Traps 2
var Alice = function() {
this.name = 'Alice';
};
Alice.prototype.printNameTick = function() {
console.log(this.name); // Alice
setInterval(() => {
console.log(this.name); // Alice
}, 1000);
};
var alice = new Alice();
alice.printNameTick();
Slide 37
Slide 37 text
JavaScript Traps 2
var Alice = function() {
this.name = 'Alice';
};
Alice.prototype.printNameTick = function() {
console.log(this.name); // Alice
setInterval(() => {
console.log(this.name); // Alice
}, 1000);
};
var alice = new Alice();
alice.printNameTick();
LGTM
Slide 38
Slide 38 text
arrow function
• Ξϩʔؔͱݴͬͯ this ͕Ξϩʔؔʹଋ
റ͞ΕΔ
• ؔͷதͰthisΛ͏࣌ʹ͍͍ͪͪbind͢Δඞ
ཁ͕ͳ͍ɻ
// ͜͏͍͏࣌ʹ͏ɻ
[1,2,3,4,5,6,7,8,9].filter(n => n % 2 === 0).reduce(prev, curr => prev + curr);
Slide 39
Slide 39 text
͍ͭͰʹ֮͑Α͏
class
Slide 40
Slide 40 text
class
class Alice {
constructor() {
this.name = 'Alice';
}
printNameTick() {
console.log(this.name); // Alice
setInterval(() => {
console.log(this.name); // Alice
}, 1000);
}
}
var alice = new Alice();
alice.printNameTick();
LVGTM
Slide 41
Slide 41 text
class
• JavaScript Ͱ class Λ࡞ΕΔΑ͏ʹͳͬͨ
• ͜Ε·Ͱͷ prototype ͷԆ
• ܧঝͱ͔Մೳ
class Alice extends Person {
}
SIMD
const a = [1.0, 2.0, 3.0, 4.0];
const b = [5.0, 6.0, 7.0, 8.0];
const c = [];
for(var i=0; i
Slide 74
Slide 74 text
SIMD
var a = SIMD.float32x4(1.0, 2.0, 3.0, 4.0);
var b = SIMD.float32x4(5.0, 6.0, 7.0, 8.0);
var c = SIMD.float32x4.add(a,b);
console.log(c); // 6, 8, 10, 12
•
Faster!
ES2015 class ͷදݱྗ͍
class Alice {
constructor() {
this.name = 'Alice'
}
printNameTick() {
console.log(this.name); // Alice
setInterval(() => {
console.log(this.name); // Alice
}, 1000);
}
}
var alice = new Alice();
alice.printNameTick();
member field
constructor ʹهड़
͠ͳ͍ͱ͍͚ͳ͍
Slide 78
Slide 78 text
class props declarations
class Alice {
name = 'Alice'; // member field
static foo = 'foo'; // static ͳfieldఆٛͰ͖Δ
printNameTick() {
console.log(this.name); // Alice
setInterval(() => {
console.log(this.name); // Alice
}, 1000);
}
}
var alice = new Alice();
alice.printNameTick();
Slide 79
Slide 79 text
class props declarations
class Alice {
name = 'Alice'; // member field
static foo = 'foo'; // static ͳfieldఆٛͰ͖Δ
printNameTick() {
console.log(this.name); // Alice
setInterval(() => {
console.log(this.name); // Alice
}, 1000);
}
}
var alice = new Alice();
alice.printNameTick();
LVGTM
Slide 80
Slide 80 text
class props declarations
• class Ͱmember/static member Λॻ͚Δ
Α͏ʹ͠Α͏ͱ͍͏ͷɻ
• ಛʹ static member React ͱ͔ͰΑ͘ར
༻͢ΔͷͰॻ͚Δͱخ͍͠ɻ
• ͍ͭೖΔ͔ෆ໌ɺೖΒͳ͍Մೳੑ͋Δɻ
Slide 81
Slide 81 text
͍ͭͰʹ֮͑Α͏ private field
Slide 82
Slide 82 text
private member field
class Alice {
#name = 'Alice'; // private member field
printNameTick() {
console.log(this.#name); // Alice
setInterval(() => {
console.log(this.#name); // Alice
}, 1000);
}
}
var alice = new Alice();
alice.printNameTick();
‧⛺è('ω')è⛺䡡‧
Decorator
class Alice {
#firstname = 'Alice'; // private member field
#lastname = 'Bob'; // private member field
@readonly // decorator
fullname() { return `${this.#firstname} ${this.#lastname}` }
}
var alice = new Alice();
console.log(alice.fullname());
alice.fullname = function someMock(){}; // error