サクッと簡単!お手軽 Scaffold

サクッと簡単!お手軽 Scaffold

Efaf705a006926394160a3248f16e667?s=128

KeitaroOkamura

March 08, 2019
Tweet

Transcript

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

     % 3 * / ,  * /  ' 6 , 6 0 , "   ' 3 0 / 5  & / %  & % * 5 * 0 /             
  2. ‣ ,FJUBSP0LBNVSB ‣ ΧϥϏφςΫϊϩδʔגࣜձࣾ ‣ ϑϩϯτΤϯυΤϯδχΞ ‣ !LBSBBHFLFJUBSPP ࣗݾ঺հ

  3. ‣ ΞϓϦέʔγϣϯͷ਽ܗ ‣ ྫ͑͹ɺ3VCZPO3BJMTʹ͸ʮ4DBGGPMEʯͱݺ͹ΕΔ਽ܗΛࣗಈ ੜ੒͢Δػೳ͕͋Δ ‣ "OHVMBS$-*ͩͱʮOHHFOFSBUFʯίϚϯυҰൃͰ਽ܗΛੜ੒Ͱ ͖Δ 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. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ