JavaScript Bootcamp 2018

2018年4～5月開催「ブートキャンプ特別講座」の資料になります。

Transcript

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