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

Slide 1

Slide 1 text

࣋ଓՄೳͳϓϩμΫτ։ൃͷͨΊʹ - ϑϩϯτΤϯυͱ৽௠୅ँͷ࿩ - 2018.11.25 #html5j HANATANI Takuma(@potato4d)

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

https://github.com/potato4d

Slide 4

Slide 4 text

Agenda 1. ͜ͷηογϣϯͰ࿩͢͜ͱɾΰʔϧʹ͍ͭͯ 2. όοΫΤϯυΛަ͑ͨݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ 3. ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊ 4. ϑϩϯτΤϯυΛʮ࡞Γม͑ͯΏ͘ʯํ޲ੑͰͷ՝୊ղܾ 5. ϑϩϯτΤϯυΛʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ 6. Real world ΁

Slide 5

Slide 5 text

Slide 6

Slide 6 text

͜ͷεϥΠυͷର৅ऀʹ͍ͭͯ

Slide 7

Slide 7 text

͜ͷεϥΠυͷର৅ऀʹ͍ͭͯ • Frontend Engineer (touch Backend) • ϑϩϯτΤϯυ։ൃΛத৺ͱ͍ͯ͠ͳ͕Β΋ɺଞͷྖҬͷ։ൃख๏ ͳͲͷ؍ଌػձ͕͋Γɺݱঢ়ͷϑϩϯτΤϯυ։ൃͷվળΛ୳ͬͯ ͍Δ͔ͨ • Backend Engineer (touch Frontend) • όοΫΤϯυྖҬͷ։ൃ͔ΒϑϩϯτΤϯυ΋ؔΘΔΑ͏ʹͳͬ ͕ͨɺಛ༗ࣄ৘ʹ͍͓ͭͯ೰Έͷ͔ͨ ͳͲʹ࣮ͷ͋ΔηογϣϯͱͳΔ͜ͱΛ૝ఆ

Slide 8

Slide 8 text

ࠓճͷ՝୊ײ

Slide 9

Slide 9 text

”ݱ୅త” ͳϑϩϯτΤϯυʹ͓͍ͯ ”ݱ࣮త” ͳϝϯςφϏϦςΟͷ୲อ ∠ ࠓճͷ՝୊ײ

Slide 10

Slide 10 text

”ཧ૝” ͷϑϩϯτΤϯυ࿦ͱ ”ݱ࣮త” ͳϑϩϯτΤϯυ؀ڥ ∠ ࠓճͷ՝୊ײ

Slide 11

Slide 11 text

ࠓ೔ͷΰʔϧʹ͍ͭͯ

Slide 12

Slide 12 text

”ߴ଎ͳϓϩμΫτ։ൃ” ͱ ”҆ఆͨ͠Ձ஋ͷఏڙ” ͷͨΊ ∠ ࠓ೔ͷΰʔϧʹ͍ͭͯ

Slide 13

Slide 13 text

”ߴ଎ͳ։ൃ؀ڥͷத” Ͱ ”ੜ࢈ੑΛ׆͔͠ଓ͚Δ” ͨΊ ∠ ࠓ೔ͷΰʔϧʹ͍ͭͯ

Slide 14

Slide 14 text

✘ ޷ΈͷΞʔΩςΫνϟ࿦ ✘ ಛఆٕज़ಛԽ΁ͷͩ͜ΘΓ ✘ ։ൃऀΒཱ͖ͪ͠ډৼΔ෣͍ ը૾͸ Adobe Stock Ͱ "religion" Ͱௐ΂ͨ΋ͷ ∠ ࠓ೔ͷΰʔϧʹ͍ͭͯ

Slide 15

Slide 15 text

Slide 16

Slide 16 text

ݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ Monolithic Web Application

Slide 17

Slide 17 text

ݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ Monolithic Web Application

Slide 18

Slide 18 text

ݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ Single Page Application API-based Backend External Services

Slide 19

Slide 19 text

SPA ͷΩʔϫʔυ • React, Vue, Angular ͳͲͷϑϨʔϜϫʔΫʹΑΔ ”ίϯϙʔωϯ τࢦ޲” ͷߏஙγεςϜ͕ଓ͍͓ͯΓɺಛʹมԽ͸ͳ͍ • ʮঢ়ଶʯͷऔΓѻ͍Λ࠷େͷςʔϚͱ͓ͯ͠Γɺ࠷େ੎ྗͱͯ͠ Flux / Redux ͷ Ұۃूதͷঢ়ଶ؅ཧ ͕ϝδϟʔͱͳ͍ͬͯΔ • ”Single source of truth” ͔Βੜ·Εͨղऍ • ”Domain” ͱ "Presentation" ྆ํͷ ”Flux / Redux ΁ͷґଘ” ∠ ݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ

Slide 20

Slide 20 text

API-based Backend ͷΩʔϫʔυ • ݹయతͳ MVC ཁૉ΋݈ࡏ (ੈքతʹ͸ Laravel ͕ Ruby on Rails ͷγΣΞΛ্ճΔͳͲɺ Framework ͷมԽ͸͋Δ) • େن໛ίʔυϕʔεͷӡ༻ʹ͓͍ͯ͸ Clean Architecture ͳͲ ͷઃܭࢥ૝΋औΓೖΕΒΕ͓ͯΓɺίʔυΛ௕ੜ͖ͤ͞Δ͜ͱ΁ ͷؔ৺͕ڧ͍ • ҰํͰ Micro Services ͷΑ͏ͳɺখ͞ͳαʔϏεͷू߹ʹΑͬ ͯҰͭͷେ͖ͳ՝୊Λ੒͢Α͏ͳ։ൃ΋੎ྗΛ૿େͤͭͭ͋͞Δ ∠ ݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ

Slide 21

Slide 21 text

ͦͷଞͷ৽ͨͳྲྀΕ • 2ͭͷ Serverless ͷීٴ • ߴՄ༻ੑͰεέʔϥϒϧͳόοΫΤϯυ։ൃͷੈք (FaaS) • Web / Mobile App ʹର͢ΔόοΫΤϯυఏڙͷੈք (BaaS) • ͳͲ͕͋Δ͕ɺࠓ೔͸ SKIP ∠ ݱ୅తͳΞʔΩςΫνϟͷΩʔϫʔυ

Slide 22

Slide 22 text

Slide 23

Slide 23 text

SPA ͷΩʔϫʔυ(͓͞Β͍) • React, Vue, Angular ͳͲͷϑϨʔϜϫʔΫʹΑΔ ”ίϯϙʔωϯ τࢦ޲” ͷߏஙγεςϜ͕ଓ͍͓ͯΓɺಛʹมԽ͸ͳ͍ • ʮঢ়ଶʯͷऔΓѻ͍Λ࠷େͷςʔϚͱ͓ͯ͠Γɺ࠷େ੎ྗͱͯ͠ Flux / Redux ͷ Ұۃूதͷঢ়ଶ؅ཧ ͕ϝδϟʔͱͳ͍ͬͯΔ • ”Single source of truth” ͔Βੜ·Εͨղऍ • ”Domain” ͱ "Presentation" ྆ํͷ ”Flux / Redux ΁ͷґଘ” ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊

Slide 24

Slide 24 text

ϑϩϯτΤϯυʹ͓͚Δ՝୊ͷ αϯϓϧέʔε ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊

Slide 25

Slide 25 text

1. σβΠϯ&όοΫΤϯυͷ มߋ௥ै଱ੑͷܽམ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊

Slide 26

Slide 26 text

σβΠϯ & όοΫΤϯυཁҼ • ཁ๬Aʮ͜Ε·Ͱ͸Ϣʔβʔ͕঎඼Λ͍͚࣋ͬͯͨΕͲɺϢʔ βʔ͕ΧʔτΛ࣋ͪɺͦͷதʹ঎඼Λ࣋ͭߏ଄ʹ API Λม͑ͨɻ ௥ैͯ͠ཉ͍͠ɻʯ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊ ∠ σβΠϯɾόοΫΤϯυͷมߋ௥ै଱ੑͷܽམ

Slide 27

Slide 27 text

σβΠϯ & όοΫΤϯυཁҼ • ཁ๬Aʮ͜Ε·Ͱ͸Ϣʔβʔ͕঎඼Λ͍͚࣋ͬͯͨΕͲɺϢʔ βʔ͕ΧʔτΛ࣋ͪɺͦͷதʹ঎඼Λ࣋ͭߏ଄ʹ API Λม͑ͨɻ ௥ैͯ͠ཉ͍͠ɻʯ • ཁ๬BʮσβΠϯ؍఺Ͱ͸ UI ্͸͜Ε·Ͱ௨ΓϢʔβʔ͕঎඼ͱ ͯ͠΋͍ͬͯͯɺҰཡͰऔΓѻ͑ΔΑ͏ͳͭ͘Γʹͯ͠ཉ͍͠ʯ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊ ∠ σβΠϯɾόοΫΤϯυͷมߋ௥ै଱ੑͷܽམ

Slide 28

Slide 28 text

σβΠϯ & όοΫΤϯυཁҼ • ཁ๬Aʮ͜Ε·Ͱ͸Ϣʔβʔ͕঎඼Λ͍͚࣋ͬͯͨΕͲɺϢʔ βʔ͕ΧʔτΛ࣋ͪɺͦͷதʹ঎඼Λ࣋ͭߏ଄ʹ API Λม͑ͨɻ ௥ैͯ͠ཉ͍͠ɻʯ • ཁ๬BʮσβΠϯ؍఺Ͱ͸ UI ্͸͜Ε·Ͱ௨ΓϢʔβʔ͕঎඼ͱ ͯ͠΋͍ͬͯͯɺҰཡͰऔΓѻ͑ΔΑ͏ͳͭ͘Γʹͯ͠ཉ͍͠ʯ ▶ɹ ద੾ʹϞδϡʔϧ෼ׂ͞ΕͨΦϒδΣΫτಉ࢜Λແཧ໼ཧͭͳ͗߹Θ  ɹɹͤͯϑϩϯτΤϯυ༻ͷҰͭͷσʔλΛ࡞Γ্͛Δɺطଘͷ֓೦ͷҠ  ɹɹߦͰ௕େͳ޻਺૿ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊ ∠ σβΠϯɾόοΫΤϯυͷมߋ௥ै଱ੑͷܽམ

Slide 29

Slide 29 text

2. ઓज़తϥΠϒϥϦͷ௠෗Խ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊

Slide 30

Slide 30 text

ઓज़తϥΠϒϥϦͷ௠෗Խ • ϥΠϒϥϦͷখ͞ͳ୯ҐͰ΋τϨϯυ͸มΘΔ • ܰྔͳ࣌ࠁૢ࡞Ͱਓؾͷ day.js ͸ 1 ೥લʹ͸ͳ͔ͬͨ • HTTP ϦΫΤετ΋ superagent ͸ফ͑ɺ axios ΋Ͳ͏ͳΔ͔ • ։ൃͷͨΊͷϕʔε؀ڥͩͬͯΑΓྑ͍΋ͷ͕Ͱͯ͘Δ • ܰྔόϯυϥͷ Parcel ΋ 1 ೥લʹ͸ͳ͔ͬͨ • Vue.js ͷڧྗͳ։ൃࢧԉπʔϧͷ Vue CLI v3 ΋ 1 ೥લʹ͸ͳ ͔ͬͨ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊

Slide 31

Slide 31 text

ઓज़తϥΠϒϥϦͷ௠෗Խ • ಛʹҠߦ͠ͳͯ͘΋ੜ͖͍ͯ͘͜ͱ͸Ͱ͖Δ • ͱ͸͍͑ϝδϟʔಀ͢ͱޙ͕௧͍ɻಛʹෳࡶͳϥΠϒϥϦ͕υ Ωϡϝϯτ͕ࡶͳ৔߹ʹ௧͍ • ઓུʹӨڹ͢ΔϥΠϒϥϦ͚ͩ͸ؾ߹Λ࣋ͬͯ΍͍ͬͯΔ৔߹͕ େ൒ • ೾ཚΛݺΜͩ React v16 Ͱ͢Β·ͩ 1 ೥લ • ࣮͸ Vue.js 1.0 ͸·ͩ 3 ೥લɺ Vue.js 2.0 Ͱ 2 ೥લɻ Vue.js 2.5 ͰҰ೥લ……ɻ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊

Slide 32

Slide 32 text

3. ϓϩάϥϚͱΞʔΩςΫτ ͦΕͧΕͷྖҬͷ༥߹ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊

Slide 33

Slide 33 text

ϓϩάϥϚʹΑΔΞʔΩςΫνϟഁյ 1. ઃܭɾ։ൃऀʹΑͬͯ࡞ΒΕ͍ͯͨ React / Redux ʹΑΔ Single State Tree ͷϏδωεϩδοΫ 2. ػೳվमͷͨΊʹ͸ৗʹ Redux ʹ࡞ΒΕͨ Architecture ͷ্Ͱ ߦ͏ඞཁ͕͋Δ 3. ͱ͋Δ࣮૷ऀʹΑͬͯ࡞ΒΕͨςελϏϦςΟΛܽ͘ίʔυ΍ີ ݁߹ͳ௥ՃϩδοΫͷ࣮૷͕ग़ݱ 4. ▶ ͙͢ʹϚʔδ͢ΔΘ͚ʹ΋͍͔ͣɺͱ͸͍͑ೖΕͳ͍৔߹ͷ։ ൃ޻਺ͷϩε΋௧͘ɺ௧ΈΛ൐͏τϨʔυΦϑΛڧཁ͞ΕΔ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊ ∠ ϓϩάϥϚͱΞʔΩςΫτͦΕͧΕͷྖҬͷ༥߹

Slide 34

Slide 34 text

૯ͯ͡ͷ՝୊ͱͯ͠ͷ ҋͷຐज़ʹର͢Δ๷Ӵज़ ͷෆ଍ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊

Slide 35

Slide 35 text

ٻΊΒΕΔೋͭͷબ୒ࢶ 1. ʮ࡞Γม͑΍͍͢ʯઃܭΛ૊Έ্͛Δ • ʹष͍΋ͷʹϑλΛͰ͖Δઃܭʹͯ͠͠·͏ • ࡞ۀऀʹΑΔ௿඼࣭ͳίʔυͷൃੜͳͲʹڧ͍ • ϓϩάϥϚͱͯ͠͸ʮෛ͚ʯͱײ͡ΔՕॴ΋ग़ͯ͘Δ 2. ʮ࡞Γม͑Δඞཁ͕ۃྗͳ͍ʯઃܭΛ૊Έ্͛Δ • ٕज़ਫ४͕ߴ͍͔ͭ҆ఆͨ͠࡞ۀ؀ڥͷ্Ͱ͸ϫʔΫ͢Δ • ಥવͷ֎తཁҼͳͲ΁ͷ଱ੑ͕͋·Γڧ͘ͳΒͳ͍ʢ٫ͬͯ໰୊ͱͳΔ৔߹΋ʣ ∠ ݱ୅ͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝୊

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

ݦࡏԽ͍ͯ͠Δ໰୊ • UI ͷੈքͱػೳͷੈքΛ͏·͘Θ͚ΒΕ͍ͯͳͯ͘σβΠϯ௥ै ͕೉ͯͭ͘͠Β͍ • Flux ҰຊͷΞʔΩςΫνϟʹΑͬͯԼखͳίʔυ͕ੜ·Εͨ࣌ͷ ϦΧόʔ͕೉ͯͭ͘͠Β͍ • ϥΠϒϥϦͷ௥ै͕೉͘͠͸ͳ͍͕ vuln Λߟ͑ΔͱඞཁͰ͋ Γɺ໘౗ͰͭΒ͍ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 39

Slide 39 text

໰୊ͷΨϯΛ୳Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 40

Slide 40 text

Slide 41

Slide 41 text

ݦࡏԽ͍ͯ͠Δ໰୊ • UI ͷੈքͱػೳͷੈքΛ͏·͘Θ͚ΒΕ͍ͯͳͯ͘σβΠϯ௥ै ͕೉ͯͭ͘͠Β͍ • Flux ҰຊͷΞʔΩςΫνϟʹΑͬͯԼखͳίʔυ͕ੜ·Εͨ࣌ͷ ϦΧόʔ͕೉ͯͭ͘͠Β͍ • ϥΠϒϥϦͷ௥ै͕೉͘͠͸ͳ͍͕ vuln Λߟ͑ΔͱඞཁͰ͋ Γɺ໘౗ͰͭΒ͍ ྖҬΛ෼͚ͯࠩ͠ସ͑Մೳʹ͢Ε͹ղܾ͢Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

ݦࡏԽ͍ͯ͠Δ໰୊ • UI ͷੈքͱػೳͷੈքΛ͏·͘Θ͚ΒΕ͍ͯͳͯ͘σβΠϯ௥ै ͕೉ͯͭ͘͠Β͍ • Flux ҰຊͷΞʔΩςΫνϟʹΑͬͯԼखͳίʔυ͕ੜ·Εͨ࣌ ͷϦΧόʔ͕೉ͯͭ͘͠Β͍ • ϥΠϒϥϦͷ௥ै͕೉͘͠͸ͳ͍͕ vuln Λߟ͑ΔͱඞཁͰ͋ Γɺ໘౗ͰͭΒ͍ ྖҬΛ෼͚ͯࠩ͠ସ͑Մೳʹ͢Ε͹ղܾ͢Δ ߟ͑ํ͔Βม͑Δඞཁ͕͋ΓΫϦςΟΧϧ ྖҬΛ෼͚ͯࠩ͠ସ͑Մೳʹ͢Ε͹ղܾ͢Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 45

Slide 45 text

໰୊ΛݴޠԽͯ͠ ʮ΋͏গ͠Ϛγͳ΍ΓํʯΛ୳͢ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 46

Slide 46 text

ݱঢ়ͷ໰୊఺ (͍ܰํ) • UI ύʔπͱػೳ͕ີ݁߹Ͱ͋ͬͨΓɺখ͞ͳύοέʔδʹৼΓճ ͞ΕΔ • ύοέʔδͷಛఆͷ༻్͚ͩͰ͋Ε͹ɺͦͷػೳΛར༻͍ͯ͠ Δ͜ͱ͕Θ͔ΔΑ͏ʹͳ͍ͬͯΔ΂͖ • ޙ͔Β஫ೖͨ͠΄͏͕ྑ͍ఔ౓ͷ൚༻ੑΛٻΊΔ΋ͷΛͦͷ· ·ಡΈࠐΜͰ͍Δ఺ʹ΋໰୊͕͋Δ • = SOLID ݪଇʹର͢Δҙࣝͷ௿Լ΍ςελϒϧઃܭ΍ DI ʹର ͢Δҙࣝͷ௿Լ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 47

Slide 47 text

ݱঢ়ͷ໰୊఺ (ॏ͍ํ) • Single source of truth ͷՁ஋؍͚ͩͰશͯΛ࿫͓͏ͱ͢Δ • ୭͔ͷมߋ͕ΞϓϦέʔγϣϯશମʹӨڹ͔͚͠ͳ͍ • Local State ඞཁѱͱͳΔ͸͕ͣɺͦΕ͕૝ఆ͞Ε͍ͯͳ͍ • ݁Ռͱͯ͠ιʔείʔυͷӨڹൣғ͕େ͖͘ͳΔ • = ؔ৺ͷ෼཭΍෼ׂ౷࣏ͷߟ͑ํ͕ਁಁ͍ͯ͠ͳ͍ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 48

Slide 48 text

ଞΛࢀߟʹͭ͘Γม͑Δख๏Λߟ͑Δ ΨϥύΰεԽͨ͠ϑϩϯτΤϯυ͔Β໨ઢΛҾ͖ɺόοΫΤϯυ΍ Micro services จ຺ΛࢀߟʹɺҎԼΛॏཁࢦඪͱͯ͠ҙ͍ࣝͯ͘͠ • ʮ෼ׂ౷࣏ʯͷపఈ • ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ • ڞ௨ن֨ͱ࢓༷ͷ੍ఆɾӡ༻ յΕʹ͘͘͢ΔΑΓ΋ഁغ͠΍͘͢͢Δ͜ͱʹओ؟Λஔ͘ख๏ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 49

Slide 49 text

ଞΛࢀߟʹͭ͘Γม͑Δख๏Λߟ͑Δ • ʮ෼ׂ౷࣏ʯͷ֓೦Λίϯϙʔωϯτʹམͱ͠ࠐΜͰపఈ͢Δ • ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ • ڞ௨ن֨ͱ࢓༷ͷ੍ఆɾӡ༻ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 50

Slide 50 text

ʮ෼ׂ౷࣏ʯͷపఈ 1. Flux / ReduxͷීٴʹΑͬͯੜ·ΕͨʮFlux૚ͷංେԽʯΛݟ௚͢ • Flux / Redux ͸άϩʔόϧม਺ɾؔ਺ʹ͍ۙ͜ͱΛҙࣝ͠ɺ νΣοΫϘοΫεͷ஋Ұͭʹ Redux Λ࢖͏Α͏ͳ͜ͱ͸߇͑Δ • Flux / Redux ͸རศੑͷ౎߹্υϝΠϯϞσϧͱ௚઀ඥ͕ͮ͘ଟ ͍͕ɺຊ࣭తʹ྆ऀʹؔ܎͸ͳ͍͜ͱΛҙࣝ͢Δ • ͱ͸͍͑ݱ࣮ղͱͯ͠ɺ Redux Ducks ύλʔϯ΍ namespaced Vuex ͷߟ͑Λద༻͢Δ͜ͱͱ͠ɺੜ࢈ੑͱݟ௨͠ͷྑ͞ͷཱ྆ ΛਤΔ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 51

Slide 51 text

ʮ෼ׂ౷࣏ʯͷపఈ 2. ϑϩϯτΤϯυʹ͓͚Δ ”υϝΠϯ” ʹਆܦ࣭ʹͳΓ͗͢ͳ͍ • ಘͯͯ͠ϑϩϯτΤϯυͷυϝΠϯ֓೦͸όοΫΤϯυͷͦΕ΍ UI ౎߹ʹҾ͖ͣΒΕΔ΋ͷͱͳΔ • ϑϩϯτΤϯυΛ௕ظతʹक͍ͬͯ͘৔߹͸ৗʹఆٛ͠ଓ͚ͯ΋ ྑ͍͕ɺ ”ϑϩϯτΤϯυΛΞϓϦέʔγϣϯͷϓϨθϯςʔ γϣϯΛ୲౰͍ͯ͠ΔྖҬͷҰͭ" ͱͯܰ͘͠ଊ͑Δͱྑ͍ • ͱ͖ʹ͸ίϯϙʔωϯτͷػೳ΋ར༻ͯ͠ʮσʔλϞσϧʯͱ ʮDOMʯͷ௨৴Λԁ׈Խ͢Δ͜ͱʹ࠷దԽ͢Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 52

Slide 52 text

ʮ෼ׂ౷࣏ʯͷపఈ 2. _ 3. Framework Component ͱ JavaScript ͷੈքͷڥքΛҙࣝ͢Δ • Framework Component ͕ඞཁͰͳ͍ՕॴͰ͸ Pure JavaScript ͷੈքʹ෺ࣄΛدͤΔ • Pure JavaScript ͷྖҬ͸ɺͦͷϞδϡʔϧγεςϜͷ੾Γग़͠͞ Λ׆͔͠ɺੵۃతʹ SOLID ݪଇΛकΔΑ͏ͳίʔυͱ͍ͯ͘͠ • ରͯ͠ Framework Component ͸ɺprops ͳͲͰ౉͞Εͨσʔλ Ϟσϧͷ੍ޚ͓ΑͼϧοΫΞϯυϑΟʔϧͷ؅ཧʹઐ೦͢Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 53

Slide 53 text

Slide 54

Slide 54 text

ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ ࣍ͷࣄ࣮Λ౿·͑ͯɺϑϩϯτΤϯυΛ Micro services จ຺ʹ͓͚Δ αʔϏεͷେ͖͘ͳͬͨ΋ͷͰ͋Δͱղऍ͢Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 55

Slide 55 text

ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ ࣍ͷࣄ࣮Λ౿·͑ͯɺϑϩϯτΤϯυΛ Micro services จ຺ʹ͓͚Δ αʔϏεͷେ͖͘ͳͬͨ΋ͷͰ͋Δͱղऍ͢Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ Micro service ͷݪஶ͸ https://martinfowler.com/articles/microservices.html

Slide 56

Slide 56 text

ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ ࣍ͷࣄ࣮Λ౿·͑ͯɺϑϩϯτΤϯυΛ Micro services จ຺ʹ͓͚Δ αʔϏεͷେ͖͘ͳͬͨ΋ͷͰ͋Δͱղऍ͢Δ 1. ಛఆͷ੹຿ (User Interface) 1 ͭΛ࣋ͭΞϓϦέʔγϣϯશମ͔ ΒΈͨ৔߹ʹখ͞ͳҰͭͷϨΠϠͰ͋Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ Micro service ͷݪஶ͸ https://martinfowler.com/articles/microservices.html

Slide 57

Slide 57 text

ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ ࣍ͷࣄ࣮Λ౿·͑ͯɺϑϩϯτΤϯυΛ Micro services จ຺ʹ͓͚Δ αʔϏεͷେ͖͘ͳͬͨ΋ͷͰ͋Δͱղऍ͢Δ 1. ಛఆͷ੹຿ (User Interface) 1 ͭΛ࣋ͭΞϓϦέʔγϣϯશମ͔ ΒΈͨ৔߹ʹখ͞ͳҰͭͷϨΠϠͰ͋Δ 2. ಠཱ͞ΕͨσϓϩΠϑϩʔͳͲΛཱ͓֬ͯ͠ΓɺΞϓϦέʔγϣ ϯશମ͔ΒΈͯಠཱతͳ؅ཧ͕Մೳͱͳ͍ͬͯΔ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ Micro service ͷݪஶ͸ https://martinfowler.com/articles/microservices.html

Slide 58

Slide 58 text

ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ ࣍ͷࣄ࣮Λ౿·͑ͯɺϑϩϯτΤϯυΛ Micro services จ຺ʹ͓͚Δ αʔϏεͷେ͖͘ͳͬͨ΋ͷͰ͋Δͱղऍ͢Δ 1. ಛఆͷ੹຿ (User Interface) 1 ͭΛ࣋ͭΞϓϦέʔγϣϯશମ͔ ΒΈͨ৔߹ʹখ͞ͳҰͭͷϨΠϠͰ͋Δ 2. ಠཱ͞ΕͨσϓϩΠϑϩʔͳͲΛཱ͓֬ͯ͠ΓɺΞϓϦέʔγϣ ϯશମ͔ΒΈͯಠཱతͳ؅ཧ͕Մೳͱͳ͍ͬͯΔ 3. (ݪଇͰ͸ͳ͍͕) JSON ΛσϑΝΫτͱ͢Δ௨৴࢓༷ͱඇRDBґ ଘͷཁૉΛ͓࣋ͬͯΓɺଞͷαʔϏεͱͷ௨৴Λલఏͱ͍ͯ͠Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ Micro service ͷݪஶ͸ https://martinfowler.com/articles/microservices.html

Slide 59

Slide 59 text

αʔϏεͱͯ͠ೝࣝͨ͠৔߹ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ • ʮIn ରͯ͠ద੾ͳ Out ͕ઃఆ͞ΕΔʯ͜ͱ • User Interface ͷૢ࡞ (In) ʹରͯ͠ద੾ͳ API Call ͱͦͷϨεϙ ϯε (Out) ͷϑΟʔυόοΫ͕ߦΘΕΔ͜ͱ • In / Out ͷσʔλߏ଄͕ಉ͡Ͱ͋Ε͹ɺ಺෦తͳίʔυ͕ഁغ͞Ε Α͏͕࡞Γม͑ΒΕΑ͏͕ଞͷϨΠϠʔʹ͸Өڹ͕ͳ͍͜ͱ • ϒϥοΫϘοΫεͳՕॴʹ͍ͭͯݱ࣮తͳਫ४ͰϞϊʹ໨Λᛉͬ ͯྑ͍͜ͱ ͕อূ͞Ε͍ͯΔͱଊ͑Δ͜ͱ͕Ͱ͖Δ Micro service ͷݪஶ͸ https://martinfowler.com/articles/microservices.html

Slide 60

Slide 60 text

ଞΛࢀߟʹͭ͘Γม͑Δख๏Λߟ͑Δ • ʮ෼ׂ౷࣏ʯͷ֓೦Λίϯϙʔωϯτʹམͱ͠ࠐΜͰపఈ͢Δ • ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ͷೝࣝ͢Δ • ڞ௨ن֨ͱ࢓༷ͷ੍ఆɾӡ༻ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 61

Slide 61 text

ڞ௨ن֨ͱ࢓༷ͷ੍ఆɾӡ༻ • ϑϩϯτΤϯυ΋όοΫΤϯυ(BFF/MVC)ͱ઀ଓ͢ΔҰͭͷϨΠ Ϡʔͱ͍͏લఏͷ΋ͱʹઃܭΛ͓͜ͳ͏ • όοΫΤϯυ༝དྷͷڞ௨࢓༷΍௨৴ن֨ɾϑΥʔϚοτͷߟ͑Λ Web ϑϩϯτΤϯυʹ΋ద༻͍ͯ͘͠ • Open API / Swagger • JSON Schema • gRPC (Not production ready) ← New! ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 62

Slide 62 text

༏Ґੑ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 63

Slide 63 text

༏Ґੑ - 1 • ʮϑϩϯτΤϯυʹ͋Γ͕ͪͳ௠෗ԽʯͷݪҼΛద੾ʹִ཭͠ɺ มߋʹڧ͍ج൫Λங͘͜ͱ͕ՄೳͱͳΔ • ष͍΋ͷʹϑλΛ͠΍͍͢؀ڥ • ࣌୅ʹ߹Θͤͨ࠷৽ͷ؀ڥʹ௿ίετͰҠߦ͢Δ͜ͱ͕Ͱ͖Δ • ௿඼࣭ͳίʔυ͕ࠞࡏͯ͠͠·͏γνϡΤʔγϣϯʹஔ͍ͯɺͦ ͷӨڹൣғΛ࠷খݶʹ཈͑Δ͜ͱ͕Ͱ͖Δ ʹ Redux ʹ͢΂ͯΛࡌͤΔΑ͏ͳઃܭͱൺֱ͠ɺ  ɹ ѹ౗తʹϝεΛ͍ΕΔ΂͖Օॴ͕গͳ͍ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 64

Slide 64 text

༏Ґੑ - 2 • ୹ظతͳੜ࢈ੑͱ௕ظతͳੜ࢈ੑͷ΢ΣΠτௐ੔͕ԁ׈ • ʮҰఆҎ্·Ͱͷ՝୊Λղܾ͢Δʹ͸ศར͕ͩͦΕҎ্ͱͳΔ ͱᐫͱ΋ͳΓ΍͍ٕ͢ज़ʯΛಋೖ͠΍͍͢ • όοΫΤϯυͰ͍͏ͱɺʮRuby on Rails Λ࢖͍ͬͯͯ΋ංେ Խͨ͠ΒࣺͯΒΕΔʯͱߟ͍͑ͯ͘ • ʮαʔϏεͱͯ͠ೝࣝ͢Δʯ߲Ͱड़΂ͨʮRDB ͷґଘ͔Βಀ ΕΒΕ͍ͯΔʯͱ͍͏ಛ௃Λଘ෼ʹ׆͔͢ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 65

Slide 65 text

༏Ґੑ - 3 • ୹ظతͳੜ࢈ੑͱ௕ظతͳੜ࢈ੑͷ΢ΣΠτௐ੔͕ԁ׈ • ҎԼͷΑ͏ͳγνϡΤʔγϣϯͰίʔυ඼࣭ͷҡ͕࣋೉͍͠৔ ߹ʹɺ௿඼࣭ͳίʔυ͕ੜ·ΕΔ༨஍Λ࠷খݶʹ཈͑Δ • όοΫΤϯυ͔Βͷσʔλߏ଄͕ະఆٛ·ͨ͸ࡦఆதͰෆ໌ ྎͳঢ়ଶͰͷઃܭ΍ίʔσΟϯά • ֎తཁҼʹΑͬͯઃܭʹ޻਺Λଟׂ͘͘͜ͱ͕Ͱ͖ͳ͍ঢ়گ Ͱͷઃܭ΍ίʔσΟϯάͳͲ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 66

Slide 66 text

՝୊ײ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 67

Slide 67 text

՝୊ײ - 1 • Ҡߦ͠΍͢͞ͱطଘͷίʔυϕʔεͷ෺ྔʹෛͷ૬͕ؔ͋Δ • ৽ن෦෼ͷΈ΍Ұ෦͚ͩΛผΞʔΩςΫνϟʹͨ͠৔߹ʹࠞཚ ͕ੜ͡ΔՄೳੑ͕ߴ͍ • ϓϩδΣΫτ΍ϨϙδτϦɺ package ୯ҐͰ͜ͷํ਑ʹஔ͖ ׵͍͑ͯ͘͜ͱ͕ඞཁͱͳΔ • ٯʹݴ͑͹৽͘͠ϨϙδτϦΛੜ΍͢Α͏ͳ࡞ۀ͕͋Ε͹͙͢ ʹऔΓೖΕ͍ͯ͘͜ͱ͕Ͱ͖Δ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 68

Slide 68 text

՝୊ײ - 2 • ”ʰແཧ͕ޮ͘ʱ͜ͱ͸อݥͰ͋ͬͯؾܰʹߦͬͯྑ͍ಈػʹ͸ͳΒͳ ͍” ͱ͍͏จԽͷৢ଄ίετ • গ͠Ͱ΋ະདྷΛࣺ͍ͯͯΔ͔΋͠Εͳ͍ͱ͍͏ҙࣝ • ϓϩάϥϚ͙͠͞ͷਰୀ • ͋ΔҙຯͰ͸ Web ϓϩάϥϛϯάʹ͓͍ͯ͸ૄ͔ʹͳ͍ͬͯͨ (UNIX఩ֶͷΑ͏ͳ)ϓϩάϥϜͷجຊݪଇΛऔΓ໭ͨ͠ͱ΋औΕΔ • ҰํͰ௨ৗͷ Web ϓϩάϥϛϯάΒ͍͠େن໛΁ͷҙࣝײ͸མͪΔ ͨΊɺࣗݾߠఆײ΍Ϟνϕʔγϣϯ؅ཧ͕ඞཁ ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ

Slide 69

Slide 69 text

Slide 70

Slide 70 text

ʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ • ʮ࡞Γม͑ΔʯϕʔεͰίʔυͷ݁߹౓Λམͱ͠ɺݱ୅తͳΞʔ ΩςΫνϟʹ͚ۙͮͨ৔߹ɺҎԼͷΑ͏ͳઃܭ΋Մೳʹݟ͑Δ

Slide 71

Slide 71 text

ʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ • ʮ࡞Γม͑ΔʯϕʔεͰίʔυͷ݁߹౓Λམͱ͠ɺݱ୅తͳΞʔ ΩςΫνϟʹ͚ۙͮͨ৔߹ɺҎԼͷΑ͏ͳઃܭ΋Մೳʹݟ͑Δ 1. ྺ࢙ͷ͋Δ Backend ΍ઌΛΏ͘ Mobile App จ຺Ͱ࢖ΘΕͯ ͍Δ Clean Architecture ͷϑϩϯτΤϯυ΁ͷద༻ 2. Backend Ͱ͸໰୊ղܾͷख๏ͱͯ͠ਁಁͭͭ͋͠ΔυϝΠϯ ͷ੍ఆٴͼͦΕʹج͍ͮͨઃܭͱ։ൃ

Slide 72

Slide 72 text

Slide 73

Slide 73 text

Slide 74

Slide 74 text

ϑϩϯτΤϯυʹ͓͚ΔυϝΠϯͱ͸ • ϓϩδΣΫτʹΑͬͯऔΓѻ͍ํ͕ҧ͏͕ɺଟ͘͸ ”Flux / Redux ্ۭؒʹදݱ͞ΕͨϞδϡʔϧ” Λද͢ ∠ ʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ

Slide 75

Slide 75 text

ϑϩϯτΤϯυʹ͓͚ΔυϝΠϯͱ͸ • ϓϩδΣΫτʹΑͬͯऔΓѻ͍ํ͕ҧ͏͕ɺଟ͘͸ ”Flux / Redux ্ۭؒʹදݱ͞ΕͨϞδϡʔϧ” Λද͢ • ͕͜ͷυϝΠϯ͸ɺຊ౰ʹυϝΠϯͱݺ΂Δ΄Ͳͷ΋ͷͳͷ͔ ∠ ʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ

Slide 76

Slide 76 text

ϑϩϯτΤϯυʹ͓͚ΔυϝΠϯͱ͸ • ϓϩδΣΫτʹΑͬͯऔΓѻ͍ํ͕ҧ͏͕ɺଟ͘͸ ”Flux / Redux ্ۭؒʹදݱ͞ΕͨϞδϡʔϧ” Λද͢ • ͕͜ͷυϝΠϯ͸ɺຊ౰ʹυϝΠϯͱݺ΂Δ΄Ͳͷ΋ͷͳͷ͔ • ϓϩάϥϚ͕ઃܭͨ͠ ίʔυ΍ API ͱີ݁߹ ͳσʔλߏ଄ ∠ ʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ

Slide 77

Slide 77 text

ϑϩϯτΤϯυʹ͓͚ΔυϝΠϯͱ͸ • ϓϩδΣΫτʹΑͬͯऔΓѻ͍ํ͕ҧ͏͕ɺଟ͘͸ ”Flux / Redux ্ۭؒʹදݱ͞ΕͨϞδϡʔϧ” Λද͢ • ͕͜ͷυϝΠϯ͸ɺຊ౰ʹυϝΠϯͱݺ΂Δ΄Ͳͷ΋ͷͳͷ͔ • ϓϩάϥϚ͕ઃܭͨ͠ ίʔυ΍ API ͱີ݁߹ ͳσʔλߏ଄ • UI ཁ݅΍όοΫΤϯυଆͷ ”υϝΠϯ” ͷߟ͑ʹΑͬͯมΘΓ ͏Δ౔୆ ∠ ʮ௕͘क͍ͬͯ͘ʯະདྷ΁ͷࢥߟ

Slide 78

Slide 78 text

Slide 79

Slide 79 text

ੜ͖࢒Δͷ͸൚༻ίʔυͱצ • ଟ͘ͷ৔߹ʹ͓͍ͯɺલड़ͷཧ༝ʹΑΓ strict ͳυϝΠϯ͸೉͍͠ ※ ࣮ફऀ΋ࣄ࣮͍ΔͨΊෆՄೳͳΘ͚Ͱ͸ͳ͍͕ɺίετ͕ߴ͍ • ՝୊ײͰ͋ΔʮσβΠϯͱόοΫΤϯυυϝΠϯͷ֓೦มߋʯͳ Ͳʹ΋ऑ͘ͳͬͯ͠·͏ • ։ൃαΠΫϧͷҧ͏όοΫΤϯυͱ଍ฒΈἧ͑Δඞཁ͕ੜ·ΕΔ • UIɾσʔλϞσϧɾϏδωεϩδοΫͷ 3 छ͕ࠞࡏ͢ΔྖҬʹͭ ͍ͯ͸ʮࣺͯ΍͢͞ʯΛॏࢹͨ͠΄͏͕ίετରޮՌʹ༏ΕΔ

Slide 80

Slide 80 text

ੜ͖࢒Δͷ͸൚༻ίʔυͱצ • ʮϑϩϯτΤϯυͷίʔυ͸શ͘Ҿ͖ܧ͛ͳ͍ͷ͔ʯͱ͍͏ͱͦ ͏Ͱ͸ͳ͍ • ෼ׂ౷࣏ͷ࣌ʹಉ࣌ʹ࿩ͨ͠ Framework Component ͔Β੾ Γग़͞Εͨ Pure JavaScript ͷίʔυͳͲ͸ଉ͕௕͍ • ୯Ұ੹຿Λक͓ͬͯΓςελϒϧͰ͋Γ֎తཁҼ͔Β͸ಠཱ͞ ΕͨίʔυɺϓϩδΣΫτݻ༗޲͚ͷ lodash ͷΑ͏ͳศར ϢʔςΟϦςΟίʔυ΍ API ΫϥΠΞϯτͳͲ

Slide 81

Slide 81 text

ੜ͖࢒Δͷ͸൚༻ίʔυͱצ • ϑϩϯτΤϯυ͸ʮ஌ࣝͱܦݧ(=φϨοδ)ʯΛҾ͖ܧ͗ɺʮࢿ ࢈ͱෛ࠴Λഁغ͢Δ৔ʯͱଊ͑Δ • લड़ͷ௨ΓϢʔςΟϦςΟίʔυ΍ API ΫϥΠΞϯτɺ UI ද ࣔΛศརʹ͢ΔΑ͏ͳػೳ͸࢒Δ • UI มߋͱΞϓϦέʔγϣϯͷ֓೦ͷݟ௚͕͠ೖͬͨ৔߹͸ίʔ υͷ൒෼Ҏ্ΛϦϥΠτ͢Δ͜ͱ΋ଟ͋͘Δ • ͸͡Ί͔Βͦͷ৺࣋ͪͰ͍Δ΄͏͕Ժ΍͔ʹ։ൃ͕Ͱ͖Δ

Slide 82

Slide 82 text

Slide 83

Slide 83 text

Real world ΁ • ࠓճͷΑ͏ͳΞʔΩςΫνϟΛࢼͯ͠ΈΔ৔߹ɺ  Vue.js + Vuex ʹΑΔ։ൃΛମݧ͢Δ͜ͱΛਪ঑͢Δ • Vuex ͸෼ׂ౷࣏ʹରͯ͠ੵۃత • ͋Θͤͯ Vue.js ίϛϡχςΟ΋෼ׂ౷࣏ʹରͯ͠ੵۃత • Redux ʹ͍ͭͯ΋൱ఆ͍ͯ͠ͳ͍ • ҰํͰɺίϛϡχςΟͷҙࢤͱͯ͠ҰۃूதʹدΓ͕ͪ

Slide 84

Slide 84 text

ঢ়ଶͷҰ෦͕ͻͱͭͷίϯϙʔωϯτ͚ͩʹଐ͍ͯ͠Δ৔߹͸ɺͦΕΛϩʔΧϧͷঢ়ଶ ͱͯ͠࢒͓ͯ͘͠ͱΑ͍Ͱ͠ΐ͏ɻ͋ͳͨ͸ɺτϨʔυΦϑΛߟ্ྀͨ͠Ͱɺ͋ͳͨͷ ΞϓϦͷ։ൃχʔζʹ߹ܾͬͨఆΛ͢΂͖Ͱ͢ɻ ެࣜυΩϡϝϯτ೔ຊޠ༁ΑΓൈਮ Vuex

Slide 85

Slide 85 text

2%P*IBWFUPQVUBMMNZTUBUFJOUP3FEVY 4IPVME*FWFSVTF3FBDUTTFU4UBUF "5IFSFJTOPlSJHIUzBOTXFSGPSUIJT ެࣜυΩϡϝϯτΑΓൈਮ Redux

Slide 86

Slide 86 text

ͦͷଞຊ೔ͷؔ࿈ࢿྉʹ͍ͭͯ • 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

Slide 87

Slide 87 text

͓ΘΓʹ

Slide 88

Slide 88 text

Caution • ࣺͯ΍͍͢౔৕ͷܗ੒ͱ։ൃʹ͸ΤϯδχΞ͚ͩͰ͸࣮ݱෆՄ • ΠϚͱະདྷͷੜ࢈ੑʹͲΕ͚ͩ΢ΣΠτΛஔ͍͍ͯΔ͔ͷڞ༗ • ฒͼʹͦΕΒʹཧղͷ͋ΔνʔϜɾ૊৫ܗ੒͕ඞཁ • ϑϩϯτΤϯυ͸ಛʹଞͱେ͖͘ҧ͏ͨΊɺಛ༗ͷҙࣝײΛ΋ͭ • શͯʹ͓͍ͯࠓճͷελΠϧͰྑ͍ͱ͍͏Θ͚Ͱ͸ͳ͍ • ঎ۀՁ஋ͷ͋Δطଘίʔυ΁ܟҙΛ෷͍ͭͭ͜Ε͔ΒΛߟ͑Δ

Slide 89

Slide 89 text

ϑϩϯτΤϯυ͸ʮࣺͯΔʯ࣌୅΁ɻ