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

Vueコンポーネントを複数リポ で共通化するためにやったこと

RyotaKodaira
January 24, 2018

Vueコンポーネントを複数リポ で共通化するためにやったこと

RyotaKodaira

January 24, 2018
Tweet

More Decks by RyotaKodaira

Other Decks in Programming

Transcript

  1. 7VFίϯϙʔωϯτΛෳ਺Ϧϙ
    Ͱڞ௨Խ͢ΔͨΊʹ΍ͬͨ͜ͱ

    4$065&3 *OD
    !SZPUBLPEBJSB

    View Slide


  2. ࣗݾ঺հ
    גࣜձࣾ4$065&3
    XFCΤϯδχΞ
    ਓ໨ͷΤϯδχΞ
    μʔπ͕޷͖
    ਓͰ໧ʑͱ࿅शͯ͠·͢
    !SZPUBLPEBJSB

    View Slide


  3. 4$065&3Λ஌ͬͯΔਓ

    View Slide


  4. $UP#ਓࡐ঺հαʔϏε
    స৬ر๬ͷ஌ਓ༑ਓΛ
    اۀʹ঺հ͠ใुΛಘΒΕΔ

    View Slide


  5. ༗ྉ৬ۀ঺հ
    ਓࡐ঺հձࣾ
    ϔουϋϯλʔ
    ࠾༻اۀ
    ٻ৬ऀ
    ঺հͯ͠ใुΛಘΔʹ͸໔ڐ͕ඞཁ
    ʹ

    View Slide


  6. εΧ΢λʔ
    ొ࿥ऀ
    ࠾༻اۀ
    ٻ৬ऀ
    ݸਓ͕঺հͯ͠ใुΛड͚औΕΔ
    ʹ

    View Slide


  7. αʔϏεߏ੒
    εΧ΢λʔ
    స৬ऀ
    ӡӦ
    ࠾༻اۀ

    View Slide


  8. αʔϏεߏ੒
    εΧ΢λʔ
    స৬ऀ
    ӡӦ
    ࠾༻اۀ
    ࢖༻ٕज़͸౷Ұ͞Ε͍ͯΔ
    -BSBWFM? ?
    7VFY

    View Slide

  9. αʔϏεߏ੒
    ӡӦ
    ࠾༻اۀ

    εΧ΢λʔ
    స৬ऀ

    View Slide

  10. αʔϏεߏ੒
    εΧ΢λʔ
    స৬ऀ
    ӡӦ

    ࠾༻اۀ

    View Slide

  11. αʔϏεߏ੒
    εΧ΢λʔ
    స৬ऀ
    ࠾༻اۀ

    ӡӦ

    View Slide

  12. ࠓճ͸αʔϏε಺Ͱ࢖༻
    ͞ΕΔʮٻਓථʯʹ͍ͭͯ

    View Slide

  13. ػೳ഑ஔ
    εΧ΢λʔ
    స৬ऀ
    ࠾༻اۀ

    ӡӦ
    ٻਓථͷ࡞੒ɾฤू
    ٻਓථͷӾཡ
    ٻਓථͷݕࡧ
    ٻਓථͷӾཡ
    ٻਓථͷ࡞੒ɾฤू
    ٻਓථͷݕࡧ
    ٻਓථͷӾཡ

    View Slide

  14. ػೳ഑ஔ
    εΧ΢λʔ
    స৬ऀ
    ࠾༻اۀ

    ӡӦ
    ٻਓථͷ࡞੒ɾฤू
    ٻਓථͷӾཡ
    ٻਓථͷݕࡧ
    ٻਓථͷӾཡ
    ٻਓථͷ࡞੒ɾฤू
    ٻਓථͷݕࡧ
    ٻਓථͷӾཡ
    ઌʹݴ͓ͬͯ͘ͱɺɺɺ
    ػೳ͸ಉ͕ͩ͡ίʔυ͸ผʑ

    View Slide


  15. ɹʮٻਓථͷ߲໨Λ௥Ճ͍ͨ͠ʂʯ
    ɹʮ0,ʂͰ΋ͪΐͬͱ࣌ؒΛ໯͏Ͷʯ

    View Slide


  16. ɹʮٻਓථͷ߲໨Λ௥Ճ͍ͨ͠ʂʯ
    ɹʮ0,ʂͰ΋ͪΐͬͱ࣌ؒΛ໯͏Ͷʯ
    ιʔε͕ڞ௨Խ͞Ε͍ͯͳͷͰؔ܎
    ͢ΔશͯͷαʔϏεΛมߋ͠ͳ͍ͱ
    ͍͚ͳ͍
    ຊ൪%#ʹରͯ͠ϚΠάϨʔγϣϯ΋
    ࣮ߦ͠ͳ͖Ό

    View Slide

  17. σʔλߏ଄

    KPCTςʔϒϧ
    JE
    [email protected]
    UJUMF
    [email protected]
    [email protected]
    [email protected]
    σʔλΛԣ࣋ͪͰ
    อଘ͍ͯ͠ΔͨΊ
    ΧϥϜΛ௥Ճ͢Δ
    ඞཁ͕͋Δ

    View Slide

  18. σʔλߏ଄

    KPCTςʔϒϧ
    JE
    [email protected]
    UJUMF
    [email protected]
    [email protected]
    [email protected]
    [email protected]
    σʔλΛॎ࣋ͪͰ
    อଘ͍ͯ͠ΔͨΊ
    ΧϥϜΛ௥Ճ͢Δ
    ඞཁ͕͋Δ
    ϚΠάϨʔγϣϯ

    View Slide


  19. σʔλΛॎ࣋ͪʹͯ͠؅ཧը໘͔Β߲໨
    ͷ௥ՃΛͰ͖ͨ΄͏͕ྑͦ͞͏ʂʂ

    View Slide

  20. σʔλߏ଄

    *E [email protected] LFZ WBMVF
    [email protected] ʮ[email protected]ʯͷ಺༰
    [email protected] ʮ[email protected]ʯͷ಺༰
    [email protected] ʮ[email protected]ʯͷ಺༰
    [email protected] ʮ[email protected]ʯͷ಺༰
    *E [email protected] UJUMF
    4$065&3Λ։ൃ͢ΔΤϯδχΞͷืू
    KPCT
    [email protected]

    View Slide

  21. σʔλߏ଄
    *E [email protected] UJUMF
    4$065&3Λ։ൃ͢ΔΤϯδχΞͷืू
    KPCT

    *E [email protected] LFZ WBMVF
    [email protected] ʮ[email protected]ʯͷ಺༰
    [email protected] ʮ[email protected]ʯͷ಺༰
    [email protected] ʮ[email protected]ʯͷ಺༰
    [email protected] ʮ[email protected]ʯͷ಺༰
    [email protected]
    [email protected]ͷछྨΛ૿΍͢
    ٻਓථͷ߲໨Λ૿΍͢
    %#ߏ଄Λҙࣝ͢Δ͜ͱͳ͘มߋ͕ग़དྷΔΑ͏ʹ

    View Slide

  22. σʔλߏ଄

    *E [email protected] ,FZ 7BMVF
    [email protected] ʮ[email protected]ʯͷ಺༰
    [email protected] ʮ[email protected]ʯͷ಺༰
    [email protected] ʮ[email protected]ʯͷ಺༰
    [email protected] ʮ[email protected]ʯͷ಺༰
    *E [email protected] UJUMF
    4$065&3Λ։ൃ͢ΔΤϯδχΞͷืू
    KPCT
    [email protected]
    KPCTςʔϒϧͷ߲໨͸࠷খݶʹͯ͠
    ٻਓථͷίϯςϯπ͸
    ผͷςʔϒϧʹอଘ͢Δ

    View Slide


  23. ͜ΕͰσʔλߏ଄͸มߋʹରԠ͠΍͘͢
    ͳͬͨ
    ࣍͸ίʔυଆͷ͓࿩
    ϑϩϯτΤϯυʹয఺Λ౰͓ͯͯ࿩͠·͢

    View Slide

  24. ϑϩϯτߏ੒
    εΧ΢λʔ
    స৬ऀ
    ࠾༻اۀ

    ӡӦ
    ٻਓථ
    ύοέʔδ
    ελΠϧΨΠυ
    ίϯϙʔωϯτू

    View Slide


  25. ϑϩϯτߏ੒
    εΧ΢λʔ
    స৬ऀ
    ࠾༻اۀ
    ӡӦ
    ٻਓථ
    ύοέʔδ
    ελΠϧΨΠυ
    ίϯϙʔωϯτू
    ࣾ಺Ͱࣗ࡞͍ͯ͠Δ
    7VFίϯϙʔωϯτू

    View Slide


  26. View Slide


  27. Α͘࢖ΘΕΔίϯϙʔωϯτΛ
    ࣄલʹ༻ҙ͓͖ͯ͠ɺ
    TUPSZCPPLͰ֬ೝग़དྷΔΑ͏ʹ͍ͯ͠Δ

    View Slide

  28. TUPSZCPPLͱ͸

    View Slide

  29. TUPSZCPPLͱ͸

    ίϯϙʔωϯτ୯ҐͰ࣮ߦ͢Δ͜ͱͷ
    Ͱ͖ΔαϯυϘοΫε؀ڥ
    ͲΜͳίϯϙʔωϯτ͕ϓϩδΣΫτʹ
    ଘࡏ͍ͯ͠Δͷ͔Λ֬ೝ͢Δ͜ͱ͕Ͱ͖Δ

    View Slide


  30. View Slide


  31. ϑϩϯτߏ੒
    ελΠϧΨΠυ
    ίϯϙʔωϯτू
    εΧ΢λʔ
    స৬ऀ
    ࠾༻اۀ
    ӡӦ
    ٻਓථ
    ύοέʔδ
    ֤ϓϩδΣΫτͰ
    ZBSOBEE

    View Slide


  32. ٻਓථύοέʔδͷ४උ
    7VFϓϩδΣΫτΛ༻ҙ͢Δ
    AWVFDMJAͰ࡞੒͍ͯ͠Βͳ͍΋ͷΛফ͢ͷ͕͓͢͢Ί
    TUPSZCPPLͷಋೖ
    TUPSZCPPLͰ։ൃ͢Δ͜ͱʹΑͬͯΞϓϦέʔγϣϯଆͰ
    ஞҰڍಈΛ֬ೝ͠ͳͯ͘΋ྑ͍ͨΊ։ൃޮ཰61
    ޙʑଞͷΤϯδχΞ͕ίϯϙʔωϯτΛར༻͢Δͱ͖ͷͨ
    Ίʹίϯϙʔωϯτͷ࢓༷Λ࢒͢͜ͱ͕Ͱ͖Δ

    View Slide


  33. QBDLBHFKTPO
    ࠷ॳʹݺ͹ΕΔ
    εΫϦϓτΛࢦఆ

    View Slide


  34. JOEFYKT
    ίϯϙʔωϯτΛ
    ొ࿥͢Δ

    View Slide


  35. ΞϓϦέʔγϣϯଆ
    ٻਓύοέʔδΛ
    ZBSOBEE

    View Slide


  36. ΞϓϦέʔγϣϯଆ
    ٻਓύοέʔδΛ
    Πϯϙʔτ
    Πϯϙʔτͨ͠
    ίϯϙʔωϯτΛొ࿥

    View Slide


  37. ΞϓϦέʔγϣϯଆ
    ίϯϙʔωϯτΛ
    ݺͼग़͢

    View Slide


  38. ϑϩϯτߏ੒
    ελΠϧΨΠυ
    ίϯϙʔωϯτू
    εΧ΢λʔ
    స৬ऀ
    ࠾༻اۀ
    ӡӦ
    ٻਓථ
    ύοέʔδ

    View Slide

  39. εΧ΢λʔ
    స৬ऀ
    ࠾༻اۀ
    ӡӦ
    ٻਓථ
    ύοέʔδ

    ϑϩϯτߏ੒
    ελΠϧΨΠυ
    ίϯϙʔωϯτू
    ϓϩδΣΫτຖʹҧ͏஋Λઃఆ͍ͨ͠

    View Slide

  40. ΞϓϦέʔγϣϯଆ
    ୈҾ਺ʹΦϒδΣΫτΛ
    ೖΕͯઃఆ஋Λྲྀ͢

    View Slide


  41. ύοέʔδJOEFYKT
    ୈҾ਺ʹΞϓϦέʔγϣϯଆͰ
    ઃఆͨ͠஋͕ೖͬͯ͘Δ

    View Slide


  42. ·ͱΊ
    7VFϓϩδΣΫτͰTUPSZCPPLΛ࢖͏͜ͱͰίϯϙʔωϯτ
    ୯ҐͰͷ։ൃ͕͍ͩͿޮ཰తʹͳΔ
    ઃఆϑΝΠϧͳͲΛ༻ҙͯ͠΍ΔͱΞϓϦέʔγϣϯಛ༗ͷ
    ઃఆΛಡΈࠐΉ͜ͱ͕ग़དྷΔ
    ͜ΕͰมߋ͕͋ͬͯ΋جຊతʹ͸͜ͷύοέʔδͷΈΛมߋ
    ͢Ε͹ྑ͍

    View Slide


  43. ͍͞͝ʹ
    7VFKTΛ࢖ͬͯ։ൃΛ͍ͨ͠
    ϑϩϯτΤϯδχΞΛืू͍ͯ͠·͢ʂ

    View Slide