持続可能なプロダクト開発のために - フロントエンドと新陳代謝の話 / Frontend premised on making changes

2018/11/25 に HTML5 Conference 2018 ( #html5j ) にて行ったセッションのスライドです。

Transcript

1. ࣋ଓՄೳͳϓϩμΫτ։ൃͷͨΊʹ - ϑϩϯτΤϯυͱ৽௠୅ँͷ࿩ - 2018.11.25 #html5j HANATANI Takuma(@potato4d)
2. HANATANI Takuma (@potato4d) • Freelance as "ElevenBack" (2017.07 ~) / LINE Corp (2018.12 ~) • Contribute to • Vue.js JP Docs (Core maintainer) / Nuxt.js JP Docs (maintainer) • Web Application Developer • — Vue.js, Nuxt.js, Node.js(with TypeScript), Serverless • — User Interface, Micro Interaction, Product Development
3. https://github.com/potato4d
4. Agenda 1. ͜ͷηογϣϯͰ࿩͢͜ͱɾΰʔϧʹ͍ͭͯ 2. όοΫΤϯυΛަ͑ͨݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ 3. ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊ 4. ϑϩϯτΤϯυΛʮ࡞Γม͑ͯΏ͘ʯํ޲ੑͰͷ՝୊ղܾ 5. ϑϩϯτΤϯυΛʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ 6. Real world ΁
5. Agenda 1. ͜ͷηογϣϯͰ࿩͢͜ͱɾΰʔϧʹ͍ͭͯ 2. όοΫΤϯυΛަ͑ͨݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ 3. ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊ 4. ϑϩϯτΤϯυΛʮ࡞Γม͑ͯΏ͘ʯํ޲ੑͰͷ՝୊ղܾ 5. ϑϩϯτΤϯυΛʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ 6. Real world ΁
6. ͜ͷεϥΠυͷର৅ऀʹ͍ͭͯ
7. ͜ͷεϥΠυͷର৅ऀʹ͍ͭͯ • Frontend Engineer (touch Backend) • ϑϩϯτΤϯυ։ൃΛத৺ͱ͍ͯ͠ͳ͕Β΋ɺଞͷྖҬͷ։ൃख๏ ͳͲͷ؍ଌػձ͕͋Γɺݱঢ়ͷϑϩϯτΤϯυ։ൃͷվળΛ୳ͬͯ ͍Δ͔ͨ • Backend Engineer (touch Frontend) • όοΫΤϯυྖҬͷ։ൃ͔ΒϑϩϯτΤϯυ΋ؔΘΔΑ͏ʹͳͬ ͕ͨɺಛ༗ࣄ৘ʹ͍͓ͭͯ೰Έͷ͔ͨ ͳͲʹ࣮ͷ͋ΔηογϣϯͱͳΔ͜ͱΛ૝ఆ
8. ࠓճͷ՝୊ײ
9. ”ݱ୅త” ͳϑϩϯτΤϯυʹ͓͍ͯ ”ݱ࣮త” ͳϝϯςφϏϦςΟͷ୲อ ∠ ࠓճͷ՝୊ײ
10. ”ཧ૝” ͷϑϩϯτΤϯυ࿦ͱ ”ݱ࣮త” ͳϑϩϯτΤϯυ؀ڥ ∠ ࠓճͷ՝୊ײ
11. ࠓ೔ͷΰʔϧʹ͍ͭͯ
12. ”ߴ଎ͳϓϩμΫτ։ൃ” ͱ ”҆ఆͨ͠Ձ஋ͷఏڙ” ͷͨΊ ∠ ࠓ೔ͷΰʔϧʹ͍ͭͯ
13. ”ߴ଎ͳ։ൃ؀ڥͷத” Ͱ ”ੜ࢈ੑΛ׆͔͠ଓ͚Δ” ͨΊ ∠ ࠓ೔ͷΰʔϧʹ͍ͭͯ
14. ✘ ޷ΈͷΞʔΩςΫνϟ࿦ ✘ ಛఆٕज़ಛԽ΁ͷͩ͜ΘΓ ✘ ։ൃऀΒཱ͖ͪ͠ډৼΔ෣͍ ը૾͸ Adobe Stock Ͱ "religion" Ͱௐ΂ͨ΋ͷ ∠ ࠓ೔ͷΰʔϧʹ͍ͭͯ
15. Agenda 1. ͜ͷηογϣϯͰ࿩͢͜ͱɾΰʔϧʹ͍ͭͯ 2. όοΫΤϯυΛަ͑ͨݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ 3. ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊ 4. ϑϩϯτΤϯυΛʮ࡞Γม͑ͯΏ͘ʯํ޲ੑͰͷ՝୊ղܾ 5. ϑϩϯτΤϯυΛʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ 6. Real world ΁
16. ݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ Monolithic Web Application
17. ݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ Monolithic Web Application
18. ݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ Single Page Application API-based Backend External Services
19. SPA ͷΩʔϫʔυ • React, Vue, Angular ͳͲͷϑϨʔϜϫʔΫʹΑΔ ”ίϯϙʔωϯ τࢦ޲” ͷߏஙγεςϜ͕ଓ͍͓ͯΓɺಛʹมԽ͸ͳ͍ • ʮঢ়ଶʯͷऔΓѻ͍Λ࠷େͷςʔϚͱ͓ͯ͠Γɺ࠷େ੎ྗͱͯ͠ Flux / Redux ͷ Ұۃूதͷঢ়ଶ؅ཧ ͕ϝδϟʔͱͳ͍ͬͯΔ • ”Single source of truth” ͔Βੜ·Εͨղऍ • ”Domain” ͱ "Presentation" ྆ํͷ ”Flux / Redux ΁ͷґଘ” ∠ ݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ
20. API-based Backend ͷΩʔϫʔυ • ݹయతͳ MVC ཁૉ΋݈ࡏ (ੈքతʹ͸ Laravel ͕ Ruby on Rails ͷγΣΞΛ্ճΔͳͲɺ Framework ͷมԽ͸͋Δ) • େن໛ίʔυϕʔεͷӡ༻ʹ͓͍ͯ͸ Clean Architecture ͳͲ ͷઃܭࢥ૝΋औΓೖΕΒΕ͓ͯΓɺίʔυΛ௕ੜ͖ͤ͞Δ͜ͱ΁ ͷؔ৺͕ڧ͍ • ҰํͰ Micro Services ͷΑ͏ͳɺখ͞ͳαʔϏεͷू߹ʹΑͬ ͯҰͭͷେ͖ͳ՝୊Λ੒͢Α͏ͳ։ൃ΋੎ྗΛ૿େͤͭͭ͋͞Δ ∠ ݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ
21. ͦͷଞͷ৽ͨͳྲྀΕ • 2ͭͷ Serverless ͷීٴ • ߴՄ༻ੑͰεέʔϥϒϧͳόοΫΤϯυ։ൃͷੈք (FaaS) • Web / Mobile App ʹର͢ΔόοΫΤϯυఏڙͷੈք (BaaS) • ͳͲ͕͋Δ͕ɺࠓ೔͸ SKIP ∠ ݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ
22. Agenda 1. ͜ͷηογϣϯͰ࿩͢͜ͱɾΰʔϧʹ͍ͭͯ 2. όοΫΤϯυΛަ͑ͨݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ 3. ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊ 4. ϑϩϯτΤϯυΛʮ࡞Γม͑ͯΏ͘ʯํ޲ੑͰͷ՝୊ղܾ 5. ϑϩϯτΤϯυΛʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ 6. Real world ΁
23. SPA ͷΩʔϫʔυ(͓͞Β͍) • React, Vue, Angular ͳͲͷϑϨʔϜϫʔΫʹΑΔ ”ίϯϙʔωϯ τࢦ޲” ͷߏஙγεςϜ͕ଓ͍͓ͯΓɺಛʹมԽ͸ͳ͍ • ʮঢ়ଶʯͷऔΓѻ͍Λ࠷େͷςʔϚͱ͓ͯ͠Γɺ࠷େ੎ྗͱͯ͠ Flux / Redux ͷ Ұۃूதͷঢ়ଶ؅ཧ ͕ϝδϟʔͱͳ͍ͬͯΔ • ”Single source of truth” ͔Βੜ·Εͨղऍ • ”Domain” ͱ "Presentation" ྆ํͷ ”Flux / Redux ΁ͷґଘ” ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊
24. ϑϩϯτΤϯυʹ͓͚Δ՝୊ͷ αϯϓϧέʔε ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊
25. 1. σβΠϯ&όοΫΤϯυͷ มߋ௥ै଱ੑͷܽམ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊
26. σβΠϯ & όοΫΤϯυཁҼ • ཁ๬Aʮ͜Ε·Ͱ͸Ϣʔβʔ͕঎඼Λ͍͚࣋ͬͯͨΕͲɺϢʔ βʔ͕ΧʔτΛ࣋ͪɺͦͷதʹ঎඼Λ࣋ͭߏ଄ʹ API Λม͑ͨɻ ௥ैͯ͠ཉ͍͠ɻʯ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊ ∠ σβΠϯɾόοΫΤϯυͷมߋ௥ै଱ੑͷܽམ
27. σβΠϯ & όοΫΤϯυཁҼ • ཁ๬Aʮ͜Ε·Ͱ͸Ϣʔβʔ͕঎඼Λ͍͚࣋ͬͯͨΕͲɺϢʔ βʔ͕ΧʔτΛ࣋ͪɺͦͷதʹ঎඼Λ࣋ͭߏ଄ʹ API Λม͑ͨɻ ௥ैͯ͠ཉ͍͠ɻʯ • ཁ๬BʮσβΠϯ؍఺Ͱ͸ UI ্͸͜Ε·Ͱ௨ΓϢʔβʔ͕঎඼ͱ ͯ͠΋͍ͬͯͯɺҰཡͰऔΓѻ͑ΔΑ͏ͳͭ͘Γʹͯ͠ཉ͍͠ʯ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊ ∠ σβΠϯɾόοΫΤϯυͷมߋ௥ै଱ੑͷܽམ
28. σβΠϯ & όοΫΤϯυཁҼ • ཁ๬Aʮ͜Ε·Ͱ͸Ϣʔβʔ͕঎඼Λ͍͚࣋ͬͯͨΕͲɺϢʔ βʔ͕ΧʔτΛ࣋ͪɺͦͷதʹ঎඼Λ࣋ͭߏ଄ʹ API Λม͑ͨɻ ௥ैͯ͠ཉ͍͠ɻʯ • ཁ๬BʮσβΠϯ؍఺Ͱ͸ UI ্͸͜Ε·Ͱ௨ΓϢʔβʔ͕঎඼ͱ ͯ͠΋͍ͬͯͯɺҰཡͰऔΓѻ͑ΔΑ͏ͳͭ͘Γʹͯ͠ཉ͍͠ʯ ▶ɹ ద੾ʹϞδϡʔϧ෼ׂ͞ΕͨΦϒδΣΫτಉ࢜Λແཧ໼ཧͭͳ͗߹Θ
 ɹɹͤͯϑϩϯτΤϯυ༻ͷҰͭͷσʔλΛ࡞Γ্͛Δɺطଘͷ֓೦ͷҠ
 ɹɹߦͰ௕େͳ޻਺૿ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊ ∠ σβΠϯɾόοΫΤϯυͷมߋ௥ै଱ੑͷܽམ
29. 2. ઓज़తϥΠϒϥϦͷ௠෗Խ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊
30. ઓज़తϥΠϒϥϦͷ௠෗Խ • ϥΠϒϥϦͷখ͞ͳ୯ҐͰ΋τϨϯυ͸มΘΔ • ܰྔͳ࣌ࠁૢ࡞Ͱਓؾͷ day.js ͸ 1 ೥લʹ͸ͳ͔ͬͨ • HTTP ϦΫΤετ΋ superagent ͸ফ͑ɺ axios ΋Ͳ͏ͳΔ͔ • ։ൃͷͨΊͷϕʔε؀ڥͩͬͯΑΓྑ͍΋ͷ͕Ͱͯ͘Δ • ܰྔόϯυϥͷ Parcel ΋ 1 ೥લʹ͸ͳ͔ͬͨ • Vue.js ͷڧྗͳ։ൃࢧԉπʔϧͷ Vue CLI v3 ΋ 1 ೥લʹ͸ͳ ͔ͬͨ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊
31. ઓज़తϥΠϒϥϦͷ௠෗Խ • ಛʹҠߦ͠ͳͯ͘΋ੜ͖͍ͯ͘͜ͱ͸Ͱ͖Δ • ͱ͸͍͑ϝδϟʔಀ͢ͱޙ͕௧͍ɻಛʹෳࡶͳϥΠϒϥϦ͕υ Ωϡϝϯτ͕ࡶͳ৔߹ʹ௧͍ • ઓུʹӨڹ͢ΔϥΠϒϥϦ͚ͩ͸ؾ߹Λ࣋ͬͯ΍͍ͬͯΔ৔߹͕ େ൒ • ೾ཚΛݺΜͩ React v16 Ͱ͢Β·ͩ 1 ೥લ • ࣮͸ Vue.js 1.0 ͸·ͩ 3 ೥લɺ Vue.js 2.0 Ͱ 2 ೥લɻ Vue.js 2.5 ͰҰ೥લ……ɻ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊
32. 3. ϓϩάϥϚͱΞʔΩςΫτ ͦΕͧΕͷྖҬͷ༥߹ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊
33. ϓϩάϥϚʹΑΔΞʔΩςΫνϟഁյ 1. ઃܭɾ։ൃऀʹΑͬͯ࡞ΒΕ͍ͯͨ React / Redux ʹΑΔ Single State Tree ͷϏδωεϩδοΫ 2. ػೳվमͷͨΊʹ͸ৗʹ Redux ʹ࡞ΒΕͨ Architecture ͷ্Ͱ ߦ͏ඞཁ͕͋Δ 3. ͱ͋Δ࣮૷ऀʹΑͬͯ࡞ΒΕͨςελϏϦςΟΛܽ͘ίʔυ΍ີ ݁߹ͳ௥ՃϩδοΫͷ࣮૷͕ग़ݱ 4. ▶ ͙͢ʹϚʔδ͢ΔΘ͚ʹ΋͍͔ͣɺͱ͸͍͑ೖΕͳ͍৔߹ͷ։ ൃ޻਺ͷϩε΋௧͘ɺ௧ΈΛ൐͏τϨʔυΦϑΛڧཁ͞ΕΔ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊ ∠ ϓϩάϥϚͱΞʔΩςΫτͦΕͧΕͷྖҬͷ༥߹
34. ૯ͯ͡ͷ՝୊ͱͯ͠ͷ ҋͷຐज़ʹର͢Δ๷Ӵज़ ͷෆ଍ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊
35. ٻΊΒΕΔೋͭͷબ୒ࢶ 1. ʮ࡞Γม͑΍͍͢ʯઃܭΛ૊Έ্͛Δ • ʹष͍΋ͷʹϑλΛͰ͖Δઃܭʹͯ͠͠·͏ • ࡞ۀऀʹΑΔ௿඼࣭ͳίʔυͷൃੜͳͲʹڧ͍ • ϓϩάϥϚͱͯ͠͸ʮෛ͚ʯͱײ͡ΔՕॴ΋ग़ͯ͘Δ 2. ʮ࡞Γม͑Δඞཁ͕ۃྗͳ͍ʯઃܭΛ૊Έ্͛Δ • ٕज़ਫ४͕ߴ͍͔ͭ҆ఆͨ͠࡞ۀ؀ڥͷ্Ͱ͸ϫʔΫ͢Δ • ಥવͷ֎తཁҼͳͲ΁ͷ଱ੑ͕͋·Γڧ͘ͳΒͳ͍ʢ٫ͬͯ໰୊ͱͳΔ৔߹΋ʣ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊
36. ٻΊΒΕΔೋͭͷબ୒ࢶ 1. ʮ࡞Γม͑΍͍͢ʯઃܭΛ૊Έ্͛Δ • ʹष͍΋ͷʹϑλΛͰ͖Δઃܭʹͯ͠͠·͏ • ࡞ۀऀʹΑΔ௿඼࣭ͳίʔυͷൃੜͳͲʹڧ͍ • ϓϩάϥϚͱͯ͠͸ʮෛ͚ʯͱײ͡ΔՕॴ΋ग़ͯ͘Δ 2. ʮ࡞Γม͑Δඞཁ͕ۃྗͳ͍ʯઃܭΛ૊Έ্͛Δ • ٕज़ਫ४͕ߴ͍͔ͭ҆ఆͨ͠࡞ۀ؀ڥͷ্Ͱ͸ϫʔΫ͢Δ • ಥવͷ֎తཁҼͳͲ΁ͷ଱ੑ͕͋·Γڧ͘ͳΒͳ͍ʢ٫ͬͯ໰୊ͱͳΔ৔߹΋ʣ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊
37. Agenda 1. ͜ͷηογϣϯͰ࿩͢͜ͱɾΰʔϧʹ͍ͭͯ 2. όοΫΤϯυΛަ͑ͨݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ 3. ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊ 4. ϑϩϯτΤϯυΛʮ࡞Γม͑ͯΏ͘ʯํ޲ੑͰͷ՝୊ղܾ 5. ϑϩϯτΤϯυΛʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ 6. Real world ΁
38. ݦࡏԽ͍ͯ͠Δ໰୊ • UI ͷੈքͱػೳͷੈքΛ͏·͘Θ͚ΒΕ͍ͯͳͯ͘σβΠϯ௥ै ͕೉ͯͭ͘͠Β͍ • Flux ҰຊͷΞʔΩςΫνϟʹΑͬͯԼखͳίʔυ͕ੜ·Εͨ࣌ͷ ϦΧόʔ͕೉ͯͭ͘͠Β͍ • ϥΠϒϥϦͷ௥ै͕೉͘͠͸ͳ͍͕ vuln Λߟ͑ΔͱඞཁͰ͋ Γɺ໘౗ͰͭΒ͍ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
39. ໰୊ͷΨϯΛ୳Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
40. ݦࡏԽ͍ͯ͠Δ໰୊ • UI ͷੈքͱػೳͷੈքΛ͏·͘Θ͚ΒΕ͍ͯͳͯ͘σβΠϯ௥ै ͕೉ͯͭ͘͠Β͍ • Flux ҰຊͷΞʔΩςΫνϟʹΑͬͯԼखͳίʔυ͕ੜ·Εͨ࣌ͷ ϦΧόʔ͕೉ͯͭ͘͠Β͍ • ϥΠϒϥϦͷ௥ै͕೉͘͠͸ͳ͍͕ vuln Λߟ͑ΔͱඞཁͰ͋ Γɺ໘౗ͰͭΒ͍ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
41. ݦࡏԽ͍ͯ͠Δ໰୊ • UI ͷੈքͱػೳͷੈքΛ͏·͘Θ͚ΒΕ͍ͯͳͯ͘σβΠϯ௥ै ͕೉ͯͭ͘͠Β͍ • Flux ҰຊͷΞʔΩςΫνϟʹΑͬͯԼखͳίʔυ͕ੜ·Εͨ࣌ͷ ϦΧόʔ͕೉ͯͭ͘͠Β͍ • ϥΠϒϥϦͷ௥ै͕೉͘͠͸ͳ͍͕ vuln Λߟ͑ΔͱඞཁͰ͋ Γɺ໘౗ͰͭΒ͍ ྖҬΛ෼͚ͯࠩ͠ସ͑Մೳʹ͢Ε͹ղܾ͢Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
42. ݦࡏԽ͍ͯ͠Δ໰୊ • UI ͷੈքͱػೳͷੈքΛ͏·͘Θ͚ΒΕ͍ͯͳͯ͘σβΠϯ௥ै ͕೉ͯͭ͘͠Β͍ • Flux ҰຊͷΞʔΩςΫνϟʹΑͬͯԼखͳίʔυ͕ੜ·Εͨ࣌ͷ ϦΧόʔ͕೉ͯͭ͘͠Β͍ • ϥΠϒϥϦͷ௥ै͕೉͘͠͸ͳ͍͕ vuln Λߟ͑ΔͱඞཁͰ͋ Γɺ໘౗ͰͭΒ͍ ྖҬΛ෼͚ͯࠩ͠ସ͑Մೳʹ͢Ε͹ղܾ͢Δ ߟ͑ํ͔Βม͑Δඞཁ͕͋ΓΫϦςΟΧϧ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
43. ݦࡏԽ͍ͯ͠Δ໰୊ • UI ͷੈքͱػೳͷੈքΛ͏·͘Θ͚ΒΕ͍ͯͳͯ͘σβΠϯ௥ै ͕೉ͯͭ͘͠Β͍ • Flux ҰຊͷΞʔΩςΫνϟʹΑͬͯԼखͳίʔυ͕ੜ·Εͨ࣌ͷ ϦΧόʔ͕೉ͯͭ͘͠Β͍ • ϥΠϒϥϦͷ௥ै͕೉͘͠͸ͳ͍͕ vuln Λߟ͑ΔͱඞཁͰ͋ Γɺ໘౗ͰͭΒ͍ ྖҬΛ෼͚ͯࠩ͠ସ͑Մೳʹ͢Ε͹ղܾ͢Δ ߟ͑ํ͔Βม͑Δඞཁ͕͋ΓΫϦςΟΧϧ ྖҬΛ෼͚ͯࠩ͠ସ͑Մೳʹ͢Ε͹ղܾ͢Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
44. ݦࡏԽ͍ͯ͠Δ໰୊ • UI ͷੈքͱػೳͷੈքΛ͏·͘Θ͚ΒΕ͍ͯͳͯ͘σβΠϯ௥ै ͕೉ͯͭ͘͠Β͍ • Flux ҰຊͷΞʔΩςΫνϟʹΑͬͯԼखͳίʔυ͕ੜ·Εͨ࣌ ͷϦΧόʔ͕೉ͯͭ͘͠Β͍ • ϥΠϒϥϦͷ௥ै͕೉͘͠͸ͳ͍͕ vuln Λߟ͑ΔͱඞཁͰ͋ Γɺ໘౗ͰͭΒ͍ ྖҬΛ෼͚ͯࠩ͠ସ͑Մೳʹ͢Ε͹ղܾ͢Δ ߟ͑ํ͔Βม͑Δඞཁ͕͋ΓΫϦςΟΧϧ ྖҬΛ෼͚ͯࠩ͠ସ͑Մೳʹ͢Ε͹ղܾ͢Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
45. ໰୊ΛݴޠԽͯ͠ ʮ΋͏গ͠Ϛγͳ΍ΓํʯΛ୳͢ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
46. ݱঢ়ͷ໰୊఺ (͍ܰํ) • UI ύʔπͱػೳ͕ີ݁߹Ͱ͋ͬͨΓɺখ͞ͳύοέʔδʹৼΓճ ͞ΕΔ • ύοέʔδͷಛఆͷ༻్͚ͩͰ͋Ε͹ɺͦͷػೳΛར༻͍ͯ͠ Δ͜ͱ͕Θ͔ΔΑ͏ʹͳ͍ͬͯΔ΂͖ • ޙ͔Β஫ೖͨ͠΄͏͕ྑ͍ఔ౓ͷ൚༻ੑΛٻΊΔ΋ͷΛͦͷ· ·ಡΈࠐΜͰ͍Δ఺ʹ΋໰୊͕͋Δ • = SOLID ݪଇʹର͢Δҙࣝͷ௿Լ΍ςελϒϧઃܭ΍ DI ʹର ͢Δҙࣝͷ௿Լ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
47. ݱঢ়ͷ໰୊఺ (ॏ͍ํ) • Single source of truth ͷՁ஋؍͚ͩͰશͯΛ࿫͓͏ͱ͢Δ • ୭͔ͷมߋ͕ΞϓϦέʔγϣϯશମʹӨڹ͔͚͠ͳ͍ • Local State ඞཁѱͱͳΔ͸͕ͣɺͦΕ͕૝ఆ͞Ε͍ͯͳ͍ • ݁Ռͱͯ͠ιʔείʔυͷӨڹൣғ͕େ͖͘ͳΔ • = ؔ৺ͷ෼཭΍෼ׂ౷࣏ͷߟ͑ํ͕ਁಁ͍ͯ͠ͳ͍ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
48. ଞΛࢀߟʹͭ͘Γม͑Δख๏Λߟ͑Δ ΨϥύΰεԽͨ͠ϑϩϯτΤϯυ͔Β໨ઢΛҾ͖ɺόοΫΤϯυ΍ Micro services จ຺ΛࢀߟʹɺҎԼΛॏཁࢦඪͱͯ͠ҙ͍ࣝͯ͘͠ • ʮ෼ׂ౷࣏ʯͷపఈ • ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ • ڞ௨ن֨ͱ࢓༷ͷ੍ఆɾӡ༻ յΕʹ͘͘͢ΔΑΓ΋ഁغ͠΍͘͢͢Δ͜ͱʹओ؟Λஔ͘ख๏ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
49. ଞΛࢀߟʹͭ͘Γม͑Δख๏Λߟ͑Δ • ʮ෼ׂ౷࣏ʯͷ֓೦Λίϯϙʔωϯτʹམͱ͠ࠐΜͰపఈ͢Δ • ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ • ڞ௨ن֨ͱ࢓༷ͷ੍ఆɾӡ༻ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
50. ʮ෼ׂ౷࣏ʯͷపఈ 1. Flux / ReduxͷීٴʹΑͬͯੜ·ΕͨʮFlux૚ͷංେԽʯΛݟ௚͢ • Flux / Redux ͸άϩʔόϧม਺ɾؔ਺ʹ͍ۙ͜ͱΛҙࣝ͠ɺ νΣοΫϘοΫεͷ஋Ұͭʹ Redux Λ࢖͏Α͏ͳ͜ͱ͸߇͑Δ • Flux / Redux ͸རศੑͷ౎߹্υϝΠϯϞσϧͱ௚઀ඥ͕ͮ͘ଟ ͍͕ɺຊ࣭తʹ྆ऀʹؔ܎͸ͳ͍͜ͱΛҙࣝ͢Δ • ͱ͸͍͑ݱ࣮ղͱͯ͠ɺ Redux Ducks ύλʔϯ΍ namespaced Vuex ͷߟ͑Λద༻͢Δ͜ͱͱ͠ɺੜ࢈ੑͱݟ௨͠ͷྑ͞ͷཱ྆ ΛਤΔ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
51. ʮ෼ׂ౷࣏ʯͷపఈ 2. ϑϩϯτΤϯυʹ͓͚Δ ”υϝΠϯ” ʹਆܦ࣭ʹͳΓ͗͢ͳ͍ • ಘͯͯ͠ϑϩϯτΤϯυͷυϝΠϯ֓೦͸όοΫΤϯυͷͦΕ΍ UI ౎߹ʹҾ͖ͣΒΕΔ΋ͷͱͳΔ • ϑϩϯτΤϯυΛ௕ظతʹक͍ͬͯ͘৔߹͸ৗʹఆٛ͠ଓ͚ͯ΋ ྑ͍͕ɺ ”ϑϩϯτΤϯυΛΞϓϦέʔγϣϯͷϓϨθϯςʔ γϣϯΛ୲౰͍ͯ͠ΔྖҬͷҰͭ" ͱͯܰ͘͠ଊ͑Δͱྑ͍ • ͱ͖ʹ͸ίϯϙʔωϯτͷػೳ΋ར༻ͯ͠ʮσʔλϞσϧʯͱ ʮDOMʯͷ௨৴Λԁ׈Խ͢Δ͜ͱʹ࠷దԽ͢Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
52. ʮ෼ׂ౷࣏ʯͷపఈ 2. _ 3. Framework Component ͱ JavaScript ͷੈքͷڥքΛҙࣝ͢Δ • Framework Component ͕ඞཁͰͳ͍ՕॴͰ͸ Pure JavaScript ͷੈքʹ෺ࣄΛدͤΔ • Pure JavaScript ͷྖҬ͸ɺͦͷϞδϡʔϧγεςϜͷ੾Γग़͠͞ Λ׆͔͠ɺੵۃతʹ SOLID ݪଇΛकΔΑ͏ͳίʔυͱ͍ͯ͘͠ • ରͯ͠ Framework Component ͸ɺprops ͳͲͰ౉͞Εͨσʔλ Ϟσϧͷ੍ޚ͓ΑͼϧοΫΞϯυϑΟʔϧͷ؅ཧʹઐ೦͢Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
53. ଞΛࢀߟʹͭ͘Γม͑Δख๏Λߟ͑Δ • ʮ෼ׂ౷࣏ʯͷ֓೦Λίϯϙʔωϯτʹམͱ͠ࠐΜͰపఈ͢Δ • ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ • ڞ௨ن֨ͱ࢓༷ͷ੍ఆɾӡ༻ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
54. ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ ࣍ͷࣄ࣮Λ౿·͑ͯɺϑϩϯτΤϯυΛ Micro services จ຺ʹ͓͚Δ αʔϏεͷେ͖͘ͳͬͨ΋ͷͰ͋Δͱղऍ͢Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
55. ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ ࣍ͷࣄ࣮Λ౿·͑ͯɺϑϩϯτΤϯυΛ Micro services จ຺ʹ͓͚Δ αʔϏεͷେ͖͘ͳͬͨ΋ͷͰ͋Δͱղऍ͢Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ Micro service ͷݪஶ͸ https://martinfowler.com/articles/microservices.html
56. ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ ࣍ͷࣄ࣮Λ౿·͑ͯɺϑϩϯτΤϯυΛ Micro services จ຺ʹ͓͚Δ αʔϏεͷେ͖͘ͳͬͨ΋ͷͰ͋Δͱղऍ͢Δ 1. ಛఆͷ੹຿ (User Interface) 1 ͭΛ࣋ͭΞϓϦέʔγϣϯશମ͔ ΒΈͨ৔߹ʹখ͞ͳҰͭͷϨΠϠͰ͋Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ Micro service ͷݪஶ͸ https://martinfowler.com/articles/microservices.html
57. ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ ࣍ͷࣄ࣮Λ౿·͑ͯɺϑϩϯτΤϯυΛ Micro services จ຺ʹ͓͚Δ αʔϏεͷେ͖͘ͳͬͨ΋ͷͰ͋Δͱղऍ͢Δ 1. ಛఆͷ੹຿ (User Interface) 1 ͭΛ࣋ͭΞϓϦέʔγϣϯશମ͔ ΒΈͨ৔߹ʹখ͞ͳҰͭͷϨΠϠͰ͋Δ 2. ಠཱ͞ΕͨσϓϩΠϑϩʔͳͲΛཱ͓֬ͯ͠ΓɺΞϓϦέʔγϣ ϯશମ͔ΒΈͯಠཱతͳ؅ཧ͕Մೳͱͳ͍ͬͯΔ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ Micro service ͷݪஶ͸ https://martinfowler.com/articles/microservices.html
58. ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ ࣍ͷࣄ࣮Λ౿·͑ͯɺϑϩϯτΤϯυΛ Micro services จ຺ʹ͓͚Δ αʔϏεͷେ͖͘ͳͬͨ΋ͷͰ͋Δͱղऍ͢Δ 1. ಛఆͷ੹຿ (User Interface) 1 ͭΛ࣋ͭΞϓϦέʔγϣϯશମ͔ ΒΈͨ৔߹ʹখ͞ͳҰͭͷϨΠϠͰ͋Δ 2. ಠཱ͞ΕͨσϓϩΠϑϩʔͳͲΛཱ͓֬ͯ͠ΓɺΞϓϦέʔγϣ ϯશମ͔ΒΈͯಠཱతͳ؅ཧ͕Մೳͱͳ͍ͬͯΔ 3. (ݪଇͰ͸ͳ͍͕) JSON ΛσϑΝΫτͱ͢Δ௨৴࢓༷ͱඇRDBґ ଘͷཁૉΛ͓࣋ͬͯΓɺଞͷαʔϏεͱͷ௨৴Λલఏͱ͍ͯ͠Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ Micro service ͷݪஶ͸ https://martinfowler.com/articles/microservices.html
59. αʔϏεͱͯ͠ೝࣝͨ͠৔߹ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ • ʮIn ରͯ͠ద੾ͳ Out ͕ઃఆ͞ΕΔʯ͜ͱ • User Interface ͷૢ࡞ (In) ʹରͯ͠ద੾ͳ API Call ͱͦͷϨεϙ ϯε (Out) ͷϑΟʔυόοΫ͕ߦΘΕΔ͜ͱ • In / Out ͷσʔλߏ଄͕ಉ͡Ͱ͋Ε͹ɺ಺෦తͳίʔυ͕ഁغ͞Ε Α͏͕࡞Γม͑ΒΕΑ͏͕ଞͷϨΠϠʔʹ͸Өڹ͕ͳ͍͜ͱ • ϒϥοΫϘοΫεͳՕॴʹ͍ͭͯݱ࣮తͳਫ४ͰϞϊʹ໨Λᛉͬ ͯྑ͍͜ͱ ͕อূ͞Ε͍ͯΔͱଊ͑Δ͜ͱ͕Ͱ͖Δ Micro service ͷݪஶ͸ https://martinfowler.com/articles/microservices.html
60. ଞΛࢀߟʹͭ͘Γม͑Δख๏Λߟ͑Δ • ʮ෼ׂ౷࣏ʯͷ֓೦Λίϯϙʔωϯτʹམͱ͠ࠐΜͰపఈ͢Δ • ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ͷೝࣝ͢Δ • ڞ௨ن֨ͱ࢓༷ͷ੍ఆɾӡ༻ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
61. ڞ௨ن֨ͱ࢓༷ͷ੍ఆɾӡ༻ • ϑϩϯτΤϯυ΋όοΫΤϯυ(BFF/MVC)ͱ઀ଓ͢ΔҰͭͷϨΠ Ϡʔͱ͍͏લఏͷ΋ͱʹઃܭΛ͓͜ͳ͏ • όοΫΤϯυ༝དྷͷڞ௨࢓༷΍௨৴ن֨ɾϑΥʔϚοτͷߟ͑Λ Web ϑϩϯτΤϯυʹ΋ద༻͍ͯ͘͠ • Open API / Swagger • JSON Schema • gRPC (Not production ready) ← New! ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
62. ༏Ґੑ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
63. ༏Ґੑ - 1 • ʮϑϩϯτΤϯυʹ͋Γ͕ͪͳ௠෗ԽʯͷݪҼΛద੾ʹִ཭͠ɺ มߋʹڧ͍ج൫Λங͘͜ͱ͕ՄೳͱͳΔ • ष͍΋ͷʹϑλΛ͠΍͍͢؀ڥ • ࣌୅ʹ߹Θͤͨ࠷৽ͷ؀ڥʹ௿ίετͰҠߦ͢Δ͜ͱ͕Ͱ͖Δ • ௿඼࣭ͳίʔυ͕ࠞࡏͯ͠͠·͏γνϡΤʔγϣϯʹஔ͍ͯɺͦ ͷӨڹൣғΛ࠷খݶʹ཈͑Δ͜ͱ͕Ͱ͖Δ ʹ Redux ʹ͢΂ͯΛࡌͤΔΑ͏ͳઃܭͱൺֱ͠ɺ
 ɹ ѹ౗తʹϝεΛ͍ΕΔ΂͖Օॴ͕গͳ͍ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
64. ༏Ґੑ - 2 • ୹ظతͳੜ࢈ੑͱ௕ظతͳੜ࢈ੑͷ΢ΣΠτௐ੔͕ԁ׈ • ʮҰఆҎ্·Ͱͷ՝୊Λղܾ͢Δʹ͸ศར͕ͩͦΕҎ্ͱͳΔ ͱᐫͱ΋ͳΓ΍͍ٕ͢ज़ʯΛಋೖ͠΍͍͢ • όοΫΤϯυͰ͍͏ͱɺʮRuby on Rails Λ࢖͍ͬͯͯ΋ංେ Խͨ͠ΒࣺͯΒΕΔʯͱߟ͍͑ͯ͘ • ʮαʔϏεͱͯ͠ೝࣝ͢Δʯ߲Ͱड़΂ͨʮRDB ͷґଘ͔Βಀ ΕΒΕ͍ͯΔʯͱ͍͏ಛ௃Λଘ෼ʹ׆͔͢ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
65. ༏Ґੑ - 3 • ୹ظతͳੜ࢈ੑͱ௕ظతͳੜ࢈ੑͷ΢ΣΠτௐ੔͕ԁ׈ • ҎԼͷΑ͏ͳγνϡΤʔγϣϯͰίʔυ඼࣭ͷҡ͕࣋೉͍͠৔ ߹ʹɺ௿඼࣭ͳίʔυ͕ੜ·ΕΔ༨஍Λ࠷খݶʹ཈͑Δ • όοΫΤϯυ͔Βͷσʔλߏ଄͕ະఆٛ·ͨ͸ࡦఆதͰෆ໌ ྎͳঢ়ଶͰͷઃܭ΍ίʔσΟϯά • ֎తཁҼʹΑͬͯઃܭʹ޻਺Λଟׂ͘͘͜ͱ͕Ͱ͖ͳ͍ঢ়گ Ͱͷઃܭ΍ίʔσΟϯάͳͲ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
66. ՝୊ײ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
67. ՝୊ײ - 1 • Ҡߦ͠΍͢͞ͱطଘͷίʔυϕʔεͷ෺ྔʹෛͷ૬͕ؔ͋Δ • ৽ن෦෼ͷΈ΍Ұ෦͚ͩΛผΞʔΩςΫνϟʹͨ͠৔߹ʹࠞཚ ͕ੜ͡ΔՄೳੑ͕ߴ͍ • ϓϩδΣΫτ΍ϨϙδτϦɺ package ୯ҐͰ͜ͷํ਑ʹஔ͖ ׵͍͑ͯ͘͜ͱ͕ඞཁͱͳΔ • ٯʹݴ͑͹৽͘͠ϨϙδτϦΛੜ΍͢Α͏ͳ࡞ۀ͕͋Ε͹͙͢ ʹऔΓೖΕ͍ͯ͘͜ͱ͕Ͱ͖Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
68. ՝୊ײ - 2 • ”ʰແཧ͕ޮ͘ʱ͜ͱ͸อݥͰ͋ͬͯؾܰʹߦͬͯྑ͍ಈػʹ͸ͳΒͳ ͍” ͱ͍͏จԽͷৢ଄ίετ • গ͠Ͱ΋ະདྷΛࣺ͍ͯͯΔ͔΋͠Εͳ͍ͱ͍͏ҙࣝ • ϓϩάϥϚ͙͠͞ͷਰୀ • ͋ΔҙຯͰ͸ Web ϓϩάϥϛϯάʹ͓͍ͯ͸ૄ͔ʹͳ͍ͬͯͨ (UNIX఩ֶͷΑ͏ͳ)ϓϩάϥϜͷجຊݪଇΛऔΓ໭ͨ͠ͱ΋औΕΔ • ҰํͰ௨ৗͷ Web ϓϩάϥϛϯάΒ͍͠େن໛΁ͷҙࣝײ͸མͪΔ ͨΊɺࣗݾߠఆײ΍Ϟνϕʔγϣϯ؅ཧ͕ඞཁ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
69. Agenda 1. ͜ͷηογϣϯͰ࿩͢͜ͱɾΰʔϧʹ͍ͭͯ 2. όοΫΤϯυΛަ͑ͨݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ 3. ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊ 4. ϑϩϯτΤϯυΛʮ࡞Γม͑ͯΏ͘ʯํ޲ੑͰͷ՝୊ղܾ 5. ϑϩϯτΤϯυΛʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ 6. Real world ΁
70. ʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ • ʮ࡞Γม͑ΔʯϕʔεͰίʔυͷ݁߹౓Λམͱ͠ɺݱ୅తͳΞʔ ΩςΫνϟʹ͚ۙͮͨ৔߹ɺҎԼͷΑ͏ͳઃܭ΋Մೳʹݟ͑Δ
71. ʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ • ʮ࡞Γม͑ΔʯϕʔεͰίʔυͷ݁߹౓Λམͱ͠ɺݱ୅తͳΞʔ ΩςΫνϟʹ͚ۙͮͨ৔߹ɺҎԼͷΑ͏ͳઃܭ΋Մೳʹݟ͑Δ 1. ྺ࢙ͷ͋Δ Backend ΍ઌΛΏ͘ Mobile App จ຺Ͱ࢖ΘΕͯ ͍Δ Clean Architecture ͷϑϩϯτΤϯυ΁ͷద༻ 2. Backend Ͱ͸໰୊ղܾͷख๏ͱͯ͠ਁಁͭͭ͋͠ΔυϝΠϯ ͷ੍ఆٴͼͦΕʹج͍ͮͨઃܭͱ։ൃ
72. ʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ • ʮ࡞Γม͑ΔʯϕʔεͰίʔυͷ݁߹౓Λམͱ͠ɺݱ୅తͳΞʔ ΩςΫνϟʹ͚ۙͮͨ৔߹ɺҎԼͷΑ͏ͳઃܭ΋Մೳʹݟ͑Δ 1. ྺ࢙ͷ͋Δ Backend ΍ઌΛΏ͘ Mobile App จ຺Ͱ࢖ΘΕͯ ͍Δ Clean Architecture ͷϑϩϯτΤϯυ΁ͷద༻ 2. Backend Ͱ͸໰୊ղܾͷख๏ͱͯ͠ਁಁͭͭ͋͠ΔυϝΠϯ ͷ੍ఆٴͼͦΕʹج͍ͮͨઃܭͱ։ൃ յΕͮΒ͘͢Δ͜ͱͰࠜຊతʹ໰୊Λੜͮ͡Β͘͢Δ
73. ʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ • ʮ࡞Γม͑ΔʯϕʔεͰίʔυͷ݁߹౓Λམͱ͠ɺݱ୅తͳΞʔ ΩςΫνϟʹ͚ۙͮͨ৔߹ɺҎԼͷΑ͏ͳઃܭ΋Մೳʹݟ͑Δ 1. ྺ࢙ͷ͋Δ Backend ΍ઌΛΏ͘ Mobile App จ຺Ͱ࢖ΘΕͯ ͍Δ Clean Architecture ͷϑϩϯτΤϯυ΁ͷద༻ 2. Backend Ͱ͸໰୊ղܾͷख๏ͱͯ͠ਁಁͭͭ͋͠ΔυϝΠϯ ͷ੍ఆٴͼͦΕʹج͍ͮͨઃܭͱ։ൃ ϑϩϯτΤϯυʹ͸ෆద੾·ͨ͸ΦʔόʔΤϯδχΞϦϯάͱͳΓ͕ͪ
74. ϑϩϯτΤϯυʹ͓͚ΔυϝΠϯͱ͸ • ϓϩδΣΫτʹΑͬͯऔΓѻ͍ํ͕ҧ͏͕ɺଟ͘͸ ”Flux / Redux ্ۭؒʹදݱ͞ΕͨϞδϡʔϧ” Λද͢ ∠ ʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ
75. ϑϩϯτΤϯυʹ͓͚ΔυϝΠϯͱ͸ • ϓϩδΣΫτʹΑͬͯऔΓѻ͍ํ͕ҧ͏͕ɺଟ͘͸ ”Flux / Redux ্ۭؒʹදݱ͞ΕͨϞδϡʔϧ” Λද͢ • ͕͜ͷυϝΠϯ͸ɺຊ౰ʹυϝΠϯͱݺ΂Δ΄Ͳͷ΋ͷͳͷ͔ ∠ ʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ
76. ϑϩϯτΤϯυʹ͓͚ΔυϝΠϯͱ͸ • ϓϩδΣΫτʹΑͬͯऔΓѻ͍ํ͕ҧ͏͕ɺଟ͘͸ ”Flux / Redux ্ۭؒʹදݱ͞ΕͨϞδϡʔϧ” Λද͢ • ͕͜ͷυϝΠϯ͸ɺຊ౰ʹυϝΠϯͱݺ΂Δ΄Ͳͷ΋ͷͳͷ͔ • ϓϩάϥϚ͕ઃܭͨ͠ ίʔυ΍ API ͱີ݁߹ ͳσʔλߏ଄ ∠ ʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ
77. ϑϩϯτΤϯυʹ͓͚ΔυϝΠϯͱ͸ • ϓϩδΣΫτʹΑͬͯऔΓѻ͍ํ͕ҧ͏͕ɺଟ͘͸ ”Flux / Redux ্ۭؒʹදݱ͞ΕͨϞδϡʔϧ” Λද͢ • ͕͜ͷυϝΠϯ͸ɺຊ౰ʹυϝΠϯͱݺ΂Δ΄Ͳͷ΋ͷͳͷ͔ • ϓϩάϥϚ͕ઃܭͨ͠ ίʔυ΍ API ͱີ݁߹ ͳσʔλߏ଄ • UI ཁ݅΍όοΫΤϯυଆͷ ”υϝΠϯ” ͷߟ͑ʹΑͬͯมΘΓ ͏Δ౔୆ ∠ ʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ
78. ϑϩϯτΤϯυʹ͓͚ΔυϝΠϯͱ͸ • ϓϩδΣΫτʹΑͬͯऔΓѻ͍ํ͕ҧ͏͕ɺଟ͘͸ ”Flux / Redux ্ۭؒʹදݱ͞ΕͨϞδϡʔϧ” Λද͢ • ͕͜ͷυϝΠϯ͸ɺຊ౰ʹυϝΠϯͱݺ΂Δ΄Ͳͷ΋ͷͳͷ͔ • ϓϩάϥϚ͕ઃܭͨ͠ ίʔυ΍ API ͱີ݁߹ ͳσʔλߏ଄ • UI ཁ݅΍όοΫΤϯυଆͷ ”υϝΠϯ” ͷߟ͑ʹΑͬͯมΘΓ ͏Δ౔୆ ౔୆ͱ͢Δʹ͸ऑ͗͢Δߏ଄ͱόϥϯεײ֮ ∠ ʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ
79. ੜ͖࢒Δͷ͸൚༻ίʔυͱצ • ଟ͘ͷ৔߹ʹ͓͍ͯɺલड़ͷཧ༝ʹΑΓ strict ͳυϝΠϯ͸೉͍͠ ※ ࣮ફऀ΋ࣄ࣮͍ΔͨΊෆՄೳͳΘ͚Ͱ͸ͳ͍͕ɺίετ͕ߴ͍ • ՝୊ײͰ͋ΔʮσβΠϯͱόοΫΤϯυυϝΠϯͷ֓೦มߋʯͳ Ͳʹ΋ऑ͘ͳͬͯ͠·͏ • ։ൃαΠΫϧͷҧ͏όοΫΤϯυͱ଍ฒΈἧ͑Δඞཁ͕ੜ·ΕΔ • UIɾσʔλϞσϧɾϏδωεϩδοΫͷ 3 छ͕ࠞࡏ͢ΔྖҬʹͭ ͍ͯ͸ʮࣺͯ΍͢͞ʯΛॏࢹͨ͠΄͏͕ίετରޮՌʹ༏ΕΔ
80. ੜ͖࢒Δͷ͸൚༻ίʔυͱצ • ʮϑϩϯτΤϯυͷίʔυ͸શ͘Ҿ͖ܧ͛ͳ͍ͷ͔ʯͱ͍͏ͱͦ ͏Ͱ͸ͳ͍ • ෼ׂ౷࣏ͷ࣌ʹಉ࣌ʹ࿩ͨ͠ Framework Component ͔Β੾ Γग़͞Εͨ Pure JavaScript ͷίʔυͳͲ͸ଉ͕௕͍ • ୯Ұ੹຿Λक͓ͬͯΓςελϒϧͰ͋Γ֎తཁҼ͔Β͸ಠཱ͞ ΕͨίʔυɺϓϩδΣΫτݻ༗޲͚ͷ lodash ͷΑ͏ͳศར ϢʔςΟϦςΟίʔυ΍ API ΫϥΠΞϯτͳͲ
81. ੜ͖࢒Δͷ͸൚༻ίʔυͱצ • ϑϩϯτΤϯυ͸ʮ஌ࣝͱܦݧ(=φϨοδ)ʯΛҾ͖ܧ͗ɺʮࢿ ࢈ͱෛ࠴Λഁغ͢Δ৔ʯͱଊ͑Δ • લड़ͷ௨ΓϢʔςΟϦςΟίʔυ΍ API ΫϥΠΞϯτɺ UI ද ࣔΛศརʹ͢ΔΑ͏ͳػೳ͸࢒Δ • UI มߋͱΞϓϦέʔγϣϯͷ֓೦ͷݟ௚͕͠ೖͬͨ৔߹͸ίʔ υͷ൒෼Ҏ্ΛϦϥΠτ͢Δ͜ͱ΋ଟ͋͘Δ • ͸͡Ί͔Βͦͷ৺࣋ͪͰ͍Δ΄͏͕Ժ΍͔ʹ։ൃ͕Ͱ͖Δ
82. Agenda 1. ͜ͷηογϣϯͰ࿩͢͜ͱɾΰʔϧʹ͍ͭͯ 2. όοΫΤϯυΛަ͑ͨݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ 3. ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊ 4. ϑϩϯτΤϯυΛʮ࡞Γม͑ͯΏ͘ʯํ޲ੑͰͷ՝୊ղܾ 5. ϑϩϯτΤϯυΛʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ 6. Real world ΁
83. Real world ΁ • ࠓճͷΑ͏ͳΞʔΩςΫνϟΛࢼͯ͠ΈΔ৔߹ɺ
 Vue.js + Vuex ʹΑΔ։ൃΛମݧ͢Δ͜ͱΛਪ঑͢Δ • Vuex ͸෼ׂ౷࣏ʹରͯ͠ੵۃత • ͋Θͤͯ Vue.js ίϛϡχςΟ΋෼ׂ౷࣏ʹରͯ͠ੵۃత • Redux ʹ͍ͭͯ΋൱ఆ͍ͯ͠ͳ͍ • ҰํͰɺίϛϡχςΟͷҙࢤͱͯ͠ҰۃूதʹدΓ͕ͪ
84. ঢ়ଶͷҰ෦͕ͻͱͭͷίϯϙʔωϯτ͚ͩʹଐ͍ͯ͠Δ৔߹͸ɺͦΕΛϩʔΧϧͷঢ়ଶ ͱͯ͠࢒͓ͯ͘͠ͱΑ͍Ͱ͠ΐ͏ɻ͋ͳͨ͸ɺτϨʔυΦϑΛߟ্ྀͨ͠Ͱɺ͋ͳͨͷ ΞϓϦͷ։ൃχʔζʹ߹ܾͬͨఆΛ͢΂͖Ͱ͢ɻ ެࣜυΩϡϝϯτ೔ຊޠ༁ΑΓൈਮ Vuex
85. 2
    %P
    *
    IBWF
    UP
    QVU
    BMM
    NZ
    TUBUF
    JOUP
    3FEVY
    4IPVME
    *
    FWFS
    VTF
    3FBDUT
    TFU4UBUF
    "
    5IFSF
    JT
    OP
    lSJHIUz
    BOTXFS
    GPS
    UIJT ެࣜυΩϡϝϯτΑΓൈਮ Redux
86. ͦͷଞຊ೔ͷؔ࿈ࢿྉʹ͍ͭͯ • Vuex υΩϡϝϯτʹΑΔϩʔΧϧεςʔτ΁ͷݴٴ • https://vuex.vuejs.org/guide/state.html#components-can-still-have-local-state • Redux υΩϡϝϯτʹΑΔϩʔΧϧεςʔτ΁ͷݴٴ • https://redux.js.org/faq/organizingstate#do-i-have-to-put-all-my-state-into-redux- should-i-ever-use-reacts-setstate • Vue.js Λར༻ͨ͠έʔεͷ۩ମతͳྫ (ొஃऀʹΑΔաڈͷࢿྉ) • https://speakerdeck.com/potato4d/how-to-make-a-robust-vue-dot-js-application
87. ͓ΘΓʹ
88. Caution • ࣺͯ΍͍͢౔৕ͷܗ੒ͱ։ൃʹ͸ΤϯδχΞ͚ͩͰ͸࣮ݱෆՄ • ΠϚͱະདྷͷੜ࢈ੑʹͲΕ͚ͩ΢ΣΠτΛஔ͍͍ͯΔ͔ͷڞ༗ • ฒͼʹͦΕΒʹཧղͷ͋ΔνʔϜɾ૊৫ܗ੒͕ඞཁ • ϑϩϯτΤϯυ͸ಛʹଞͱେ͖͘ҧ͏ͨΊɺಛ༗ͷҙࣝײΛ΋ͭ • શͯʹ͓͍ͯࠓճͷελΠϧͰྑ͍ͱ͍͏Θ͚Ͱ͸ͳ͍ • ঎ۀՁ஋ͷ͋Δطଘίʔυ΁ܟҙΛ෷͍ͭͭ͜Ε͔ΒΛߟ͑Δ
89. ϑϩϯτΤϯυ͸ʮࣺͯΔʯ࣌୅΁ɻ