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

by RyotaKodaira

Slide 1

Slide 1 text

7VFίϯϙʔωϯτΛෳ਺Ϧϙ Ͱڞ௨Խ͢ΔͨΊʹ΍ͬͨ͜ͱ 4$065&3 *OD !SZPUBLPEBJSB

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

4$065&3Λ஌ͬͯΔਓ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

ػೳ഑ஔ εΧ΢λʔ స৬ऀ ࠾༻اۀ ӡӦ ٻਓථͷ࡞੒ɾฤू ٻਓථͷӾཡ ٻਓථͷݕࡧ ٻਓථͷӾཡ ٻਓථͷ࡞੒ɾฤू ٻਓථͷݕࡧ ٻਓථͷӾཡ

Slide 14

Slide 14 text

ػೳ഑ஔ εΧ΢λʔ స৬ऀ ࠾༻اۀ ӡӦ ٻਓථͷ࡞੒ɾฤू ٻਓථͷӾཡ ٻਓථͷݕࡧ ٻਓථͷӾཡ ٻਓථͷ࡞੒ɾฤू ٻਓථͷݕࡧ ٻਓථͷӾཡ ઌʹݴ͓ͬͯ͘ͱɺɺɺ ػೳ͸ಉ͕ͩ͡ίʔυ͸ผʑ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

σʔλߏ଄ KPCTςʔϒϧ JE DSFBUFE@BU UJUMF DPOUFOU@ DPOUFOU@ DPOUFOU@ σʔλΛԣ࣋ͪͰ อଘ͍ͯ͠ΔͨΊ ΧϥϜΛ௥Ճ͢Δ ඞཁ͕͋Δ

Slide 18

Slide 18 text

σʔλߏ଄ KPCTςʔϒϧ JE DSFBUFE@BU UJUMF DPOUFOU@ DPOUFOU@ DPOUFOU@ DPOUFOU@ σʔλΛॎ࣋ͪͰ อଘ͍ͯ͠ΔͨΊ ΧϥϜΛ௥Ճ͢Δ ඞཁ͕͋Δ ϚΠάϨʔγϣϯ

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

σʔλߏ଄ *E KPC@JE LFZ WBMVF DPOUFOU@ ʮDPOUFOU@ʯͷ಺༰ DPOUFOU@ ʮDPOUFOU@ʯͷ಺༰ DPOUFOU@ ʮDPOUFOU@ʯͷ಺༰ DPOUFOU@ ʮDPOUFOU@ʯͷ಺༰ *E DSFBUFE@BU UJUMF 4$065&3Λ։ൃ͢ΔΤϯδχΞͷืू KPCT KPC@EFUBJMT

Slide 21

Slide 21 text

σʔλߏ଄ *E DSFBUFE@BU UJUMF 4$065&3Λ։ൃ͢ΔΤϯδχΞͷืू KPCT *E KPC@JE LFZ WBMVF DPOUFOU@ ʮDPOUFOU@ʯͷ಺༰ DPOUFOU@ ʮDPOUFOU@ʯͷ಺༰ DPOUFOU@ ʮDPOUFOU@ʯͷ಺༰ DPOUFOU@ ʮDPOUFOU@ʯͷ಺༰ KPC@EFUBJMT KPC@EFUBJMTLFZͷछྨΛ૿΍͢ ٻਓථͷ߲໨Λ૿΍͢ %#ߏ଄Λҙࣝ͢Δ͜ͱͳ͘มߋ͕ग़དྷΔΑ͏ʹ

Slide 22

Slide 22 text

σʔλߏ଄ *E KPC@JE ,FZ 7BMVF DPOUFOU@ ʮDPOUFOU@ʯͷ಺༰ DPOUFOU@ ʮDPOUFOU@ʯͷ಺༰ DPOUFOU@ ʮDPOUFOU@ʯͷ಺༰ DPOUFOU@ ʮDPOUFOU@ʯͷ಺༰ *E DSFBUFE@BU UJUMF 4$065&3Λ։ൃ͢ΔΤϯδχΞͷืू KPCT KPC@EFUBJMT KPCTςʔϒϧͷ߲໨͸࠷খݶʹͯ͠ ٻਓථͷίϯςϯπ͸ ผͷςʔϒϧʹอଘ͢Δ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Α͘࢖ΘΕΔίϯϙʔωϯτΛ ࣄલʹ༻ҙ͓͖ͯ͠ɺ TUPSZCPPLͰ֬ೝग़དྷΔΑ͏ʹ͍ͯ͠Δ

Slide 28

Slide 28 text

TUPSZCPPLͱ͸

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

QBDLBHFKTPO ࠷ॳʹݺ͹ΕΔ εΫϦϓτΛࢦఆ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

ΞϓϦέʔγϣϯଆ ίϯϙʔωϯτΛ ݺͼग़͢

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

εΧ΢λʔ స৬ऀ ࠾༻اۀ ӡӦ ٻਓථ ύοέʔδ ϑϩϯτߏ੒ ελΠϧΨΠυ ίϯϙʔωϯτू ϓϩδΣΫτຖʹҧ͏஋Λઃఆ͍ͨ͠

Slide 40

Slide 40 text

ΞϓϦέʔγϣϯଆ ୈҾ਺ʹΦϒδΣΫτΛ ೖΕͯઃఆ஋Λྲྀ͢

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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