JavaScript Bootcamp

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

Transcript

1. JavaScript Bootcamp 2017, 11th 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 v7.8.0 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. ΩοΫΦϑʹߦ͔ΕΔํ͸Ωο ΫΦϑʹߦ͖͍ͬͯͯͩ͘͞ɻ
19. JavaScript ࠓੲ෺ޠ • Before JS: 1990 ೥ɺ World Wide Web Λݩ ʹ্࢙ͨ͠ॳͷϒϥ΢β͕Ͱ͖Δ Tim Berners Lee શͯͷGod Father ͪͳΈʹ͜ͷલ νϡʔϦϯά৆Λड৆
20. JavaScript ࠓੲ෺ޠ • Before JS: 1993೥ ถࠃཱεʔύίϯϐϡʔλ ݚڀॴʢ௨শNCSAʣ͔ΒMosaicϒϥ΢β͕ ग़Δ ը૾ͱςΩετ͕Ұॹʹ ग़Δͱ͍͏ըظతͳ ϒϥ΢β
21. JavaScript ࠓੲ෺ޠ • Before JS: 1994೥ Netscape 1.0 released ౰ॳ͸Mozillaͱ͍͏ίʔυ ωʔϜɺʮNetscape ͱॻ͍ ͯMozillaͱಡΉʯͱ΋ݴΘ Εͯͨɻ
22. JavaScript ࠓੲ෺ޠ • ΋ͬͱϒϥ΢βʹಈ͖Λʂʂ ݺΜͩʁʁ
23. JavaScript ࠓੲ෺ޠ • ΋ͬͱϒϥ΢βʹಈ͖Λʂʂ ݺΜͩʁʁ ݺΜͰͳ͍ʂʂʂ
24. JavaScript ࠓੲ෺ޠ • ΍ͬͺΓεΫϦϓτݴޠͩΑͶʔʂ
25. JavaScript ࠓੲ෺ޠ • ୭͔ʔ୭͔ࢯʔʔʂʂʂʂϒϥ΢βʹεΫϦ ϓτݴޠΛ࡞Γ͍ͨ୭͔ʔʔʔʂʂʂʂʂ ݺΜͩʁʁ
26. JavaScript ࠓੲ෺ޠ • 1995: Netscape 2.0 ʹ Script ݴޠϕʔεࡌͤ Δ໨తͰ։ൃ։࢝ SchemeϕʔεͰ͍͍ͷʁ ͍΍ɺɺɺ΋͏গ͠JavaͬΆ͘ɺObject ࢦ޲ͬΆ͘པΉ
27. JavaScript ࠓੲ෺ޠ • ৽εΫϦϓτݴޠ͸ Scheme ͱ Self (Smalltalk༝དྷͷݴޠ)ΛࠞͥͯJavaͷॻ͖ຯ Λਅࣅͨ΋ͷ ໊લԿʹ͠Α͏ɻɻɻ
28. JavaScript ࠓੲ෺ޠ • ৽εΫϦϓτݴޠ͸ Scheme ͱ Self (Smalltalk༝དྷͷݴޠ)ΛࠞͥͯJavaͷॻ͖ຯ Λਅࣅͨ΋ͷ ໊લԿʹ͠Α͏ɻɻɻ
29. JavaScript ࠓੲ෺ޠ • ৽εΫϦϓτݴޠ͸ Scheme ͱ Self (Smalltalk༝དྷͷݴޠ)ΛࠞͥͯJavaͷॻ͖ຯ Λਅࣅͨ΋ͷ Java͔ΒདྷͯΔ͠ɺ Mocha ʹ͠Α͏ɻ
30. JavaScript ࠓੲ෺ޠ • Mocha => LiveScript ΁ɺެࣜͳ໊લ͸ͬ͜ ͪʹܾఆʂʂʂ ΋͏ͪΐͬͱScriptݴޠͬΆ͍ํ͕ྑ͍ ͔ɻ
31. JavaScript ࠓੲ෺ޠ • 1995 9݄: Netscape Navigator 2.0 beta ϦϦ ʔε LiveScriptϦϦʔεͨͧ͠ʔʂʂʂʂ
32. JavaScript ࠓੲ෺ޠ • 1995 12݄: Netscape Navigator 2.0 beta 3 Ϧ Ϧʔε LiveScript ͸ JavaScript ʹվ໊͠·͢ʢओʹϚʔέ ςΟϯά໨తͰɺJavaͷ஌໊౓ར༻ʣ
33. JavaScript ࠓੲ෺ޠ • 1995 12݄: Netscape Navigator 2.0 beta 3 Ϧ Ϧʔε ͪͳΈʹಉ࣌ظʹ ServerSide JavaScript ΋ॳϦϦʔ ε Netscape Enterprise Server ੈքॳͷServer SideͰ΋ಈ͘JavaScript
34. JavaScript ࠓੲ෺ޠ • 1996: Netscape Navigator 2.0 ϦϦʔε!!! ϦϦʔεͨͧ͠ʂʂʂʂʂ
35. ௚ޙ
36. JavaScript ࠓੲ෺ޠ • 1996: Netscape Navigator 2.01 ϦϦʔε!!! ϦϦʔεͨͧ͠ʂʂʂʂʂ Ͱ΋JavaScript ͸σϑΥϧτͰ͸ແޮ
37. JavaScript ࠓੲ෺ޠ • 1996: Netscape Navigator 2.01 ϦϦʔε!!! ϦϦʔεͨͧ͠ʂʂʂʂʂ Ͱ΋JavaScript ͸σϑΥϧτͰ͸ແޮ JavaScript͕ϒϥ΢β಺Ͱಈ͔ͤΔ͜ͱʹ
38. Ұํͦͷࠒ
39. JavaScript ࠓੲ෺ޠ • 1995: Microsoft ͕ Internet Explorer 1.0 ߏ ங Netscape௥ܸͩʂʂʂʂʂ
40. JavaScript ࠓੲ෺ޠ • 1995: IE 3.0 Ͱ JScript Λ࣮૷ Scriptݴޠͬͪ͜΋࡞ͬͨͧʔ
41. ୈҰ࣍ϒϥ΢βઓ૪
42. JavaScript ࠓੲ෺ޠ • Netscape vs IE vs
43. IEଆɿJScript࡞ͬͨͥɺ͜Ε ͔ΒNetscape͓͔͚ͬΔͥ ώϟοϋʔ
44. Netscapeଆɿ ΍͹͍ɺJavaScript͕ಠࣗߏ จͩΒ͚ʹͳΔ
45. MSͷ໠௥Ͱ๷ӴઓΛషΔ Netscape
46. ඪ४Խ΁ W3C Ͱ͸ͳ͘ɺ Ϥʔϩού ͷ ECMA ஂମͰنఆ
47. ͔ͯ͘͠ 1997೥ ECMAScript version 1 ੜ஀
48. 1998 ECMAScript version 2 جຊతʹͪΐͬͱͨ͠fix
49. 1999/12 ECMAScript v3: ਖ਼نදݱɺจࣈྻؔ਺ɺ try- catchߏจɺ਺ࣈϑΥʔϚο τ etc
50. ES v4 2000೥͔Βࡦఆ
51. JavaScript ࠓੲ෺ޠ vs ૒ํશ͘·ͱ·Βͣɾɾɾɾ
52. ES v4 2000೥͔Βࡦఆ => ࢮ๢
53. ES v5 => ES3 ͔Βͷ࠷খݶ ηοτͰ࠶ߏ੒
54. 2009೥: ES v5 => ES3 ͔Βͷ࠷খݶ ηοτͰ࠶ߏ੒ JSON, strict mode, getter/ setter,
55. ES v6 (ίʔυωʔϜ harmony)
56. JavaScript ࠓੲ෺ޠ ΈΜͳͰௐ࿨ΛऔΓ·͠ΐ͏ͱ͍͏ҙຯͰharmony
57. 2015: ECMAScript 6 ൃץ
58. 2015: ECMAScript 6 ൃץ ΫϥεɺϞδϡʔϧɺΠςϨʔλɺ for/ofϧʔϓɺPythonελΠϧͷδΣ ωϨʔλɺΞϩʔؔ਺ɺ2ਐ਺͓Αͼ 8ਐ਺ͷ੔਺ϦςϥϧɺMapɺSetɺ WeekMapɺWeekSetɺϓϩΩγɺς ϯϓϨʔτจࣈྻɺletɺconstɺܕ෇ ͖഑ྻɺσϑΥϧτҾ਺ɺSymbolɺ Promiseɺ෼ׂ୅ೖɺՄม௕Ҿ਺
59. ΊͪΌଟ͍
60. ࠓޙ͸೥ؒͰversionΛ্͛ͯ ͘ɺࠓ೥͸ES2017
61. ಘΒΕΔࣄɿ harmonyΛେ੾ʹ͠·͠ΐ͏
62. ͜ͷߨٛͰ஌ͬͨ͜ͱ
63. ✔
64. ͦΖͦΖΩοΫΦϑ΋ऴΘͬ ͨࠒͩ͠ɺ࣍ߦ͖·͠ΐ͏
65. JavaScriptͰΫϥΠΞϯτΛ ࡞Δ
66. ✔
67. ͜Ε͔ΒTODO؅ཧπʔϧͷ WebΫϥΠΞϯτΛHTML/ CSS/JSͰ࡞ͬͯ΋Β͍·͢ɻ
68. ࠷ऴܗଶ https://todo-manager- server.now.sh
69. JavaScript ͰΫϥΠΞϯτΛ࡞ Δ • Todoͷ֎؍Λ࡞Δ(HTML/CSS) • Todoʹಈ͖Λ༩͑Δ(JavaScript/DOM) • ΫϥΠΞϯτͷςετΛॻ͘
70. ·ͣ͸؀ڥߏங
71. ؀ڥߏங $ git clone https://github.com/recruit- tech/todo-manager.git $ cd todo-manager $ npm install $ npm start
72. HTML/CSS
73. HTML • ͱΓ͋͑ͣ TODO؅ཧ༻ͷHTMLΛ࡞ͬͯΈ ·͠ΐ͏ɻ $ cd public $ vim index.html
74. ๻ͷߏஙͨ͠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>
75. CSS • TODO؅ཧ༻ͷCSSΛ࡞ͬͯΈ·͠ΐ͏ɻ • ࠷ॳʹϒϥ΢βͰσϑΥϧτͰద༻͞ΕͯΔ cssΛ֎ͨ͢Ίͷreset.cssΛॻ͖·͢ɻ • ࣍ʹtodo.cssΛॻ͖·͢ɻ $ vim public/css/reset.css $ vim public/css/todo.css
76. ๻ͷߏஙͨ͠CSS $ git checkout css $ cat public/css/todo.css ֬ೝ͚ͨ͠Ε͹ https://todo-manager-miiijpronq.now.sh
77. deployͷͨΊʹ $ npm run deploy ͰσϓϩΠͰ͖·͢ɻ ΋͠΋ϔϏʔʹ࢖͍͍ͨ৔߹͸ $ npm install now -g ͬͯ΍͓ͬͯ͘ͱศརͰ͢ɻ
78. ΈΜͳ࡞্ͬͯ͛ͯΈ·͠ΐ ͏ɻ Ͱ͖ͨΒ npm run deploy Ͱ deployͰ͖·͢ɻ
79. ͍Α͍Αຊ୊
80. JavaScript ͰΫϥΠΞϯτΛ ࡞Δɻ
81. JavaScriptͰΫϥΠΞϯτΛ࡞ Δɻ • Ұ୴ਖ਼ղ͸ݟͣʹɻී௨ʹ࡞ͬͯΈ·͠ΐ͏ • ͱ͸͍ͬͯ΋ํ਑͸͋ͬͨํ͕ྑ͍ͱࢥ͏ͷ Ͱํ਑͚ͩͰ΋ɻ • view ͱ controller ͱ logic ͸෼͚·͠ΐ͏ɻ $ git checkout javascript // ਖ਼ղ
82. JavaScriptͰΫϥΠΞϯτΛ࡞ Δɻ • HTML͔ΒDOMΛ࢖ͬͯlogicΛݺͼग़͢૚Λ ਖ਼֬ʹ͸ControllerͱݴͬͨΓ͢Δɻ • HTMLΛߏங͢Δॴ͸ViewͱݺͿ͜ͱ͕ଟ ͍ɻ • Logic͸७ਮʹॲཧΛද͢ɺݟͨ໨Ҏ֎ͷ෦෼
83. JavaScriptͰΫϥΠΞϯτΛ࡞ Δɻ • ཁ͸ݟͨ໨ʹؔ͢Δ෦෼ͱݟͨ໨Ҏ֎ͷ෦෼ ʹ͖ͪΜͱ෼͚Δ͜ͱ͕ॏཁ • MVCͩͷMVVMͩͷFluxͩͷݴ͏ͷ͸ͦͷޙ • ԿͰ͜ΕΛ෼͚Δͷ͕ॏཁͳͷ͔͸ޙͰड़΂ Δ
84. ͱΓ͋͑ͣ΍ͬͯΈΑ͏ɻ
85. ΫϥΠΞϯτΛॻ͘ # public/js ҎԼʹԼهͷεΫϦϓτΛ࡞Δ controller.js - HTML͔ΒmodelͱviewΛܨ͙΋ͷ view.js - දࣔΛ࡞Δ΋ͷ model.js - fetchͯ͠஋Λऔಘ͢Δ΋ͷ main.js - ΦϒδΣΫτ؅ཧɺى఺ͱ࣮ͯ͠ߦ͞ΕΔ΋ͷ ίʔυΛͪΒݟ͠ͳ͕ΒҰॹʹॻ͍͍ͯ͜͏ɻ
86. https://todo-manager- mqcdoklvtw.now.sh
87. TestΛॻ͘
88. TestΛॻ͘ • ͖ͬ͞ݟͨ໨ͱݟͨ໨Ҏ֎ͷ෦෼ʹ෼͚Ζͱ ݴͬͨͷ͸ςετͷͨΊ • ݟͨ໨ͷ෦෼͸ςετ͠ʹ͍͘ʢ͞Βʹසൟ ʹมߋ͕͋Δʣ • ݟͨ໨ͷςετ͸ϖΠ͠ͳ͍ࣄ͕ଟ͍ͷͰɺ ݟͨ໨Ҏ֎Λςετ͢Δ
89. TestΛॻ͘ • ݟͨ໨Ҏ֎ɺͭ·Γ model ͷ૚͸ςετͰ͖ Δɻ • ςετ͠ʹ͍͘ίʔυΛॻ͔ͳ͍Α͏ʹ͢Δɻ $ git checkout test // ਖ਼ղ
90. TestΛॻ͘ • test Λॻ͘ʹ͸ͦͷ··Ͱ͸μϝͳͷͰAPI΍ constantsͷ஋͕ࠩ͠ସ͑ΒΕΔΑ͏ʹ͢Δඞ ཁ͕͋Δɻ • ͜ΕΛ Test Double ͱ͍͏ // globalͷ஋Ͱࠩ͠ସ͑ΒΕΔΑ͏ʹ͓ͯ͘͠ɻ const TODO_URL = global.TODO_URL || '/todos'; const fetch = global.fetch;
91. ͱΓ͋͑ͣ΍ͬͯΈΑ͏ɻ
92. 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 Λॻ͍ͯத਎Λॻ͘
93. 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
94. ͜ͷߨٛͰ஌ͬͨ͜ͱ
95. ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
96. ✔
97. Կ͔࡞Δͷ͕Ұ൪໾ʹཱͭ
98. JavaScriptͰαʔόΛ࡞Δ
99. ✔ ࢒Γ2ͭɺͪΌͬͪΌͱ΍Γ·͠ΐ͏ɻ
100. TodoͰ࡞ͬͨMockͷαʔό Λຊ෺ʹม͑Δ
101. JavaScriptͰαʔόΛ࡞Δ • express ΛΠϯετʔϧͯ͠αʔόΛ࡞ͬͯ ΈΔ • npm install express —save • express ͰstaticαʔόΛ࡞Δ • express ͰϦΫΤετΛॲཧ͢Δ
102. expressͱ͸ʁ • Web Application Framework ͷҰͭ • ॳظͷNode.jsͰҰੈΛ෩ᴆͨ͠ • ࠓͰ΋͔ͳΓݱ໾Ͱ࢖ΘΕͯΔ
103. expressͱ͸ʁ • جຊతʹ͸ϧʔλͷػೳͱmiddlewareͷػೳ • ࣮͸ϧʔλͷػೳ͸middlewareͷػೳͷҰ෦ • పఈͨ͠middlewareϞσϧͱ͍͔ͭ͘ͷEasy ͳؔ਺͕૊Έ߹Θͬͨ͞΋ͷ
104. 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
105. 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}`); }); ```
106. ࠷ऴܗଶ https://todo-manager- server.now.sh
107. ͜ͷߨٛͰ஌ͬͨ͜ͱ
108. ✔ ✔ ✔
109. ૯ׅ
110. ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
111. ✔ ✔ ✔
112. ͔ͳΓଟ͘ͷ࿩ͱࠓ೔Ұ೔Ͱ ͸ॲཧ͖͠Εͳ͍࿩͕ೖͬͨ ͸ͣɻ
113. ͜ͷࢿྉ͸ΈΜͳʹ഑Δͷͱɺ githubͰ͍ͭͰ΋ݟΕΔΑ͏ ʹ͓ͯ͘͠ͷͰ֬ೝͯͩ͘͠ ͍͞ɻ
114. 1೔໨׬ ໌೔͸ git ճͰ͢ɻ