AWS Dev Day Tokyo 2018でMicro Frontendsについて話したスライドです。
#MicroFrontends #マイクロフロントエンド
.JDSP'SPOUFOETͷཧͱ࣮ફ ՁఏڙΛߴԽ͢ΔਅͷϚΠΫϩαʔϏεͷ͋ΓํᖒҪએ !OPCVIJLPTBXBJגࣜձࣾ'J/$5FDIOPMPHJFT"84%FW%BZ5PLZP
View Slide
ࠓશ͘͜Ε·Ͱͱҧ͏ ϚΠΫϩαʔϏεͷΛ͠·͢
"HFOEB!3• ୈᶗ෦.JDSP'SPOUFOETͷཧ• ୈᶘ෦.JDSP'SPOUFOETͷ࣮ફ• ߟ• ·ͱΊ
"HFOEB!4• ୈᶗ෦.JDSP'SPOUFOETͷཧ• ୈᶘ෦.JDSP'SPOUFOETͷ࣮ફ• ߟ• ·ͱΊ.JDSP'SPOUFOET͕ղܾ͍ͨͦ͠ͷͨΊͷٕज़
"HFOEB!5• ୈᶗ෦.JDSP'SPOUFOETͷཧ• ୈᶘ෦.JDSP'SPOUFOETͷ࣮ફ• ߟ• ·ͱΊ࣮ફ্ͨ͠Ͱͷݟ՝Λڞ༗͠·͢ຊ൪ೖͷࢀߟʹͳΕʂ
Έͳ͞ΜϚΠΫϩαʔϏε͝ଘͰ͔͢ʁ
ϚΠΫϩαʔϏεͷϝϦοτ͏͚ͯ·͔͢ʁ
Α͋͘ΔϚΠΫϩαʔϏε!84FSWFS 4FSWFS$MJFOU4FSWFSαʔόʔ গਓɾಠཱͨ͠ νʔϜJ04 "OESPJE 8FC
Α͋͘ΔϚΠΫϩαʔϏε!94FSWFS 4FSWFS$MJFOU4FSWFSগਓಠཱͨ͠νʔϜ ϚΠΫϩαʔϏε࠷ߴʂJ04 "OESPJE 8FC
Α͋͘ΔϚΠΫϩαʔϏε!104FSWFS 4FSWFS$MJFOU4FSWFSগਓಠཱͨ͠νʔϜ ϚΠΫϩαʔϏε࠷ߴʂ͋Εʁ ϚΠΫϩʁ
ΫϥΠΞϯταΠυ ϚΠΫϩαʔϏεͷϝϦοτ͏͚ͯ·͔͢ʁ
ͱ͋Δ։ൃݱʢαʔόʔαΠυʣ!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 BarContentsHeaderFooter
ϑϩϯτΤϯυϞϊϦε!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•ͳͲIKEASpotifyhttps://www.youtube.com/watch?v=4KVOuQDIfmwhttps://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Ͱஔ on Aug 22 https://githubengineering.com/removing-jquery-from-github-frontend/
• ߪങϘλϯΛग़͢ྫ$VTUPN&MFNFOUTͷྫ!59class BlueBuy extends HTMLElement {constructor() {super();this.innerHTML = ɹɹɹ`buy for 66,00 €`;}disconnectedCallback() { ... }}window.customElements.define('blue-buy', BlueBuy);
.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ͷ࣮ݱํ๏!61hooray!foobarhooray!foobarhooray!foobarhooray!foobarHTML• ϑϩϯτΤϯυ ͭͷ6*ʹม͍ͯͨ͠
.JDSP'SPOUFOETͷ࣮ݱํ๏!62class BlueBuy extendsHTMLElement {constructor() {super();this.innerHTML = `>`;}disconnectedCallback(){ ... }}window.customElements.define('blue-buy', BlueBuy);JavaScriptHTML• 8FC$PNQPOFOUTͷఆٛʢ+4Λฦ͢• ౷߹ϨΠϠʔͦΕΛஔ͢Δ͚ͩ
.JDSP'SPOUFOETͷཧ·ͱΊ!64• ϑϩϯτΤϯυϞϊϦεͷ՝Λղܾ͢Δ•σϓϩΠ͕ಠཱͰ͖ͳ͍•ҟͳΔٕज़ΛબͰ͖ͳ͍•৫ͷґଘ
.JDSP'SPOUFOETͷཧ·ͱΊ!65• .JDSP'SPOUFOETϑϩϯτΤϯυ·Ͱఏڙ͢ΔϚΠΫϩαʔϏε
.JDSP'SPOUFOETͷཧ·ͱΊ!66• ٕज़తʹJGSBNF8FC$PNQPOFOUTΛ࣮ͬͯݱclass BlueBuy extendsHTMLElement {constructor() {super();this.innerHTML = `>`;}disconnectedCallback(){ ... }}window.customElements.define('blue-buy', BlueBuy);JavaScriptHTML
.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(,mountPoint,);retargetEvents(shadow);}}customElements.define(‘peerbonus—timeline’, TimelineComponents);
ίʔυΠϝʔδ!80• GJODBQQXFCଆimport React from 'react';class PeerBonus extends React.Component {render() {return ();}}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 JSindex.html bundle.jsJSJSJSϏϧυstyleλά
എܠ!84• Ϗϧυ͢Δͨͼʹҧ͏ϑΝΠϧ໊Ͱఏڙ͢Δඞཁ͕͋Δɻ•ಉҰϑΝΠϧ໊ͩͱϒϥβͷΩϟογϡ͕ޮ͍ͯมߋ͕ө͞Εͳ͍͜ͱ͕͋Δ•ϦϦʔε࣌ʹࠔΔϒϥβHTML JSindex.html new bundle.jsJSJSJSϏϧυstyleλάJScached bundle.jsΩϟογϡΛࢀর
എܠ!85• ௨ৗϑΝΠϧ໊ʹϥϯμϜͳจࣈྻʢDIVOLIBTIΛ͚ͭͯɺϏϧυ͝ͱʹҟͳΔϑΝΠϧ໊ʹͳΔΑ͏ʹ͢ΔϒϥβHTML JSindex.html new bundle-ac2c5.jsJSJSJSϏϧυstyleλάJScached bundle-c1df8.jsࢀর͞Εͳ͍
՝!86• ͭͷαʔϏεͰϏϧυJOEFYIUNMͷఏڙ͍ͯ͠Δͱ͖ͳ͍•DIVOLIBTI͕Θ͔ΔͷͰɺJOEFYIUNMଆͰͦΕΛࢦఆͯ͠Δ͚ͩHTML JSindex.html bundle-ac2c5.jsac2c5.js”>
՝!87• .JDSP'SPOUFOETͷ߹•αʔϏε͕6*ఏڙଆʢJOEFYIUNMଆͱϏϧυଆͰΘ͔Ε͍ͯΔ•Ϗϧυ͝ͱʹDIVOLIBTI͖ͷϑΝΠϧ໊Λڞ༗͢Δͷ͕͍͠HTML JSindex.html bundle-ac2c5.js <br/>
ݕ౼!88• NBOJGFTUKTPOΛ͑औಘͰ͖Δ•ϑΝΠϧ໊ͱDIVOLIBTI͖ϑΝΠϧ໊ͷؔ࿈Λද͢KTPOϑΝΠϧ•ϑΝΠϧ໊ΛLFZͱ࣮ͯ͠ࡍͷDIVOLIBTI͖ͷϑΝΠϧ໊ΛͨͲΔ͜ͱ͕Ͱ͖ΔHTML JSindex.html bundle-ac2c5.js{"bundle.js": "bundle-ac2c5.js"} <br/>manifest.json
ରԠ!89• NBOJGFTUKTPOΛͬͯGJMF໊Λऔಘ͢Δ• औಘͷλΠϛϯάJOEFYIUNMΛฦ͢લʹαʔόʔαΠυͰߦ͏•TDSJQUλάΛຒΊࠐΜͩঢ়ଶͰϒϥβʹฦ͢
άϩʔόϧͳঢ়ଶͷڞ༗!90• Ϗϧυͷ• DBDIFCVTUJOH• Ϣʔβʔମݧ౷߹ͷ՝•άϩʔόϧͳঢ়ଶͷڞ༗• ը໘ભҠ• ίϯϙʔωϯτؒͷ࿈ܞ• ϥΠϒϥϦͷ• ϒϥβؒͷࠩͷղফ QPMZGJMM• 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍
എܠ!91• άϩʔόϧʹڞ༗͍ͨ͠ঢ়ଶ͕ଘࡏ͢Δ• ೝূͷঢ়ଶ• Ϣʔβʔجຊใ• FUD
՝!92• αʔϏεͷૄ݁߹Λอͬͨ··Ͳ͏ڞ༗͢Δ͔• Ξϯνύλʔϯڞ༗σʔλετΞ• ڊେͳڞ༗"1*ʹͳΔ• มߋ͕ࠔೝূ Micro Frontends Micro FrontendslocalStorageWrite ReadΞϯνύλʔϯ: ڞ༗σʔλετΞ
ݕ౼௨ৗͷ41"ͷ߹ 'MVY!93ೝূ ComponentComponentStoreDispatchernotify state changechange stateAction(loggedIn)
ରԠ.JDSP'SPOUFOETͷ߹!94ೝূ Micro FrontendsMicro FrontendsStoreDispatcherchange state౷߹ϨΠϠʔ Micro FrontendsCustom Events(globalStateChanged)Custom Events(loggedIn)
ରԠ.JDSP'SPOUFOETͷ߹!95ೝূ Micro FrontendsMicro FrontendsStoreDispatcherchange state౷߹ϨΠϠʔ Micro FrontendsCustom 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 ({children});}}export default FawLink;
ରԠ!103• ࣮ΠϝʔδϦϯΫ༻ͷίϯϙʔωϯτ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 ({children});}}export default FawLink;BλάͰఆٛ
ରԠ!104• ࣮ΠϝʔδϦϯΫ༻ͷίϯϙʔωϯτ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 ({children});}}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 ();}}export default Peerbonus;&WFOU͔ΒભҠઌΛ ड͚औͬͯભҠ
ঢ়ଶཧ!106• Ϗϧυͷ• DBDIFCVTUJOH• Ϣʔβʔମݧ౷߹ͷ՝• άϩʔόϧͳঢ়ଶͷڞ༗• ը໘ભҠ•ίϯϙʔωϯτؒͷ࿈ܞ• ϥΠϒϥϦͷ• ϒϥβؒͷࠩͷղফ QPMZGJMM• 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍
എܠ!107• ࿈ಈ͢Δͭͷίϯϙʔωϯτ͕͋ΔߘϘλϯΛԡ͢ͱมߋ͕ө͞ΕΔ
എܠ!108• ௨ৗͷ41"ͷઃܭύλʔϯͩͱຕͷΦϒδΣΫτΛ4JOHMFTPVSDFPGUSVUIͱͯ͠ঢ়ଶཧ͢Δ 3FEVYͷHMPCBM4UBUFͳͲ{givenPoints: 200,sendablePoints: 400,}
ݕ౼!109• .JDSP'SPOUFOETʹ͓͚Δίϯϙʔωϯτؒͷ࿈ܞύλʔϯ•ύλʔϯαʔϏεͷͱ͖•ύλʔϯෳαʔϏεΛ·͕ͨΔͱ͖
ݕ౼αʔϏεͷͱ͖!110• ͭͷαʔϏε͕ෳͷ$PNQPOFOUTΛฦ͢• ͦΕΒ͕࿈ಈͯ͠ಈ͘
ݕ౼αʔϏεͷͱ͖!111• ಉҰαʔϏεͳͷͰͭͷHMPCBM4UBUFʹͭͳ͕ͬͨܗͰఏڙ͢Δ͜ͱ͕ ՄೳComponent1Component2{state1: 1,state2: 2,}
ݕ౼ෳαʔϏεΛ·͕ͨΔͱ͖!112• $VTUPN&WFOUTΛ͏•ίϯϙʔωϯτFWFOUΛͳ͛Δ•౷߹ϨΠϠʔΠϕϯτΛ͛͢•ଞͷίϯϙʔωϯτʹ௨͞ΕΔComponent1Component2CustomEvents
ରԠ!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(,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(,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(,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(,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• #''ͱͷҧ͍•ू͍ͯ͠ΔϨΠϠʔ͕ҧ͏
ߟ!1274FSWFSBackendFrontendαʔόʔͰ)5.-ϨϯμϦϯά͍ͯͨ͠
ߟ!128BackendFrontend $MJFOU4FSWFSΫϥΠΞϯτ͕Ϧονʹ ͳΓ
ߟ!129BackendFrontend $MJFOU4FSWFS 4FSWFS4FSWFSαʔϏε͕ෳࡶԽ͠ɺϚΠΫϩʔαʔϏεʹ
ߟ!130BackendFrontend $MJFOU4FSWFS 4FSWFS4FSWFSϦΫΤετ͕૿͑ΔαʔϏε͝ͱʹҟͳΔΦϒδΣΫτ #''
ߟ!131BackendFrontend$MJFOU4FSWFS 4FSWFS4FSWFS#''ϦΫΤετ͕૿͑ΔαʔϏε͝ͱʹҟͳΔΦϒδΣΫτ #''
ߟ!132BackendFrontend4FSWFS 4FSWFS4FSWFSϑϩϯτΤϯυͷෳࡶ͞ʹରॲ.JDSP'SPOUFOET
ߟࠓޙͷ!133• ύϑΥʔϚϯε͕Γͦ͏•443 4FSWFSTJEFSFOEFSJOH͋ͬͨ΄͏͕͍͍•͜Ε·Ͱͷ8FCͷݟͰഓΘΕͨύϑΥʔϚϯεɾνϡʔχϯά ඞཁ• 6*ͷ౷Ұ• ςετ•%0.#BTFE$%$ $POTVNFSESJWFODPOUSBDUUFTUJOH
·ͱΊ!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
nobuhikosawai
whywaita
gawa
huffon
tsujiba
n1ru4l
koudaiii
i524
hiashisan
herumi
claudioed
mixi_engineers
yellowshippo
deanohume
addyosmani
lemiorhan
jnunemaker
gr2m
tanoku
wjessup
sachag
keathley
cherdarchuk
iamctodd
notwaldorf