サクッと簡単！お手軽 Scaffold

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. IUUQXXXIZHFOJP
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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 };
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide