Micro Frontends の理論と実践  -価値提供を高速化する真のマイクロサービスのあり方- / The Theory and Practice of Micro Frontends

.JDSP'SPOUFOETͷཧ࿦ͱ࣮ફ  Ձ஋ఏڙΛߴ଎Խ͢ΔਅͷϚΠΫϩαʔϏεͷ͋Γํ ᖒҪએ඙ !OPCVIJLPTBXBJ גࣜձࣾ'J/$5FDIOPMPHJFT "84%FW%BZ5PLZP

ࠓ೔͸શ͘͜Ε·Ͱͱ͸ҧ͏  ϚΠΫϩαʔϏεͷ࿩Λ͠·͢

"HFOEB !3 • ୈᶗ෦.JDSP'SPOUFOETͷཧ࿦ • ୈᶘ෦.JDSP'SPOUFOETͷ࣮ફ • ߟ࡯ • ·ͱΊ

.JDSP'SPOUFOET͕ղܾ͍ͨ͠໰୊ ͦͷͨΊͷٕज़

࣮ફ্ͨ͠Ͱͷ஌ݟ΍՝୊Λڞ༗͠·͢ ຊ൪౤ೖͷࢀߟʹͳΕ͹ʂ

Έͳ͞ΜϚΠΫϩαʔϏε͝ଘ஌Ͱ͔͢ʁ

ϚΠΫϩαʔϏεͷϝϦοτ͏͚ͯ·͔͢ʁ

Α͋͘ΔϚΠΫϩαʔϏε !8 4FSWFS 4FSWFS $MJFOU 4FSWFS αʔόʔ͸  গਓ਺ɾಠཱͨ͠  νʔϜ J04
  "OESPJE    8FC

Α͋͘ΔϚΠΫϩαʔϏε !9 4FSWFS 4FSWFS $MJFOU 4FSWFS গਓ਺ ಠཱͨ͠νʔϜ  ϚΠΫϩαʔϏε ࠷ߴʂ
J04   "OESPJE    8FC

Α͋͘ΔϚΠΫϩαʔϏε !10 4FSWFS 4FSWFS $MJFOU 4FSWFS গਓ਺ ಠཱͨ͠νʔϜ  ϚΠΫϩαʔϏε ࠷ߴʂ
͋Εʁ  ϚΠΫϩʁ

ΫϥΠΞϯταΠυ͸  ϚΠΫϩαʔϏεͷϝϦοτ͏͚ͯ·͔͢ʁ

ͱ͋Δ։ൃݱ৔ʢαʔόʔαΠυʣ !12 ͱ͋ΔϚΠΫϩαʔϏεͷ։ൃݱ৔  ʢαʔόʔαΠυʣ

ͱ͋Δ։ൃݱ৔ʢαʔόʔαΠυʣ !13 ࠷ߴͷاըΛࢥ͍͍ͭͨʂઈର౰ͨΔʂ

ͱ͋Δ։ൃݱ৔ʢαʔόʔαΠυʣ !14 ࠷ߴͷاըΛࢥ͍͍ͭͨʂઈର౰ͨΔʂ ͓΋Ζ͍ʂ͑͑΍Μʂ΍͍͖ͬͯʂ

ͱ͋Δ։ൃݱ৔ʢαʔόʔαΠυʣ !15 ΍͹͍ʂԶ΋࠷ߴͷاըΛࢥ͍͍ͭͨʂ  Զఱ࠽ʂઈର౰ͨΔʂ ͠͹Βͯ͘͠

ͱ͋Δ։ൃݱ৔ʢαʔόʔαΠυʣ !16 ࠷ߴͷاըΛࢥ͍͍ͭͯ͠·ͬͨΜ΍͚Ͳʂ

ͱ͋Δ։ൃݱ৔ʢαʔόʔαΠυʣ !17 ࠷ߴͷاըΛࢥ͍͍ͭͯ͠·ͬͨΜ΍͚Ͳʂ ͋ɺͦΕ͚ͬͪͩ͜Ͱ׬݁͠·͢Ͷʂ  ΍Γ·͢ʂ

ͱ͋Δ։ൃݱ৔ʢαʔόʔαΠυʣ !18 ͋ɺͦΕ͚ͬͪͩ͜Ͱ׬݁͠·͢Ͷʂ  ΍Γ·͢ʂ ʢϚΠΫϩαʔϏε࠷ߴ΍ɻɻɻʣ ࠷ߴͷاըΛࢥ͍͍ͭͯ͠·ͬͨΜ΍͚Ͳʂ

ͱ͋Δ։ൃݱ৔ʢΫϥΠΞϯταΠυʣ !19 ΫϥΠΞϯταΠυͷ৔߹

ͱ͋Δ։ൃݱ৔ʢΫϥΠΞϯταΠυʣ !20 ࠷ߴͷاըΛࢥ͍͍ͭͨʂઈର౰ͨΔʂ

ͱ͋Δ։ൃݱ৔ʢΫϥΠΞϯταΠυʣ !21 ࠷ߴͷاըΛࢥ͍͍ͭͨʂઈର౰ͨΔʂ ΁͍ʂ ΍͍͖ͬͯʂ

ͱ͋Δ։ൃݱ৔ʢΫϥΠΞϯταΠυʣ !22 ΍͹͍ʂԶ΋࠷ߴͷاըΛࢥ͍͍ͭͨʂ  Զఱ࠽ʂઈର౰ͨΔʂ ͠͹Βͯ͘͠

ͱ͋Δ։ൃݱ৔ʢΫϥΠΞϯταΠυʣ !23 ࠷ߴͷاըΛࢥ͍͍ͭͯ͠·ͬͨΜ΍͚Ͳʂ

ͱ͋Δ։ൃݱ৔ʢΫϥΠΞϯταΠυʣ !24 ΜʔɺӨڹൣғେৎ෉͔ͳʁ  ؾΛ͚ͭͳ͕Β΍Γ·͢ʂ ࠷ߴͷاըΛࢥ͍͍ͭͯ͠·ͬͨΜ΍͚Ͳʂ

ͱ͋Δ։ൃݱ৔ʢΫϥΠΞϯταΠυʣ !25 ΜʔɺӨڹൣғେৎ෉͔ͳʁ  ؾΛ͚ͭͳ͕Β΍Γ·͢ʂ ͋ΕʁϓϧϦΫΊͬͪΌίϯϑϦΫτ  ͯ͠Δʁʁ ࠷ߴͷاըΛࢥ͍͍ͭͯ͠·ͬͨΜ΍͚Ͳʂ

ͱ͋Δ։ൃݱ৔ʢΫϥΠΞϯταΠυʣ !26 ίϯϑϦΫτ΍͹͍ͬ͢ʂʂ ༏ઌॱҐͱQA޻਺ௐ੔͠·͢ʂ

ͱ͋Δ։ൃݱ৔ʢΫϥΠΞϯταΠυʣ !27 ίϯϑϦΫτ΍͹͍ͬ͢ʂʂ ༏ઌॱҐͱQA޻਺ௐ੔͠·͢ʂ ͋Εʁ ϢʔβʔʹϦϦʔεͰ͖ͳ͍

ϚΠΫϩαʔϏεͷϝϦοτΛ  े෼ʹ׆͔ͤͯͳ͍ʂ

ΫϥΠΞϯταΠυʹ΋  ϚΠΫϩαʔϏεਫ਼ਆΛʂʂ

ͦ͜Ͱ.JDSP'SPOUFOETʂʂ

ୈᶗ෦.JDSP'SPOUFOETͷཧ࿦

ϚΠΫϩαʔϏεͷ֓ཁ !32 • ʮϚΠΫϩαʔϏε͸ɺڠௐͯ͠ಈ࡞͢Δখ ن໛Ͱࣗ཯తͳαʔϏεͰ͢ɻʯ • ϏδωεͷڥքͱαʔϏεͷڥքΛἧ͑Δ͜ ͱͰιϑτ΢ΣΞͷਝ଎ͳఏڙΛ࣮ݱ͠Ϗδ ωεΛՃ଎͢Δ

ϚΠΫϩαʔϏεͷϝϦοτ !33 • σϓϩΠͷಠཱ • αʔϏε͕෼͔Ε͍ͯΔͷͰσϓϩΠ͕ࣗ༝ʹͰ͖Δ • ٕज़ҟ࣭ੑ • αʔϏεಛੑ͝ͱʹ࠷దͳٕज़બ୒͕Մೳ
• ٕज़తෛ࠴ΛҾ͖ͣΓʹ͍͘ • ߹੒Մೳੑ • αʔϏε͝ͱʹద੾ͳཻ౓ͷ"1*͕ެ։͞Ε͍ͯΔͨΊɺ࠶ར༻ੑ͕ߴ·Δ • ૊৫ͷࣗ཯ੑ • ίϛϡχέʔγϣϯύεΛݮΒ͠ɺҙࢥܾఆΛ͢͹΍͘͢Δ

ϚΠΫϩαʔϏεͷϝϦοτ !34 • ϙΠϯτߴڽूͱૄ݁߹ •ڽू౓ͷߴ͍αʔϏε͕ૄ݁߹Ͱ͋Δ͜ͱʹΑΓߴ͍ࣗ༝౓ɾࣗ཯ੑ ͕ಘΒΕΔ •ٯʹαʔϏε͕ີ݁߹ʹͳΔͱϚΠΫϩαʔϏεͷྑ͞͸ফ͑Δ

ϚΠΫϩαʔϏεͷϝϦοτ !35 • ϙΠϯτߴڽूͱૄ݁߹ •ڽू౓ͷߴ͍αʔϏε͕ૄ݁߹Ͱ͋Δ͜ͱʹΑΓߴ͍ࣗ༝౓ɾࣗ཯ੑ ͕ಘΒΕΔ •ٯʹαʔϏε͕ີ݁߹ʹͳΔͱϚΠΫϩαʔϏεͷྑ͞͸ফ͑Δ ͋ɺͦΕͬͪ͜ͷαʔϏεͰ͢ʂ  ΍Γ·͢ʂ ʢϚΠΫϩαʔϏε࠷ߴ΍ɻɻɻʣ

ϚΠΫϩαʔϏεͷϝϦοτ !36 • ϙΠϯτߴڽूͱૄ݁߹ •ڽू౓ͷߴ͍αʔϏε͕ૄ݁߹Ͱ͋Δ͜ͱʹΑΓߴ͍ࣗ༝౓ɾࣗ཯ੑ ͕ಘΒΕΔ •ٯʹαʔϏε͕ີ݁߹ʹͳΔͱϚΠΫϩαʔϏεͷྑ͞͸ফ͑Δ ίϯϑϦΫτ΍͹͍ͬ͢ʂʂ

݁߹౓Λ͍͔ʹԼ͛Δ͔͕  ϚΠΫϩαʔϏεͷ՝୊

ϚΠΫϩαʔϏεʹ͓͚ΔϑϩϯτΤϯυ !38 • ϚΠΫϩαʔϏεͷ౷߹ϨΠϠʔ •Ϣʔβʔ͕ݟΔͷ͸ͭͷ8FCը໘ •6*΍Ϣʔβʔͷମݧ͸౷߹͞Ε͍ͯΔ  ඞཁ͕͋Δ •݁߹͠΍͍͢ Side  Bar
Contents Header Footer

ϑϩϯτΤϯυϞϊϦε !39 • ϑϩϯτΤϯυϞϊϦε • όοΫΤϯυ͸ϚΠΫϩαʔϏεԽͯ͠ ͍ΔͷʹϑϩϯτΤϯυ͸ϞϊϦγοΫ ͳঢ়ଶ • ݁߹౓͕ߴ͘ϚΠΫϩαʔϏεͷྑ͞Λ
ফͯ͠͠·͏

ϑϩϯτΤϯυͷ݁߹౓Λ  Լ͛Δʹ͸Ͳ͏͢Ε͹Α͍͔ʁ

֤ϚΠΫϩαʔϏε͕ ϑϩϯτΤϯυ·ͰఏڙͰ͖Ε͹Α͍

.JDSP'SPOUFOETʂʂ

.JDSP'SPOUFOET !43 • ϑϩϯτΤϯυ·Ͱఏڙ͢ΔϚΠΫϩαʔϏε •֤όοΫΤϯυ͸+40/ͳͲͷσʔλͰ͸ͳ͘6*·ͰҰؾ௨؏ͯ͠ฦ͢

.JDSP'SPOUFOET !44 • ϑϩϯτΤϯυͰ΋αʔϏενʔϜ͝ͱͷ։ൃΛՄೳʹ͢Δ

ͨͱ͑͹ʁ

.JDSP'SPOUFOETͷྫ !46 • &$αΠτΛྫʹ αϯϓϧ͸NJDSPGSPOUFOETPSHΛ͓आΓ͍ͯ͠·͢ʣ

.JDSP'SPOUFOETͷྫ !47 • .JDSPTFSWJDFTΛಋೖ͍ͯ͠Δ •ϓϩμΫτνʔϜʢ঎඼Ұཡػೳʣ •νΣοΫΞ΢τνʔϜ ߪೖػೳʣ •ϨίϝϯυνʔϜʢ͓͢͢Ί঎඼ʣ

.JDSP'SPOUFOETͷྫ !48 • ֤νʔϜ͸ҟͳΔ,1*Λୡ੒͍ͨ͠ •঎඼ͷΫϦοΫ཰ʢϓϩμΫτνʔϜʣ •ߪೖ׬ྃ཰ʢνΣοΫΞ΢τνʔϜʣ •Ϩίϝϯσʔγϣϯਫ਼౓  ʢϨίϝϯυνʔϜʣ

.JDSP'SPOUFOETͷྫ !49 • ϑϩϯτΤϯυϞϊϦεͰى͖Δ໰୊ •σϓϩΠ͕ґଘ͢Δ •ҟͳΔٕज़ͷಋೖ͕ࠔ೉ •૊৫͕ґଘ͢Δ

.JDSP'SPOUFOETͷྫ !50 • .JDSP'SPOUFOETͷ৔߹ •֤νʔϜ͕ͦΕͧΕͷίϯϙʔωϯτ·Ͱฦ͢ https://noti.st/naltatis/HxcUfZ/micro-frontends-think-smaller-avoid-the-monolith-love-the-backend#sRI5XtT

.JDSP'SPOUFOETͷྫ !51 • ͭͷը໘ʹରͯ͠ϚΠΫϩαʔϏε͝ͱʹෳ਺ίϯϙʔωϯτΛ഑ஔ ͢Δ • ౷߹ϨΠϠʔ͕औΓ·ͱΊΔ https://noti.st/naltatis/HxcUfZ/micro-frontends-think-smaller-avoid-the-monolith-love-the-backend#sRI5XtT

.JDSP'SPOUFOETͷྫ !52 • ϝϦοτ •σϓϩΠ͕༰қʹͳΔ •ҟͳΔٕज़΋࠾༻Մೳ •֤νʔϜͷࣗ཯ੑ͕ߴ·Δ

औΓ૊Έͷࣄྫ !53 • औΓ૊ΜͰ͍Δاۀ •*,&" •4QPUJGZ •ͳͲ IKEA Spotify https://www.youtube.com/watch?v=4KVOuQDIfmw
https://www.slideshare.net/kevingoldsmith/how-spotify-builds-products-organization-architecture-autonomy-accountability

͑͑΍Μ

Ͱ΋Ͳ͏΍࣮ͬͯݱ͢Δͷ͔ʁ

.JDSP'SPOUFOETΛߏ੒͢Δٕज़ελοΫ !56 • ಉ͡ը໘ʹ֤ϚΠΫϩαʔϏε͕ίϯϙʔωϯτΛ഑ஔ͢Δ • JGSBNF •ੲͳ͕Βͷख๏ •஌Βͳ͍͏ͪʹ͜ΕΛಋೖͯ͠.JDSP'SPOUFOETΛ΍͍ͬͯΔ  Մೳੑ͕͋Δ •
8FC$PNQPOFOUT •৽͍͠8FCͷ࢓༷

8FC$PNQPOFOUTͱ͸ !57 • ʮ8FC$PNQPOFOUT͸ɺ࠶ར༻ՄೳͳΧελϜཁૉΛ࡞੒͠ɺ΢Σϒ ΞϓϦͷதͰར༻͢ΔͨΊͷɺҰ࿈ͷςΫϊϩδʔͰ͢ɻίʔυͷଞͷ ෦෼͔Βಠཱͨ͠ɺΧϓηϧԽ͞ΕͨػೳΛ࢖࣮ͬͯݱ͠·͢ɻʯ • $VTUPN&MFNFOUT • $VTUPN&WFOUT

$VTUPN&MFNFOUTͷྫ !58 • ։ൃऀ͕৽͍͠)5.-λάΛ࡞੒ͨ͠Γɺطଘ΍ଞͷσϕϩούʔ͕࡞ ੒ͨ͠ίϯϙʔωϯτΛ֦ுͨ͠Γ͢Δ͜ͱ͕Ͱ͖Δ"1* • ྫ(JU)VC •K2VFSZͰ͍ͭͬͯͨ͘$PNQPOFOUΛ$VTUPN&MFNFOUTͰஔ׵ <relative-time datetime="2018-08-21T21:44:05Z"
title="Aug 22, 2018, 6:44 AM GMT+9">  on Aug 22  </relative-time> https://githubengineering.com/removing-jquery-from-github-frontend/

• ߪങϘλϯΛग़͢ྫ $VTUPN&MFNFOUTͷྫ !59 class BlueBuy extends HTMLElement { constructor()
{ super(); this.innerHTML =   ɹɹɹ`<button type="button">buy for 66,00 €</button>`; } disconnectedCallback() { ... } } window.customElements.define('blue-buy', BlueBuy); <blue-buy></blue-buy>

.JDSP'SPOUFOETͷ࣮ݱํ๏ !60 { "id": 1, "name": "foobar", "title": “hooray!” }
JSON { "id": 1, "name": "foobar", "title": “hooray!” } JSON { "id": 1, "name": "foobar", "title": “hooray!” } JSON { "id": 1, "name": "foobar", "title": “hooray!” } JSON • ैདྷόοΫΤϯυ ͸֤.JDSPTFSWJDFT ͕σʔλΛฦ͢

.JDSP'SPOUFOETͷ࣮ݱํ๏ !61 <div> <h1>hooray!</h1> <p>foobar</p> </div> <div> <h1>hooray!</h1> <p>foobar</p> </div>
<div> <h1>hooray!</h1> <p>foobar</p> </div> <div> <h1>hooray!</h1> <p>foobar</p> </div> HTML • ϑϩϯτΤϯυ͸  ͭͷ6*ʹม׵ͯ͠ ͍ͨ

.JDSP'SPOUFOETͷ࣮ݱํ๏ !62 class BlueBuy extends HTMLElement { constructor() { super();
this.innerHTML = `<button ></button>`; } disconnectedCallback() { ... } } window.customElements.define('b lue-buy', BlueBuy); JavaScript <blue-buy></blue-buy> HTML • 8FC$PNQPOFOUTͷఆٛʢ+4 Λฦ͢ • ౷߹ϨΠϠʔ͸ͦΕΛ഑ஔ͢Δ͚ͩ

.JDSP'SPOUFOETͷཧ࿦·ͱΊ !64 • ϑϩϯτΤϯυϞϊϦεͷ՝୊Λղܾ͢Δ •σϓϩΠ͕ಠཱͰ͖ͳ͍ •ҟͳΔٕज़Λબ୒Ͱ͖ͳ͍ •૊৫ͷґଘ

.JDSP'SPOUFOETͷཧ࿦·ͱΊ !65 • .JDSP'SPOUFOET͸ϑϩϯτΤϯυ·Ͱఏڙ͢ΔϚΠΫϩαʔϏε

.JDSP'SPOUFOETͷཧ࿦·ͱΊ !66 • ٕज़తʹ͸JGSBNF΍8FC$PNQPOFOUTΛ࢖࣮ͬͯݱ class BlueBuy extends HTMLElement { constructor()
{ super(); this.innerHTML = `<button ></button>`; } disconnectedCallback() { ... } } window.customElements.define('b lue-buy', BlueBuy); JavaScript <blue-buy></blue-buy> HTML

.JDSP'SPOUFOET͸  ϑϩϯτΤϯυͷ݁߹౓ΛԼ͛  ϚΠΫϩαʔϏεͷϝϦοτΛ׆͔͢ʂ

.JDSPTFSWJDFT.JDSP'SPOUFOET

ձࣾ঺հ !70 •'J/$5FDIOPMPHJFT͸ϔϧεέΞͷϓϥοτϑΥʔϜΛӡӦ͍ͯ͠Δ •'J/$ΞϓϦɺ&$ɺاۀ޲͚ͷ݈߁ιϦϡʔγϣϯͳͲΛఏڙ •ϔϧεέΞΞϓϦϥϯΩϯά/P

ձࣾ঺հ !71 •ϓϥοτϑΥʔϜΛ࠷଎Ͱఏڙ͢ΔͨΊʹϚΠΫϩαʔϏεΛऔΓೖΕ ͍ͯΔ •ࠓճ.JDSP'SPOUFOETΛ࣮ફͯ͠ΈͨͷͰ஌ݟΛڞ༗͠·͢

ୈᶘ෦.JDSP'SPOUFOETͷ࣮ફ

ϏδωεͷഎܠGJODBQQXFC !73 • 'J/$ʹ͸ੲ͔ΒGJODBQQXFCͱ͍͏ΞϓϦͷXFC൛͕͋Δ •4JOHMF1BHF"QQMJDBUJPO 41" Ͱ3FBDUKT੡ •೥൒͙Β͍લ͔Β͋ΔׂͱϨΨγʔͳϑϩϯτΤϯυ

ϏδωεͷഎܠϐΞɾϘʔφεػೳ !74 • ࣾһʹ೔ࠒͷײँΛ఻͑Δ͓ྱϙΠϯτ෇༩ػೳΛࣾ಺πʔϧͱͯ͠࡞ ੒͢Δ͜ͱͱͳͬͨ

ϏδωεͷഎܠϐΞɾϘʔφεػೳ !75 • ϔϧεέΞͷϓϥοτϑΥʔϜΛ໨ࢦ͢'J/$ͱͯ͠͸ࣾ಺πʔϧ  ͱ͸͍͑ɺϐΞɾϘʔφεػೳ΋GJODBQQXFC্ʹͷ͓͖͍ͤͯͨ • ී௨ʹ3FBDUΛ࣮૷͢Δ͜ͱ΋ߟ͑ΒΕΔ͕ɺ.JDSP'SPOUFOETΛ࠾༻  ͨ͠

ͳͥ.JDSP'SPOUFOETΛ࠾༻͔ͨ͠ !76 • ී௨ʹ3FBDUͰ͍͍ͷͰ͸ʁ •όοΫΤϯυ͸3BJMTͰ৽্ཱͪ͛͘͠Δ •νʔϜͷٕज़ελοΫతͱͯ͠3FBDUPO3BJMTͷϊ΢ϋ΢͕ཷ·ͬͯ  ͍ͨ •ϨΨγʔͳGJODBQQXFCͷίʔυϕʔεΛ͋·Γେ͖ͨ͘͘͠ͳ͔ͬͨ •ͭ·Γ৽چ3FBDUͱ͍͏ٕज़ҟ࣭ੑ͕͋Δঢ়ଶ

ͳͥ.JDSP'SPOUFOETΛ࠾༻͔ͨ͠ !77 • Ұ౓.JDSP'SPOUFOETͷج൫͕੔͑͹ •ࠓޙ΋͍ΖΜͳαʔϏε͕ίϯϙʔωϯτΛఏڙͰ͖Δ •ඞཁʹԠͯ͡কདྷ؆୯ʹSFQMBDF͢Δ͜ͱ΋Ͱ͖Δ •֤αʔϏε͝ͱʹಠཱͯ͠վम͕Ͱ͖Δ • ٕज़ҟ࣭ੑ߹੒Մೳੑ͕͋Δͱ͜ΖʹϝϦοτ͕͋Δ  .JDSP'SPOUFOETΛ࠾༻

։ൃதͷը໘ !78 • ։ൃதͷ࣮ࡍͷը໘ͱαϯϓϧίʔυ

ίʔυΠϝʔδ !79 • ϐΞɾϘʔφεଆ class TimelineComponents extends HTMLElement { async
connectedCallback() { const mountPoint = document.createElement('span'); const shadow = this.attachShadow({ mode: 'open' }); shadow.appendChild(mountPoint); const currentUser = await UserRepository.fetch(); render( <React.Fragment> <link rel="stylesheet" type="text/css" href="http://localhost:3020/main.css"/> <Timeline currentUser={currentUser}/> </React.Fragment>, mountPoint, ); retargetEvents(shadow); } } customElements.define(‘peerbonus—timeline’, TimelineComponents);

ίʔυΠϝʔδ !80 • GJODBQQXFCଆ import React from 'react'; class PeerBonus
extends React.Component { render() { return ( <div className="l-main_contents_area"> <peerbonus-timeline></peerbonus-timeline> </div> ); } } export default PeerBonus;

࣮ફʹ͓͍ͯ௚໘ͨ͠՝୊ !81 • ࣮ࡍʹͲͷΑ͏ͳ໰୊ʹ͍ͭͯऔΓ૊Μͩͷ͔Λ঺հ͠·͢ • Ϗϧυͷ໰୊ • DBDIFCVTUJOH • Ϣʔβʔମݧ౷߹ͷ՝୊
• άϩʔόϧͳঢ়ଶͷڞ༗ • ը໘ભҠ • ίϯϙʔωϯτؒͷ࿈ܞ • ϥΠϒϥϦͷ໰୊ • ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

DBDIFCVTUJOHͷ໰୊ !82 • Ϗϧυͷ໰୊ •DBDIFCVTUJOH • Ϣʔβʔମݧ౷߹ͷ՝୊ • άϩʔόϧͳঢ়ଶͷڞ༗ •
ը໘ભҠ • ঢ়ଶ؅ཧ • ϥΠϒϥϦͷ໰୊ • ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

എܠ !83 • 41"͸Ϗϧυ͕ඞཁ • ผͷϑΝΠϧΛJNQPSU͢Δ࢓༷͕࠷ۙ·Ͱͳ͔ͬͨͷͰɺϥΠϒϥϦ Ͱ͕Μ͹ͬͯCVOEMFͯ͠ຕʹ͍ͯ͠Δ •Ұ൪࢝ΊʹಡΈࠐ·ΕΔIUNM JOEFYIUNM
ͰϏϧυͨ͠ϑΝΠϧΛࢦఆ ͯ͠ಡΈࠐΉΑ͏ʹ͢Δ ϒϥ΢β HTML JS index.html bundle.js JS JS JS Ϗϧυ styleλά

എܠ !84 • Ϗϧυ͢Δͨͼʹҧ͏ϑΝΠϧ໊Ͱఏڙ͢Δඞཁ͕͋Δɻ •ಉҰϑΝΠϧ໊ͩͱϒϥ΢βͷΩϟογϡ͕ޮ͍ͯมߋ͕൓ө͞Εͳ͍ ͜ͱ͕͋Δ •ϦϦʔε࣌ʹࠔΔ ϒϥ΢β HTML JS
index.html new bundle.js JS JS JS Ϗϧυ styleλά JS cached bundle.js ΩϟογϡΛࢀর

എܠ !85 • ௨ৗϑΝΠϧ໊ʹϥϯμϜͳจࣈྻʢDIVOLIBTI Λ͚ͭͯɺϏϧυ͝ͱ ʹҟͳΔϑΝΠϧ໊ʹͳΔΑ͏ʹ͢Δ ϒϥ΢β HTML JS index.html
new bundle-ac2c5.js JS JS JS Ϗϧυ styleλά JS cached bundle-c1df8.js ࢀর͞Εͳ͍

՝୊ !86 • ͭͷαʔϏε಺ͰϏϧυ΋JOEFYIUNMͷఏڙ΋͍ͯ͠Δͱ͖͸໰୊ͳ͍ •DIVOLIBTI͕Θ͔ΔͷͰɺJOEFYIUNMଆͰͦΕΛࢦఆͯ͠΍Δ͚ͩ HTML JS index.html bundle-ac2c5.js <script
src=“./bundle- ac2c5.js”></script>

՝୊ !87 • .JDSP'SPOUFOETͷ৔߹ •αʔϏε͕6*ఏڙଆʢJOEFYIUNMଆ ͱϏϧυଆͰΘ͔Ε͍ͯΔ •Ϗϧυ͝ͱʹDIVOLIBTI෇͖ͷϑΝΠϧ໊Λڞ༗͢Δͷ͕೉͍͠ HTML JS index.html
bundle-ac2c5.js <script src=“./bundle-?????.js”>  </script>

ݕ౼ !88 • NBOJGFTUKTPOΛ࢖͑͹औಘͰ͖Δ •ϑΝΠϧ໊ͱDIVOLIBTI෇͖ϑΝΠϧ໊ͷؔ࿈Λද͢KTPOϑΝΠϧ •ϑΝΠϧ໊ΛLFZͱ࣮ͯ͠ࡍͷDIVOLIBTI෇͖ͷϑΝΠϧ໊ΛͨͲΔ͜ ͱ͕Ͱ͖Δ HTML JS index.html
bundle-ac2c5.js { "bundle.js": "bundle-ac2c5.js" } <script src=“./bundle-ac2c5.js”>  </script> manifest.json

ରԠ !89 • NBOJGFTUKTPOΛ࢖ͬͯGJMF໊Λऔಘ͢Δ • औಘͷλΠϛϯά͸JOEFYIUNMΛฦ͢લʹαʔόʔαΠυͰߦ͏ •TDSJQUλάΛຒΊࠐΜͩঢ়ଶͰϒϥ΢βʹฦ͢

άϩʔόϧͳঢ়ଶͷڞ༗ !90 • Ϗϧυͷ໰୊ • DBDIFCVTUJOH • Ϣʔβʔମݧ౷߹ͷ՝୊ •άϩʔόϧͳঢ়ଶͷڞ༗ •
ը໘ભҠ • ίϯϙʔωϯτؒͷ࿈ܞ • ϥΠϒϥϦͷ໰୊ • ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

എܠ !91 • άϩʔόϧʹڞ༗͍ͨ͠ঢ়ଶ͕ଘࡏ͢Δ • ೝূͷঢ়ଶ • Ϣʔβʔجຊ৘ใ • FUD

՝୊ !92 • αʔϏεͷૄ݁߹Λอͬͨ··Ͳ͏ڞ༗͢Δ͔ • Ξϯνύλʔϯڞ༗σʔλετΞ • ڊେͳڞ༗"1*ʹͳΔ • มߋ͕ࠔ೉
ೝূ Micro Frontends Micro Frontends localStorage Write Read Ξϯνύλʔϯ: ڞ༗σʔλετΞ

ݕ౼௨ৗͷ41"ͷ৔߹ 'MVY !93 ೝূ Component Component Store Dispatcher notify state
change change state Action (loggedIn)

ରԠ.JDSP'SPOUFOETͷ৔߹ !94 ೝূ Micro Frontends Micro Frontends Store Dispatcher change
state ౷߹ϨΠϠʔ Micro Frontends Custom Events (globalStateChanged) Custom Events (loggedIn)

ରԠ.JDSP'SPOUFOETͷ৔߹ !95 ೝূ Micro Frontends Micro Frontends Store Dispatcher change
state ౷߹ϨΠϠʔ Micro Frontends Custom Events (globalStateChanged) Custom Events (loggedIn) 'MVYͷΞφϩδʔͰղܾͰ͖Δʂ

ը໘ભҠ !96 • Ϗϧυͷ໰୊ • DBDIFCVTUJOH • Ϣʔβʔମݧ౷߹ͷ՝୊ • άϩʔόϧͳঢ়ଶͷڞ༗
•ը໘ભҠ • ίϯϙʔωϯτؒͷ࿈ܞ • ϥΠϒϥϦͷ໰୊ • ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

എܠ !97 • ϐΞɾϘʔφεը໘͔ΒͦΕҎ֎ͷը໘ʹભҠ͍ͨ͠ •۩ମతʹ͸ϢʔβʔͷϓϩϑΟʔϧͳͲΛطଘͷը໘ʹભҠ͍ͤͨ͞

՝୊ !98 • ී௨ʹBλάͰભҠͯ͠͠·͏ͱ41"ͱͯ͠ͷભҠ͕Ͱ͖ͳ͘ͳͬͯ  ͠·͏ •IJTUPSZBQJͰભҠͤ͞Δඞཁ͕͋Δ

՝୊ !99 • ֤αʔϏε͕ࣗ༝ʹભҠͤ͞ΔͱΧΦε •XJOEPXMPDBUJPOͱ͔XJOEPXIJTUPSZͱ͔࢖͏ͱࣗ༝ʹը໘ભҠͰ͖Δ •ΞϓϦέʔγϣϯ֎෦΁ભҠ͢Δ͜ͱ΋Ͱ͖ΔΑ͏ʹͳΔ  • ը໘ભҠ΋౷߹ϨΠϠʔͷ੹຿ͱͯ͠؅ཧͨ͠΄͏͕͍͍

ཹҙ఺ !100 • 8FCͷମݧͱἧ͑Δ •BλάΛ࢖͏ •ӈΫϦοΫͰλϒ͕։͚Δඞཁ͕͋Δ •CVUUPOλά౳Λ࢖͏ͱ8FCͷମݧͱ੔߹͠ͳ͍ʂ

ରԠ !101 • ී௨ʹBλάΛ࢖͏ • IJTUPSZBQJͰભҠ͢ΔͨΊʹ౷߹ϨΠϠʔʹભҠઌΛFWFOUΛ౤͛Δ • ౷߹ϨΠϠʔ͸FWFOU͔ΒભҠઌͷ৘ใΛड͚औͬͯը໘ભҠ͢Δ

ରԠ !102 • ࣮૷ΠϝʔδϦϯΫ༻ͷίϯϙʔωϯτ class FawLink extends Component { handleClick
= (e) => { const { to } = this.props; e.preventDefault(); const event = new CustomEvent('transition', { detail: { to, }, }); window.dispatchEvent(event); }; render() { const { to, children } = this.props; return ( <a href={to} onClick={this.handleClick}> {children} </a> ); } } export default FawLink;

= (e) => { const { to } = this.props; e.preventDefault(); const event = new CustomEvent('transition', { detail: { to, }, }); window.dispatchEvent(event); }; render() { const { to, children } = this.props; return ( <a href={to} onClick={this.handleClick}> {children} </a> ); } } export default FawLink; BλάͰఆٛ

= (e) => { const { to } = this.props; e.preventDefault(); const event = new CustomEvent('transition', { detail: { to, }, }); window.dispatchEvent(event); }; render() { const { to, children } = this.props; return ( <a href={to} onClick={this.handleClick}> {children} </a> ); } } export default FawLink; $VTUPN&WFOUΛఆٛ͠ ͯ౤͛Δ

ରԠ !105 • ࣮૷Πϝʔδ౷߹ϨΠϠʔଆ import React from 'react'; import {
browserHistory } from 'react-router'; class Peerbonus extends React.Component{ componentDidMount() { window.addEventListener('transition', (e) => { browserHistory.push(e.detail.to); }); } render() { return ( <div className="l-main_contents_area"> <peerbonus-timeline></peerbonus-timeline> </div> ); } } export default Peerbonus; &WFOU͔ΒભҠઌΛ  ड͚औͬͯભҠ

ঢ়ଶ؅ཧ !106 • Ϗϧυͷ໰୊ • DBDIFCVTUJOH • Ϣʔβʔମݧ౷߹ͷ՝୊ • άϩʔόϧͳঢ়ଶͷڞ༗
• ը໘ભҠ •ίϯϙʔωϯτؒͷ࿈ܞ • ϥΠϒϥϦͷ໰୊ • ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

എܠ !107 • ࿈ಈ͢Δͭͷίϯϙʔωϯτ͕͋Δ ౤ߘϘλϯΛԡ͢ͱมߋ͕൓ө͞ΕΔ

എܠ !108 • ௨ৗͷ41"ͷઃܭύλʔϯͩͱຕͷΦϒδΣΫτΛ4JOHMFTPVSDFPG USVUIͱͯ͠ঢ়ଶ؅ཧ͢Δ 3FEVYͷHMPCBM4UBUFͳͲ { givenPoints: 200, sendablePoints:
400, }

ݕ౼ !109 • .JDSP'SPOUFOETʹ͓͚Δίϯϙʔωϯτؒͷ࿈ܞύλʔϯ •ύλʔϯαʔϏεͷͱ͖ •ύλʔϯෳ਺αʔϏεΛ·͕ͨΔͱ͖

ݕ౼αʔϏεͷͱ͖ !110 • ͭͷαʔϏε͕ෳ਺ͷ$PNQPOFOUTΛฦ͢ • ͦΕΒ͕࿈ಈͯ͠ಈ͘

ݕ౼αʔϏεͷͱ͖ !111 • ಉҰαʔϏεͳͷͰͭͷHMPCBM4UBUFʹͭͳ͕ͬͨܗͰఏڙ͢Δ͜ͱ͕  Մೳ Component1 Component2 { state1: 1,
state2: 2, }

ݕ౼ෳ਺αʔϏεΛ·͕ͨΔͱ͖ !112 • $VTUPN&WFOUTΛ࢖͏ •ίϯϙʔωϯτ͸FWFOUΛͳ͛Δ •౷߹ϨΠϠʔ͸ΠϕϯτΛ౤͛௚͢ •ଞͷίϯϙʔωϯτʹ௨஌͞ΕΔ Component1 Component2 CustomEvents

ରԠ !113 • ಉҰαʔϏεͳͷͰͭͷHMPCBM4UBUFʹͭͳ͕ͬͨܗͰఏڙ͢Δ const store = configureStore(); class XCountButton
extends HTMLElement { connectedCallback() { const mountPoint = document.createElement('span'); const shadow = this.attachShadow({ mode: 'open' }) shadow.appendChild(mountPoint); render( <Provider store={store}> <CountButton /> </Provider>, mountPoint ); retargetEvents(shadow) } } customElements.define('x-count-button', XCountButton); class XCountDisplay extends HTMLElement { connectedCallback() { const mountPoint = document.createElement('span'); this.attachShadow({ mode: 'open' }).appendChild(mountPoint); render( <Provider store={store}> <CountDisplay /> </Provider>, mountPoint ); } } customElements.define('x-count-display', XCountDisplay);

ରԠ !114 • ڞ௨ͷTUPSFΛఆٛ͠QSPWJEFSʹ౉͢ const store = configureStore(); class XCountButton
extends HTMLElement { connectedCallback() { const mountPoint = document.createElement('span'); const shadow = this.attachShadow({ mode: 'open' }) shadow.appendChild(mountPoint); render( <Provider store={store}> <CountButton /> </Provider>, mountPoint ); retargetEvents(shadow) } } customElements.define('x-count-button', XCountButton); class XCountDisplay extends HTMLElement { connectedCallback() { const mountPoint = document.createElement('span'); this.attachShadow({ mode: 'open' }).appendChild(mountPoint); render( <Provider store={store}> <CountDisplay /> </Provider>, mountPoint ); } } customElements.define('x-count-display', XCountDisplay);

ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM !115 • Ϗϧυͷ໰୊ • DBDIFCVTUJOH • Ϣʔβʔମݧ౷߹ͷ՝୊ •
άϩʔόϧͳঢ়ଶͷڞ༗ • ը໘ભҠ • ίϯϙʔωϯτؒͷ࿈ܞ • ϥΠϒϥϦͷ໰୊ •ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

എܠ !116 • 8FCαʔϏεͱͯ͠ఏڙ͢ΔͷͰɺͰ͖Δ͚ͩଟ͘ͷϒϥ΢βʹରԠ͠ ͍ͨ designed by Pixel perfect from
Flaticon https://www.flaticon.com/packs/browsers

໰୊ !117 • 8FC$PNQPOFOUTͷϒϥ΢βͷରԠঢ়گʹ͸͕ࠩ͋Δ • *&ͳͲҰ෦ͷݹ͍ϒϥ΢β͸αϙʔτ͍ͯ͠ͳ͍ •๏ਓͷ͓٬༷ʹ͸ॏཁ https://www.webcomponents.org/

ରԠ !118 • QPMZGJMMΛ͍Εͨ •IUUQTHJUIVCDPNXFCDPNQPOFOUTXFCDPNQPOFOUTKT • QPMZGJMMͱ͸ɺ࠷ۙͷػೳΛαϙʔτ͍ͯ͠ͳ͍ݹ͍ϒϥ΢βʔͰɺͦ ͷػೳΛ࢖͑ΔΑ͏ʹ͢ΔͨΊͷίʔυͰ͢ɻେ఍͸΢Σϒ্ͷ +BWB4DSJQUͰ͢ɻ
• $VTUPN&MFNFOUT͸ಛʹ໰୊ͳ͘ಈ͘ •ͨͩ͠4IBEPX%0.͚ͩ͸Ұ෦ະରԠ

3FBDUͰTIBEPX%0.Λ͔ͭ͏໰୊ !119 • Ϗϧυͷ໰୊ • DBDIFCVTUJOH • Ϣʔβʔମݧ౷߹ͷ՝୊ • άϩʔόϧͳঢ়ଶͷڞ༗
• ը໘ભҠ • ίϯϙʔωϯτؒͷ࿈ܞ • ϥΠϒϥϦͷ໰୊ • ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

എܠ !120 • 4IBEPX%0. •%0.ͷΧϓηϧԽΛߦ͏͜ͱ͕Ͱ͖Δ8FC$PNQPOFOUTͷ࢓༷ͷͭ •$44͕֎෦͔Βִ཭Ͱ͖ͨΓͯ͠ศར • 3FBDUͱಉ࣌ʹ࢖͑ͳ͍

໰୊ !121 • 3FBDUΛ4IBEPX%0.ͰXSBQͨ͠ͱ͖ʹ$MJDLFWFOU͕൓Ԡ͠ͳ͘ͳΔ

ݕ౼ !122 • 3FBDUͷFWFOUͷϋϯυϦϯάํ๏ʹෛ࠴͕͋Δ • *TTVF΋ཱ͍ͬͯΔɺ3FBDU'JSFͱ͍͏ෛ࠴ղফϓϩδΣΫτʹ΋  Ҋͱͯ͠ొ࿥͞Ε͍ͯΔ

ରԠ !123 • ϥΠϒϥϦͰճආՄೳ •SFBDUTIBEPXEPNSFUBSHFUFWFOUT • 3FBDUຊମͷվम·ͪʣ • 1PMZGJMMͷ͜ͱ΋ߟ͑Δͱ·ͩૣͦ͏ •
ଞʹ΋IUUQTHJUIVCDPNTLBUFKTWBMͳͲ͕͋ΔΑ͏ͳͷͰৄ͍͠ํ ͍ͨΒڭ͍͑ͯͩ͘͞ʂ

ߟ࡯ !125 • .JDSP'SPOUFOET͸࣮ઓ౤ೖՄೳ •αʔϏεόοΫΤϯυ͔Β6*·Ͱ୲౰Ͱ͖ΔͷͰαʔϏεͷϩδοΫ ͕෼ࢄ͠ͳ͍ •վળ͕༰қ •࠶ར༻ੑ͕ߴ·Δ • ։ൃ͸ಠཱͯ͠ϦϦʔεͰ͖ΔͷͰνʔϜͷࣗ཯ੑ͕ߴ·Δ

ߟ࡯ !126 • #''ͱͷҧ͍ •ू໿͍ͯ͠ΔϨΠϠʔ͕ҧ͏

ߟ࡯ !127 4FSWFS Backend Frontend αʔόʔͰ)5.-΋Ϩϯμ Ϧϯά͍ͯͨ͠

ߟ࡯ !128 Backend Frontend $MJFOU 4FSWFS ΫϥΠΞϯτ͕Ϧονʹ  ͳΓ෼཭

ߟ࡯ !129 Backend Frontend $MJFOU 4FSWFS 4FSWFS 4FSWFS αʔϏε͕ෳࡶԽ͠ɺ ϚΠΫϩʔαʔϏεʹ

ߟ࡯ !130 Backend Frontend $MJFOU 4FSWFS 4FSWFS 4FSWFS ϦΫΤετ͕૿͑Δ αʔϏε͝ͱʹҟͳΔΦϒ
δΣΫτ  #''

ߟ࡯ !131 Backend Frontend $MJFOU 4FSWFS 4FSWFS 4FSWFS #'' ϦΫΤετ͕૿͑Δ
αʔϏε͝ͱʹҟͳΔΦϒ δΣΫτ  #''

ߟ࡯ !132 Backend Frontend 4FSWFS 4FSWFS 4FSWFS ϑϩϯτΤϯυͷෳࡶ͞ʹ ରॲ.JDSP'SPOUFOET

ߟ࡯ࠓޙͷ࿩ !133 • ύϑΥʔϚϯε͸໰୊͕࢒Γͦ͏ •443 4FSWFSTJEFSFOEFSJOH ͸͋ͬͨ΄͏͕͍͍ •͜Ε·Ͱͷ8FCͷ஌ݟͰഓΘΕͨύϑΥʔϚϯεɾνϡʔχϯά͸  ඞཁ •
6*ͷ౷Ұ • ςετ •%0.#BTFE$%$ $POTVNFSESJWFODPOUSBDU UFTUJOH

·ͱΊ !134 • .JDSP'SPOUFOET͸.JDSPTFSWJDFTͷຊདྷͷྑ͞Λൃش͠ɺϑϩϯτΤϯ υͷ݁߹ੑΛԼ͛Δ • Ұॹʹݚڀͯ͘͠ΕΔ஥ؒΛ୳ͯ͠·͢ •ҰॹʹϚΠΫϩϑϩϯτΤϯυΛ΍Γ͍ͨํʢࣾһɾۀ຿ҕୗɾ෭ۀ Մʣ͸ɺ%.͍ͩ͘͞ʂ5XJUUFS!OPCVIJLPTBXBJ

ࣗݾ঺հ !135 • ໊લ: ᖒҪ એ඙  ʢ͞Θ͍ ͷͿͻ͜ʣ • twitter/github:
nobuhikosawai • αʔόʔαΠυ(Rails) • ϑϩϯτΤϯυ(React.js)

ࣗݾ঺հ !136 • .JDSPTFSWJDFT.FFUVQ7PMͱ7PMͰ ΋.JDSP'SPOUFOETΛςʔϚʹ࿩͠· ͨ͠ • Α͚Ε͹ฐࣾͷCMPH΋Έ͍ͯͩ͘͞ https://medium.com/finc-engineering/microservices-meetup-vol-7-bbceaf1b860c https://medium.com/finc-engineering/microservices-meetup-vol-9-44b7664756ee

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

ࢀߟจݙ !138 • ϚΠΫϩαʔϏεΞʔΩςΫνϟʢ 4BN/FXNBOஶɺࠤ౻௚ੜ؂मɺ໦Լ఩໵༁ʣ • NJDSPGSPOFOETPSH • $PQZSJHIU $
OFVMBOE#ÛSPGÛS*OGPSNBUJL #SFNFO (FSNBOZ  IUUQTHJUIVCDPNOFVMBOENJDSPGSPOUFOETMJDFOTF • 3FBDUJTTVFT • IUUQTHJUIVCDPNGBDFCPPLSFBDUJTTVFT • IUUQTHJUIVCDPNGBDFCPPLSFBDUJTTVFT • IUUQTHJUIVCDPNGBDFCPPLSFBDUJTTVFT

Micro Frontends の理論と実践 -価値提供を高速化する真のマイクロサービスのあ...

Micro Frontends の理論と実践 -価値提供を高速化する真のマイクロサービスのあり方- / The Theory and Practice of Micro Frontends

More Decks by nobuhikosawai

Other Decks in Technology

Featured

Transcript

Micro Frontends の理論と実践  -価値提供を高速化する真のマイクロサービスのあ...

Micro Frontends の理論と実践  -価値提供を高速化する真のマイクロサービスのあり方- / The Theory and Practice of Micro Frontends