Share
Embed
Slide 1
Slide 1 text
JavaScript
Bootcamp 2018
2018, 6th April @ Recruit Technologies
Slide 2
Slide 2 text
JavaScript Bootcamp
• ࠓͰ JavaScript Λ͍͢
• JavaScript ΛΔ
• JavaScript ͰΫϥΠΞϯτΛ࡞Δ
• JavaScript ͰαʔόΛ࡞Δ
Slide 3
Slide 3 text
ͷલʹ
• ϦΫϧʔτςΫϊϩδʔζͷ "ϑϩϯτΤϯυΤϯ
δχΞ" ͷఆٛͯ͘ਂ͍
• HTML/CSS/JSΛۦͯ͠ΫϥΠΞϯτΛ࡞Δ *͚ͩ
Ͱͳ͍*
• ωοτϫʔΫͷࣝαʔόͷجૅࣝ༗͢Δ্
ʹͦΕΒΛ౿·͑ͯαΠτશମͷϢʔβϏϦςΟɾ
ύϑΥʔϚϯεΛ্͛Δਓ
Slide 4
Slide 4 text
ϦΫϧʔτςΫϊϩδʔζͷ
ϑϩϯτΤϯυΤϯδχΞ
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
ࠓճͷBootcampͰ
Slide 8
Slide 8 text
͜ͷ͋ͨΓΛڭ͑·͢ɻ
Slide 9
Slide 9 text
͜ͷ͋ͨΓগ͠ڭ͑·͢ɻ
Slide 10
Slide 10 text
JavaScriptΛΔ
Slide 11
Slide 11 text
JavaScriptΛΔ
• JavaScript ΛͱΓ͋͑ͣͬͯΈΔ
• JavaScript ʹ৮ΕΔ
• JavaScript ࠓੲޠ
Slide 12
Slide 12 text
JavaScriptΛͱΓ͋͑ͣͬͯ
ΈΔɻ
// ͜͜Ͱ Node.js ͕ೖͬͯΔਓ terminal Λىಈͯ͠ԼهͷίϚϯυΛ࣮ߦ͍ͯͩ͘͠͞ɻ
$ node -v
v9.11.1
REPLΛىಈ͠·͠ΐ͏
$ node
> // ͜͜Ͱ͏ JavaScript ͕ಈ͖·͢ɺ৭ʑͬͯΈ·͠ΐ͏ɻ
> 1 + 1;
2
> var test = "abc";
test
> function test() {
... var num = 2;
... return num;
... }
undefined
> test();
2
Slide 13
Slide 13 text
JavaScriptΛͱΓ͋͑ͣͬͯ
ΈΔɻ
• ࣮ࡍʹHelloWorldΞϓϦΛ࡞ͬͯΈ·͠ΐ
͏ɻҎԼͷϑΝΠϧΛ࡞ͯ͠ɺ
helloworld.jsͱ͍͏໊લΛ͚͍ͭͯͩ͘͞ɻ
console.log('Hello World');
$ node helloworld.js
Hello World
Slide 14
Slide 14 text
JavaScriptΛͱΓ͋͑ͣͬͯ
ΈΔɻ
• ͏গ͠ڽͬͨ͜ͱΛͯ͠Έ·͠ΐ͏
// ϑΝΠϧͷதͰɺ࣍ͷྻΛද͢ɺม pets Λఆٛ͠·͠ΐ͏ɻ
const pets = ['cat', 'dog', 'rat'];
// forϧʔϓΛ࡞ͬͯɺྻͷ֤จࣈྻ͕ෳܗʹͳΔΑ͏ʹมߋ͠·͢ɻ
// forϧʔϓͷத࣍ͷΑ͏ʹͳΔͰ͠ΐ͏...
pets[i] = pets[i] + 's';
forϧʔϓ͕ऴΘͬͨΒɺ console.log() Λͬͯྻ pets Λλʔϛφϧʹදࣔ͠·͠ΐ͏ɻ
Slide 15
Slide 15 text
JavaScriptΛͱΓ͋͑ͣͬͯ
ΈΔɻ
• ͔͜͜ΒԋशͰ͢ɻ
$ npm install @recruit-tech/javascripting -g
$ javascripting
͜ΕΛ࣮ߦ͠·͠ΐ͏ɻ
࣮ߦ͕ऴΘͬͨΒຊޠઃఆʹ্ͨ͠Ͱ্͔Βղ͍ͯΈ·͠ΐ͏ɺͳ͓ Introduction ͱ for
ϧʔϓʹ͍ͭͯطʹ্ͷͰͬͯ·͢ͷͰɺҎԼͷΛͱ͖·͠ΐ͏ɻ
# ਖ਼نදݱΛ͑ɺϧʔΫ
# Arrays more
# fizzbuzz
1࣌ؒҐͰʂʂʂ
Slide 16
Slide 16 text
͍͍ͩͨղ͚ͨΒ࣍ͷߨٛʹ
ҠΓ·͢ɻ
Slide 17
Slide 17 text
JavaScript ΛͪΌΜͱֶͿ
• JavaScript ʮੈքͰ࠷ޡղ͞Ε͍ͯΔݴ
ޠͰ͋Δʯͱ͞Ε͖ͯͨաڈ͕͋Γ·͢ɻ
• ʮJavaScript ᠘ʯͱ͔Ͱݕࡧ͢Δͱͨ͘͞Μ
ώοτ͢Δͱࢥ͍·͢ɻ
• JavaScript͕Ͳ͏͍͏จ๏ͳͷ͔ΛͪΌΜͱ
ֶΜͰΒ͍·͢ɻ
Slide 18
Slide 18 text
JavaScriptͱͲΜͳݴޠ͔
• Java, Self, Scheme Λݩʹ৭ʑࠞͥͨΒग़དྷ
্͕ͬͨएׯΩϝϥͷΑ͏ͳݴޠͰ͢ɻ
• ΫϥεϕʔεͰͳ͘ɺϓϩτλΠϓϕʔεͷ
ݴޠ
• ࣮ߦڥʹΑͬͯେྔͷϏϧυΠϯΦϒδΣ
Ϋτ͕ಡΈࠐ·Ε·͢
Slide 19
Slide 19 text
Α͘ฉ͔ΕΔ࣭
ී௨ͷJSͱNode.jsͬͯԿ͕ҧ͏ΜͰ͔͢ʁ
Slide 20
Slide 20 text
Α͘ฉ͔ΕΔ࣭
A. ҧ͍·ͤΜ
Slide 21
Slide 21 text
JavaScriptͱͲΜͳݴޠ͔
• จ๏ϨϕϧͰҧΘͳ͍
• ҧ͏ͱ͢ΔͱϏϧτΠϯΦϒδΣΫτ͕ҧ͏
• browser: DOM, navigator, window etc
• Node.js: global, fs, http, net, etc
• ڞ௨: JSON, Date, Math
Slide 22
Slide 22 text
JavaScriptͱͲΜͳݴޠ͔
• Node.js Ͱ JavaScript ΛֶɺϒϥβͰ͑Δͷʹ
ͳΔ͔ʁ
• YesͰ͋ΓɺNo
• จ๏ֶΔ͠ɺॻ͖ํֶΔ͕ɺϒϥβͰͦͷ··
͑ΔͷʹͳΒͳ͍ɻ
• GUIΛ࡞Δͷ͕ϒϥβͷJavaScript
• Server, toolΛ࡞Δͷ͕Node.js
Slide 23
Slide 23 text
͜͜ͷߨٛͰจ๏ͱ؆୯ͳ
ॻ͖ํΛֶͼ·͢ɻ
Slide 24
Slide 24 text
جຊจ๏ͱॻ͖ํ
•
• ม
• ؔ
• σʔλܕ
• Primitive
• Object
• Ϋϥε
• ݅ذ
• ϧʔϓ
• ྻͷߴ֊ؔ
Slide 25
Slide 25 text
1ͱ͔"hoge"ͱ͔ͷ͜ͱͰ͢ɻ
͜͏ݴ͏ͱࡶͳͷͰ͏ͪΐͬͱઆ໌͢Δͱɺʢvalueʣͱɺ۩ମతͳσʔλͷࣄ
Λࢦͯ͠·͢ɻ
ҎԼͷίʔυΛ Node.js ͷ REPL Ͱࢼͯ͠Έ·͠ΐ͏ɻ
> 1;
1
> "Hello";
Hello
શ෦Ͱ͢ɻ
Slide 26
Slide 26 text
console.log Λલʹ͍·͕ͨ͠ɺ͜ΕΛධՁͯ͠දࣔ͢Δͷʹ͍·͢ɻ
> console.log(1 + 1)
2
> console.log("Hello" + "World")
HelloWorld
`console.log` ͜Εͷ͘͢͝Α͘͏ͷͰʢdebug࣌ʣ֮͑ͯԼ͍͞ɻ͕Α͔͘Β
ͳ͘ͳͬͯΓ͍ͨͳͬͯࢥͬͨΒ console.log Ͱ؆қdebugͯ͠දࣔ͢Δࣄ͕ଟ͍Ͱ͢ɻ
Slide 27
Slide 27 text
ม
Λཧղͨ͠ΒɺมΛཧղ͠·͠ΐ͏ɻ
มʹ໊લ͚ͯอ࣋͢ΔͨΊʹ͏ `ʹ໊લΛ͚ͭΔΈ` Ͱ͢ɻ
มͷ໊લΛ `ม໊` ͱݺͼɺม͕ࢦࣔ͢͠Λ `ม ͨͩ͘͠ͷ `
ͱݺͼ·͢ɻʮʹ໊લΛ͚ͭΔࣄʯΛมએݴɺͱݴ͍·͢ɻ
໊લͷӨڹൣғͷࣄΛʮείʔϓʯͱݴ͍·͢ɻ
JavaScript ʹ 3छྨͷมએݴͷΈ͕͋Γ·͢ɻ
͓ͳ͡Έͷ var, let, const Ͱ͢ɻͦΕͧΕઆ໌͠·͢ɻ
Slide 28
Slide 28 text
ม - มએݴ
var a = 1;
let b = 2;
const c = 3;
console.log(a, b, c);
جຊతʹ var Ͱ let Ͱ const ͰมΛએݴ͢Δͱ͍͏ҙຯͰҰॹͰ͢ɻ
ͪͳΈʹͲΕΛҰ൪͏͔ͱ͍͏ͱɺ
const > let >>>>>>(ӽ͑ΒΕͳ͍น)>>>>>>> var
͘Β͍ͷॱͰ͍·͢ɻ
Slide 29
Slide 29 text
ม - มએݴ
const Ͱએݴ͢Δͱ࠶ೖ͕Ͱ͖ͳ͘ͳΓ·͢ɻ
const c = 3;
c = 4; // TypeError
࠶ೖͰ͖ͳ͍ͱਖ਼໘ͩͳ͍ͬͯ͏ؾ͢Δ͔͠Ε·ͤΜ͕ɺ࠶ೖ͠ͳ͍ͱ͍͏ࣄ
ίʔυΛಡΉଆʹऔͬͯΈΔͱɺมͷ͕ೖ͞ΕͯมԽ͞ΕΔ͜ͱ͕ແ͍ͱ͍͏ࣄΛ
ࢦ͢ͷͰಡΉଆ͍͘Βָ͔ʹͳΓ·͢ɻ
جຊతʹconstͰॻ͍͍ͯΕɺରʹ
let c = 3;
ͱॻ͔Ε͍ͯͨΒʮ͜ͷม c ࠶ೖ͢Δͧʯͱ͍͏એݴͱऔΕ·͢ɺ͜ͷΑ͏ʹ͠
ͯɺ const/letΛ͍͚͍ͯ͘ͱྑ͍Ͱ͠ΐ͏ɻ
Slide 30
Slide 30 text
ม - มએݴ
var ͍ͭ͏ͷ͔ʁ
ͦ͏ࢥͬͨ͋ͳͨɺྑ͍࣭Ͱ͢ɻ
var جຊతʹ͍·ͤΜɻͨͩ͠ҎԼͷಛఆͷ݅Ͱ͏ࣄ͕͋Γ·͢ɻ
- const/let ES2015Ҏ߱Ͱ༗ޮͳͨΊɺͦΕҎલͷϒϥβ/NodeͰಈ࡞͢ΔJavaScriptΛ
ॻ͖͍ͨ࣌
- γϏΞͳੑೳ͕ٻΊΒΕɺconst/letΑΓߴԽ͍ͨ࣌͠
ͳΜͰΘͳ͍ͷ͔ʁ
࣍ͷείʔϓͰղઆ͠·͢ɻ
Slide 31
Slide 31 text
ม - มείʔϓ
JavaScript ͷ const/let ͱ var ͷҰ൪ͷҧ͍͜ͷ `είʔϓ` Ͱ͢ɻ
JavaScript ͷείʔϓجຊతʹ3छྨ͔͋͠Γ·ͤΜɻ
- άϩʔόϧείʔϓ (var/let/const)
- ϩʔΧϧείʔϓ (var/let/const)
- ϒϩοΫείʔϓ (let/const)
άϩʔόϧείʔϓͲ͔͜ΒͰม͕ಡΊΔɺॴҦάϩʔόϧมͱݺΕΔมͷҰ൪͍
Өڹൣғ͕͋ΔείʔϓͰ͢ɻ
ϩʔΧϧείʔϓؔͷதͳΒͲ͔͜ΒͰม͕ಡΊΔؔʹͷΈӨڹ͕͋ΔείʔϓͰ͢ɻ
ϒϩοΫείʔϓ ϒϨʔε `{}` Ͱғ·ΕͨྖҬͰͷΈಡΊΔҰ൪Өڹ͕গͳ͍είʔϓͰ͢ɻ
Slide 32
Slide 32 text
ม - มείʔϓ
var a = 1;
let b = 2;
const c = 3;
͜ΕશͯάϩʔόϧείʔϓͰ͢ɻ
function foo() {
var a = 1;
let b = 2;
const c = 3;
}
͜ΕશͯϩʔΧϧείʔϓͰ͢ɻ
function bar() {
{
var a = 1; //͜Ε͚ͩϩʔΧϧείʔϓ
let b = 2; // let ͱ const ϒϩοΫείʔϓ
const c = 3;
}
console.log(a) // 1, b ͱ c ͔͜͜ΒݟΕͳ͍
}
Slide 33
Slide 33 text
ؔ
ؔॲཧΛ·ͱΊͯ̍ͭͷͷͱͯ͠ఆٛ͢ΔͨΊʹར༻͠·͢ɻJavaScript Ͱؔ
ΦϒδΣΫτͷҰͭͱͯ͠ఆٛ͞Ε͍ͯ·͢ɻ JavaScript ʹ͓͍ͯؔॏཁͳ֓೦Ͱ͢ɻ
ؔΛఆٛ͢ΔࡍͷجຊͱͳΔߏจԼهͷ௨Γɻ
// ؔએݴ
function plus(arg1, arg2) {
return arg1 + arg2
}
// ؔݺͼग़͠
console.log(plus(1, 2)) // 3
Slide 34
Slide 34 text
ؔ
ॲཧΛ·ͱΊͯ̍ͭͷॲཧʹͯ͠ఆٛ͢Δ͜ͱΛؔఆٛɺఆٛ͞ΕͨؔΛݺͼग़͢͜ͱ
Λؔݺग़͠ɺͱݴ͍·͢ɻ
ؔఆٛ͢Δํ๏JavaScript Ͱ2௨Γ͋Γ·͢ɻ
- จʹΑΔఆٛ
function a() {}
- ࣜʹΑΔఆٛ
const a = function() {};
ͲͪΒΛ͏͖͔ଟগ༳Ε·͢ɻؔࣜʹΑΔએݴͷ߹ɺר্͖͕͛ى͜Βͳ͍ͷͰ
constͱΈ߹Θͤͯείʔϓʹด͡ࠐΊ͍ͨ࣌ʹ͍·͢ɻ (Ϋϩʔδϟͷ࣌ͳͲɻ)
ࣜͷ߹ແ໊ؔΛ࡞ͬͯͦ͜ʹม໊ΛΞαΠϯ͢Δࣄ͕ଟ͍Ͱ͢ɻ
Slide 35
Slide 35 text
Ξϩʔؔ
ؔఆٛͷํ๏ίϨ͚ͩͰ͋Γ·ͤΜɻES2015͔ΒΞϩʔؔͱݺΕΔແ໊ؔ
ͷఆٛํ๏͕͋Γ·͢ɻͦͷ໊ͷ௨ΓɺҹͷΑ͏ͳఆٛํ๏Λ͠·͢ɻ
const a = () => {};
Ξϩʔؔͱී௨ͷؔҎԼͷ͕ҟͳΓ·͢ɻ
- `this` ͕Ξϩʔؔ੩తʹܾ·Γɺී௨ͷؔͰಈతʹܾఆ͞ΕΔ
- ̍ͭͷ͔ࣜ͠ͳ͍߹returnΛলུͰ͖Δ
- newͰ͖ͳ͍ɺargumentsΛ࣋ͨͳ͍ɹ
Slide 36
Slide 36 text
Ξϩʔؔ
Q1.
const A = {
foo: () => {
console.log(this);
}
}
const B = {
foo: function() {
console.log(this);
}
}
A.foo() // Կ͕දࣔ͞ΕΔͰ͠ΐ͏͔
B.foo() // Կ͕දࣔ͞ΕΔͰ͠ΐ͏͔
Slide 37
Slide 37 text
Ξϩʔؔ
A1. ਖ਼ղ
A.foo() // thisglobalΦϒδΣΫτ
B.foo() // thisB
Slide 38
Slide 38 text
Ξϩʔؔ
- Ξϩʔؔͷ෦ʹ `this` ͕ଘࡏ͠ͳ͍ɺؔఆٛ࣌ʹ `this` ͕੩తʹܾఆ͞ΕΔɻ
- ௨ৗͷؔͷ߹ `this` ͕ؔݺͼग़࣌͠ʹಈతʹܾఆ͞ΕΔɻ
const B = {
foo: function() {
console.log(this);
}
}
B.foo() // class B
const a = B.foo;
a() // global object
const a = B.foo.bind(B);
Slide 39
Slide 39 text
Ξϩʔؔ
̍ͭͷ͔ࣜ͠ແ͔ͬͨ߹returnΛলུͰ͖Δɻ
const a = [1,2,3,4].filter(x => x % 2 === 0).map(x => x * x) // [4, 16]
Slide 40
Slide 40 text
γϣʔτϋϯυؔ
ϝιουఆٛ͢Δࡍϝιουఆٛ࣌ͷΩʔϓϩύςΟͱ`function`จΛলུͰ͖ΔΑ͏ʹ
ͳΓ·ͨ͠ɻޙͷclassͷهड़Ͱग़͖ͯ·͢ɻ
const A = {
foo() {
console.log('foo')
}
}
͜ΕैདྷͷԼهͷهड़ͱಉ͡Ͱ͢ɻ
const A = {
foo: function(){
console.log('foo')
}
}
Slide 41
Slide 41 text
ଈ࣌ؔ
Α͋͘ΔΠσΟΦϜ: ଈ࣌ؔɺ͔͠͠͏͏͜ͱͳ͍͔ɻ
(function() {
var a = 1;
})();
্ͷؔؔΛఆٛͯ͠ޙʹݺͼग़͢ΠσΟΦϜͰ͢ɻ
એݴͨ͠ޙʹݺͼग़ؔ͢ͱͯ͠ɺଈ࣌ؔͱݺΕ·͢ɻ
͜ΕείʔϓΛϩʔΧϧείʔϓʹด͡ࠐΊ͍ͨ࣌ʹ͏ߏจͰ͕͢ɺvarએݴ͔͠Ͱ͖ͳ͔ͬ
ͨ࣌ͷΠσΟΦϜͰ͢ɻࠓ͍·ͤΜɻΘΓʹϒϩοΫείʔϓΛ͍·͠ΐ͏ɻ
{
const a = 1;
}
ͪ͜Βͷํ͕໌֬Ͱ͢ɻ
Slide 42
Slide 42 text
σʔλܕ
JavaScript ͷσʔλܕେ͖͚͘ΔͱPrimitiveͱObjectͷ2छྨ͕͋Γ·͢ɻPrimitiveܕ
ͷதʹ Number String ͳͲͷجຊతͳܕ͕͋ΓɺObjectͷํʹArrayFunctionΛ
ॳΊͱͯ͠ɺෳࡶͳܕ͕ೖΓ·͢ɻ
- Primitive Type
- Boolean
- String
- Number
- Null
- Undefined
- Symbol
- Object Type
- Array
- Function
- Regexp
Slide 43
Slide 43 text
σʔλܕ - Primitive
جຊతͳܕͰ͋Δ Primitive ܕ String, Boolean ͱ͍ͬͨσʔλܕΛࢦ͍ͯ͠·͢ɻ
- Booleanܕ : ॴҦ true, false ͕ೖΔܕΛࢦ͍ͯ͠·͢ɻ
- Stringܕ: ॴҦ "Node.js" Έ͍ͨͳจࣈྻ͕ೖΔܕΛࢦ͍ͯ͠·͢ɻ
- Nullܕ: ͕ଘࡏ͠ͳ͍͜ͱΛࣔ͢ܕͰ͢ɻ͍ΘΏΔɹnull
- Undefinedܕ: ͕ະఆٛͰ͋Δ͜ͱΛࣔ͢ܕͰ͢ɻ͍ΘΏΔ undefined
- Numberܕ: 123 Έ͍ͨͳ͕ೖΔܕΛ͍ࣔͯ͠·͢ɻ͜͜ͰɺJavaScriptͷNumber
શͯුಈখͰ͢ɻͱখͰ͔Ε͍ͯͳ͍͜ͱʹҙɻ
- Symbolܕ: ҰҙͰෆมͳσʔλܕɺ͋·Γීஈ͏͜ͱແ͍ͱࢥΘΕΔɻ
Slide 44
Slide 44 text
σʔλܕ - Primitive
typeof true;// => "boolean"
typeof 42; // => "number"
typeof "JavaScript"; // => "string"
typeof Symbol("γϯϘϧ");// => "symbol"
typeof undefined; // => "undefined"
typeof null; // => "object"
typeof ["ྻ"]; // => "object"
typeof { "key": "value" }; // => "object"
typeof function() {}; // => "function"
※ typeof null ͕ "object" ͳͷ༷όάͰ͢ɺ೦ͳ͕Β…
Slide 45
Slide 45 text
σʔλܕ - Object
JavaScript ʹ͓͍ͯɺ΄΅શͯͷΠϯελϯεͷܕ `Object` ͱͯ͠ѻΘΕ͍ͯ·͢ɻͲ͏
͍͏͜ͱ͔ͱ͍͏ͱɺ΄΅શͯͷΠϯελϯεͷܕ `Object` ͷ prototype ͔Βܧঝ͞Εͯ
͍·͢ɻ
const o = {}
console.log(o instanceof Object)
const arr = []
console.log(arr instanceof Object)
const fn = function(){}
console.log(fn instanceof Object)
ͯ͢trueͰ͢ɻ
Slide 46
Slide 46 text
σʔλܕ - Object
ʮ΄΅શͯʯͱॻ͖·͕ͨ͠ɺΓํʹΑͬͯObjectͷprototypeܧঝ͔Β֎ΕΔ͜ͱ͕
ՄೳͰ͢(ES2015Ҏ߱)ɻ
Object.create ͱݺΕΔܧঝݩΛ໌ه͢ΔؔΛ͏ͱprototypeܧঝΛ࣮ݱͰ͖·͕͢ɺ
͜ͷ Object.create ʹ null Λͤ Object ͷ prototype͔Β֎ΕͨinstanceΛ࡞Δ͜ͱ͕
ՄೳͰ͢ɻ
var a = Object.create(null)
console.log(a instanceof Object)
Կʹ͏͔ͱ͍͏ͱɺ "hasOwnProperty" "toString" ͱ͍ͬͨΈࠐΈͷϝιου͢Β
ෆཁͷ७ਮͳobjectΛ࡞Γ͍ͨ࣌ʹར༻͠·͢ɻΑ͋͘Δͷ࿈ྻͷΘΓͱ͍͏
ϢʔεέʔεͰ͢Ͷɻ
Slide 47
Slide 47 text
σʔλܕ - Object
JavaScript ͷ String, Number, Boolean ͲΕ࣮ Object ʹͳΓಘ·͢ɻ
͜ͷล͕ຊʹconfusableͰ͕͢ɺࣅͨΑ͏ͳଞͷݴޠʹ͋ΔͷͰ͓͍֮͑ͯͯԼ͞
͍ɻ
string, number, boolean ϦςϥϧͰ "hoge", 1, true ͱॻ͍ͨ࣌primitive ܕͰ͕͢ɺ
Ϋϥε͔ΒnewͰinstanceԽͨ࣌͠ Object ʹͳΓ·͢ɻ
new String("hoge") instanceof Object // true
"hoge" instanceof Object // false
new Number(1) instanceof Object // true
1 instanceof Object // false
new Boolean(false) instanceof Object // true
true instanceof Object // false
Slide 48
Slide 48 text
Ϋϥε
JavaScript ʹ ES2015 ͔Β class ߏจ͕ೖΓ·ͨ͠ɻ
͋͘·Ͱclassߏจͱ͍͑ɺΫϥεͱ͍͏৽͍֓͠೦ʹͳΔΘ͚Ͱͳ͘ɺprototypeϕʔ
εͷؔͰ͢ɻ
class A {
foo() {
console.log("A")
}
}
typeof A // => "function"
ؔͰ͋Δ͕Ώ͑ʹࣜͱͯ͠ೖՄೳͰ͢ɻ
const A = class {}
Slide 49
Slide 49 text
Ϋϥε
ܧঝ͢Δࡍʹ extends ۟Λ͍·͢ɻ
class A extends B {
foo() {
console.log("A")
}
}
const a = new A()
a instanceof A // true
a instanceof B // true
super ۟Λ͏ͱͷΦϒδΣΫτʹΞΫηεͰ͖·͢ɻ
Slide 50
Slide 50 text
Ϋϥε
ϏϧτΠϯΦϒδΣΫτܧঝՄೳͰ͢ɻ
class MyArray extends Array {}
class MyError extends Error {}
class MyNumber extends Number {}
ಛʹErrorͷ֦ுerrorStackΛյͣ͞ʹܧঝͰ͖ΔͨΊศར
Slide 51
Slide 51 text
݅ذ
if, else, switchΛͬͯϓϩάϥϜͷ݅ذΛهड़͢Δ͜ͱ͕ՄೳͰ͢ɻ
if, else, switchશͯ"จ"Ͱ͋Γɺ"ࣜ"Ͱͳ͍ͷͰมએݴೖෆՄೳͰ͢ɻ
const a = true
if (a) {
console.log("passed")
} else {
console.log("not here")
}
const b = "foo"
switch (b) {
case "foo":
console.log("foo is here")
break // ͜͜ͷbreakΛΕΔͱԼͷbar·Ͱߦ͘
case "bar":
console.log("bar is here")
break
}
Slide 52
Slide 52 text
ϧʔϓ
ϧʔϓ܁Γฦ͠Կ͔Λ࣮ߦ͢ΔͨΊͷγϯϓϧͳํ๏Λఏڙ͍ͯ͠Δɻ
JavaScriptͰ͍ΘΏΔɺ for, while, do-while, for..ofͱ͍ͬͨํ๏͕͋Δɻ
for (let i=0; i<100; i++) {
console.log(i)
}
let i = 0
while(i < 100) {
console.log(i)
i++
}
let i = 0
do {
console.log(i)
i++
} while(i<100)
Slide 53
Slide 53 text
ϧʔϓ
ϧʔϓͷதͰ for .. of ϧʔϓಛघͳͷͰ͓֮͑ͯ͘ͱྑ͍Ͱ͢ɻ
Iterable (܁Γฦ͠Մೳ)ͳͷΛ܁Γฦ࣌͢ͷಛผͳforจͰ͢ɻ
for (const a of [1, 2, 3]) {
console.log(a)
}
܁Γฦͨ͠ࡍʹ৽͍͠มΛఆ͍ٛͯ͠ΔͨΊɺ `const a` Ͱ࢝ΊΔ͜ͱ͕ՄೳͰ͢ɻ
Slide 54
Slide 54 text
ྻͷߴ֊ؔ
ArrayͷforEach, filter, map, reduceͱ͍ͬͨؔΛड͚औͬͯ݁ՌΛ࣮ߦ͢Δͷ͕ྻͷத
ͷૢ࡞ͱͯ͠ೖ͍ͬͯ·͢ɻ
[1, 2, 3, 4, 5, 6, 7].filter(x => x % 2 === 1).map(x => x + 1).reduce((acc, val) => acc + val)
// 20
͜ΕΒͷߴ֊ؔඇৗʹΑ͍͘·͢ɻ͓͖֮͑ͯ·͠ΐ͏ɻ
Slide 55
Slide 55 text
͜ͷߨٛͰͬͨ͜ͱ
Slide 56
Slide 56 text
✔
Slide 57
Slide 57 text
JavaScriptͰΫϥΠΞϯτΛ
࡞Δ
Slide 58
Slide 58 text
✔
Slide 59
Slide 59 text
͜Ε͔ΒTODOཧπʔϧͷ
WebΫϥΠΞϯτΛHTML/
CSS/JSͰ࡞ͬͯΒ͍·͢ɻ
Slide 60
Slide 60 text
࠷ऴܗଶ
https://todo-manager-
server.now.sh
Slide 61
Slide 61 text
JavaScript ͰΫϥΠΞϯτΛ࡞
Δ
• Todoͷ֎؍Λ࡞Δ(HTML/CSS)
• Todoʹಈ͖Λ༩͑Δ(JavaScript/DOM)
• ΫϥΠΞϯτͷςετΛॻ͘
Slide 62
Slide 62 text
·ͣڥߏங
Slide 63
Slide 63 text
ڥߏங
$ git clone https://github.com/recruit-
tech/todo-manager.git
$ cd todo-manager
$ npm install
$ npm start
Slide 64
Slide 64 text
HTML/CSS
Slide 65
Slide 65 text
HTML
• ͱΓ͋͑ͣ TODOཧ༻ͷHTMLΛ࡞ͬͯΈ
·͠ΐ͏ɻ
$ cd public
$ vim index.html
Slide 66
Slide 66 text
ͷߏஙͨ͠HTML
Todo Manager
- test
- test
- test
- test
Slide 67
Slide 67 text
CSS
• TODOཧ༻ͷCSSΛ࡞ͬͯΈ·͠ΐ͏ɻ
• ࠷ॳʹϒϥβͰσϑΥϧτͰద༻͞ΕͯΔ
cssΛ֎ͨ͢Ίͷreset.cssΛॻ͖·͢ɻ
• ࣍ʹtodo.cssΛॻ͖·͢ɻ
$ vim public/css/reset.css
$ vim public/css/todo.css
Slide 68
Slide 68 text
ͷߏஙͨ͠CSS
$ git checkout css
$ cat public/css/todo.css
֬ೝ͚ͨ͠Ε https://todo-manager-miiijpronq.now.sh
Slide 69
Slide 69 text
deployͷͨΊʹ
$ npm run deploy
ͰσϓϩΠͰ͖·͢ɻ
͠ϔϏʔʹ͍͍ͨ߹ $ npm install now
-g ͓ͬͯͬͯ͘ͱศརͰ͢ɻ
Slide 70
Slide 70 text
ΈΜͳ࡞্ͬͯ͛ͯΈ·͠ΐ
͏ɻ
Ͱ͖ͨΒ npm run deploy Ͱ
deployͰ͖·͢ɻ
Slide 71
Slide 71 text
͍Α͍Αຊ
Slide 72
Slide 72 text
JavaScript ͰΫϥΠΞϯτΛ
࡞Δɻ
Slide 73
Slide 73 text
JavaScriptͰΫϥΠΞϯτΛ࡞
Δɻ
• Ұ୴ਖ਼ղݟͣʹɻී௨ʹ࡞ͬͯΈ·͠ΐ͏
• ͱ͍ͬͯํ͋ͬͨํ͕ྑ͍ͱࢥ͏ͷ
Ͱํ͚ͩͰɻ
• view ͱ controller ͱ logic ͚·͠ΐ͏ɻ
$ git checkout javascript // ਖ਼ղ
Slide 74
Slide 74 text
JavaScriptͰΫϥΠΞϯτΛ࡞
Δɻ
• HTML͔ΒDOMΛͬͯlogicΛݺͼग़͢Λ
ਖ਼֬ʹControllerͱݴͬͨΓ͢Δɻ
• HTMLΛߏங͢ΔॴViewͱݺͿ͜ͱ͕ଟ
͍ɻ
• Logic७ਮʹॲཧΛද͢ɺݟͨҎ֎ͷ෦
Slide 75
Slide 75 text
JavaScriptͰΫϥΠΞϯτΛ࡞
Δɻ
• ཁݟͨʹؔ͢Δ෦ͱݟͨҎ֎ͷ෦
ʹ͖ͪΜͱ͚Δ͜ͱ͕ॏཁ
• MVCͩͷMVVMͩͷFluxͩͷݴ͏ͷͦͷޙ
• ԿͰ͜ΕΛ͚Δͷ͕ॏཁͳͷ͔ޙͰड़
Δ
Slide 76
Slide 76 text
ͱΓ͋͑ͣͬͯΈΑ͏ɻ
Slide 77
Slide 77 text
ΫϥΠΞϯτΛॻ͘
# public/js ҎԼʹԼهͷεΫϦϓτΛ࡞Δ
controller.js - HTML͔ΒmodelͱviewΛܨ͙ͷ
view.js - දࣔΛ࡞Δͷ
model.js - fetchͯ͠Λऔಘ͢Δͷ
main.js - ΦϒδΣΫτཧɺىͱ࣮ͯ͠ߦ͞ΕΔͷ
ίʔυΛͪΒݟ͠ͳ͕ΒҰॹʹॻ͍͍ͯ͜͏ɻ
Slide 78
Slide 78 text
https://todo-manager-
mqcdoklvtw.now.sh
Slide 79
Slide 79 text
TestΛॻ͘
Slide 80
Slide 80 text
TestΛॻ͘
• ͖ͬ͞ݟͨͱݟͨҎ֎ͷ෦ʹ͚Ζͱ
ݴͬͨͷςετͷͨΊ
• ݟͨͷ෦ςετ͠ʹ͍͘ʢ͞Βʹසൟ
ʹมߋ͕͋Δʣ
• ݟͨͷςετϖΠ͠ͳ͍ࣄ͕ଟ͍ͷͰɺ
ݟͨҎ֎Λςετ͢Δ
Slide 81
Slide 81 text
TestΛॻ͘
• ݟͨҎ֎ɺͭ·Γ model ͷςετͰ͖
Δɻ
• ςετ͠ʹ͍͘ίʔυΛॻ͔ͳ͍Α͏ʹ͢Δɻ
$ git checkout test // ਖ਼ղ
Slide 82
Slide 82 text
TestΛॻ͘
• test Λॻ͘ʹͦͷ··ͰμϝͳͷͰAPI
constantsͷ͕ࠩ͠ସ͑ΒΕΔΑ͏ʹ͢Δඞ
ཁ͕͋Δɻ
• ͜ΕΛ Test Double ͱ͍͏
// globalͷͰࠩ͠ସ͑ΒΕΔΑ͏ʹ͓ͯ͘͠ɻ
const TODO_URL = global.TODO_URL || '/todos';
const fetch = global.fetch;
Slide 83
Slide 83 text
ͱΓ͋͑ͣͬͯΈΑ͏ɻ
Slide 84
Slide 84 text
TestΛॻ͘
# test ϥϯφʔΛೖΕΔ
$ npm install eater --save-dev
# mock ͷ fetch ΛೖΕΔ
$ npm install node-fetch --save-dev
# package.json ͷ scripts.test ͷͱ͜ΖΛҎԼͷΑ͏ʹ͢Δ
```
"test": "eater",
```
# test/client/todo.model.js Λॻ͍ͯதΛॻ͘
Slide 85
Slide 85 text
TestΛॻ͘
# test/client/todo.model.js Λॻ͍ͯதΛॻ͘
const assert = require('assert');
const test = require('eater/runner').test;
const agreedServer = require('agreed-server');
const fetch = require('node-fetch');
test('check todo instance', () => {
global.todo = {};
require('../../public/js/model');
assert(global.todo.model)
});
# npm test
$ npm test
Slide 86
Slide 86 text
͜ͷߨٛͰͬͨ͜ͱ
Slide 87
Slide 87 text
✔
✔
✔
✔
✔
✔
✔
✔
Slide 88
Slide 88 text
✔
Slide 89
Slide 89 text
Կ͔࡞Δͷ͕Ұ൪ʹཱͭ
Slide 90
Slide 90 text
JavaScriptͰαʔόΛ࡞Δ
Slide 91
Slide 91 text
✔
Γ2ͭɺͪΌͬͪΌͱΓ·͠ΐ͏ɻ
Slide 92
Slide 92 text
TodoͰ࡞ͬͨMockͷαʔό
Λຊʹม͑Δ
Slide 93
Slide 93 text
JavaScriptͰαʔόΛ࡞Δ
• express ΛΠϯετʔϧͯ͠αʔόΛ࡞ͬͯ
ΈΔ
• npm install express —save
• express ͰstaticαʔόΛ࡞Δ
• express ͰϦΫΤετΛॲཧ͢Δ
Slide 94
Slide 94 text
expressͱʁ
• Web Application Framework ͷҰͭ
• ॳظͷNode.jsͰҰੈΛ෩ᴆͨ͠
• ࠓͰ͔ͳΓݱͰΘΕͯΔ
Slide 95
Slide 95 text
expressͱʁ
• جຊతʹϧʔλͷػೳͱmiddlewareͷػೳ
• ࣮ϧʔλͷػೳmiddlewareͷػೳͷҰ෦
• పఈͨ͠middlewareϞσϧͱ͍͔ͭ͘ͷEasy
ͳ͕ؔΈ߹Θͬͨ͞ͷ
Slide 96
Slide 96 text
JavaScriptͰαʔόΛ࡞Δ
$ npm install express --save
$ vim app.js
```
'use strict';
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;
app.use(express.static('./public/'));
app.listen(PORT, () => {
console.log(`Listening in ${PORT}`);
});
```
$ node app.js
Slide 97
Slide 97 text
JavaScriptͰαʔόΛ࡞Δ
# APIͷΛฦ͢
$ npm install body-parser --save
```
'use strict';
const express = require('express');
const bodyParser = require('body-parser');
const todoRouter = require('./server/todo-router');
const app = express();
const PORT = process.env.PORT || 3000;
app.use(bodyParser.json());
app.use(express.static('./public/'));
app.use('/todos', todoRouter);
app.listen(PORT, () => {
console.log(`Listening in ${PORT}`);
});
```
Slide 98
Slide 98 text
࠷ऴܗଶ
https://todo-manager-
server.now.sh
Slide 99
Slide 99 text
͜ͷߨٛͰͬͨ͜ͱ
Slide 100
Slide 100 text
✔
✔
✔
Slide 101
Slide 101 text
૯ׅ
Slide 102
Slide 102 text
✔
✔
✔
✔
✔
✔
✔
✔
Slide 103
Slide 103 text
✔
✔
✔
Slide 104
Slide 104 text
͔ͳΓଟ͘ͷͱࠓҰͰ
ॲཧ͖͠Εͳ͍͕ೖͬͨ
ͣɻ
Slide 105
Slide 105 text
͜ͷࢿྉΈΜͳʹΔͷͱɺ
githubͰ͍ͭͰݟΕΔΑ͏
ʹ͓ͯ͘͠ͷͰ֬ೝͯͩ͘͠
͍͞ɻ
Slide 106
Slide 106 text
1
໌ git ճͰ͢ɻ