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

D810cdc3c671ce77b11488e697807820?s=47 nobuhikosawai
November 02, 2018
Technology
16
26k

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

AWS Dev Day Tokyo 2018でMicro Frontendsについて話したスライドです。

#MicroFrontends #マイクロフロントエンド

D810cdc3c671ce77b11488e697807820?s=128

nobuhikosawai

November 02, 2018
Tweet

More Decks by nobuhikosawai

See All by nobuhikosawai
D810cdc3c671ce77b11488e697807820?s=48 nobuhikosawai
3
3.8k
D810cdc3c671ce77b11488e697807820?s=48 nobuhikosawai
0
590
D810cdc3c671ce77b11488e697807820?s=48 nobuhikosawai
4
1.2k

Other Decks in Technology

See All in Technology
53850955f15249a1a9dc49df6113e400?s=48 line_developers
0
150
B440848190075251e012e587b82f54e2?s=48 czmirror
0
240
5b47136bedcba2799edf4fcd27ea66d7?s=48 yaegashi
0
320
Dd672f13e7e17714700544cb355cbaba?s=48 kyoshimoto
2
310
8a84268593355816432ceaf78777d585?s=48 dena_tech
0
2.3k
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
0
270
332f89cc697355902a817506b6995f2b?s=48 ytaka23
8
1.8k
1f745ff900e1be51aedae18cae76593c?s=48 kurochan
0
1.7k
A64ac825509279a770c13c6fc517f11a?s=48 kawaguti
2
440
66fabad28b40a99387ab582cd0e94a2d?s=48 hiromaaa03
1
110
703c34db2db0e609fddec6a5585ceccc?s=48 kenta_sato3
1
220
79dcb04101764d7bf66f898dd446838e?s=48 tsukubachallenge
0
260

Featured

See All Featured
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
5
3.6k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
84
8.3k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
86
11k
78b475797a14c84799063c7cd073962f?s=48 holman
446
130k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
407
57k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
110
24k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
144
11k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
581
190k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
319
53k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
606
53k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
8
940
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
366
42k

Transcript

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

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

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

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

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

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

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

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

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

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

    
 "OESPJE
 
 8FC

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

    J04 
 "OESPJE
 
 8FC

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

    ͋Εʁ
 ϚΠΫϩʁ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  29. ΫϥΠΞϯταΠυʹ΋
 ϚΠΫϩαʔϏεਫ਼ਆΛʂʂ

  30. ͦ͜Ͱ.JDSP'SPOUFOETʂʂ

  31. ୈᶗ෦.JDSP'SPOUFOETͷཧ࿦

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

  33. ϚΠΫϩαʔϏεͷϝϦοτ !33 • σϓϩΠͷಠཱ • αʔϏε͕෼͔Ε͍ͯΔͷͰσϓϩΠ͕ࣗ༝ʹͰ͖Δ • ٕज़ҟ࣭ੑ • αʔϏεಛੑ͝ͱʹ࠷దͳٕज़બ୒͕Մೳ

    • ٕज़తෛ࠴ΛҾ͖ͣΓʹ͍͘ • ߹੒Մೳੑ • αʔϏε͝ͱʹద੾ͳཻ౓ͷ"1*͕ެ։͞Ε͍ͯΔͨΊɺ࠶ར༻ੑ͕ߴ·Δ • ૊৫ͷࣗ཯ੑ • ίϛϡχέʔγϣϯύεΛݮΒ͠ɺҙࢥܾఆΛ͢͹΍͘͢Δ

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

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

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

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

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

    Contents Header Footer

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

    ফͯ͠͠·͏

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

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

  42. .JDSP'SPOUFOETʂʂ

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

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

  45. ͨͱ͑͹ʁ

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

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

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

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

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

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

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

  53. औΓ૊Έͷࣄྫ !53 • औΓ૊ΜͰ͍Δاۀ •*,&" •4QPUJGZ •ͳͲ IKEA Spotify https://www.youtube.com/watch?v=4KVOuQDIfmw

    https://www.slideshare.net/kevingoldsmith/how-spotify-builds-products-organization-architecture-autonomy-accountability

  54. ͑͑΍Μ

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

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

    8FC$PNQPOFOUT •৽͍͠8FCͷ࢓༷

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

  58. $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/

  59. • ߪങϘλϯΛग़͢ྫ $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>

  60. .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 ͕σʔλΛฦ͢

  61. .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*ʹม׵ͯ͠ ͍ͨ

  62. .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 Λฦ͢ • ౷߹ϨΠϠʔ͸ͦΕΛ഑ஔ͢Δ͚ͩ
  63. None

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

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

  66. .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

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

  68. .JDSPTFSWJDFT.JDSP'SPOUFOET

  69. None

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

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

  72. ୈᶘ෦.JDSP'SPOUFOETͷ࣮ફ

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

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

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

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

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

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

  79. ίʔυΠϝʔδ !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. ίʔυΠϝʔδ !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. ࣮ફʹ͓͍ͯ௚໘ͨ͠՝୊ !81 • ࣮ࡍʹͲͷΑ͏ͳ໰୊ʹ͍ͭͯऔΓ૊Μͩͷ͔Λ঺հ͠·͢ • Ϗϧυͷ໰୊ • DBDIFCVTUJOH • Ϣʔβʔମݧ౷߹ͷ՝୊

    • άϩʔόϧͳঢ়ଶͷڞ༗ • ը໘ભҠ • ίϯϙʔωϯτؒͷ࿈ܞ • ϥΠϒϥϦͷ໰୊ • ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM  • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

  82. DBDIFCVTUJOHͷ໰୊ !82 • Ϗϧυͷ໰୊ •DBDIFCVTUJOH • Ϣʔβʔମݧ౷߹ͷ՝୊ • άϩʔόϧͳঢ়ଶͷڞ༗ •

    ը໘ભҠ • ঢ়ଶ؅ཧ • ϥΠϒϥϦͷ໰୊ • ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM  • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

  83. എܠ !83 • 41"͸Ϗϧυ͕ඞཁ • ผͷϑΝΠϧΛJNQPSU͢Δ࢓༷͕࠷ۙ·Ͱͳ͔ͬͨͷͰɺϥΠϒϥϦ Ͱ͕Μ͹ͬͯCVOEMFͯ͠ຕʹ͍ͯ͠Δ  •Ұ൪࢝ΊʹಡΈࠐ·ΕΔIUNM JOEFYIUNM

    ͰϏϧυͨ͠ϑΝΠϧΛࢦఆ ͯ͠ಡΈࠐΉΑ͏ʹ͢Δ ϒϥ΢β HTML JS index.html bundle.js JS JS JS Ϗϧυ styleλά

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

    index.html new bundle.js JS JS JS Ϗϧυ styleλά JS cached bundle.js ΩϟογϡΛࢀর

  85. എܠ !85 • ௨ৗϑΝΠϧ໊ʹϥϯμϜͳจࣈྻʢDIVOLIBTI Λ͚ͭͯɺϏϧυ͝ͱ ʹҟͳΔϑΝΠϧ໊ʹͳΔΑ͏ʹ͢Δ ϒϥ΢β HTML JS index.html

    new bundle-ac2c5.js JS JS JS Ϗϧυ styleλά JS cached bundle-c1df8.js ࢀর͞Εͳ͍

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

    src=“./bundle- ac2c5.js”></script>

  87. ՝୊ !87 • .JDSP'SPOUFOETͷ৔߹ •αʔϏε͕6*ఏڙଆʢJOEFYIUNMଆ ͱϏϧυଆͰΘ͔Ε͍ͯΔ •Ϗϧυ͝ͱʹDIVOLIBTI෇͖ͷϑΝΠϧ໊Λڞ༗͢Δͷ͕೉͍͠ HTML JS index.html

    bundle-ac2c5.js <script src=“./bundle-?????.js”>
 </script>

  88. ݕ౼ !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. ରԠ !89 • NBOJGFTUKTPOΛ࢖ͬͯGJMF໊Λऔಘ͢Δ • औಘͷλΠϛϯά͸JOEFYIUNMΛฦ͢લʹαʔόʔαΠυͰߦ͏ •TDSJQUλάΛຒΊࠐΜͩঢ়ଶͰϒϥ΢βʹฦ͢

  90. άϩʔόϧͳঢ়ଶͷڞ༗ !90 • Ϗϧυͷ໰୊ • DBDIFCVTUJOH • Ϣʔβʔମݧ౷߹ͷ՝୊ •άϩʔόϧͳঢ়ଶͷڞ༗ •

    ը໘ભҠ • ίϯϙʔωϯτؒͷ࿈ܞ • ϥΠϒϥϦͷ໰୊ • ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM  • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

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

  92. ՝୊ !92 • αʔϏεͷૄ݁߹Λอͬͨ··Ͳ͏ڞ༗͢Δ͔ • Ξϯνύλʔϯڞ༗σʔλετΞ • ڊେͳڞ༗"1*ʹͳΔ • มߋ͕ࠔ೉

    ೝূ Micro Frontends Micro Frontends localStorage Write Read Ξϯνύλʔϯ: ڞ༗σʔλετΞ

  93. ݕ౼௨ৗͷ41"ͷ৔߹ 'MVY !93 ೝূ Component Component Store Dispatcher notify state

    change change state Action (loggedIn)

  94. ରԠ.JDSP'SPOUFOETͷ৔߹ !94 ೝূ Micro Frontends Micro Frontends Store Dispatcher change

    state ౷߹ϨΠϠʔ Micro Frontends Custom Events (globalStateChanged) Custom Events (loggedIn)

  95. ରԠ.JDSP'SPOUFOETͷ৔߹ !95 ೝূ Micro Frontends Micro Frontends Store Dispatcher change

    state ౷߹ϨΠϠʔ Micro Frontends Custom Events (globalStateChanged) Custom Events (loggedIn) 'MVYͷΞφϩδʔͰղܾͰ͖Δʂ

  96. ը໘ભҠ !96 • Ϗϧυͷ໰୊ • DBDIFCVTUJOH • Ϣʔβʔମݧ౷߹ͷ՝୊ • άϩʔόϧͳঢ়ଶͷڞ༗

    •ը໘ભҠ • ίϯϙʔωϯτؒͷ࿈ܞ • ϥΠϒϥϦͷ໰୊ • ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM  • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

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

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

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

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

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

  102. ରԠ !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;

  103. ରԠ !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 ( <a href={to} onClick={this.handleClick}> {children} </a> ); } } export default FawLink; BλάͰఆٛ

  104. ରԠ !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 ( <a href={to} onClick={this.handleClick}> {children} </a> ); } } export default FawLink; $VTUPN&WFOUΛఆٛ͠ ͯ౤͛Δ

  105. ରԠ !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. ঢ়ଶ؅ཧ !106 • Ϗϧυͷ໰୊ • DBDIFCVTUJOH • Ϣʔβʔମݧ౷߹ͷ՝୊ • άϩʔόϧͳঢ়ଶͷڞ༗

    • ը໘ભҠ •ίϯϙʔωϯτؒͷ࿈ܞ • ϥΠϒϥϦͷ໰୊ • ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM  • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

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

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

    400, }

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

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

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

    state2: 2, }

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

  113. ରԠ !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. ରԠ !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);

  115. ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM !115 • Ϗϧυͷ໰୊ • DBDIFCVTUJOH • Ϣʔβʔମݧ౷߹ͷ՝୊ •

    άϩʔόϧͳঢ়ଶͷڞ༗ • ը໘ભҠ • ίϯϙʔωϯτؒͷ࿈ܞ • ϥΠϒϥϦͷ໰୊ •ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM  • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

  116. എܠ !116 • 8FCαʔϏεͱͯ͠ఏڙ͢ΔͷͰɺͰ͖Δ͚ͩଟ͘ͷϒϥ΢βʹରԠ͠ ͍ͨ designed by Pixel perfect from

    Flaticon https://www.flaticon.com/packs/browsers

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

  118. ରԠ !118 • QPMZGJMMΛ͍Εͨ •IUUQTHJUIVCDPNXFCDPNQPOFOUTXFCDPNQPOFOUTKT • QPMZGJMMͱ͸ɺ࠷ۙͷػೳΛαϙʔτ͍ͯ͠ͳ͍ݹ͍ϒϥ΢βʔͰɺͦ ͷػೳΛ࢖͑ΔΑ͏ʹ͢ΔͨΊͷίʔυͰ͢ɻେ఍͸΢Σϒ্ͷ +BWB4DSJQUͰ͢ɻ 

    • $VTUPN&MFNFOUT͸ಛʹ໰୊ͳ͘ಈ͘ •ͨͩ͠4IBEPX%0.͚ͩ͸Ұ෦ະରԠ

  119. 3FBDUͰTIBEPX%0.Λ͔ͭ͏໰୊ !119 • Ϗϧυͷ໰୊ • DBDIFCVTUJOH • Ϣʔβʔମݧ౷߹ͷ՝୊ • άϩʔόϧͳঢ়ଶͷڞ༗

    • ը໘ભҠ • ίϯϙʔωϯτؒͷ࿈ܞ • ϥΠϒϥϦͷ໰୊ • ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM  • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

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

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

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

  123. ରԠ !123 • ϥΠϒϥϦͰճආՄೳ •SFBDUTIBEPXEPNSFUBSHFUFWFOUT • 3FBDUຊମͷվम·ͪʣ • 1PMZGJMMͷ͜ͱ΋ߟ͑Δͱ·ͩૣͦ͏ •

    ଞʹ΋IUUQTHJUIVCDPNTLBUFKTWBMͳͲ͕͋ΔΑ͏ͳͷͰৄ͍͠ํ ͍ͨΒڭ͍͑ͯͩ͘͞ʂ
  124. None

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

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

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

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

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

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

    δΣΫτ
 #''

  131. ߟ࡯ !131 Backend Frontend $MJFOU 4FSWFS 4FSWFS 4FSWFS #'' ϦΫΤετ͕૿͑Δ

    αʔϏε͝ͱʹҟͳΔΦϒ δΣΫτ
 #''

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

  133. ߟ࡯ࠓޙͷ࿩ !133 • ύϑΥʔϚϯε͸໰୊͕࢒Γͦ͏ •443 4FSWFSTJEFSFOEFSJOH ͸͋ͬͨ΄͏͕͍͍ •͜Ε·Ͱͷ8FCͷ஌ݟͰഓΘΕͨύϑΥʔϚϯεɾνϡʔχϯά͸
 ඞཁ •

    6*ͷ౷Ұ • ςετ •%0.#BTFE$%$ $POTVNFSESJWFODPOUSBDU UFTUJOH

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

  135. ࣗݾ঺հ !135 • ໊લ: ᖒҪ એ඙
 ʢ͞Θ͍ ͷͿͻ͜ʣ • twitter/github:

    nobuhikosawai • αʔόʔαΠυ(Rails) • ϑϩϯτΤϯυ(React.js)

  136. ࣗݾ঺հ !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

  137. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

  138. ࢀߟจݙ !138 • ϚΠΫϩαʔϏεΞʔΩςΫνϟʢ 4BN/FXNBOஶɺࠤ౻௚ੜ؂मɺ໦Լ఩໵༁ʣ • NJDSPGSPOFOETPSH • $PQZSJHIU $

    OFVMBOE#ÛSPGÛS*OGPSNBUJL #SFNFO (FSNBOZ
 IUUQTHJUIVCDPNOFVMBOENJDSPGSPOUFOETMJDFOTF • 3FBDUJTTVFT • IUUQTHJUIVCDPNGBDFCPPLSFBDUJTTVFT • IUUQTHJUIVCDPNGBDFCPPLSFBDUJTTVFT • IUUQTHJUIVCDPNGBDFCPPLSFBDUJTTVFT