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

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
    DSFBUFE@BU
    UJUMF
    DPOUFOU@
    DPOUFOU@
    DPOUFOU@
    σʔλΛԣ࣋ͪͰ
    อଘ͍ͯ͠ΔͨΊ
    ΧϥϜΛ௥Ճ͢Δ
    ඞཁ͕͋Δ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. σʔλߏ଄
    *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ͷछྨΛ૿΍͢
    ٻਓථͷ߲໨Λ૿΍͢
    %#ߏ଄Λҙࣝ͢Δ͜ͱͳ͘มߋ͕ग़དྷΔΑ͏ʹ
    
    

    View Slide

22. σʔλߏ଄
    
    *E KPC@JE ,FZ 7BMVF
    DPOUFOU@ ʮDPOUFOU@ʯͷ಺༰
    DPOUFOU@ ʮDPOUFOU@ʯͷ಺༰
    DPOUFOU@ ʮDPOUFOU@ʯͷ಺༰
    DPOUFOU@ ʮDPOUFOU@ʯͷ಺༰
    *E DSFBUFE@BU UJUMF
    4$065&3Λ։ൃ͢ΔΤϯδχΞͷืू
    KPCT
    KPC@EFUBJMT
    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