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

ムームードメインのJavaScript環境を整えた話 / prepare muumuu-domain's javascript

Hiromi Kimura
September 20, 2017

ムームードメインのJavaScript環境を整えた話 / prepare muumuu-domain's javascript

Hiromi Kimura

September 20, 2017
Tweet

More Decks by Hiromi Kimura

Other Decks in Programming

Transcript

  1. ϜʔϜʔυϝΠϯͷ
    JavaScript؀ڥΛ
    ੔͑ͨ࿩
    2017.9.20 ϗεTechMTG #5
    ໦ଜ ޿ւ / GMOϖύϘ

    View Slide

  2. ໦ଜ ޿ւ @kimromi
    GMOϖύϘ ϗεςΟϯάࣄۀ෦
    ϜʔϜʔυϝΠϯΤϯδχΞ ݉ Ϧʔμʔ
    (Πϯλʔϯγοϓ͕ऴΘͬͯؾ͕ൈ͚ؾຯ)

    View Slide

  3. ਖ਼͍͠දه͸JavaScript
    ✕ javascript
    ✕ Javascript
    ✕ Java Script
    ✕ Java

    View Slide

  4. 2017.7.20 γϣοϐϯάΧʔτԽ
    https://pepabo.com/news/information/201707201300

    View Slide

  5. https://pepabo.com/news/information/201707201300
    https://tech.pepabo.com/2017/07/26/muumuu-shopping-cart/

    View Slide

  6. JavaScript΍Γ·ͨ͠

    View Slide

  7. ΍ͬͨ͜ͱʢΞδΣϯμʣ
    1. JavaScriptΛ஌Δ
    2. JavaScriptͷτϥϯεύΠϧɾϏϧυ
    3. JavaScriptͷςετ
    4. JavaScriptͷLint

    View Slide

  8. 1. JavaScriptΛ஌Δ

    View Slide

  9. JavaScriptͱ͸ʁ
    • ΠϯλϓϦλܕ
    • ಈతܕ෇͚
    • ΦϒδΣΫτࢦ޲ݴޠ
    • ࠷৽͸Ϋϥε΋ॻ͚Δ
    Mozilla Developer Network(MDN)
    https://developer.mozilla.org/ja/docs/Web/JavaScript

    View Slide

  10. JavaScriptͷඪ४Խ
    • Ecma International - ΤΫϚɾΠϯλʔφγϣφϧ

    ʢຊ෦͸εΠε δϡωʔϒʣ
    • ECMAScript (ΤΫϚεΫϦϓτ) ͱ͍͏ඪ४

    View Slide

  11. Edition ެ։೔ ϒϥ΢βରԠ
    ES1 ॳ൛ 1997೥6݄
    ឯ༨ۂં...
    ES5 2009೥12݄
    ES5.1 2011೥6݄ Internet Explorer 11
    ES6

    (ES2015)
    2015೥6݄
    ES2016 2016೥6݄ Microsoft Edge, FireFox,
    Chrome, Safariͷ࠷৽
    ES2017 ࡦఆத
    ECMAScriptͷྺ࢙

    View Slide

  12. ֤ϒϥ΢βͷରԠঢ়گ
    http://kangax.github.io/compat-table/es6/
    ECMAScript compatibility table

    View Slide

  13. • EdgeɺFFɺChromeɺSafariͷ࠷৽͸

    ES6ɺES2016ʹରԠ
    • IE11͸ES6ະରԠ
    ֤ϒϥ΢βͷରԠঢ়گ

    View Slide

  14. ϒϥ΢βγΣΞ
    http://news.mynavi.jp/news/2017/04/03/056/

    View Slide

  15. https://muumuu-domain.com/?mode=faq&state=answer&id=000676

    View Slide

  16. ϦϦʔε͸ES5ඞਢ
    ͨͩ։ൃ͸ES6Ҏ߱Ͱ

    View Slide

  17. 2. JavaScriptͷ
    τϥϯεύΠϧɾϏϧυ

    View Slide

  18. JavaScriptͷτϥϯεύΠϧ
    • ES6Ҏ߱ͷJavaScriptΛES5ʹม׵
    • ιʔείʔυΛผͷιʔείʔυʹม׵ͷҙ
    • Babel

    View Slide

  19. JavaScriptͷϏϧυ
    Webpack
    https://webpack.github.io/

    View Slide

  20. Ϗϧυ͢ΔϝϦοτ
    • ։ൃ࣌
    • ػೳຖʹϑΝΠϧΛ෼ׂͰ͖Δ (Ϟδϡʔϧ)
    • ֎෦ϞδϡʔϧΛར༻͠΍͍͢
    • ຊ൪ӡ༻࣌
    • ̍ͭͷϑΝΠϧʹ·ͱΊϦΫΤετ਺ݮ
    • Uglifyͯ͠ϑΝΠϧαΠζ΋ݮ

    View Slide

  21. BQQKT
    DBDIFKT 7VFKT
    TFUUJOHTKT
    BKBYKT "YJPTKT
    DBSUKT
    ES6Ҏ߱ ES5
    webpack
    app.js : entryϑΝΠϧ
    cart.js : outputϑΝΠϧ
    Webpack + Babel (ϜʔϜʔ)

    View Slide

  22. module.exports = {
    entry: {
    cart: __dirname + '/src/cart/app.js',
    },
    output: {
    path: __dirname + '/../app/assets/javascripts',
    filename: 'cart.js'
    },
    module: {
    loaders: [
    {
    test: /\.js$/,
    exclude: /node_module/,
    loader: 'babel-loader'
    }
    ]
    },
    }
    webpack.config.js

    View Slide

  23. τϥϯεύΠϧͨ͠ͷʹ

    IE11Ͱಈ͔ͳ͍ɾɾ
    • Axiosͱ͍͏AjaxϥΠϒϥϦ
    • Promise(ES6)͕IE11ରԠ͍ͯ͠ͳ͔ͬͨ
    • polyfillΛ࢖͏ͱಈ࡞͢Δͱͷهड़
    https://babeljs.io/learn-es2015/#ecmascript-2015-features-promises

    View Slide

  24. Polyfill
    • αϙʔτ͍ͯ͠ͳ͍ػೳΛ࢖͑ΔΑ͏ʹ
    • τϥϯεύΠϧͰ͸ͳ͘ҰॹʹಡΈࠐΉ
    • BabelͰͷτϥϯεύΠϧͱ૊Έ߹Θͤॿ͚߹͏

    View Slide

  25. BQQKT
    DBDIFKT 7VFKT
    TFUUJOHTKT
    BKBYKT "YJPTKT
    DBSUKT
    ES6Ҏ߱ ES5
    1PMZpMMKT
    webpack
    Webpack + Babel + Polyfill

    View Slide

  26. module.exports = {
    entry: {
    cart: ['babel-polyfill', __dirname + '/src/cart/app.js'],
    },
    output: {
    path: __dirname + '/../app/assets/javascripts',
    filename: 'cart.js'
    },
    module: {
    loaders: [
    {
    test: /\.js$/,
    exclude: /node_module/,
    loader: 'babel-loader'
    }
    ]
    },
    }
    webpack.config.js

    View Slide

  27. https://muumuu-domain.com/?mode=faq&state=answer&id=000676

    View Slide

  28. webpack --watch
    • webpack͕ىಈͬ͠ͺͳ͠ͰϑΝΠϧΛ؂ࢹ
    • ։ൃத͸खݩͰwatch͓ͯ͘͠
    • ϑΝΠϧʹมߋ͕͋ΔͱࣗಈϏϧυ

    View Slide

  29. 3. JavaScriptͷςετ

    View Slide

  30. BQQKT
    DBDIFKT 7VFKT
    TFUUJOHTKT
    BKBYKT "YJPTKT
    DBSUKT
    ES6Ҏ߱ ES5
    webpack
    Webpack + Babel (ϜʔϜʔ)

    View Slide

  31. BQQKT
    DBDIFKT 7VFKT
    TFUUJOHTKT
    BKBYKT "YJPTKT
    DBSUKT
    ES6Ҏ߱ ES5
    webpack
    Webpack + Babel (ϜʔϜʔ)
    ࣗ෼ͨͪͰ։ൃͨ͠
    Ϟδϡʔϧͨͪ

    View Slide

  32. JavaScriptͷ୯ମςετ
    • Ϟδϡʔϧʹ෼͚ͯ։ൃ
    • ͱ͍͏͜ͱ͸Ϟδϡʔϧຖʹςετ͕ॻ͚Δ

    View Slide

  33. AVA
    • https://github.com/avajs/ava 10000star over
    • ઃఆ͕γϯϓϧ
    • ෳ਺ςετΛฒྻ࣮ߦ
    • Karma + Jasmine͕ͩͬͨઃఆ͕ෳࡶͩͬͨ

    View Slide

  34. export default class Human {
    constructor() {
    this.message = 'hello';
    }
    say() {
    return this.message;
    }
    angry() {
    this.message = `${this.message}!!!!!`;
    }
    }
    human.js (ྫ)

    View Slide

  35. import test from 'ava';
    import Human from './human';
    test('#say', t => {
    let human = new Human();
    t.is(human.say(), 'hello');
    });
    test('#angry', t => {
    let human = new Human();
    t.is(human.say(), 'hello');
    human.angry();
    t.is(human.say(), 'hello!!!!!');
    human.angry();
    t.is(human.say(), 'hello!!!!!!!!!!');
    });
    human.spec.js

    View Slide

  36. 4. JavaScriptͷLint

    View Slide

  37. Lint
    • ߏจΛࣗಈͰἧ͑Δ
    • ਓ͕ؒΠϯσϯτͳͲΛؾʹ͠ͳͯ͘ྑ͍
    • ػցͷྗͰϑΝΠϧमਖ਼·Ͱ
    • ਓ͕ؒਓؒͷ࢓ࣄʹूதͰ͖Δ

    View Slide

  38. ESLint / JSLint / JSHint
    Google Trends - աڈ̏೥ؒ

    View Slide

  39. ESLint

    View Slide

  40. ESLint
    • ϧʔϧϑΝΠϧ͸ .eslintrc.[ json | js | yaml ]

    ϜʔϜʔ͸YAML
    • .eslintignoreͰআ֎ϑΝΠϧΛࢦఆ
    • eslintίϚϯυͰLint࣮ߦ
    • eslint --fixͰࣗಈͰߏจमਖ਼΋Մೳ

    View Slide

  41. .eslintrc.yaml
    env:
    browser: true # ϒϥ΢βͷάϩʔόϧม਺Λར༻Մೳʹ͢Δ
    es6: true # ES6ͷ࢓༷Λ༗ޮʹ͢Δ
    rules:
    indent: # Πϯσϯτ͸εϖʔε2ͭ
    - error
    - 2
    semi: # ηϛίϩϯΛৗʹೖΕΔ
    - error
    - always
    ɾɾɾ

    View Slide

  42. ެࣜυΩϡϝϯτʢϧʔϧʣ
    https://eslint.org/docs/rules/
    eslint --fixͰࣗಈमਖ਼Մೳ

    View Slide

  43. JavaScriptߏจͷඪ४
    • ಛʹܾ·Γ΍੍໿͸ͳ͍

    ։ൃ͠΍͍͢Α͏ʹ͍͚ͯ͠͹OK
    • ࢀߟʹͳΔελΠϧΨΠυ
    • Google JavaScript Style Guide

    https://google.github.io/styleguide/jsguide.html
    • NPM Coding Style

    https://docs.npmjs.com/misc/coding-style

    View Slide

  44. ΍ͬͨ͜ͱ࠶ܝ
    1. JavaScriptΛ஌Δ
    2. JavaScriptͷτϥϯεύΠϧ
    3. JavaScriptͷςετ
    4. JavaScriptͷLint

    View Slide

  45. ͍͍ײ͡ʹͳͬͨ

    View Slide

  46. ·ͱΊ
    • खؒ͸গ͔͔͠Δ
    • ։ൃ͠΍͢͞Ξοϓ
    • ϝϯςφϯεੑΞοϓ
    • JavaScriptΛखʹऩΊΑ͏

    View Slide