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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

"HFOEB !4 • ୈᶗ෦.JDSP'SPOUFOETͷཧ࿦ • ୈᶘ෦.JDSP'SPOUFOETͷ࣮ફ • ߟ࡯ • ·ͱΊ .JDSP'SPOUFOET͕ղܾ͍ͨ͠໰୊ ͦͷͨΊͷٕज़

Slide 5

Slide 5 text

"HFOEB !5 • ୈᶗ෦.JDSP'SPOUFOETͷཧ࿦ • ୈᶘ෦.JDSP'SPOUFOETͷ࣮ફ • ߟ࡯ • ·ͱΊ ࣮ફ্ͨ͠Ͱͷ஌ݟ΍՝୊Λڞ༗͠·͢ ຊ൪౤ೖͷࢀߟʹͳΕ͹ʂ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

ͦ͜Ͱ.JDSP'SPOUFOETʂʂ

Slide 31

Slide 31 text

ୈᶗ෦.JDSP'SPOUFOETͷཧ࿦

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

.JDSP'SPOUFOETʂʂ

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

ͨͱ͑͹ʁ

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

͑͑΍Μ

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

$VTUPN&MFNFOUTͷྫ !58 • ։ൃऀ͕৽͍͠)5.-λάΛ࡞੒ͨ͠Γɺطଘ΍ଞͷσϕϩούʔ͕࡞ ੒ͨ͠ίϯϙʔωϯτΛ֦ுͨ͠Γ͢Δ͜ͱ͕Ͱ͖Δ"1* • ྫ(JU)VC •K2VFSZͰ͍ͭͬͯͨ͘$PNQPOFOUΛ$VTUPN&MFNFOUTͰஔ׵   on Aug 22  https://githubengineering.com/removing-jquery-from-github-frontend/

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

.JDSP'SPOUFOETͷ࣮ݱํ๏ !61

hooray!

foobar

hooray!

foobar

hooray!

foobar

hooray!

foobar

HTML • ϑϩϯτΤϯυ͸  ͭͷ6*ʹม׵ͯ͠ ͍ͨ

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

.JDSPTFSWJDFT.JDSP'SPOUFOET

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

ୈᶘ෦.JDSP'SPOUFOETͷ࣮ફ

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

ίʔυΠϝʔδ !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);

Slide 80

Slide 80 text

ίʔυΠϝʔδ !80 • GJODBQQXFCଆ import React from 'react'; class PeerBonus extends React.Component { render() { return (

); } } export default PeerBonus;

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

ରԠ !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λάͰఆٛ

Slide 104

Slide 104 text

ରԠ !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Λఆٛ͠ ͯ౤͛Δ

Slide 105

Slide 105 text

ରԠ !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͔ΒભҠઌΛ  ड͚औͬͯભҠ

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

No content

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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