多様化するWeb業界で活躍できる エンジニアを育てた際に心がけたこと

Transcript

1. ʮଟ༷Խ͢ΔWebۀքͰ׆༂Ͱ͖Δ 
 ΤϯδχΞΛҭͯͨࡍʹ৺͕͚ͨ͜ͱʯ 2022.12.15 ΈΜͳͷPythonษڧձ #88 Yuichi Nakazawa
2. ͓·͑ͩΕΑ • ௕໺ݝੜ·Ε௕໺ҭͪ • גࣜձࣾ೔ຊγεςϜٕݚ ॴଐ • औక໾ Web։ൃ෦໳σΟϨΫλʔ 
 Πϯϑϥ͓͡͞Μͱࣾ಺ݚम • झຯɿ֨ಆήʔϜɺےτϨ • @y_nakazawa1220 
 Yuichi Nakazawa 2
3. גࣜձࣾ೔ຊγεςϜٕݚ • Web։ൃ͕ओྗ(SESͱडୗ) • 2014೥͔ΒPython/DjangoͰ੒௕ • ࠷ۙ͸ϑϩϯτΤϯυܥ͕ଟ͍ • PyCon JPɺDjangoCongressΛ 
 த৺ʹεϐʔΧʔΛഉग़ • اۀ޲͚ͷPythonߨ࠲ • GEEKLAB.NAGANOͷӡӦ Japan System Laboratory 3
4. GEEKLAB.NAGANO • 2014೥ΑΓΤϯδχΞ޲͚ͷ 
 ίϛϡχςΟεϖʔεͱͯ͠։ઃ • ΈΜͳͷPythonษڧձ # ௕໺ • աڈ̏౓ͷ։࠵ • τʔΫɺ΋͘΋͘ձɺεϓϦϯτ • ʢͦΖͦΖ࠶։͍ͨ͠ʣ
5. ೥຤ʹͳΔͱಈ͘உ 5
7. 🎂birthdayۦಈ։ൃ 7
8. ̌ˋɹ 8
9. ೥຤ʹͳΔͱಈ͘உ 9
10. ೥຤ʹςΫχΧϧͳ࿩Λ͠ͳ͍உ 10
11. ʮଟ༷Խ͢ΔWebۀքͰ׆༂Ͱ͖Δ 
 ΤϯδχΞΛҭͯͨࡍʹ৺͕͚ͨ͜ͱ
12. ࿩Λ͢Δ͜ͱ • ௚ۙͷҊ͔݅ΒΈͨWeb։ൃͷಈ޲ʹ͍ͭͯ • ଟ༷Խ͢ΔWebۀքͰͷΤϯδχΞҭ੒ 12
13. ۙ೥ͷฐࣾ • ৽ܕίϩφͷӨڹͰӦۀػձ͕ݮΓɺ৽نͷ੥ෛҊ͕݅ݮͬͯ͠·ͬͨ • طଘͷ͓٬༷ͷSESൺ཰͕͕͋ͬͨɻ߹Θ͓ͤͯҰਓ͞·ϓϩδΣΫτ΋૿Ճ • ൓໘ɺཁ݅ఆ͔ٛΒߦ͏Ҋ݅΍ࣾ಺ϝϯόʔͰ։ൃ͢Δػձ͕ݮͬͯ͠·ͬͨ • ࠓ೥౓͸ɺ্ྲྀ޻ఔ͔Βͷ։ൃΛ૿΍ͨ͢Ίʹ੥ෛൺ཰Λ૿΍͍ͯ͠Δ • SESͷ৔߹΋νʔϜ୯ҐͰͷड͚ೖΕΛ͓ئ͍͍ͯ͠Δ • ͓Ұਓ͞·ϓϩδΣΫτͷվળ 13
14. ओʹฐࣾͰѻٕͬͨज़ 2014ʙ2022 • Python • Django/DRF • Flask • Pyramid • Ruby on Rails • PHP • Larvel/Yii 14 • HTML • CSS • JavaScript • TypeScript • jQuery • Angular • React • ReactNative • Vue.js • Java • Obj-C • Swift • Kotlin • Flutter • nginx • uWSGI • gunicorn • Apache • EC2 • RDS • S3 • Lambda • API Gateway • Dynamo • Firebase
15. ѻٕͬͨज़ͱΤϯδχΞ਺ 2014ʙ2022 15
16. ѻٕͬͨज़ͱΤϯδχΞ਺ 2014ʙ2022 16
17. ؾ͍ͮͨ͜ͱ • Ҏલ͸εϚϗΞϓϦͷόοΫΤϯυ͕த৺͕ͩͬͨɺϑϩϯτΤϯυ΋ؚΊͨ 
 WebΞϓϦέʔγϣϯ։ൃ͕૿͖͍͑ͯͯΔ • όοΫΤϯυͷΈͷҊ͕݅ݮ͍ͬͯΔ܏޲ • ϑϩϯτΤϯυҊ݅(JavaScript)͕૿͍͑ͯΔ • Vue/React/Angular • jQuey͸ɺอकܥͷҊ݅ͷΈ • TypeScript͕ඞਢ • IaaS͔ΒPaaSʢFirebaseʣ/FaaSʢLambda etc..ʣ 17
18. Ҋ݅ͷ܏޲ ੥ෛ։ൃͷ৔߹ • ิॿۚΛ࢖ͬͨ͜ͿΓͷҊ͕݅૿͖͍͑ͯͯΔ • ஍ݩͷ੡଄ۀ͔ΒͷҾ͖߹͍΋͍͔ͭ͘ • ݸਓࣄۀओʢඇΤϯδχΞʣͷํ΍ɺଞۀछ͔Βͷ͓੠͕͚͕૿͍͑ͯΔ • ΋΍ͬͱͨ͠࢓༷ͷ΋ͷ • ͳΜͱͳ͘ωΠςΟϒΞϓϦ࡞Γ͍ͨ 
 -> ΍Γ͍ͨ͜ͱ͕΅΍͚͕ͪͳͷͰɺԿΛ΍Γ͍͔ͨΛҰॹʹ੔ཧɹ • VRళฮͷΑ͏ͳ΋ͷΛ࡞Γ͍ͨ 
 -> ECαΠτ+ίʔϙϨʔταΠτͰམͪண͘ • Πχγϟϧίετ͸͋Δఔ౓ग़ͤΔ͕ɺϥϯχϯάίετ͸཈͍͑ͨ • ʢࢀߟʣʮPythonΛ࢖ͬͯސ٬͔Βײँ͞ΕΔ࢓ࣄΛ͢ΔͨΊʹ৺͕͚ͨ͜ͱʯʢhttps://bit.ly/3hcUgEZʣ 18
19. ͲͷΑ͏ͳٕज़ͰରԠ͔ͨ͠ 19
20. Question 
 Web։ൃ͞Ε͍ͯΔํ 20
21. Question 
 ٕज़બఆͲͷΑ͏ʹ͍ͯ͠·͔͢ʁ 21
22. ༷ʑͳબఆج४ • ରԠͰ͖ΔΤϯδχΞ͕ଟ͍΋ͷ • ೲ඼ޙʹ͓٬༷͕ରԠͰ͖Δ΋ͷ • طଘͷΞʔΩςΫνϟͱಉ͡΋ͷ • ࠓޙͷҊ݅ʹͭͳ͕Γͦ͏ͳ΋ͷ • ྲྀߦΓͷ΋ͷ • ੜ࢈ੑ͕͕͋ΔͱࢥΘΕΔ΋ͷ • ։ൃίετ͕҆Ձͳ΋ͷ • ָͦ͠͏ͳ΋ͷ • etc… 22
23. ͦ΋ͦ΋WebΞϓϦέʔγϣϯͱ͸ • ΠϯλʔωοτͰެ։͞Ε͍ͯͯϒϥ΢βͰ࣮ߦՄೳͳΞϓϦέʔγϣϯ 
 • ཚ๫ʹݴ͑͹ɺૢ࡞ੑɺσβΠϯɺϨεϙϯεͰҰఆͷύϑΥʔϚϯε͕ 
 ಘΒΕΔ͜ͱ͕ग़དྷΕ͹͓٬͞·ͱͯ͠͸ɺʮԿͰ࡞Ζ͏͕Ұॹʯ 
 • ͓٬༷ࢹ఺Ͱ͸ɺྑ͍΋ͷΛ҆ՁͰ௕͘໘౗Λݟͯ͘ΕΔ΋ͷ͕خ͍͠ 23
24. ༷ʑͳબఆج४ • ରԠͰ͖ΔΤϯδχΞ͕ଟ͍΋ͷ • ೲ඼ޙʹ͓٬༷͕ରԠͰ͖Δ΋ͷ • طଘͷΞʔΩςΫνϟͱಉ͡΋ͷ • ࠓޙͷҊ݅ʹͭͳ͕Γͦ͏ͳ΋ͷ • ྲྀߦΓͷ΋ͷ • ੜ࢈ੑ͕͕͋ΔͱࢥΘΕΔ΋ͷ • ։ൃίετ͕҆Ձͳ΋ͷ • ָͦ͠͏ͳ΋ͷ • etc… 24
25. ௚ۙͷٕज़બఆ • ϑϩϯτΤϯυ͸React&TypescriptʢҎԼTSʣ • TSΛ࢖͏Ҋ͕݅૿Ճ܏޲ͩͬͨͨΊ • Next.js͸࢖༻͠ͳ͔ͬͨ • όοΫΤϯυ͕PaaS or FaaSͷ৔߹͸ɺTSͰશରԠ • طଘγεςϜ͔ΒͷҠߦҊ݅ʹ͸Python/Django + EC2+RDSͷమ൘ߏ੒ • ECαΠτతͳ΋ͷ͸EC2Ͱͳ͘ɺLightsailΛఏҊͯ͠௿ίετͰ࣮ݱ 25
26. ଟ༷Խ 26
27. ΤϯδχΞҭ੒ 27
28. ͍ͭ͘΋ͷ՝୊ 28
29. ਺೥લ·Ͱ͸ɾɾ • Python/Django+αΛJSLελϯμʔυͱ͍ͯͨ͠ • Python/DjangoͰҊ͕݅·ͱ·͍ͬͯͨͷͰɺֶश΋͠΍͔ͬͨ͢ • ͦͷଞͷٕज़ཁૉ͸ɺࣗൃతͳٕज़शಘʹґଘͯ͠͠·͍ͬͯͨ • ମܥతͳΤϯδχΞڭҭͷϓϥϯ΋ແ͔ͬͨ 29
30. ༷ʑͳߏஙํ๏͕͋Δ ௚ۙͷ࣮੷ • frontend(React/TS) + backend(Python/DRF+EC2/RDS) 
 • frontend(React/TS) + backend(TS + Lambda/AppSync/DynamoDB etc…) 
 • Native App(Flutter) + backend(Python/DRF+lightsail) 30
31. Python/Django͚ͩͰ͸ରԠͰ͖ͳ͍ • ΋ͱ΋ͱόοΫΤϯυͷҊ͕݅ଟ͔ͬͨ͜ͱ΋͋ΓϑϩϯτपΓ͕ऑΈͰ͸ ͋ͬͨ • Firebase΍αʔόʔϨεΛ࢖༻ͯ͠PoCΛ։ൃ͍ͨ͠ཁ๬΋૿͖͑ͯͯ 
 όοΫΤϯυΛ͕ͬͭΓ։ൃ͢Δػձ΋ݮ͖͍ͬͯͯΔ • ϑϩϯτΤϯυ։ൃͷൺॏ͕ߴ·͍ͬͯΔ 31
32. ϑϩϯτΤϯυ͸ಓͷΓ͕௕͍ • JS͸ॳ৺ऀ޲͚Ͱ͸ͳ͍ͱࢥ͏ɾɾ • TSΛ஌ΔͨΊʹJSΛ஌Δඞཁ͕͋Δ • React/Vue/angularΛ஌ΔͨΊʹ΋JS/TS͕ඞཁ • ॳ৺ऀ͕React + TS / Vue + TSͱ͍͏εΩϧηοτ͕ٻΊΒΕΔҊ݅ͷ৔߹ 
 Ք͛Δྗ͕਎ʹͭ͘·Ͱʹ࣌ؒΛཁ͢Δ 32
33. ΠϯϑϥΛ৮ΕΔػձ͕গͳ͍ • ੥ෛݮʹΑΓ࣮ફͰ৮ΕΔػձ͕গͳ͍ɻߏங͢Δػձ͕͍ͪҊ݅͋ͨΓ̎ճఔ౓ 
 ʢεςʔδϯά/ຊ൪؀ڥʣ • ΞϓϦέʔγϣϯ։ൃʹਓһऔΒΕ͕ͪͳͷͰΠϯϑϥ͓͡͞Μ͕·ͱΊͯ΍Γ͕ͪ 
 • ӡ༻࣌ʹൃੜͨ͠ো֐ରԠ͕࣌Ұ൪ಘΔ΋ͷ͕ଟ͍͕݁ہɺΠϯϑϥ͓͡͞Μʹ 
 ஝ੵ͞ΕΔ • PaaS/FaaSͷ࣮੷͕গͳ͍ͷແ೉ͳIaaSΛఏҊ͕ͪ͠ͳͷ͔΋ 33
34. ٕज़తͳ՝୊Ҏ֎ʹ΋ • ͦ΋ͦ΋ΤϯδχΞ͕଍Γͳ͍ɾɾ • PL/PMΛग़དྷΔΤϯδχΞͷෆ଍ • ग़དྷͳ͍ͱ͍͏ΑΓػձ͕গͳ͍ • ίετʹ͍ͭͯߟ͑Δػձ΋গͳ͍ • ཁ݅ఆ͔ٛΒೖΕΔΤϯδχΞͷෆ଍ • ΋΍ͬͱͨ͠ཁ݅Λܗʹ͢Δϓϩηε • গͳ͍৘ใ͔Βฉ͖ग़͢ώΞϦϯάྗ • ۀ຿ܥγεςϜத৺ͩͬͨࠒͷํ্͕ྲྀ޻ఔʹৄ͍͠ਓ͕ଟ͔ͬͨ 34
35. ՝୊͸ͨ͘͞Μɾɾ • ϑϩϯτΤϯυɺΠϯϑϥΤϯδχΞͷڧԽ • ΤϯδχΞͷ࠾༻ڧԽ • PL/PMͷෆ଍ • ཁ݅Λฉ͖औΔྗɺώΞϦϯάྗ • Ϛωδϝϯτ 35
36. ՝୊ղܾͷͨΊʹ 36
37. ϑϩϯτΤϯυྗͷڧԽ • ༗ࢤʹΑͬͯࣾ಺ษڧձ͕೔ʑ։࠵͞ΕΔΑ͏ʹͳͬͨ • 1೔15෼ • αόΠόϧTypescriptʢhttps://typescriptbook.jp/ʣ • React Docsʢbit.ly/3PuyxF1ʣ • type-challenges (bit.ly/3Yjqb73) 37
38. όοΫΤϯυྗͷڧԽ • FirebaseϋϯζΦϯ • FirebaseΛ࢖༻͍ͯͨ͠ϝϯόʔ͕த৺ͱͳͬͯ • ࣮੷࡞ΓͷͨΊʹϋϯζΦϯޙʹࣾ಺γεςϜͷϦϓϨʔεத • IaaSͰͷߏங࣌ʹΠϯϑϥ͓͡͞Μ͕ϖΞϓϩతʹαϙʔτ • ߏங͢Δॱং͸ࢦࣔΛग़ͯ͠ɺجຊखΛಈ͔ͯ͠΋Β͏ • ࣌ʹ͸࠲ֶ΋ަ͑ͳ͕ΒɺखॱॻΛͳͧΔ͚ͩͷߏங͸ආ͚ͨ 38
39. ΤϯδχΞ࠾༻ͷڧԽ 39 • Ҏલ͸ɺܦݧऀͷத్࠾༻Λத৺ʹߦ͖ͬͯͨ • ͜͜࠷ۙɺଞۀछ͔ΒͷԠื͕૿͍͑ͯΔ • ܦݧ͕ແͯ͘΋ɺεΫʔϧͰֶΜͰ͍ͨΓɺҙཉ͕͋Γͦ͏ͳਓ͸࠾༻ͯ͠ 
 ҭͯΔํ޲ʹ΋ࢹ఺Λม͑ͯΈͨ • ࠷ॳ͸Webͷ࢓૊ΈΛཧղͯ͠΋Β͏ͨΊʹPython/Django • ֓Ͷ3ϲ݄Ͱجຊతͳ͜ͱΛ਎ʹண͚ͯ΋Β͏͜ͱΛ໨ඪ • ௚ۙͷୡ੒཰͸100% • ߹Θͤͯ3ϲ݄Ҏ಺ʹPythonΤϯδχΞೝఆͷऔಘΛ໨ࢦͯ͠΋Β͏ • ࣄલֶशʢUdemy/PyQ/࠲ֶɹϨϕϧʹԠͯ͡ʣ
40. ϓϩδΣΫτʢOJTʣ࣌ͷ޻෉ • ΍͍ͬͯΔ͜ͱɺ෼͔Βͳ͍͜ͱΛݴޠԽͯ͠΋Β͏ • ʮ෼ใʯʹͭͿ΍͘ • ਎ʹͳΔҊ݅Λ΍ͬͯ΋Β͏ɻ೉қ౓͸௿ͯ͘΋ઌʹܨ͕Βͳ͍΋ͷ͸ 
 Ҋ݅ʹ͸ΞαΠϯ͠ͳ͍ • ͓٬༷ͱͷϛʔςΟϯάʹࢀՃͯ͠΋Β͏ʢ࢓༷ௐ੔ɻ༧ࢉௐ੔ͷ৔ʹ΋ʣ 40
41. Ҋ݅ͷࣄྫ • طଘͷWebΞϓϦέʔγϣϯͷωΠςΟϒΞϓϦΛ࡞Γ͍ͨ • طଘͷ࢓૊Έ΁REST APIΛ૊ΈࠐΊ͹ऴΘΔ • ΞʔΩςΫνϟ͕CGIͷPHPɾɾ • ςϯϓϨΛ࡞ͬͯ͋͛ͯɺͦΕΛϕʔεʹ։ൃ͢Ε͹࠷খݶͷίετͰରԠͯ͠རӹ཰ ΋ߴͦ͏ɾɾ • ͔͠͠ɾɾ • ࠓޙɺฐࣾͰͲ͜·ͰอकͰ͖Δͷ͔ɾɾ • ৽ਓͷΤϯδχΞͷͨΊʹͳΔͷ͔ɾɾ 41
42. ࠷ॳͷҊ͔݅ͩΒͦ͜ 42
43. ੒ޭମݧΛͯ͠ཉ͍͠ 43
44. ΍ͬͨ͜ͱ • ͓٬༷ʹઆ໌ͯ͠ɺ։ൃඅͷҰ෦ΛฐࣾͰ࣋ͪग़ͯ͠TS/React + Python/DRF ͰϦϓϨʔεͤͯ͞΋Βͬͨ • ൺֱతখ͞Ίͳ࢓༷ͩͬͨͷͰɺϦόʔεΤϯδχΞϦϯάग़དྷͨ • UI/UX͕γϯϓϧͳ΋ͷͩͬͨͷͰɺϦονͳ΋ͷʹมߋ͢Δͱ͍͏͜ͱͰ ͝ཧղΛ௖͍ͨ • ࣾ಺తʹ΋࣍ͷҊ͕݅ݟ͍͑ͯͨͷͰɺ಺෦ௐ੔΋͠΍͔ͬͨ͢ 44
45. ΍ͬͨ݁Ռ • React/TSͷجຊతͳྲྀΕΛशಘग़དྷͨ • ఆྔతͳධՁ͸ग़དྷ͍ͯͳ͍ɾɾ • ͓٬༷ͱ௚઀࢓༷ͷௐ੔Λ͢Δ৔ʹ΋ཱͪձΘͤΔ͜ͱ͕ग़དྷͨ • ཪෲͰௐ੔ͷ೉͠͞΋௧ײ͍ͯͨ͠ͱࢥ͏ɾɾ • ࢲ͕React/TSʹ׳Ε͍ͯͳ͔ͬͨͷͰɺ಺৺೔ʑυΩυΩͰ͸͋ͬͨ 45
46. ·ͱΊ • Webۀք͸೔ਐ݄าͳͷͰɺͲͷٕज़Λ༏ઌ͢΂͖͔൑அ͸೉͍͠ • TypeScript͸ඞਢͷ܏޲ͳͷͰֶΜͰ͓͍ͯଛ͸ͳ͍ • WebͷجຊతͳྲྀΕΛཧղ͢ΔͨΊʹɺͳΜΒ͔ͷWebϑϨʔϜϫʔΫʹ৮Εͯ 
 ͓͘ͷ͕ۙಓɻฐࣾͷ৔߹͸ɺDjangoɻ 
 • ະܦݧऀͷํ͸Մೳੑͷմ • ग़དྷΔ࢓ࣄΛ༩͑ΔͷͰ͸ͳ͘ग़དྷΔΑ͏ʹͳΔͨΊͷ࢓ࣄΛௐ੔͢Δ • ΍Γߕ൹ͷ͋Δ࢓ࣄΛఏڙͯ͠૬ஊ͠΍͍͢؀ڥΛ࡞Δ͜ͱ͕େࣄ 46
47. Thanks to Stapyʂʂ 47
48. ΤϯδχΞઈࢍืूத 48 https://bit.ly/3lYrqY7