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

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