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

by Yuichi Nakazawa

Slide 1

Slide 1 text

ʮଟ༷Խ͢ΔWebۀքͰ׆༂Ͱ͖Δ   ΤϯδχΞΛҭͯͨࡍʹ৺͕͚ͨ͜ͱʯ 2022.12.15 ΈΜͳͷPythonษڧձ #88 Yuichi Nakazawa

Slide 2

Slide 2 text

͓·͑ͩΕΑ • ௕໺ݝੜ·Ε௕໺ҭͪ • גࣜձࣾ೔ຊγεςϜٕݚ ॴଐ • औక໾ Web։ൃ෦໳σΟϨΫλʔ   Πϯϑϥ͓͡͞Μͱࣾ಺ݚम • झຯɿ֨ಆήʔϜɺےτϨ • @y_nakazawa1220   Yuichi Nakazawa 2

Slide 3

Slide 3 text

גࣜձࣾ೔ຊγεςϜٕݚ • Web։ൃ͕ओྗ(SESͱडୗ) • 2014೥͔ΒPython/DjangoͰ੒௕ • ࠷ۙ͸ϑϩϯτΤϯυܥ͕ଟ͍ • PyCon JPɺDjangoCongressΛ   த৺ʹεϐʔΧʔΛഉग़ • اۀ޲͚ͷPythonߨ࠲ • GEEKLAB.NAGANOͷӡӦ Japan System Laboratory 3

Slide 4

Slide 4 text

GEEKLAB.NAGANO • 2014೥ΑΓΤϯδχΞ޲͚ͷ   ίϛϡχςΟεϖʔεͱͯ͠։ઃ • ΈΜͳͷPythonษڧձ # ௕໺ • աڈ̏౓ͷ։࠵ • τʔΫɺ΋͘΋͘ձɺεϓϦϯτ • ʢͦΖͦΖ࠶։͍ͨ͠ʣ

Slide 5

Slide 5 text

೥຤ʹͳΔͱಈ͘உ 5

Slide 6

Slide 6 text

Slide 7

Slide 7 text

🎂birthdayۦಈ։ൃ 7

Slide 8

Slide 8 text

̌ˋɹ 8

Slide 9

Slide 9 text

೥຤ʹͳΔͱಈ͘உ 9

Slide 10

Slide 10 text

೥຤ʹςΫχΧϧͳ࿩Λ͠ͳ͍உ 10

Slide 11

Slide 11 text

ʮଟ༷Խ͢ΔWebۀքͰ׆༂Ͱ͖Δ   ΤϯδχΞΛҭͯͨࡍʹ৺͕͚ͨ͜ͱ

Slide 12

Slide 12 text

࿩Λ͢Δ͜ͱ • ௚ۙͷҊ͔݅ΒΈͨWeb։ൃͷಈ޲ʹ͍ͭͯ • ଟ༷Խ͢ΔWebۀքͰͷΤϯδχΞҭ੒ 12

Slide 13

Slide 13 text

ۙ೥ͷฐࣾ • ৽ܕίϩφͷӨڹͰӦۀػձ͕ݮΓɺ৽نͷ੥ෛҊ͕݅ݮͬͯ͠·ͬͨ • طଘͷ͓٬༷ͷSESൺ཰͕͕͋ͬͨɻ߹Θ͓ͤͯҰਓ͞·ϓϩδΣΫτ΋૿Ճ • ൓໘ɺཁ݅ఆ͔ٛΒߦ͏Ҋ݅΍ࣾ಺ϝϯόʔͰ։ൃ͢Δػձ͕ݮͬͯ͠·ͬͨ • ࠓ೥౓͸ɺ্ྲྀ޻ఔ͔Βͷ։ൃΛ૿΍ͨ͢Ίʹ੥ෛൺ཰Λ૿΍͍ͯ͠Δ • SESͷ৔߹΋νʔϜ୯ҐͰͷड͚ೖΕΛ͓ئ͍͍ͯ͠Δ • ͓Ұਓ͞·ϓϩδΣΫτͷվળ 13

Slide 14

Slide 14 text

ओʹฐࣾͰѻٕͬͨज़ 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

Slide 15

Slide 15 text

ѻٕͬͨज़ͱΤϯδχΞ਺ 2014ʙ2022 15

Slide 16

Slide 16 text

ѻٕͬͨज़ͱΤϯδχΞ਺ 2014ʙ2022 16

Slide 17

Slide 17 text

ؾ͍ͮͨ͜ͱ • Ҏલ͸εϚϗΞϓϦͷόοΫΤϯυ͕த৺͕ͩͬͨɺϑϩϯτΤϯυ΋ؚΊͨ   WebΞϓϦέʔγϣϯ։ൃ͕૿͖͍͑ͯͯΔ • όοΫΤϯυͷΈͷҊ͕݅ݮ͍ͬͯΔ܏޲ • ϑϩϯτΤϯυҊ݅(JavaScript)͕૿͍͑ͯΔ • Vue/React/Angular • jQuey͸ɺอकܥͷҊ݅ͷΈ • TypeScript͕ඞਢ • IaaS͔ΒPaaSʢFirebaseʣ/FaaSʢLambda etc..ʣ 17

Slide 18

Slide 18 text

Ҋ݅ͷ܏޲ ੥ෛ։ൃͷ৔߹ • ิॿۚΛ࢖ͬͨ͜ͿΓͷҊ͕݅૿͖͍͑ͯͯΔ • ஍ݩͷ੡଄ۀ͔ΒͷҾ͖߹͍΋͍͔ͭ͘ • ݸਓࣄۀओʢඇΤϯδχΞʣͷํ΍ɺଞۀछ͔Βͷ͓੠͕͚͕૿͍͑ͯΔ • ΋΍ͬͱͨ͠࢓༷ͷ΋ͷ • ͳΜͱͳ͘ωΠςΟϒΞϓϦ࡞Γ͍ͨ   -> ΍Γ͍ͨ͜ͱ͕΅΍͚͕ͪͳͷͰɺԿΛ΍Γ͍͔ͨΛҰॹʹ੔ཧɹ • VRళฮͷΑ͏ͳ΋ͷΛ࡞Γ͍ͨ   -> ECαΠτ+ίʔϙϨʔταΠτͰམͪண͘ • Πχγϟϧίετ͸͋Δఔ౓ग़ͤΔ͕ɺϥϯχϯάίετ͸཈͍͑ͨ • ʢࢀߟʣʮPythonΛ࢖ͬͯސ٬͔Βײँ͞ΕΔ࢓ࣄΛ͢ΔͨΊʹ৺͕͚ͨ͜ͱʯʢhttps://bit.ly/3hcUgEZʣ 18

Slide 19

Slide 19 text

ͲͷΑ͏ͳٕज़ͰରԠ͔ͨ͠ 19

Slide 20

Slide 20 text

Question   Web։ൃ͞Ε͍ͯΔํ 20

Slide 21

Slide 21 text

Question   ٕज़બఆͲͷΑ͏ʹ͍ͯ͠·͔͢ʁ 21

Slide 22

Slide 22 text

༷ʑͳબఆج४ • ରԠͰ͖ΔΤϯδχΞ͕ଟ͍΋ͷ • ೲ඼ޙʹ͓٬༷͕ରԠͰ͖Δ΋ͷ • طଘͷΞʔΩςΫνϟͱಉ͡΋ͷ • ࠓޙͷҊ݅ʹͭͳ͕Γͦ͏ͳ΋ͷ • ྲྀߦΓͷ΋ͷ • ੜ࢈ੑ͕͕͋ΔͱࢥΘΕΔ΋ͷ • ։ൃίετ͕҆Ձͳ΋ͷ • ָͦ͠͏ͳ΋ͷ • etc… 22

Slide 23

Slide 23 text

ͦ΋ͦ΋WebΞϓϦέʔγϣϯͱ͸ • ΠϯλʔωοτͰެ։͞Ε͍ͯͯϒϥ΢βͰ࣮ߦՄೳͳΞϓϦέʔγϣϯ   • ཚ๫ʹݴ͑͹ɺૢ࡞ੑɺσβΠϯɺϨεϙϯεͰҰఆͷύϑΥʔϚϯε͕   ಘΒΕΔ͜ͱ͕ग़དྷΕ͹͓٬͞·ͱͯ͠͸ɺʮԿͰ࡞Ζ͏͕Ұॹʯ   • ͓٬༷ࢹ఺Ͱ͸ɺྑ͍΋ͷΛ҆ՁͰ௕͘໘౗Λݟͯ͘ΕΔ΋ͷ͕خ͍͠ 23

Slide 24

Slide 24 text

༷ʑͳબఆج४ • ରԠͰ͖ΔΤϯδχΞ͕ଟ͍΋ͷ • ೲ඼ޙʹ͓٬༷͕ରԠͰ͖Δ΋ͷ • طଘͷΞʔΩςΫνϟͱಉ͡΋ͷ • ࠓޙͷҊ݅ʹͭͳ͕Γͦ͏ͳ΋ͷ • ྲྀߦΓͷ΋ͷ • ੜ࢈ੑ͕͕͋ΔͱࢥΘΕΔ΋ͷ • ։ൃίετ͕҆Ձͳ΋ͷ • ָͦ͠͏ͳ΋ͷ • etc… 24

Slide 25

Slide 25 text

௚ۙͷٕज़બఆ • ϑϩϯτΤϯυ͸React&TypescriptʢҎԼTSʣ • TSΛ࢖͏Ҋ͕݅૿Ճ܏޲ͩͬͨͨΊ • Next.js͸࢖༻͠ͳ͔ͬͨ • όοΫΤϯυ͕PaaS or FaaSͷ৔߹͸ɺTSͰશରԠ • طଘγεςϜ͔ΒͷҠߦҊ݅ʹ͸Python/Django + EC2+RDSͷమ൘ߏ੒ • ECαΠτతͳ΋ͷ͸EC2Ͱͳ͘ɺLightsailΛఏҊͯ͠௿ίετͰ࣮ݱ 25

Slide 26

Slide 26 text

ଟ༷Խ 26

Slide 27

Slide 27 text

ΤϯδχΞҭ੒ 27

Slide 28

Slide 28 text

͍ͭ͘΋ͷ՝୊ 28

Slide 29

Slide 29 text

਺೥લ·Ͱ͸ɾɾ • Python/Django+αΛJSLελϯμʔυͱ͍ͯͨ͠ • Python/DjangoͰҊ͕݅·ͱ·͍ͬͯͨͷͰɺֶश΋͠΍͔ͬͨ͢ • ͦͷଞͷٕज़ཁૉ͸ɺࣗൃతͳٕज़शಘʹґଘͯ͠͠·͍ͬͯͨ • ମܥతͳΤϯδχΞڭҭͷϓϥϯ΋ແ͔ͬͨ 29

Slide 30

Slide 30 text

༷ʑͳߏஙํ๏͕͋Δ ௚ۙͷ࣮੷ • 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

Slide 31

Slide 31 text

Python/Django͚ͩͰ͸ରԠͰ͖ͳ͍ • ΋ͱ΋ͱόοΫΤϯυͷҊ͕݅ଟ͔ͬͨ͜ͱ΋͋ΓϑϩϯτपΓ͕ऑΈͰ͸ ͋ͬͨ • Firebase΍αʔόʔϨεΛ࢖༻ͯ͠PoCΛ։ൃ͍ͨ͠ཁ๬΋૿͖͑ͯͯ   όοΫΤϯυΛ͕ͬͭΓ։ൃ͢Δػձ΋ݮ͖͍ͬͯͯΔ • ϑϩϯτΤϯυ։ൃͷൺॏ͕ߴ·͍ͬͯΔ 31

Slide 32

Slide 32 text

ϑϩϯτΤϯυ͸ಓͷΓ͕௕͍ • JS͸ॳ৺ऀ޲͚Ͱ͸ͳ͍ͱࢥ͏ɾɾ • TSΛ஌ΔͨΊʹJSΛ஌Δඞཁ͕͋Δ • React/Vue/angularΛ஌ΔͨΊʹ΋JS/TS͕ඞཁ • ॳ৺ऀ͕React + TS / Vue + TSͱ͍͏εΩϧηοτ͕ٻΊΒΕΔҊ݅ͷ৔߹   Ք͛Δྗ͕਎ʹͭ͘·Ͱʹ࣌ؒΛཁ͢Δ 32

Slide 33

Slide 33 text

ΠϯϑϥΛ৮ΕΔػձ͕গͳ͍ • ੥ෛݮʹΑΓ࣮ફͰ৮ΕΔػձ͕গͳ͍ɻߏங͢Δػձ͕͍ͪҊ݅͋ͨΓ̎ճఔ౓   ʢεςʔδϯά/ຊ൪؀ڥʣ • ΞϓϦέʔγϣϯ։ൃʹਓһऔΒΕ͕ͪͳͷͰΠϯϑϥ͓͡͞Μ͕·ͱΊͯ΍Γ͕ͪ   • ӡ༻࣌ʹൃੜͨ͠ো֐ରԠ͕࣌Ұ൪ಘΔ΋ͷ͕ଟ͍͕݁ہɺΠϯϑϥ͓͡͞Μʹ   ஝ੵ͞ΕΔ • PaaS/FaaSͷ࣮੷͕গͳ͍ͷແ೉ͳIaaSΛఏҊ͕ͪ͠ͳͷ͔΋ 33

Slide 34

Slide 34 text

ٕज़తͳ՝୊Ҏ֎ʹ΋ • ͦ΋ͦ΋ΤϯδχΞ͕଍Γͳ͍ɾɾ • PL/PMΛग़དྷΔΤϯδχΞͷෆ଍ • ग़དྷͳ͍ͱ͍͏ΑΓػձ͕গͳ͍ • ίετʹ͍ͭͯߟ͑Δػձ΋গͳ͍ • ཁ݅ఆ͔ٛΒೖΕΔΤϯδχΞͷෆ଍ • ΋΍ͬͱͨ͠ཁ݅Λܗʹ͢Δϓϩηε • গͳ͍৘ใ͔Βฉ͖ग़͢ώΞϦϯάྗ • ۀ຿ܥγεςϜத৺ͩͬͨࠒͷํ্͕ྲྀ޻ఔʹৄ͍͠ਓ͕ଟ͔ͬͨ 34

Slide 35

Slide 35 text

՝୊͸ͨ͘͞Μɾɾ • ϑϩϯτΤϯυɺΠϯϑϥΤϯδχΞͷڧԽ • ΤϯδχΞͷ࠾༻ڧԽ • PL/PMͷෆ଍ • ཁ݅Λฉ͖औΔྗɺώΞϦϯάྗ • Ϛωδϝϯτ 35

Slide 36

Slide 36 text

՝୊ղܾͷͨΊʹ 36

Slide 37

Slide 37 text

ϑϩϯτΤϯυྗͷڧԽ • ༗ࢤʹΑͬͯࣾ಺ษڧձ͕೔ʑ։࠵͞ΕΔΑ͏ʹͳͬͨ • 1೔15෼ • αόΠόϧTypescriptʢhttps://typescriptbook.jp/ʣ • React Docsʢbit.ly/3PuyxF1ʣ • type-challenges (bit.ly/3Yjqb73) 37

Slide 38

Slide 38 text

όοΫΤϯυྗͷڧԽ • FirebaseϋϯζΦϯ • FirebaseΛ࢖༻͍ͯͨ͠ϝϯόʔ͕த৺ͱͳͬͯ • ࣮੷࡞ΓͷͨΊʹϋϯζΦϯޙʹࣾ಺γεςϜͷϦϓϨʔεத • IaaSͰͷߏங࣌ʹΠϯϑϥ͓͡͞Μ͕ϖΞϓϩతʹαϙʔτ • ߏங͢Δॱং͸ࢦࣔΛग़ͯ͠ɺجຊखΛಈ͔ͯ͠΋Β͏ • ࣌ʹ͸࠲ֶ΋ަ͑ͳ͕ΒɺखॱॻΛͳͧΔ͚ͩͷߏங͸ආ͚ͨ 38

Slide 39

Slide 39 text

ΤϯδχΞ࠾༻ͷڧԽ 39 • Ҏલ͸ɺܦݧऀͷத్࠾༻Λத৺ʹߦ͖ͬͯͨ • ͜͜࠷ۙɺଞۀछ͔ΒͷԠื͕૿͍͑ͯΔ • ܦݧ͕ແͯ͘΋ɺεΫʔϧͰֶΜͰ͍ͨΓɺҙཉ͕͋Γͦ͏ͳਓ͸࠾༻ͯ͠   ҭͯΔํ޲ʹ΋ࢹ఺Λม͑ͯΈͨ • ࠷ॳ͸Webͷ࢓૊ΈΛཧղͯ͠΋Β͏ͨΊʹPython/Django • ֓Ͷ3ϲ݄Ͱجຊతͳ͜ͱΛ਎ʹண͚ͯ΋Β͏͜ͱΛ໨ඪ • ௚ۙͷୡ੒཰͸100% • ߹Θͤͯ3ϲ݄Ҏ಺ʹPythonΤϯδχΞೝఆͷऔಘΛ໨ࢦͯ͠΋Β͏ • ࣄલֶशʢUdemy/PyQ/࠲ֶɹϨϕϧʹԠͯ͡ʣ

Slide 40

Slide 40 text

ϓϩδΣΫτʢOJTʣ࣌ͷ޻෉ • ΍͍ͬͯΔ͜ͱɺ෼͔Βͳ͍͜ͱΛݴޠԽͯ͠΋Β͏ • ʮ෼ใʯʹͭͿ΍͘ • ਎ʹͳΔҊ݅Λ΍ͬͯ΋Β͏ɻ೉қ౓͸௿ͯ͘΋ઌʹܨ͕Βͳ͍΋ͷ͸   Ҋ݅ʹ͸ΞαΠϯ͠ͳ͍ • ͓٬༷ͱͷϛʔςΟϯάʹࢀՃͯ͠΋Β͏ʢ࢓༷ௐ੔ɻ༧ࢉௐ੔ͷ৔ʹ΋ʣ 40

Slide 41

Slide 41 text

Ҋ݅ͷࣄྫ • طଘͷWebΞϓϦέʔγϣϯͷωΠςΟϒΞϓϦΛ࡞Γ͍ͨ • طଘͷ࢓૊Έ΁REST APIΛ૊ΈࠐΊ͹ऴΘΔ • ΞʔΩςΫνϟ͕CGIͷPHPɾɾ • ςϯϓϨΛ࡞ͬͯ͋͛ͯɺͦΕΛϕʔεʹ։ൃ͢Ε͹࠷খݶͷίετͰରԠͯ͠རӹ཰ ΋ߴͦ͏ɾɾ • ͔͠͠ɾɾ • ࠓޙɺฐࣾͰͲ͜·ͰอकͰ͖Δͷ͔ɾɾ • ৽ਓͷΤϯδχΞͷͨΊʹͳΔͷ͔ɾɾ 41

Slide 42

Slide 42 text

࠷ॳͷҊ͔݅ͩΒͦ͜ 42

Slide 43

Slide 43 text

੒ޭମݧΛͯ͠ཉ͍͠ 43

Slide 44

Slide 44 text

΍ͬͨ͜ͱ • ͓٬༷ʹઆ໌ͯ͠ɺ։ൃඅͷҰ෦ΛฐࣾͰ࣋ͪग़ͯ͠TS/React + Python/DRF ͰϦϓϨʔεͤͯ͞΋Βͬͨ • ൺֱతখ͞Ίͳ࢓༷ͩͬͨͷͰɺϦόʔεΤϯδχΞϦϯάग़དྷͨ • UI/UX͕γϯϓϧͳ΋ͷͩͬͨͷͰɺϦονͳ΋ͷʹมߋ͢Δͱ͍͏͜ͱͰ ͝ཧղΛ௖͍ͨ • ࣾ಺తʹ΋࣍ͷҊ͕݅ݟ͍͑ͯͨͷͰɺ಺෦ௐ੔΋͠΍͔ͬͨ͢ 44

Slide 45

Slide 45 text

΍ͬͨ݁Ռ • React/TSͷجຊతͳྲྀΕΛशಘग़དྷͨ • ఆྔతͳධՁ͸ग़དྷ͍ͯͳ͍ɾɾ • ͓٬༷ͱ௚઀࢓༷ͷௐ੔Λ͢Δ৔ʹ΋ཱͪձΘͤΔ͜ͱ͕ग़དྷͨ • ཪෲͰௐ੔ͷ೉͠͞΋௧ײ͍ͯͨ͠ͱࢥ͏ɾɾ • ࢲ͕React/TSʹ׳Ε͍ͯͳ͔ͬͨͷͰɺ಺৺೔ʑυΩυΩͰ͸͋ͬͨ 45

Slide 46

Slide 46 text

·ͱΊ • Webۀք͸೔ਐ݄าͳͷͰɺͲͷٕज़Λ༏ઌ͢΂͖͔൑அ͸೉͍͠ • TypeScript͸ඞਢͷ܏޲ͳͷͰֶΜͰ͓͍ͯଛ͸ͳ͍ • WebͷجຊతͳྲྀΕΛཧղ͢ΔͨΊʹɺͳΜΒ͔ͷWebϑϨʔϜϫʔΫʹ৮Εͯ   ͓͘ͷ͕ۙಓɻฐࣾͷ৔߹͸ɺDjangoɻ   • ະܦݧऀͷํ͸Մೳੑͷմ • ग़དྷΔ࢓ࣄΛ༩͑ΔͷͰ͸ͳ͘ग़དྷΔΑ͏ʹͳΔͨΊͷ࢓ࣄΛௐ੔͢Δ • ΍Γߕ൹ͷ͋Δ࢓ࣄΛఏڙͯ͠૬ஊ͠΍͍͢؀ڥΛ࡞Δ͜ͱ͕େࣄ 46