αΫοͱ؆୯ʂ͓खܰ4DBGGPME ( & & , 4 8 ) 0 % 3 * / , * / ' 6 , 6 0 , " ' 3 0 / 5 & / % & % * 5 * 0 /

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

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

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

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

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

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

ѹ౗తײँͬɾɾɾʂ

IUUQXXXIZHFOJP

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

΍Γ͍ͨ͜ͱ ‣ ίϯϙʔωϯτͷ4DBGGPMEΛίϚϯυ͔Βੜ੒͍ͨ͠ʂ ‣ ੜ੒ϩδοΫςϯϓϨʔτ͕ϝϯςφϯε͠΍͍͢͜ͱ ‣ ίϯϙʔωϯτϑΝΠϧ WVF ͕࡞ΒΕΔ ‣ ςετʢ+FTUʣϑΝΠϧ͕࡞ΒΕΔ ‣ 4UPSZCPPLͷϑΝΠϧ͕࡞ΒΕΔ ‣ "UPNJD%FTJHOͷཻ౓͕1BHFTͷ৔߹ɺϧʔςΟϯά͕௥Ճ͞ΕΔ

΍Γ͍ͨ͜ͱ ‣ ίϯϙʔωϯτͷ4DBGGPMEΛίϚϯυ͔Βੜ੒͍ͨ͠ʂ ‣ ੜ੒ϩδοΫςϯϓϨʔτ͕ϝϯςφϯε͠΍͍͢͜ͱ ‣ ίϯϙʔωϯτϑΝΠϧ WVF ͕࡞ΒΕΔ ‣ ςετʢ+FTUʣϑΝΠϧ͕࡞ΒΕΔ ‣ 4UPSZCPPLͷϑΝΠϧ͕࡞ΒΕΔ ‣ "UPNJD%FTJHOͷཻ౓͕1BHFTͷ৔߹ɺϧʔςΟϯά͕௥Ճ͞ΕΔ )ZHFOͳΒ؆୯ʹͰ͖Δʂ

5FNQMBUF --- to: "src/components/<%= category %>/<%= name %>/index.vue" --- import Vue from “vue"; export default Vue.extend({ name: "<%= name %>" }); ‣ ςϯϓϨʔτ͸FKTܗࣜͰهड़ɹྫɿίϯϙʔωϯτϑΝΠϧ

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

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

1SPNQU ‣ QSPNQUKTʹ഑ྻܗࣜͰJORVJSFSͷϑΥʔϚοτΛॻ͖·͢ ‣ όϦσʔγϣϯͰϢʔβʔͷޡͬͨೖྗΛ๷͙͜ͱ΋Մೳ module.exports = [ { type: "input", name: "name", message: "ίϯϙʔωϯτ໊:", validate(value) { if (!value.length) { return "ίϯϙʔωϯτ໊Λೖྗ͍ͯͩ͘͠͞ɻ"; } return true; } },

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

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

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

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

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