$30 off During Our Annual Pro Sale. View Details »

サクッと簡単!お手軽 Scaffold

サクッと簡単!お手軽 Scaffold

KeitaroOkamura

March 08, 2019
Tweet

More Decks by KeitaroOkamura

Other Decks in Technology

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