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

Webpackで作る
Vueコンポーネント開発環境 / Creating the Vue component development with Webpack.

hypermkt
March 16, 2018

Webpackで作る
Vueコンポーネント開発環境 / Creating the Vue component development with Webpack.

バーチー / GMO Pepabo, Inc.
2018.03.16 フロントエンドテックミーティング#1
https://tech.pepabo.com/2018/04/02/frontend-tech-meeting-1-report/

hypermkt

March 16, 2018
Tweet

More Decks by hypermkt

Other Decks in Programming

Transcript

  1. όʔνʔ(.01FQBCP *OD
    ϑϩϯτΤϯυςοΫϛʔςΟϯά
    8FCQBDLͰ࡞Δ

    7VFίϯϙʔωϯτ։ൃ؀ڥ

    View Slide

  2. ιϑτ΢ΣΞΤϯδχΞ

    1)1FS
    IUUQCMPHIZQFSNLUKQ
    όʔνʔ
    !IZQFSNLU

    View Slide

  3. ͸͡Ίʹ̏ͭ

    View Slide

  4. ର৅ऀ
    w7VFKTͷجૅจ๏͕෼͔Δ
    w7VFKTͰ࣍ͷϨϕϧʹߦ͖͍ͨ

    View Slide

  5. ΰʔϧ
    w7VFKTͰίϯϙʔωϯτ։ൃ͕࢝ΊΒΕΔΑ͏ʹͳΔ

    View Slide

  6. ࠓ೔͓࿩͢Δ͜ͱ
    w ݱঢ়ͷ՝୊
    w ՝୊ղܾ
    w 8FCQBDLͱ஥ྑ͘ͳΖ͏
    w 7VFKTͷίϯϙʔωϯτ։ൃ؀ڥΛ࡞Δ
    w ·ͱΊ

    View Slide

  7. ࿩͞ͳ͍͜ͱ
    w ίϯϙʔωϯτͷઃܭ

    View Slide

  8. ݱঢ়ͷ՝୊

    View Slide

  9. ՝୊
    7VFKTͷจ๏ͷجૅ͸෼͔ͬͨ

    ࣍ͷϨϕϧʹߦͨ͘ΊʹԿΛ͢΂͖͔

    View Slide

  10. 7VFKT෦Ͱ্͕Δ੠
    !Ͳ͏΍ͬͨΒ7VFKTͷٕज़͕޲্Ͱ͖Δͷ͔
    !جૅจ๏ͷ࣍ʹԿΛ͢΂͖͔

    ※Vue.js෦ͱ͸ϖύϘࣾ಺ͷVue.jsษڧձ

    View Slide

  11. ՝୊
    طଘͷ)5.- $44 +BWB4DSJQU
    ϑΝΠϧ͕ෳࡶ

    View Slide

  12. طଘͷ)5.- $44 +BWB4DSJQUϑΝΠϧ͕ෳࡶ
    )5.-ͷߦ਺͕௕͗ͯ͢ಡղࠔ೉
    $44Ϋϥεͷ࢖༻Օॴ͕෼͔Βͳ͍ɻ

    ࡟আͨ͠ΒσβΠϯ่Ε͕ൃੜ
    +BWB4DSJQUͷؔ਺ͷ࢖༻Օॴ͕෼͔Βͳ͍ɻ

    ࡟আͨ͠Βޡಈ࡞ͨ͠

    KBWBTDSJQUKT
    IFBEFSUQM

    View Slide

  13. ՝୊ղܾ

    View Slide

  14. 7VFKTͷػೳͰղܾͰ͖ͳ͍͔

    View Slide

  15. ίϯϙʔωϯτͳΒղܾͰ͖Δ

    View Slide

  16. ίϯϙʔωϯτ
    w )5.-ཁૉΛ࠶ར༻ՄೳʹΧϓηϧԽ͠ΧελϜλάͱ͠
    ͯར༻Ͱ͖Δ

    var Header = {
    template: ‘A custom component!’
    }
    new Vue({
    // ...
    components: {
    'my-header': Header
    }
    })



    View Slide

  17. ίϯϙʔωϯτͷϝϦοτ
    # )5.-λάͷݻ·ΓΛίϯϙʔωϯτʹू໿Ͱ͖Δ

    # Մಡੑ͕͕͋Δ
    # ίϯϙʔωϯτΛ࠶ར༻Ͱ͖Δ
    # ίϯϙʔωϯτ಺ʹؔ࿈͢Δ+BWB4DSJQUॲཧ΋

    ·ͱΊΒΕΔ

    View Slide

  18. ίϯϙʔωϯτͷσϝϦοτ
    +BWB4DSJQUͱ)5.-ίʔυ͕ࠞͬͯ͟ݟͮΒ͍ʜ
    )5.-ͷमਖ਼ࠔ೉ʜ
    ଟ਺ͷίϯϙʔωϯτΛએݴ͢Δͱ؅ཧͮ͠Β͍ʜ

    View Slide

  19. ͋Εɾɾɾ

    ָ͠Α͏ͱͨ͠͸͕ͣɺ

    ۤ௧΁ٯ໭Γ

    View Slide

  20. ͦ͜Ͱ

    ୯ҰϑΝΠϧίϯϙʔωϯτ!!

    View Slide

  21. ୯ҰϑΝΠϧίϯϙʔωϯτ
    wίϯϙʔωϯτຖʹ)5.-
    +BWB4DSJQU $44ίʔυΛ

    ͭͷϑΝΠϧʹ෼͚Δ͜ͱ
    ͕Ͱ͖Δ
    w֦ுࢠ͸WVF
    IUUQTKQWVFKTPSHWHVJEFTJOHMFpMFDPNQPOFOUTIUNM

    View Slide

  22. ୯ҰϑΝΠϧίϯϙʔωϯτແ͠






    class="common__header__logo js-common__header__logo" />



    id="header_start_btn_free_sp">͸͡ΊΔ







    ϗʔϜ

    View Slide

  23. ୯ҰϑΝΠϧίϯϙʔωϯτ༗Γ





    )FBEFS.FOVWVF
    )FBEFS4MJEFWVF
    4JHOVQ#VUUPOWVF
    ίϯϙʔωϯτ୯ҐͰ
    ϑΝΠϧ෼ׂͰ͖Δ

    View Slide

  24. ୯ҰϑΝΠϧίϯϙʔωϯτΛ࢖͏ʹ͸
    w8FCQBDL #SPTFSJGZͳͲͷϞδϡʔϧόϯυϥʔ͕ඞཁ
    IUUQTKQWVFKTPSHWHVJEFTJOHMFpMFDPNQPOFOUTIUNM

    View Slide

  25. 8FCQBDLΛ࢖͓͏
    w ओྲྀ͸8FCQBDL
    w 8FCQBDL͸$44ը૾ͳͲ΋·ͱΊΔ͜ͱ͕Ͱ͖Δ
    w #SPTFSJGZ͸+BWB4DSJQUϑΝΠϧͷΈ

    View Slide

  26. WVFDMJͱ͍͏ͷ͕͋Γ·ͯ͠

    View Slide

  27. WVFDMJͱ͸
    w 7VFKTެࣜͷίϚϯυϥΠϯΠϯλʔϑΣʔε
    w ίϚϯυϥΠϯͰߴ଎͔ͭ؆୯ʹ։ൃ؀ڥ͕ߏஙͰ͖Δ
    w IUUQTHJUIVCDPNWVFKTWVFDMJ

    View Slide

  28. ࠷ॳ͔ΒWVFDMJΛ࢖༻͢Δͷ͸Φεεϝ͠ͳ͍
    w ཧ༝ͱͯ͠
    w 8FCQBDL #BCFMͷઃఆํ๏ͷཧղʹͭͳ͕Βͳ͍
    w ॳظͰੜ੒͞ΕΔઃఆϑΝΠϧ͕ෳࡶͳͷͰमਖ਼ࠔ೉
    w ࣗ෼ͷߟ͑ͱͯ͠
    w ࣗ෼͕ཧղɾ؅ཧͰ͖Δ΋ͷΛ࢖ͬͯ΄͍͠

    View Slide

  29. ·ͱΊ
    w 8FCQBDL7VFKTͰ୯ҰϑΝΠϧίϯϙʔωϯτΛ࢖༻
    ͯ͠ɺίϯϙʔωϯτ։ൃΛ࢝ΊΑ͏

    View Slide

  30. 8FCQBDLͱ஥ྑ͘ͳΖ͏

    View Slide

  31. લఏ
    w XFCQBDLWͷ͓࿩Ͱ͢
    w ʹϦϦʔε͞Εͨ͹͔Γ
    w OQN͸ΠϯετʔϧࡁΈͱ͢Δ

    View Slide

  32. 8FCQBDLͱ͸Կ͔ʁ

    View Slide

  33. Ϟμϯͳ+BWB4DSJQUΞϓϦέʔγϣϯ޲͚ͷ

    ϞδϡʔϧόϯυϥʔͰ͋Δ

    View Slide

  34. Ϟδϡʔϧόϯυϥʔͱ͸
    w ෳ਺ͷϞδϡʔϧ KT TBTTͳͲ
    ΛҰͭͷϑΝΠϧʹ

    όϯυϧͯ͠ ·ͱΊͯ
    ͘ΕΔ΋ͷ

    ग़యIUUQTXFCQBDLKTPSH

    View Slide

  35. ·ͣ͸؆୯ʹ৮ͬͯΈΑ͏

    View Slide

  36. ΍ͬͯΈΔ͜ͱᶃ
    w ̎ͭͷ+BWB4DSJQUϞδϡʔϧϑΝΠϧΛ݁߹ͯ͠ΈΔ
    w ϒϥ΢βͷ$POTPMFλϒʹ)FMMP8PSMEͱग़ྗ͠Α͏

    View Slide


  37. ϑΝΠϧͱσΟϨΫτϦߏ੒
    $ tree .
    .
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
    │ ├── app.js
    │ ├── hello.js
    │ └── world.js
    └── webpack.config.js
    1 directory, 7 files

    View Slide


  38. 8FCQBDLͷΠϯετʔϧ
    $ npm init -y

    $ npm install —-save-dev webpack
    webpack-cli
    wW͔ΒίϚϯυϥΠϯΠϯλʔϑΣʔε͕෼ׂ͞ΕͨͷͰ

    XFCQBDLDMJͷΠϯετʔϧ΋ඞཁ

    View Slide


  39. 8FCQBDLઃఆϑΝΠϧ
    const path = require('path');
    module.exports = {

    // ΤϯτϦϙΠϯτͷઃఆ
    entry: './src/app.js',
    output: {
    // ग़ྗϑΝΠϧ໊

    filename: 'bundle.js',
    // ग़ྗઌσΟϨΫτϦ

    path: path.join(__dirname, 'dist/')
    }
    }
    XFCQBDLDPOpHKT

    View Slide










  40. // export defaultͰؔ਺ΛϞδϡʔϧͱͯ͠ެ։͢Δ

    export default function hello() {
    return 'Hello';
    }
    export default function world() {
    return 'World';
    }
    JOEFYIUNM
    TSDIFMMPKT
    TSDXPSMEKT

    // ֎෦Ϟδϡʔϧ͔ΒΤΫεϙʔτ͞Εͨؔ਺ΛΠϯϙʔτ͢Δ

    import hello from './hello.js';
    import world from './world.js';
    console.log(hello() + world());
    TSDBQQKT

    View Slide


  41. XFCQBDLͰϏϧυͯ͠όϯυϧϑΝΠϧΛੜ੒͢Δ
    $ npx webpack
    Hash: e7d757560adbd755bcca
    Version: webpack 4.1.1
    Time: 265ms
    Built at: 2018-3-15 23:17:15
    Asset Size Chunks Chunk
    Names
    bundle.js 592 bytes 0 [emitted] main
    Entrypoint main = bundle.js
    [0] ./src/app.js + 2 modules 205 bytes {0}
    [built]
    | ./src/app.js 97 bytes [built]
    | ./src/hello.js 54 bytes [built]
    | ./src/world.js 54 bytes [built]
    WARNING in configuration
    The 'mode' option has not been set. Set 'mode'
    option to 'development' or 'production' to
    enable defaults for this environment.
    $ tree .
    .
    ├── dist
    │ └── bundle.js
    ├── index.html
    ├── src
    │ ├── app.js
    │ ├── hello.js
    │ └── world.js
    └── webpack.config.js
    2 directories, 6 files
    ૿͑ͯΔ

    View Slide


  42. ϒϥ΢βͰόϯυϧϑΝΠϧΛಡΈࠐΉ
    දࣔ͞Εͨ

    View Slide

  43. ΍ͬͯΈΔ͜ͱᶄ
    w &4͕࢖͑ΔΑ͏ʹ͠Α͏
    w खॱ
    w 8FCQBDLͷϩʔμʔઃఆͰ&4ܗࣜͷ+BWB4DSJQU

    ϑΝΠϧ͕ಡΈࠐΊΔΑ͏ʹઃఆ͢Δ

    View Slide


  44. #BCFMͷΠϯετʔϧ
    $ npm install --save babel-loader
    babel-preset-es2015
    wCBCFMMPBEFS#BCFMͷ8FCQBDL༻ϓϥάΠϯ
    w8FCQBDLʹઃఆ͢Ε͹+BWB4DSJQUϑΝΠϧΛ&4ม׵͠
    ͯ͘ΕΔ

    View Slide


  45. ϩʔμʔઃఆ
    … // লུ
    module: {
    rules: [
    {
    test: /\.js$/, // ϩʔμʔର৅ͷ֦ுࢠ
    use: [{
    loader: ‘babel-loader', // ར༻͢Δϩʔμʔ
    options: {
    presets: ['es2015']
    }
    }]
    }
    ]
    }
    XFCQBDLDPOpHKT
    wϩʔμʔઃఆͱ͸ɺ$44ͳͲ+BWB4DSJQUҎ֎ͷϑΝΠϧΛ
    ಡΈࠐΉઃఆ

    View Slide


  46. ࣮ߦͯ͠ΈΑ͏
    import hello from './hello.js';
    import world from './world.js';
    const message = hello() + ' ES6’ // ES6ͷม਺એݴΛ࢖༻
    console.log(message);
    TSDBQQKT
    wTSDBQQKTʹ&4ه๏ͷमਖ਼Λͯ͠OQYXFCQBDLΛ࣮ߦ
    wϒϥ΢βͷ$POTPMFϩάʹग़ྗ͞ΕΔ
    දࣔ͞Εͨ

    View Slide

  47. ͬ͘͟ΓͱҰ࿈ͷྲྀΕ͸

    ෼͔Γ·ͨ͠Ͱ͠ΐ͏͔

    View Slide

  48. ։ൃ༻αʔόʔXFCQBDLEFWTFSWFS
    w ϩʔΧϧαʔόʔΛىಈͰ͖Δ
    w ϑΝΠϧͷมߋΛݕ஌ͯࣗ͠ಈϏϧυͯ͠ɺϒϥ΢βଆ΋
    ࣗಈతʹϦϩʔυ
    w গͳ͍ઃఆͰ͙͢ʹར༻Ͱ͖Δ

    View Slide

  49. XFCQBDLEFWTFSWFSͷઃఆखॱ

    $ npm install —-save-dev webpack-dev-server
    const path = require('path');
    module.exports = {
    entry: './src/index.js',
    output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
    },
    devServer: {
    contentBase: path.join(__dirname, 'dist')
    },
    }
    XFCQBDLDPOpHKT
    ᶃXFCQBDLEFWTFSWFSΛΠϯετʔϧ
    ᶄ഑৴ݩσΟϨΫτϦΛࢦఆ͢Δ

    View Slide

  50. XFCQBDLEFWTFSWFSͷઃఆखॱ

    $ npx webpack-dev-server
    ᶅXFCQBDLEFWTFSWFSΛىಈ

    View Slide

  51. ޙ൒

    7VFKTͷίϯϙʔωϯτ։ൃ؀ڥΛ

    ࡞Ζ͏

    View Slide

  52. खॱ
    ؀ڥߏங
    8FCQBDLͷΠϯετʔϧ
    8FCQBDL։ൃαʔόʔͷઃఆ
    WVF͕ಡΊΔΑ͏ʹઃఆ͢Δ
    ϩʔμʔઃఆ
    ୯ҰϑΝΠϧίϯϙʔωϯτͷදࣔઃఆ
    ίϯϙʔωϯτϑΝΠϧͷ࡞੒

    View Slide

  53. ؀ڥߏங
    w ·ͣ͸ϓϩδΣΫτͷσΟϨΫτϦͷதͰ

    QBDLBHFKTPOΛ࡞੒͢Δ

    $ mkdir webpack-with-vue

    $ cd webpack-with-vue

    $ npm init -y

    View Slide

  54. 8FCQBDLͷΠϯετʔϧ
    w ࣍ʹ8FCQBDLͱ։ൃ༻αʔόʔΛΠϯετʔϧ
    w ͜͜·Ͱ͸؆୯Ͱ͢Ͷ

    $ npm install —-save-dev webpack webpack-cli
    webpack-dev-server

    View Slide

  55. 8FCQBDL։ൃαʔόʔͷઃఆ

    const path = require('path');
    module.exports = {
    entry: './src/index.js',
    output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
    },
    devServer: {
    contentBase: path.join(__dirname, 'dist')
    },
    }
    XFCQBDLDPOpHKT







    Hello World


    EJTUJOEFYIUNM
    த਎͸ۭ TSDJOEFYKT

    View Slide

  56. ։ൃ؀ڥαʔόʔΛ֬ೝ͠Α͏

    $ npx webpack-dev-server ίϯιʔϧ্

    View Slide

  57. WVF͕ಡΊΔΑ͏ʹઃఆ͢Δ
    7VFΛΠϯετʔϧ͢Δ

    $ npm install —-save vue
    $ npm install --save-dev vue-loader vue-template-
    compiler css-loader
    7VFKTͷ୯ҰϑΝΠϧίϯϙʔωϯτ WVFϑΝΠϧ
    Λѻ
    ͏ͨΊʹҎԼΛΠϯετʔϧ

    View Slide

  58. ϩʔμʔઃఆ
    const path = require('path');
    module.exports = {
    entry: './src/index.js',
    output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
    },
    module: {
    rules: [
    {
    test: /\.vue$/,
    loader: 'vue-loader',
    }
    ]
    },
    devServer: {
    contentBase: path.join(__dirname, 'dist')
    },
    }
    XFCQBDLDPOpHKT

    View Slide

  59. ୯ҰϑΝΠϧίϯϙʔωϯτͷදࣔઃఆ











    EJTUJOEFYIUNM
    import Vue from 'vue';
    import App from './components/App.vue';
    window.onload = function() {
    new Vue(App).$mount('#app');
    }
    TSDJOEFYKT
    w 8FCQBDLͰϏϧυͨ͠+4ΛಡΈࠐΉ
    w 7VFͰϚ΢ϯτ͢ΔՕॴΛࢦఆ
    w ը໘ͷಡΈࠐΈ͕׬ྃͨ͠Β

    BQQʹ"QQWVFΛϚ΢ϯτ ஔ͖׵͑ʣ

    View Slide

  60. ίϯϙʔωϯτϑΝΠϧͷ࡞੒



    This is App component.


    <br/>import Header from './Header.vue';<br/>export default {<br/>components: {<br/>'header-component': Header<br/>}<br/>}<br/>
    <br/>.blue {<br/>color: blue;<br/>}<br/> TSDDPNQPOFOUT"QQWVF


    {{ title }}


    <br/>export default {<br/>data: function() {<br/>return {<br/>title: 'This is Header component’<br/>}<br/>}<br/>}<br/>
    <br/>.title {<br/>font-size: 20px;<br/>font-weight: bold;<br/>}<br/> TSDDPNQPOFOUT)FBEFSWVF

    View Slide

  61. ϒϥ΢βͰදࣔ͢Δͱ
    "QQ$PNQPOFOU
    )FBEFS$PNQPOFOU

    View Slide

  62. ͥͻ೔ใΞϓϦΛ
    ୯ҰϑΝΠϧίϯϙʔωϯτԽ

    ͯ͠Έ͍ͯͩ͘͞

    View Slide

  63. ·ͱΊ

    View Slide

  64. ·ͱΊ
    w 8FCQBDLͷ֓ཁɺ؆୯ͳ࢖͍ํ͕෼͔ͬͨ
    w 7VFKTͷ୯ҰϑΝΠϧίϯϙʔωϯτͷϏϧυ؀ڥͷߏங
    ํ๏͕෼͔ͬͨ
    w7VFKTͷ࣍ͷϨϕϧ΁ߦ͜͏ʂʂ

    View Slide