サクッと簡単！お手軽 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. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ