Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

nobuhikosawai

November 02, 2018
Tweet

More Decks by nobuhikosawai

Other Decks in Technology

Transcript

  1. .JDSP'SPOUFOETͷཧ࿦ͱ࣮ફ

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

    View Slide

  2. ࠓ೔͸શ͘͜Ε·Ͱͱ͸ҧ͏

    ϚΠΫϩαʔϏεͷ࿩Λ͠·͢

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. Α͋͘ΔϚΠΫϩαʔϏε
    !8
    4FSWFS 4FSWFS
    $MJFOU
    4FSWFS
    αʔόʔ͸

    গਓ਺ɾಠཱͨ͠

    νʔϜ
    J04

    "OESPJE


    8FC

    View Slide

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

    ϚΠΫϩαʔϏε
    ࠷ߴʂ
    J04

    "OESPJE


    8FC

    View Slide

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

    ϚΠΫϩαʔϏε
    ࠷ߴʂ
    ͋Εʁ

    ϚΠΫϩʁ

    View Slide

  11. ΫϥΠΞϯταΠυ͸

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

    View Slide

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

    ʢαʔόʔαΠυʣ

    View Slide

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

    View Slide

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

    View Slide

  15. ͱ͋Δ։ൃݱ৔ʢαʔόʔαΠυʣ
    !15
    ΍͹͍ʂԶ΋࠷ߴͷاըΛࢥ͍͍ͭͨʂ

    Զఱ࠽ʂઈର౰ͨΔʂ
    ͠͹Βͯ͘͠

    View Slide

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

    View Slide

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

    ΍Γ·͢ʂ

    View Slide

  18. ͱ͋Δ։ൃݱ৔ʢαʔόʔαΠυʣ
    !18
    ͋ɺͦΕ͚ͬͪͩ͜Ͱ׬݁͠·͢Ͷʂ

    ΍Γ·͢ʂ
    ʢϚΠΫϩαʔϏε࠷ߴ΍ɻɻɻʣ
    ࠷ߴͷاըΛࢥ͍͍ͭͯ͠·ͬͨΜ΍͚Ͳʂ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  22. ͱ͋Δ։ൃݱ৔ʢΫϥΠΞϯταΠυʣ
    !22
    ΍͹͍ʂԶ΋࠷ߴͷاըΛࢥ͍͍ͭͨʂ

    Զఱ࠽ʂઈର౰ͨΔʂ
    ͠͹Βͯ͘͠

    View Slide

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

    View Slide

  24. ͱ͋Δ։ൃݱ৔ʢΫϥΠΞϯταΠυʣ
    !24
    ΜʔɺӨڹൣғେৎ෉͔ͳʁ

    ؾΛ͚ͭͳ͕Β΍Γ·͢ʂ
    ࠷ߴͷاըΛࢥ͍͍ͭͯ͠·ͬͨΜ΍͚Ͳʂ

    View Slide

  25. ͱ͋Δ։ൃݱ৔ʢΫϥΠΞϯταΠυʣ
    !25
    ΜʔɺӨڹൣғେৎ෉͔ͳʁ

    ؾΛ͚ͭͳ͕Β΍Γ·͢ʂ
    ͋ΕʁϓϧϦΫΊͬͪΌίϯϑϦΫτ

    ͯ͠Δʁʁ
    ࠷ߴͷاըΛࢥ͍͍ͭͯ͠·ͬͨΜ΍͚Ͳʂ

    View Slide

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

    View Slide

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

    View Slide

  28. ϚΠΫϩαʔϏεͷϝϦοτΛ

    े෼ʹ׆͔ͤͯͳ͍ʂ

    View Slide

  29. ΫϥΠΞϯταΠυʹ΋

    ϚΠΫϩαʔϏεਫ਼ਆΛʂʂ

    View Slide

  30. ͦ͜Ͱ.JDSP'SPOUFOETʂʂ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    ΍Γ·͢ʂ
    ʢϚΠΫϩαʔϏε࠷ߴ΍ɻɻɻʣ

    View Slide

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

    View Slide

  37. ݁߹౓Λ͍͔ʹԼ͛Δ͔͕

    ϚΠΫϩαʔϏεͷ՝୊

    View Slide

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

    ඞཁ͕͋Δ
    •݁߹͠΍͍͢
    Side

    Bar
    Contents
    Header
    Footer

    View Slide

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

    View Slide

  40. ϑϩϯτΤϯυͷ݁߹౓Λ

    Լ͛Δʹ͸Ͳ͏͢Ε͹Α͍͔ʁ

    View Slide

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

    View Slide

  42. .JDSP'SPOUFOETʂʂ

    View Slide

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

    View Slide

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

    View Slide

  45. ͨͱ͑͹ʁ

    View Slide

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

    View Slide

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

    View Slide

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

    ʢϨίϝϯυνʔϜʣ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  54. ͑͑΍Μ

    View Slide

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

    View Slide

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

    Մೳੑ͕͋Δ
    • 8FC$PNQPOFOUT
    •৽͍͠8FCͷ࢓༷

    View Slide

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

    View Slide

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

    on Aug 22


    https://githubengineering.com/removing-jquery-from-github-frontend/

    View Slide

  59. • ߪങϘλϯΛग़͢ྫ
    $VTUPN&MFNFOUTͷྫ
    !59
    class BlueBuy extends HTMLElement {
    constructor() {
    super();
    this.innerHTML = 

    ɹɹɹ`buy for 66,00 €`;
    }
    disconnectedCallback() { ... }
    }
    window.customElements.define('blue-buy', BlueBuy);

    View Slide

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

    View Slide

  61. .JDSP'SPOUFOETͷ࣮ݱํ๏
    !61

    hooray!
    foobar


    hooray!
    foobar


    hooray!
    foobar


    hooray!
    foobar

    HTML
    • ϑϩϯτΤϯυ͸

    ͭͷ6*ʹม׵ͯ͠
    ͍ͨ

    View Slide

  62. .JDSP'SPOUFOETͷ࣮ݱํ๏
    !62
    class BlueBuy extends
    HTMLElement {
    constructor() {
    super();
    this.innerHTML = `>`;
    }
    disconnectedCallback()
    { ... }
    }
    window.customElements.define('b
    lue-buy', BlueBuy);
    JavaScript

    HTML
    • 8FC$PNQPOFOUTͷఆٛʢ+4
    Λฦ͢
    • ౷߹ϨΠϠʔ͸ͦΕΛ഑ஔ͢Δ͚ͩ

    View Slide

  63. View Slide

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

    View Slide

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

    View Slide

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

    HTML

    View Slide

  67. .JDSP'SPOUFOET͸

    ϑϩϯτΤϯυͷ݁߹౓ΛԼ͛

    ϚΠΫϩαʔϏεͷϝϦοτΛ׆͔͢ʂ

    View Slide

  68. .JDSPTFSWJDFT.JDSP'SPOUFOET

    View Slide

  69. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  75. ϏδωεͷഎܠϐΞɾϘʔφεػೳ
    !75
    • ϔϧεέΞͷϓϥοτϑΥʔϜΛ໨ࢦ͢'J/$ͱͯ͠͸ࣾ಺πʔϧ

    ͱ͸͍͑ɺϐΞɾϘʔφεػೳ΋GJODBQQXFC্ʹͷ͓͖͍ͤͯͨ
    • ී௨ʹ3FBDUΛ࣮૷͢Δ͜ͱ΋ߟ͑ΒΕΔ͕ɺ.JDSP'SPOUFOETΛ࠾༻

    ͨ͠

    View Slide

  76. ͳͥ.JDSP'SPOUFOETΛ࠾༻͔ͨ͠
    !76
    • ී௨ʹ3FBDUͰ͍͍ͷͰ͸ʁ
    •όοΫΤϯυ͸3BJMTͰ৽্ཱͪ͛͘͠Δ
    •νʔϜͷٕज़ελοΫతͱͯ͠3FBDUPO3BJMTͷϊ΢ϋ΢͕ཷ·ͬͯ

    ͍ͨ
    •ϨΨγʔͳGJODBQQXFCͷίʔυϕʔεΛ͋·Γେ͖ͨ͘͘͠ͳ͔ͬͨ
    •ͭ·Γ৽چ3FBDUͱ͍͏ٕज़ҟ࣭ੑ͕͋Δঢ়ଶ

    View Slide

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

    .JDSP'SPOUFOETΛ࠾༻

    View Slide

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

    View Slide

  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(



    ,
    mountPoint,
    );
    retargetEvents(shadow);
    }
    }
    customElements.define(‘peerbonus—timeline’, TimelineComponents);

    View Slide

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



    );
    }
    }
    export default PeerBonus;

    View Slide

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

    • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

    View Slide

  82. DBDIFCVTUJOHͷ໰୊
    !82
    • Ϗϧυͷ໰୊
    •DBDIFCVTUJOH
    • Ϣʔβʔମݧ౷߹ͷ՝୊
    • άϩʔόϧͳঢ়ଶͷڞ༗
    • ը໘ભҠ
    • ঢ়ଶ؅ཧ
    • ϥΠϒϥϦͷ໰୊
    • ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM

    • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  90. άϩʔόϧͳঢ়ଶͷڞ༗
    !90
    • Ϗϧυͷ໰୊
    • DBDIFCVTUJOH
    • Ϣʔβʔମݧ౷߹ͷ՝୊
    •άϩʔόϧͳঢ়ଶͷڞ༗
    • ը໘ભҠ
    • ίϯϙʔωϯτؒͷ࿈ܞ
    • ϥΠϒϥϦͷ໰୊
    • ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM

    • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

    View Slide

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

    View Slide

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

    View Slide

  93. ݕ౼௨ৗͷ41"ͷ৔߹ 'MVY

    !93
    ೝূ Component
    Component
    Store
    Dispatcher
    notify state change
    change state
    Action
    (loggedIn)

    View Slide

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

    View Slide

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

    View Slide

  96. ը໘ભҠ
    !96
    • Ϗϧυͷ໰୊
    • DBDIFCVTUJOH
    • Ϣʔβʔମݧ౷߹ͷ՝୊
    • άϩʔόϧͳঢ়ଶͷڞ༗
    •ը໘ભҠ
    • ίϯϙʔωϯτؒͷ࿈ܞ
    • ϥΠϒϥϦͷ໰୊
    • ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM

    • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

    View Slide

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

    View Slide

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

    ͠·͏
    •IJTUPSZBQJͰભҠͤ͞Δඞཁ͕͋Δ

    View Slide

  99. ՝୊
    !99
    • ֤αʔϏε͕ࣗ༝ʹભҠͤ͞ΔͱΧΦε
    •XJOEPXMPDBUJPOͱ͔XJOEPXIJTUPSZͱ͔࢖͏ͱࣗ༝ʹը໘ભҠͰ͖Δ
    •ΞϓϦέʔγϣϯ֎෦΁ભҠ͢Δ͜ͱ΋Ͱ͖ΔΑ͏ʹͳΔ

    • ը໘ભҠ΋౷߹ϨΠϠʔͷ੹຿ͱͯ͠؅ཧͨ͠΄͏͕͍͍

    View Slide

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

    View Slide

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

    View Slide

  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 (

    {children}

    );
    }
    }
    export default FawLink;

    View Slide

  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 (

    {children}

    );
    }
    }
    export default FawLink;
    BλάͰఆٛ

    View Slide

  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 (

    {children}

    );
    }
    }
    export default FawLink;
    $VTUPN&WFOUΛఆٛ͠
    ͯ౤͛Δ

    View Slide

  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 (



    );
    }
    }
    export default Peerbonus;
    &WFOU͔ΒભҠઌΛ

    ड͚औͬͯભҠ

    View Slide

  106. ঢ়ଶ؅ཧ
    !106
    • Ϗϧυͷ໰୊
    • DBDIFCVTUJOH
    • Ϣʔβʔମݧ౷߹ͷ՝୊
    • άϩʔόϧͳঢ়ଶͷڞ༗
    • ը໘ભҠ
    •ίϯϙʔωϯτؒͷ࿈ܞ
    • ϥΠϒϥϦͷ໰୊
    • ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM

    • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

    View Slide

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

    View Slide

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

    {
    givenPoints: 200,
    sendablePoints: 400,
    }

    View Slide

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

    View Slide

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

    View Slide

  111. ݕ౼αʔϏεͷͱ͖
    !111
    • ಉҰαʔϏεͳͷͰͭͷHMPCBM4UBUFʹͭͳ͕ͬͨܗͰఏڙ͢Δ͜ͱ͕

    Մೳ
    Component1
    Component2
    {
    state1: 1,
    state2: 2,
    }

    View Slide

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

    View Slide

  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(


    ,
    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);

    View Slide

  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(


    ,
    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);

    View Slide

  115. ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM

    !115
    • Ϗϧυͷ໰୊
    • DBDIFCVTUJOH
    • Ϣʔβʔମݧ౷߹ͷ՝୊
    • άϩʔόϧͳঢ়ଶͷڞ༗
    • ը໘ભҠ
    • ίϯϙʔωϯτؒͷ࿈ܞ
    • ϥΠϒϥϦͷ໰୊
    •ϒϥ΢βؒͷࠩ෼ͷղফ QPMZGJMM

    • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    • 3FBDUͷFWFOU͕TIBEPX%0.Ͱ͏·͘ಈ͔ͳ͍໰୊

    View Slide

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

    View Slide

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

    View Slide

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

    Ҋͱͯ͠ొ࿥͞Ε͍ͯΔ

    View Slide

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

    View Slide

  124. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    ͳΓ෼཭

    View Slide

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

    View Slide

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

    #''

    View Slide

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

    #''

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

  135. ࣗݾ঺հ
    !135
    • ໊લ: ᖒҪ એ඙

    ʢ͞Θ͍ ͷͿͻ͜ʣ
    • twitter/github: nobuhikosawai
    • αʔόʔαΠυ(Rails)
    • ϑϩϯτΤϯυ(React.js)

    View Slide

  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

    View Slide

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

    View Slide

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

    IUUQTHJUIVCDPNOFVMBOENJDSPGSPOUFOETMJDFOTF
    • 3FBDUJTTVFT
    • IUUQTHJUIVCDPNGBDFCPPLSFBDUJTTVFT
    • IUUQTHJUIVCDPNGBDFCPPLSFBDUJTTVFT
    • IUUQTHJUIVCDPNGBDFCPPLSFBDUJTTVFT

    View Slide