サクッと簡単！お手軽 Scaffold

Transcript

1. αΫοͱ؆୯ʂ͓खܰ
   4DBGGPME ( & & , 4
   8 ) 0

   
   % 3 * / ,
   * /
   ' 6 , 6 0 , "
    ' 3 0 / 5
   & / %
   & % * 5 * 0 /
              

2. ‣ ,FJUBSP
   0LBNVSB
   ‣ ΧϥϏφςΫϊϩδʔגࣜձࣾ
   ‣ ϑϩϯτΤϯυΤϯδχΞ
   ‣ !LBSBBHFLFJUBSPP ࣗݾ঺հ

3. ‣ ΞϓϦέʔγϣϯͷ਽ܗ
   ‣ ྫ͑͹ɺ3VCZ
   PO
   3BJMT
   ʹ͸ʮ
   4DBGGPME
   ʯͱݺ͹ΕΔ਽ܗΛࣗಈ ੜ੒͢Δػೳ͕͋Δ
   ‣ "OHVMBS
   $-*
   ͩͱʮ
   OH
   HFOFSBUF
   ʯίϚϯυҰൃͰ਽ܗΛੜ੒Ͱ ͖Δ 4DBGGPME
   ͱ͸ʁ

4. ‣ 7VF
   $-*
   ͱ͍͏ϓϩδΣΫτͷ਽ܗΛੜ੒͢Δ։ൃπʔϧ͸͋Δ
   ‣ (FOFSBUPS
   ͱ͍͏ػೳ͕͋ΓɺطଘςϯϓϨʔτΛ࢖ͬͯϢʔβʔ ޲͚ʹΧελϚΠζ΋Մೳ
   ‣ IUUQTHJUIVCDPNWVFKTUFNQMBUFT
   ‣ ͭ·ΓɺϓϩδΣΫτݻ༗ͷίʔυ͸ੜ੒Ͱ͖Δ 7VFKT
   Ͱ͸ʁ

5. ‣ ϓϩδΣΫτͷઃܭΛόγοͱܾΊΕͳ͍ɻɻɻ
   ‣ ࠓޙɺॊೈʹมԽ͍ͯ͘͠Մೳੑ͋Γ
   ‣ ΋ͬͱؾܰʹ
   4DBGGPMEJOH
   ͍ͨ͠ʂ ͔͠͠ɻɻɻ $ vue generate

   ίϚϯυཉ͍͠

6. ઌि͙Β͍ ʮ
   Կ͔ྑ͍ͷ͋Γ·͔͢ʔʁʯ

7. ઌि͙Β͍ ʮ
   )ZHFO
   ͸͍͍ͧʙ
   ʯ

8. ѹ౗తײँͬɾɾɾʂ

9. IUUQXXXIZHFOJP

10. )ZHFO͕Ͱ͖Δ͜ͱ ‣ γϯϓϧ͔ͭߴ଎ͳίʔυδΣωϨʔλʔ
    ‣ ର࿩ܗࣜͰϑΝΠϧΛ࡞੒Ͱ͖Δʂ
    ‣ طଘϑΝΠϧʹ΋ίʔυΛ஫ೖͰ͖Δʂ
    ‣ ࣗ༝ʹ$-*
    ʹΦϓγϣϯΛ౉ͤͯɺςϯϓϨʔτ಺Ͱͦͷ஋ Λల։Ͱ͖Δʂ
    

    ‣ ΧελϚΠζ͸ແݶେʂ

11. ΍Γ͍ͨ͜ͱ ‣ ίϯϙʔωϯτͷ
    4DBGGPME
    ΛίϚϯυ͔Βੜ੒͍ͨ͠ʂ
    ‣ ੜ੒ϩδοΫςϯϓϨʔτ͕ϝϯςφϯε͠΍͍͢͜ͱ
    ‣ ίϯϙʔωϯτϑΝΠϧ WVF ͕࡞ΒΕΔ
    ‣

    ςετʢ+FTUʣϑΝΠϧ͕࡞ΒΕΔ
    ‣ 4UPSZCPPLͷϑΝΠϧ͕࡞ΒΕΔ
    ‣ "UPNJD%FTJHOͷཻ౓͕
    1BHFT
    ͷ৔߹ɺϧʔςΟϯά͕௥Ճ͞ΕΔ

12. ΍Γ͍ͨ͜ͱ ‣ ίϯϙʔωϯτͷ
    4DBGGPME
    ΛίϚϯυ͔Βੜ੒͍ͨ͠ʂ
    ‣ ੜ੒ϩδοΫςϯϓϨʔτ͕ϝϯςφϯε͠΍͍͢͜ͱ
    ‣ ίϯϙʔωϯτϑΝΠϧ WVF ͕࡞ΒΕΔ
    ‣

    ςετʢ+FTUʣϑΝΠϧ͕࡞ΒΕΔ
    ‣ 4UPSZCPPLͷϑΝΠϧ͕࡞ΒΕΔ
    ‣ "UPNJD%FTJHOͷཻ౓͕
    1BHFT
    ͷ৔߹ɺϧʔςΟϯά͕௥Ճ͞ΕΔ )ZHFOͳΒ؆୯ʹͰ͖Δʂ

13. 5FNQMBUF --- to: "src/components/<%= category %>/<%= name %>/index.vue" --- <template>

    <div/> </template> <script lang="ts"> import Vue from “vue"; export default Vue.extend({ name: "<%= name %>" }); </script> ‣ ςϯϓϨʔτ͸
    FKT
    ܗࣜͰهड़ɹྫɿίϯϙʔωϯτϑΝΠϧ

14. 5FNQMBUF --- to: "src/components/<%= category %>/<%= name %>/index.vue" --- <template>

    <div/> </template> <script lang="ts"> import Vue from “vue"; export default Vue.extend({ name: "<%= name %>" }); </script> ‣ ςϯϓϨʔτ͸
    FKT
    ܗࣜͰهड़ɹྫɿίϯϙʔωϯτϑΝΠϧ IFBE
    ෦෼ʢZBNM
    ܗࣜʣ CPEZ
    ෦෼ʢFKT
    ܗࣜʣ

15. 1SPNQU ‣ ίϚϯυΛ࣮ߦ͢Δͱɺྫ͑͹ʮίϯϙʔωϯτ໊͸Կʁʯͱ͔ ͕ର࿩తʹग़͖ͯ·͢ɻͦͷର࿩తͳ಺༰ΛಠࣗʹΧελϚΠζ ͢Δ͜ͱ͕Ͱ͖Δ $ hygen new component ✔

    ίϯϙʔωϯτ໊: · TestButton ? ίϯϙʔωϯτཻ౓: … ✔ atoms ✔ molecules ✔ organisms ✔ pages

16. 1SPNQU ‣ QSPNQUKT
    ʹ഑ྻܗࣜͰ
    JORVJSFS
    ͷϑΥʔϚοτΛॻ͖·͢
    ‣ όϦσʔγϣϯͰϢʔβʔͷޡͬͨೖྗΛ๷͙͜ͱ΋Մೳ module.exports = [ { type:

    "input", name: "name", message: "ίϯϙʔωϯτ໊:", validate(value) { if (!value.length) { return "ίϯϙʔωϯτ໊Λೖྗ͍ͯͩ͘͠͞ɻ"; } return true; } },

17. )FMQFST ‣ DPOpH
    ϑΝΠϧͷ
    IZHFOKT
    ʹϞδϡʔϧΛಡΈࠐΉͱɺςϯϓ Ϩʔτ಺ͰͦͷϞδϡʔϧ͕࢖͑Δ module.exports = { helpers: { fs:

    require("fs") } };

18. )FMQFST ‣ ྫ͑͹ɺ/PEFKT
    ͷ
    GT
    ϞδϡʔϧΛ࢖͑͹ɺϑΝΠϧૢ࡞͕Մೳ
    ‣ FYQPSU
    ͨ͠ϑΝΠϧΛҰׅͰಡΈ͜Έɺ·ͱΊͯ
    FYQPSU
    ͢ΔΑ ͏ͳϑΝΠϧ΋࡞੒Ͱ͖Δ // components/atoms/index.ts import TestButton

    from “./TestButton/index.vue"; import TestIcon from "./TestIcon/index.vue"; export { TestButton, TestIcon };

19. $ ΋͕࣌ؒ͠༨͍ͬͯͨΒɺdemo ͠·͢

20. ‣ )ZHFO
    ͸͍͍ͧ
    ‣ पลπʔϧ͸΍ͬͺΓେࣄɻ໘౗ͳ͜ͱ͸ࣗಈԽ͢Δ
    ‣ ίϯϙʔωϯτ໊ͱ͔ελΠϧΨΠυʹԊͬͨίʔυ୲อͰ͖Δ
    ‣ ΧελϚΠζ࣍ୈͰແݶͷՄೳੑ✨ ࠓ೔ͷ·ͱΊ

21. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ