2018/11/25 に HTML5 Conference 2018 ( #html5j ) にて行ったセッションのスライドです。
࣋ଓՄೳͳϓϩμΫτ։ൃͷͨΊʹ- ϑϩϯτΤϯυͱ৽ँͷ -2018.11.25 #html5j HANATANI Takuma(@potato4d)
View Slide
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
https://github.com/potato4d
Agenda1. ͜ͷηογϣϯͰ͢͜ͱɾΰʔϧʹ͍ͭͯ2. όοΫΤϯυΛަ͑ͨݱతͳΞʔΩςΫνϟͷΩʔϫʔυ3. ݱͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝4. ϑϩϯτΤϯυΛʮ࡞Γม͑ͯΏ͘ʯํੑͰͷ՝ղܾ5. ϑϩϯτΤϯυΛʮ͘क͍ͬͯ͘ʯະདྷͷࢥߟ6. Real world
͜ͷεϥΠυͷରऀʹ͍ͭͯ
͜ͷεϥΠυͷରऀʹ͍ͭͯ• Frontend Engineer (touch Backend)• ϑϩϯτΤϯυ։ൃΛத৺ͱ͍ͯ͠ͳ͕ΒɺଞͷྖҬͷ։ൃख๏ͳͲͷ؍ଌػձ͕͋Γɺݱঢ়ͷϑϩϯτΤϯυ։ൃͷվળΛ୳͍ͬͯΔ͔ͨ• Backend Engineer (touch Frontend)• όοΫΤϯυྖҬͷ։ൃ͔ΒϑϩϯτΤϯυؔΘΔΑ͏ʹͳ͕ͬͨɺಛ༗ࣄʹ͍͓ͭͯΈͷ͔ͨͳͲʹ࣮ͷ͋ΔηογϣϯͱͳΔ͜ͱΛఆ
ࠓճͷ՝ײ
”ݱత” ͳϑϩϯτΤϯυʹ͓͍ͯ”ݱ࣮త” ͳϝϯςφϏϦςΟͷ୲อ∠ ࠓճͷ՝ײ
”ཧ” ͷϑϩϯτΤϯυͱ”ݱ࣮త” ͳϑϩϯτΤϯυڥ∠ ࠓճͷ՝ײ
ࠓͷΰʔϧʹ͍ͭͯ
”ߴͳϓϩμΫτ։ൃ” ͱ”҆ఆͨ͠Ձͷఏڙ” ͷͨΊ∠ ࠓͷΰʔϧʹ͍ͭͯ
”ߴͳ։ൃڥͷத” Ͱ”ੜ࢈ੑΛ׆͔͠ଓ͚Δ” ͨΊ∠ ࠓͷΰʔϧʹ͍ͭͯ
✘ ΈͷΞʔΩςΫνϟ✘ ಛఆٕज़ಛԽͷͩ͜ΘΓ✘ ։ൃऀΒཱ͖ͪ͠ډৼΔ͍ը૾ Adobe Stock Ͱ "religion" Ͱௐͨͷ∠ ࠓͷΰʔϧʹ͍ͭͯ
ݱతͳΞʔΩςΫνϟͷΩʔϫʔυMonolithicWeb Application
ݱతͳΞʔΩςΫνϟͷΩʔϫʔυSingle PageApplicationAPI-basedBackendExternal Services
SPA ͷΩʔϫʔυ• React, Vue, Angular ͳͲͷϑϨʔϜϫʔΫʹΑΔ ”ίϯϙʔωϯτࢦ” ͷߏஙγεςϜ͕ଓ͍͓ͯΓɺಛʹมԽͳ͍• ʮঢ়ଶʯͷऔΓѻ͍Λ࠷େͷςʔϚͱ͓ͯ͠Γɺ࠷େྗͱͯ͠Flux / Redux ͷ Ұۃूதͷঢ়ଶཧ ͕ϝδϟʔͱͳ͍ͬͯΔ• ”Single source of truth” ͔Βੜ·Εͨղऍ• ”Domain” ͱ "Presentation" ྆ํͷ ”Flux / Redux ͷґଘ”∠ ݱతͳΞʔΩςΫνϟͷΩʔϫʔυ
API-based Backend ͷΩʔϫʔυ• ݹయతͳ MVC ཁૉ݈ࡏ (ੈքతʹ Laravel ͕ Ruby on RailsͷγΣΞΛ্ճΔͳͲɺ Framework ͷมԽ͋Δ)• େنίʔυϕʔεͷӡ༻ʹ͓͍ͯ Clean Architecture ͳͲͷઃܭࢥऔΓೖΕΒΕ͓ͯΓɺίʔυΛੜ͖ͤ͞Δ͜ͱͷؔ৺͕ڧ͍• ҰํͰ Micro Services ͷΑ͏ͳɺখ͞ͳαʔϏεͷू߹ʹΑͬͯҰͭͷେ͖ͳ՝Λ͢Α͏ͳ։ൃྗΛ૿େͤͭͭ͋͞Δ∠ ݱతͳΞʔΩςΫνϟͷΩʔϫʔυ
ͦͷଞͷ৽ͨͳྲྀΕ• 2ͭͷ Serverless ͷීٴ• ߴՄ༻ੑͰεέʔϥϒϧͳόοΫΤϯυ։ൃͷੈք (FaaS)• Web / Mobile App ʹର͢ΔόοΫΤϯυఏڙͷੈք (BaaS)• ͳͲ͕͋Δ͕ɺࠓ SKIP∠ ݱతͳΞʔΩςΫνϟͷΩʔϫʔυ
SPA ͷΩʔϫʔυ(͓͞Β͍)• React, Vue, Angular ͳͲͷϑϨʔϜϫʔΫʹΑΔ ”ίϯϙʔωϯτࢦ” ͷߏஙγεςϜ͕ଓ͍͓ͯΓɺಛʹมԽͳ͍• ʮঢ়ଶʯͷऔΓѻ͍Λ࠷େͷςʔϚͱ͓ͯ͠Γɺ࠷େྗͱͯ͠Flux / Redux ͷ Ұۃूதͷঢ়ଶཧ ͕ϝδϟʔͱͳ͍ͬͯΔ• ”Single source of truth” ͔Βੜ·Εͨղऍ• ”Domain” ͱ "Presentation" ྆ํͷ ”Flux / Redux ͷґଘ”∠ ݱͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝
ϑϩϯτΤϯυʹ͓͚Δ՝ͷαϯϓϧέʔε∠ ݱͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝
1. σβΠϯ&όοΫΤϯυͷมߋैੑͷܽམ∠ ݱͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝
σβΠϯ & όοΫΤϯυཁҼ• ཁAʮ͜Ε·ͰϢʔβʔ͕Λ͍͚࣋ͬͯͨΕͲɺϢʔβʔ͕ΧʔτΛ࣋ͪɺͦͷதʹΛ࣋ͭߏʹ API Λม͑ͨɻैͯ͠ཉ͍͠ɻʯ∠ ݱͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝ ∠ σβΠϯɾόοΫΤϯυͷมߋैੑͷܽམ
σβΠϯ & όοΫΤϯυཁҼ• ཁAʮ͜Ε·ͰϢʔβʔ͕Λ͍͚࣋ͬͯͨΕͲɺϢʔβʔ͕ΧʔτΛ࣋ͪɺͦͷதʹΛ࣋ͭߏʹ API Λม͑ͨɻैͯ͠ཉ͍͠ɻʯ• ཁBʮσβΠϯ؍Ͱ UI ্͜Ε·Ͱ௨ΓϢʔβʔ͕ͱ͍ͯͬͯͯ͠ɺҰཡͰऔΓѻ͑ΔΑ͏ͳͭ͘Γʹͯ͠ཉ͍͠ʯ∠ ݱͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝ ∠ σβΠϯɾόοΫΤϯυͷมߋैੑͷܽམ
σβΠϯ & όοΫΤϯυཁҼ• ཁAʮ͜Ε·ͰϢʔβʔ͕Λ͍͚࣋ͬͯͨΕͲɺϢʔβʔ͕ΧʔτΛ࣋ͪɺͦͷதʹΛ࣋ͭߏʹ API Λม͑ͨɻैͯ͠ཉ͍͠ɻʯ• ཁBʮσβΠϯ؍Ͱ UI ্͜Ε·Ͱ௨ΓϢʔβʔ͕ͱ͍ͯͬͯͯ͠ɺҰཡͰऔΓѻ͑ΔΑ͏ͳͭ͘Γʹͯ͠ཉ͍͠ʯ▶ɹ దʹϞδϡʔϧׂ͞ΕͨΦϒδΣΫτಉ࢜Λແཧཧͭͳ͗߹Θ ɹɹͤͯϑϩϯτΤϯυ༻ͷҰͭͷσʔλΛ࡞Γ্͛Δɺطଘͷ֓೦ͷҠ ɹɹߦͰେͳ૿∠ ݱͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝ ∠ σβΠϯɾόοΫΤϯυͷมߋैੑͷܽམ
2. ઓज़తϥΠϒϥϦͷԽ∠ ݱͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝
ઓज़తϥΠϒϥϦͷԽ• ϥΠϒϥϦͷখ͞ͳ୯ҐͰτϨϯυมΘΔ• ܰྔͳ࣌ࠁૢ࡞Ͱਓؾͷ day.js 1 લʹͳ͔ͬͨ• HTTP ϦΫΤετ superagent ফ͑ɺ axios Ͳ͏ͳΔ͔• ։ൃͷͨΊͷϕʔεڥͩͬͯΑΓྑ͍ͷ͕Ͱͯ͘Δ• ܰྔόϯυϥͷ Parcel 1 લʹͳ͔ͬͨ• Vue.js ͷڧྗͳ։ൃࢧԉπʔϧͷ Vue CLI v3 1 લʹͳ͔ͬͨ∠ ݱͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝
ઓज़తϥΠϒϥϦͷԽ• ಛʹҠߦ͠ͳͯ͘ੜ͖͍ͯ͘͜ͱͰ͖Δ• ͱ͍͑ϝδϟʔಀ͢ͱޙ͕௧͍ɻಛʹෳࡶͳϥΠϒϥϦ͕υΩϡϝϯτ͕ࡶͳ߹ʹ௧͍• ઓུʹӨڹ͢ΔϥΠϒϥϦ͚ͩؾ߹Λ͍࣋ͬͯͬͯΔ߹͕େ• ཚΛݺΜͩ React v16 Ͱ͢Β·ͩ 1 લ• ࣮ Vue.js 1.0 ·ͩ 3 લɺ Vue.js 2.0 Ͱ 2 લɻ Vue.js2.5 ͰҰલ……ɻ∠ ݱͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝
3. ϓϩάϥϚͱΞʔΩςΫτͦΕͧΕͷྖҬͷ༥߹∠ ݱͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝
ϓϩάϥϚʹΑΔΞʔΩςΫνϟഁյ1. ઃܭɾ։ൃऀʹΑͬͯ࡞ΒΕ͍ͯͨ React / Redux ʹΑΔ SingleState Tree ͷϏδωεϩδοΫ2. ػೳվमͷͨΊʹৗʹ Redux ʹ࡞ΒΕͨ Architecture ͷ্Ͱߦ͏ඞཁ͕͋Δ3. ͱ͋Δ࣮ऀʹΑͬͯ࡞ΒΕͨςελϏϦςΟΛܽ͘ίʔυີ݁߹ͳՃϩδοΫͷ࣮͕ग़ݱ4. ▶ ͙͢ʹϚʔδ͢ΔΘ͚ʹ͍͔ͣɺͱ͍͑ೖΕͳ͍߹ͷ։ൃͷϩε௧͘ɺ௧ΈΛ͏τϨʔυΦϑΛڧཁ͞ΕΔ∠ ݱͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝ ∠ ϓϩάϥϚͱΞʔΩςΫτͦΕͧΕͷྖҬͷ༥߹
૯ͯ͡ͷ՝ͱͯ͠ͷҋͷຐज़ʹର͢ΔӴज़ ͷෆ∠ ݱͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝
ٻΊΒΕΔೋͭͷબࢶ1. ʮ࡞Γม͍͑͢ʯઃܭΛΈ্͛Δ• ʹष͍ͷʹϑλΛͰ͖Δઃܭʹͯ͠͠·͏• ࡞ۀऀʹΑΔ࣭ͳίʔυͷൃੜͳͲʹڧ͍• ϓϩάϥϚͱͯ͠ʮෛ͚ʯͱײ͡ΔՕॴग़ͯ͘Δ2. ʮ࡞Γม͑Δඞཁ͕ۃྗͳ͍ʯઃܭΛΈ্͛Δ• ٕज़ਫ४͕ߴ͍͔ͭ҆ఆͨ͠࡞ۀڥͷ্ͰϫʔΫ͢Δ• ಥવͷ֎తཁҼͳͲͷੑ͕͋·Γڧ͘ͳΒͳ͍ʢ٫ͬͯͱͳΔ߹ʣ∠ ݱͷ։ൃελΠϧͷϑϩϯτΤϯυʹ͓͚Δ՝
ݦࡏԽ͍ͯ͠Δ• UI ͷੈքͱػೳͷੈքΛ͏·͘Θ͚ΒΕ͍ͯͳͯ͘σβΠϯै͕ͯͭ͘͠Β͍• Flux ҰຊͷΞʔΩςΫνϟʹΑͬͯԼखͳίʔυ͕ੜ·Εͨ࣌ͷϦΧόʔ͕ͯͭ͘͠Β͍• ϥΠϒϥϦͷै͕͘͠ͳ͍͕ vuln Λߟ͑ΔͱඞཁͰ͋Γɺ໘ͰͭΒ͍∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
ͷΨϯΛ୳Δ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
ݦࡏԽ͍ͯ͠Δ• UI ͷੈքͱػೳͷੈքΛ͏·͘Θ͚ΒΕ͍ͯͳͯ͘σβΠϯै͕ͯͭ͘͠Β͍• Flux ҰຊͷΞʔΩςΫνϟʹΑͬͯԼखͳίʔυ͕ੜ·Εͨ࣌ͷϦΧόʔ͕ͯͭ͘͠Β͍• ϥΠϒϥϦͷै͕͘͠ͳ͍͕ vuln Λߟ͑ΔͱඞཁͰ͋Γɺ໘ͰͭΒ͍ྖҬΛ͚ͯࠩ͠ସ͑Մೳʹ͢Εղܾ͢Δ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
ݦࡏԽ͍ͯ͠Δ• UI ͷੈքͱػೳͷੈքΛ͏·͘Θ͚ΒΕ͍ͯͳͯ͘σβΠϯै͕ͯͭ͘͠Β͍• Flux ҰຊͷΞʔΩςΫνϟʹΑͬͯԼखͳίʔυ͕ੜ·Εͨ࣌ͷϦΧόʔ͕ͯͭ͘͠Β͍• ϥΠϒϥϦͷै͕͘͠ͳ͍͕ vuln Λߟ͑ΔͱඞཁͰ͋Γɺ໘ͰͭΒ͍ྖҬΛ͚ͯࠩ͠ସ͑Մೳʹ͢Εղܾ͢Δߟ͑ํ͔Βม͑Δඞཁ͕͋ΓΫϦςΟΧϧ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
ݦࡏԽ͍ͯ͠Δ• UI ͷੈքͱػೳͷੈքΛ͏·͘Θ͚ΒΕ͍ͯͳͯ͘σβΠϯै͕ͯͭ͘͠Β͍• Flux ҰຊͷΞʔΩςΫνϟʹΑͬͯԼखͳίʔυ͕ੜ·Εͨ࣌ͷϦΧόʔ͕ͯͭ͘͠Β͍• ϥΠϒϥϦͷै͕͘͠ͳ͍͕ vuln Λߟ͑ΔͱඞཁͰ͋Γɺ໘ͰͭΒ͍ྖҬΛ͚ͯࠩ͠ସ͑Մೳʹ͢Εղܾ͢Δߟ͑ํ͔Βม͑Δඞཁ͕͋ΓΫϦςΟΧϧྖҬΛ͚ͯࠩ͠ସ͑Մೳʹ͢Εղܾ͢Δ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
ΛݴޠԽͯ͠ʮ͏গ͠ϚγͳΓํʯΛ୳͢∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
ݱঢ়ͷ (͍ܰํ)• UI ύʔπͱػೳ͕ີ݁߹Ͱ͋ͬͨΓɺখ͞ͳύοέʔδʹৼΓճ͞ΕΔ• ύοέʔδͷಛఆͷ༻్͚ͩͰ͋ΕɺͦͷػೳΛར༻͍ͯ͠Δ͜ͱ͕Θ͔ΔΑ͏ʹͳ͍ͬͯΔ͖• ޙ͔Βೖͨ͠΄͏͕ྑ͍ఔͷ൚༻ੑΛٻΊΔͷΛͦͷ··ಡΈࠐΜͰ͍Δʹ͕͋Δ• = SOLID ݪଇʹର͢ΔҙࣝͷԼςελϒϧઃܭ DI ʹର͢ΔҙࣝͷԼ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
ݱঢ়ͷ (ॏ͍ํ)• Single source of truth ͷՁ؍͚ͩͰશͯΛ͓͏ͱ͢Δ• ୭͔ͷมߋ͕ΞϓϦέʔγϣϯશମʹӨڹ͔͚͠ͳ͍• Local State ඞཁѱͱͳΔ͕ͣɺͦΕ͕ఆ͞Ε͍ͯͳ͍• ݁Ռͱͯ͠ιʔείʔυͷӨڹൣғ͕େ͖͘ͳΔ• = ؔ৺ͷׂ౷࣏ͷߟ͑ํ͕ਁಁ͍ͯ͠ͳ͍∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
ଞΛࢀߟʹͭ͘Γม͑Δख๏Λߟ͑ΔΨϥύΰεԽͨ͠ϑϩϯτΤϯυ͔ΒઢΛҾ͖ɺόοΫΤϯυMicro services จ຺ΛࢀߟʹɺҎԼΛॏཁࢦඪͱͯ͠ҙ͍ࣝͯ͘͠• ʮׂ౷࣏ʯͷపఈ• ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ• ڞ௨ن֨ͱ༷ͷ੍ఆɾӡ༻յΕʹ͘͘͢ΔΑΓഁغ͘͢͢͠Δ͜ͱʹओ؟Λஔ͘ख๏∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
ଞΛࢀߟʹͭ͘Γม͑Δख๏Λߟ͑Δ• ʮׂ౷࣏ʯͷ֓೦Λίϯϙʔωϯτʹམͱ͠ࠐΜͰపఈ͢Δ• ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ• ڞ௨ن֨ͱ༷ͷ੍ఆɾӡ༻∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
ʮׂ౷࣏ʯͷపఈ1. Flux / ReduxͷීٴʹΑͬͯੜ·ΕͨʮFluxͷංେԽʯΛݟ͢• Flux / Redux άϩʔόϧมɾؔʹ͍ۙ͜ͱΛҙࣝ͠ɺνΣοΫϘοΫεͷҰͭʹ Redux Λ͏Α͏ͳ͜ͱ߇͑Δ• Flux / Redux རศੑͷ߹্υϝΠϯϞσϧͱඥ͕ͮ͘ଟ͍͕ɺຊ࣭తʹ྆ऀʹؔͳ͍͜ͱΛҙࣝ͢Δ• ͱ͍͑ݱ࣮ղͱͯ͠ɺ Redux Ducks ύλʔϯ namespacedVuex ͷߟ͑Λద༻͢Δ͜ͱͱ͠ɺੜ࢈ੑͱݟ௨͠ͷྑ͞ͷཱ྆ΛਤΔ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
ʮׂ౷࣏ʯͷపఈ2. ϑϩϯτΤϯυʹ͓͚Δ ”υϝΠϯ” ʹਆܦ࣭ʹͳΓ͗͢ͳ͍• ಘͯͯ͠ϑϩϯτΤϯυͷυϝΠϯ֓೦όοΫΤϯυͷͦΕUI ߹ʹҾ͖ͣΒΕΔͷͱͳΔ• ϑϩϯτΤϯυΛظతʹक͍ͬͯ͘߹ৗʹఆٛ͠ଓ͚ͯྑ͍͕ɺ ”ϑϩϯτΤϯυΛΞϓϦέʔγϣϯͷϓϨθϯςʔγϣϯΛ୲͍ͯ͠ΔྖҬͷҰͭ" ͱͯܰ͘͠ଊ͑Δͱྑ͍• ͱ͖ʹίϯϙʔωϯτͷػೳར༻ͯ͠ʮσʔλϞσϧʯͱʮDOMʯͷ௨৴ΛԁԽ͢Δ͜ͱʹ࠷దԽ͢Δ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
ʮׂ౷࣏ʯͷపఈ2. _3. Framework Component ͱ JavaScript ͷੈքͷڥքΛҙࣝ͢Δ• Framework Component ͕ඞཁͰͳ͍ՕॴͰ Pure JavaScriptͷੈքʹࣄΛدͤΔ• Pure JavaScript ͷྖҬɺͦͷϞδϡʔϧγεςϜͷΓग़͠͞Λ׆͔͠ɺੵۃతʹ SOLID ݪଇΛकΔΑ͏ͳίʔυͱ͍ͯ͘͠• ରͯ͠ Framework Component ɺprops ͳͲͰ͞ΕͨσʔλϞσϧͷ੍ޚ͓ΑͼϧοΫΞϯυϑΟʔϧͷཧʹઐ೦͢Δ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ࣍ͷࣄ࣮Λ౿·͑ͯɺϑϩϯτΤϯυΛ Micro services จ຺ʹ͓͚ΔαʔϏεͷେ͖͘ͳͬͨͷͰ͋Δͱղऍ͢Δ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ࣍ͷࣄ࣮Λ౿·͑ͯɺϑϩϯτΤϯυΛ Micro services จ຺ʹ͓͚ΔαʔϏεͷେ͖͘ͳͬͨͷͰ͋Δͱղऍ͢Δ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔMicro service ͷݪஶ https://martinfowler.com/articles/microservices.html
ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ࣍ͷࣄ࣮Λ౿·͑ͯɺϑϩϯτΤϯυΛ Micro services จ຺ʹ͓͚ΔαʔϏεͷେ͖͘ͳͬͨͷͰ͋Δͱղऍ͢Δ1. ಛఆͷ (User Interface) 1 ͭΛ࣋ͭΞϓϦέʔγϣϯશମ͔ΒΈͨ߹ʹখ͞ͳҰͭͷϨΠϠͰ͋Δ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔMicro service ͷݪஶ https://martinfowler.com/articles/microservices.html
ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ࣍ͷࣄ࣮Λ౿·͑ͯɺϑϩϯτΤϯυΛ Micro services จ຺ʹ͓͚ΔαʔϏεͷେ͖͘ͳͬͨͷͰ͋Δͱղऍ͢Δ1. ಛఆͷ (User Interface) 1 ͭΛ࣋ͭΞϓϦέʔγϣϯશମ͔ΒΈͨ߹ʹখ͞ͳҰͭͷϨΠϠͰ͋Δ2. ಠཱ͞ΕͨσϓϩΠϑϩʔͳͲΛཱ͓֬ͯ͠ΓɺΞϓϦέʔγϣϯશମ͔ΒΈͯಠཱతͳཧ͕Մೳͱͳ͍ͬͯΔ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔMicro service ͷݪஶ https://martinfowler.com/articles/microservices.html
ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ೝࣝ͢Δ࣍ͷࣄ࣮Λ౿·͑ͯɺϑϩϯτΤϯυΛ Micro services จ຺ʹ͓͚ΔαʔϏεͷେ͖͘ͳͬͨͷͰ͋Δͱղऍ͢Δ1. ಛఆͷ (User Interface) 1 ͭΛ࣋ͭΞϓϦέʔγϣϯશମ͔ΒΈͨ߹ʹখ͞ͳҰͭͷϨΠϠͰ͋Δ2. ಠཱ͞ΕͨσϓϩΠϑϩʔͳͲΛཱ͓֬ͯ͠ΓɺΞϓϦέʔγϣϯશମ͔ΒΈͯಠཱతͳཧ͕Մೳͱͳ͍ͬͯΔ3. (ݪଇͰͳ͍͕) JSON ΛσϑΝΫτͱ͢Δ௨৴༷ͱඇRDBґଘͷཁૉΛ͓࣋ͬͯΓɺଞͷαʔϏεͱͷ௨৴Λલఏͱ͍ͯ͠Δ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔMicro service ͷݪஶ https://martinfowler.com/articles/microservices.html
αʔϏεͱͯ͠ೝࣝͨ͠߹∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ• ʮIn ରͯ͠దͳ Out ͕ઃఆ͞ΕΔʯ͜ͱ• User Interface ͷૢ࡞ (In) ʹରͯ͠దͳ API Call ͱͦͷϨεϙϯε (Out) ͷϑΟʔυόοΫ͕ߦΘΕΔ͜ͱ• In / Out ͷσʔλߏ͕ಉ͡Ͱ͋Εɺ෦తͳίʔυ͕ഁغ͞ΕΑ͏͕࡞Γม͑ΒΕΑ͏͕ଞͷϨΠϠʔʹӨڹ͕ͳ͍͜ͱ• ϒϥοΫϘοΫεͳՕॴʹ͍ͭͯݱ࣮తͳਫ४ͰϞϊʹΛᛉͬͯྑ͍͜ͱ͕อূ͞Ε͍ͯΔͱଊ͑Δ͜ͱ͕Ͱ͖ΔMicro service ͷݪஶ https://martinfowler.com/articles/microservices.html
ଞΛࢀߟʹͭ͘Γม͑Δख๏Λߟ͑Δ• ʮׂ౷࣏ʯͷ֓೦Λίϯϙʔωϯτʹམͱ͠ࠐΜͰపఈ͢Δ• ϑϩϯτΤϯυΛͻͱͭͷαʔϏεͱͯ͠ͷೝࣝ͢Δ• ڞ௨ن֨ͱ༷ͷ੍ఆɾӡ༻∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
ڞ௨ن֨ͱ༷ͷ੍ఆɾӡ༻• ϑϩϯτΤϯυόοΫΤϯυ(BFF/MVC)ͱଓ͢ΔҰͭͷϨΠϠʔͱ͍͏લఏͷͱʹઃܭΛ͓͜ͳ͏• όοΫΤϯυ༝དྷͷڞ௨༷௨৴ن֨ɾϑΥʔϚοτͷߟ͑ΛWeb ϑϩϯτΤϯυʹద༻͍ͯ͘͠• Open API / Swagger• JSON Schema• gRPC (Not production ready) ← New!∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
༏Ґੑ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
༏Ґੑ - 1• ʮϑϩϯτΤϯυʹ͋Γ͕ͪͳԽʯͷݪҼΛదʹִ͠ɺมߋʹڧ͍ج൫Λங͘͜ͱ͕ՄೳͱͳΔ• ष͍ͷʹϑλΛ͍͢͠ڥ• ࣌ʹ߹Θͤͨ࠷৽ͷڥʹίετͰҠߦ͢Δ͜ͱ͕Ͱ͖Δ• ࣭ͳίʔυ͕ࠞࡏͯ͠͠·͏γνϡΤʔγϣϯʹஔ͍ͯɺͦͷӨڹൣғΛ࠷খݶʹ͑Δ͜ͱ͕Ͱ͖Δʹ Redux ʹͯ͢ΛࡌͤΔΑ͏ͳઃܭͱൺֱ͠ɺ ɹ ѹతʹϝεΛ͍ΕΔ͖Օॴ͕গͳ͍∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
༏Ґੑ - 2• ظతͳੜ࢈ੑͱظతͳੜ࢈ੑͷΣΠτௐ͕ԁ• ʮҰఆҎ্·Ͱͷ՝Λղܾ͢Δʹศར͕ͩͦΕҎ্ͱͳΔͱᐫͱͳΓ͍ٕ͢ज़ʯΛಋೖ͍͢͠• όοΫΤϯυͰ͍͏ͱɺʮRuby on Rails Λ͍ͬͯͯංେԽͨ͠ΒࣺͯΒΕΔʯͱߟ͍͑ͯ͘• ʮαʔϏεͱͯ͠ೝࣝ͢Δʯ߲Ͱड़ͨʮRDB ͷґଘ͔ΒಀΕΒΕ͍ͯΔʯͱ͍͏ಛΛଘʹ׆͔͢∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
༏Ґੑ - 3• ظతͳੜ࢈ੑͱظతͳੜ࢈ੑͷΣΠτௐ͕ԁ• ҎԼͷΑ͏ͳγνϡΤʔγϣϯͰίʔυ࣭ͷҡ͕͍࣋͠߹ʹɺ࣭ͳίʔυ͕ੜ·ΕΔ༨Λ࠷খݶʹ͑Δ• όοΫΤϯυ͔Βͷσʔλߏ͕ະఆٛ·ͨࡦఆதͰෆ໌ྎͳঢ়ଶͰͷઃܭίʔσΟϯά• ֎తཁҼʹΑͬͯઃܭʹΛଟׂ͘͘͜ͱ͕Ͱ͖ͳ͍ঢ়گͰͷઃܭίʔσΟϯάͳͲ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
՝ײ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
՝ײ - 1• Ҡߦ͢͠͞ͱطଘͷίʔυϕʔεͷྔʹෛͷ૬͕ؔ͋Δ• ৽ن෦ͷΈҰ෦͚ͩΛผΞʔΩςΫνϟʹͨ͠߹ʹࠞཚ͕ੜ͡ΔՄೳੑ͕ߴ͍• ϓϩδΣΫτϨϙδτϦɺ package ୯ҐͰ͜ͷํʹஔ͖͍͑ͯ͘͜ͱ͕ඞཁͱͳΔ• ٯʹݴ͑৽͘͠ϨϙδτϦΛੜ͢Α͏ͳ࡞ۀ͕͋Ε͙͢ʹऔΓೖΕ͍ͯ͘͜ͱ͕Ͱ͖Δ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
՝ײ - 2• ”ʰແཧ͕ޮ͘ʱ͜ͱอݥͰ͋ͬͯؾܰʹߦͬͯྑ͍ಈػʹͳΒͳ͍” ͱ͍͏จԽͷৢίετ• গ͠ͰະདྷΛࣺ͍ͯͯΔ͔͠Εͳ͍ͱ͍͏ҙࣝ• ϓϩάϥϚ͙͠͞ͷਰୀ• ͋ΔҙຯͰ Web ϓϩάϥϛϯάʹ͓͍ͯૄ͔ʹͳ͍ͬͯͨ(UNIXֶͷΑ͏ͳ)ϓϩάϥϜͷجຊݪଇΛऔΓͨ͠ͱऔΕΔ• ҰํͰ௨ৗͷ Web ϓϩάϥϛϯάΒ͍͠େنͷҙࣝײམͪΔͨΊɺࣗݾߠఆײϞνϕʔγϣϯཧ͕ඞཁ∠ ʮ࡞Γม͑ͯΏ͘ʯղܾख๏ΛͱΔ
ʮ͘क͍ͬͯ͘ʯະདྷͷࢥߟ• ʮ࡞Γม͑ΔʯϕʔεͰίʔυͷ݁߹Λམͱ͠ɺݱతͳΞʔΩςΫνϟʹ͚ۙͮͨ߹ɺҎԼͷΑ͏ͳઃܭՄೳʹݟ͑Δ
ʮ͘क͍ͬͯ͘ʯະདྷͷࢥߟ• ʮ࡞Γม͑ΔʯϕʔεͰίʔυͷ݁߹Λམͱ͠ɺݱతͳΞʔΩςΫνϟʹ͚ۙͮͨ߹ɺҎԼͷΑ͏ͳઃܭՄೳʹݟ͑Δ1. ྺ࢙ͷ͋Δ Backend ઌΛΏ͘ Mobile App จ຺ͰΘΕ͍ͯΔ Clean Architecture ͷϑϩϯτΤϯυͷద༻2. Backend Ͱղܾͷख๏ͱͯ͠ਁಁͭͭ͋͠ΔυϝΠϯͷ੍ఆٴͼͦΕʹج͍ͮͨઃܭͱ։ൃ
ʮ͘क͍ͬͯ͘ʯະདྷͷࢥߟ• ʮ࡞Γม͑ΔʯϕʔεͰίʔυͷ݁߹Λམͱ͠ɺݱతͳΞʔΩςΫνϟʹ͚ۙͮͨ߹ɺҎԼͷΑ͏ͳઃܭՄೳʹݟ͑Δ1. ྺ࢙ͷ͋Δ Backend ઌΛΏ͘ Mobile App จ຺ͰΘΕ͍ͯΔ Clean Architecture ͷϑϩϯτΤϯυͷద༻2. Backend Ͱղܾͷख๏ͱͯ͠ਁಁͭͭ͋͠ΔυϝΠϯͷ੍ఆٴͼͦΕʹج͍ͮͨઃܭͱ։ൃյΕͮΒ͘͢Δ͜ͱͰࠜຊతʹΛੜͮ͡Β͘͢Δ
ʮ͘क͍ͬͯ͘ʯະདྷͷࢥߟ• ʮ࡞Γม͑ΔʯϕʔεͰίʔυͷ݁߹Λམͱ͠ɺݱతͳΞʔΩςΫνϟʹ͚ۙͮͨ߹ɺҎԼͷΑ͏ͳઃܭՄೳʹݟ͑Δ1. ྺ࢙ͷ͋Δ Backend ઌΛΏ͘ Mobile App จ຺ͰΘΕ͍ͯΔ Clean Architecture ͷϑϩϯτΤϯυͷద༻2. Backend Ͱղܾͷख๏ͱͯ͠ਁಁͭͭ͋͠ΔυϝΠϯͷ੍ఆٴͼͦΕʹج͍ͮͨઃܭͱ։ൃϑϩϯτΤϯυʹෆద·ͨΦʔόʔΤϯδχΞϦϯάͱͳΓ͕ͪ
ϑϩϯτΤϯυʹ͓͚ΔυϝΠϯͱ• ϓϩδΣΫτʹΑͬͯऔΓѻ͍ํ͕ҧ͏͕ɺଟ͘ ”Flux /Redux ্ۭؒʹදݱ͞ΕͨϞδϡʔϧ” Λද͢∠ ʮ͘क͍ͬͯ͘ʯະདྷͷࢥߟ
ϑϩϯτΤϯυʹ͓͚ΔυϝΠϯͱ• ϓϩδΣΫτʹΑͬͯऔΓѻ͍ํ͕ҧ͏͕ɺଟ͘ ”Flux /Redux ্ۭؒʹදݱ͞ΕͨϞδϡʔϧ” Λද͢• ͕͜ͷυϝΠϯɺຊʹυϝΠϯͱݺΔ΄Ͳͷͷͳͷ͔∠ ʮ͘क͍ͬͯ͘ʯະདྷͷࢥߟ
ϑϩϯτΤϯυʹ͓͚ΔυϝΠϯͱ• ϓϩδΣΫτʹΑͬͯऔΓѻ͍ํ͕ҧ͏͕ɺଟ͘ ”Flux /Redux ্ۭؒʹදݱ͞ΕͨϞδϡʔϧ” Λද͢• ͕͜ͷυϝΠϯɺຊʹυϝΠϯͱݺΔ΄Ͳͷͷͳͷ͔• ϓϩάϥϚ͕ઃܭͨ͠ ίʔυ API ͱີ݁߹ ͳσʔλߏ∠ ʮ͘क͍ͬͯ͘ʯະདྷͷࢥߟ
ϑϩϯτΤϯυʹ͓͚ΔυϝΠϯͱ• ϓϩδΣΫτʹΑͬͯऔΓѻ͍ํ͕ҧ͏͕ɺଟ͘ ”Flux /Redux ্ۭؒʹදݱ͞ΕͨϞδϡʔϧ” Λද͢• ͕͜ͷυϝΠϯɺຊʹυϝΠϯͱݺΔ΄Ͳͷͷͳͷ͔• ϓϩάϥϚ͕ઃܭͨ͠ ίʔυ API ͱີ݁߹ ͳσʔλߏ• UI ཁ݅όοΫΤϯυଆͷ ”υϝΠϯ” ͷߟ͑ʹΑͬͯมΘΓ͏Δ∠ ʮ͘क͍ͬͯ͘ʯະདྷͷࢥߟ
ϑϩϯτΤϯυʹ͓͚ΔυϝΠϯͱ• ϓϩδΣΫτʹΑͬͯऔΓѻ͍ํ͕ҧ͏͕ɺଟ͘ ”Flux /Redux ্ۭؒʹදݱ͞ΕͨϞδϡʔϧ” Λද͢• ͕͜ͷυϝΠϯɺຊʹυϝΠϯͱݺΔ΄Ͳͷͷͳͷ͔• ϓϩάϥϚ͕ઃܭͨ͠ ίʔυ API ͱີ݁߹ ͳσʔλߏ• UI ཁ݅όοΫΤϯυଆͷ ”υϝΠϯ” ͷߟ͑ʹΑͬͯมΘΓ͏Δͱ͢Δʹऑ͗͢Δߏͱόϥϯεײ֮∠ ʮ͘क͍ͬͯ͘ʯະདྷͷࢥߟ
ੜ͖Δͷ൚༻ίʔυͱצ• ଟ͘ͷ߹ʹ͓͍ͯɺલड़ͷཧ༝ʹΑΓ strict ͳυϝΠϯ͍͠※ ࣮ફऀࣄ࣮͍ΔͨΊෆՄೳͳΘ͚Ͱͳ͍͕ɺίετ͕ߴ͍• ՝ײͰ͋ΔʮσβΠϯͱόοΫΤϯυυϝΠϯͷ֓೦มߋʯͳͲʹऑ͘ͳͬͯ͠·͏• ։ൃαΠΫϧͷҧ͏όοΫΤϯυͱฒΈἧ͑Δඞཁ͕ੜ·ΕΔ• UIɾσʔλϞσϧɾϏδωεϩδοΫͷ 3 छ͕ࠞࡏ͢ΔྖҬʹ͍ͭͯʮࣺͯ͢͞ʯΛॏࢹͨ͠΄͏͕ίετରޮՌʹ༏ΕΔ
ੜ͖Δͷ൚༻ίʔυͱצ• ʮϑϩϯτΤϯυͷίʔυશ͘Ҿ͖ܧ͛ͳ͍ͷ͔ʯͱ͍͏ͱͦ͏Ͱͳ͍• ׂ౷࣏ͷ࣌ʹಉ࣌ʹͨ͠ Framework Component ͔ΒΓग़͞Εͨ Pure JavaScript ͷίʔυͳͲଉ͕͍• ୯ҰΛक͓ͬͯΓςελϒϧͰ͋Γ֎తཁҼ͔Βಠཱ͞ΕͨίʔυɺϓϩδΣΫτݻ༗͚ͷ lodash ͷΑ͏ͳศརϢʔςΟϦςΟίʔυ API ΫϥΠΞϯτͳͲ
ੜ͖Δͷ൚༻ίʔυͱצ• ϑϩϯτΤϯυʮࣝͱܦݧ(=φϨοδ)ʯΛҾ͖ܧ͗ɺʮࢿ࢈ͱෛ࠴Λഁغ͢Δʯͱଊ͑Δ• લड़ͷ௨ΓϢʔςΟϦςΟίʔυ API ΫϥΠΞϯτɺ UI දࣔΛศརʹ͢ΔΑ͏ͳػೳΔ• UI มߋͱΞϓϦέʔγϣϯͷ֓೦ͷݟ͕͠ೖͬͨ߹ίʔυͷҎ্ΛϦϥΠτ͢Δ͜ͱଟ͋͘Δ• ͡Ί͔Βͦͷ৺࣋ͪͰ͍Δ΄͏͕Ժ͔ʹ։ൃ͕Ͱ͖Δ
Real world • ࠓճͷΑ͏ͳΞʔΩςΫνϟΛࢼͯ͠ΈΔ߹ɺ Vue.js + Vuex ʹΑΔ։ൃΛମݧ͢Δ͜ͱΛਪ͢Δ• Vuex ׂ౷࣏ʹରͯ͠ੵۃత• ͋Θͤͯ Vue.js ίϛϡχςΟׂ౷࣏ʹରͯ͠ੵۃత• Redux ʹ͍ͭͯ൱ఆ͍ͯ͠ͳ͍• ҰํͰɺίϛϡχςΟͷҙࢤͱͯ͠ҰۃूதʹدΓ͕ͪ
ঢ়ଶͷҰ෦͕ͻͱͭͷίϯϙʔωϯτ͚ͩʹଐ͍ͯ͠Δ߹ɺͦΕΛϩʔΧϧͷঢ়ଶͱ͓ͯͯ͘͠͠ͱΑ͍Ͱ͠ΐ͏ɻ͋ͳͨɺτϨʔυΦϑΛߟ্ྀͨ͠Ͱɺ͋ͳͨͷΞϓϦͷ։ൃχʔζʹ߹ܾͬͨఆΛ͖͢Ͱ͢ɻެࣜυΩϡϝϯτຊޠ༁ΑΓൈਮVuex
2%P*IBWFUPQVUBMMNZTUBUFJOUP3FEVY 4IPVME*FWFSVTF3FBDUTTFU4UBUF "5IFSFJTOPlSJHIUzBOTXFSGPSUIJTެࣜυΩϡϝϯτΑΓൈਮRedux
ͦͷଞຊͷؔ࿈ࢿྉʹ͍ͭͯ• 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
͓ΘΓʹ
Caution• ࣺ͍ͯ͢ͷܗͱ։ൃʹΤϯδχΞ͚ͩͰ࣮ݱෆՄ• ΠϚͱະདྷͷੜ࢈ੑʹͲΕ͚ͩΣΠτΛஔ͍͍ͯΔ͔ͷڞ༗• ฒͼʹͦΕΒʹཧղͷ͋ΔνʔϜɾ৫ܗ͕ඞཁ• ϑϩϯτΤϯυಛʹଞͱେ͖͘ҧ͏ͨΊɺಛ༗ͷҙࣝײΛͭ• શͯʹ͓͍ͯࠓճͷελΠϧͰྑ͍ͱ͍͏Θ͚Ͱͳ͍• ۀՁͷ͋ΔطଘίʔυܟҙΛ͍ͭͭ͜Ε͔ΒΛߟ͑Δ
ϑϩϯτΤϯυʮࣺͯΔʯ࣌ɻ
potato4d
mkeeda
amixedcolor
uhooi
hassaku63
ivargrimstad
subomi
kazuhitoyokoi
manfredsteyer
antonicg
monicaribeiro
jrsaruo
nozomiito
mraible
brad_frost
eileencodes
bluesmoon
lara
smashingmag
morganepeng
chrislema
sachag
malarkey
davidbonilla
maggiecrowley