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

Cbffd4d28c61bc35c2e9a7a5aca632c3?s=47 Hiromi Kimura
September 20, 2017

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

Cbffd4d28c61bc35c2e9a7a5aca632c3?s=128

Hiromi Kimura

September 20, 2017
Tweet

Transcript

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

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

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

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

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

  6. JavaScript΍Γ·ͨ͠

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

  8. 1. JavaScriptΛ஌Δ

  9. JavaScriptͱ͸ʁ • ΠϯλϓϦλܕ • ಈతܕ෇͚ • ΦϒδΣΫτࢦ޲ݴޠ • ࠷৽͸Ϋϥε΋ॻ͚Δ Mozilla

    Developer Network(MDN) https://developer.mozilla.org/ja/docs/Web/JavaScript
  10. JavaScriptͷඪ४Խ • Ecma International - ΤΫϚɾΠϯλʔφγϣφϧ
 ʢຊ෦͸εΠε δϡωʔϒʣ • ECMAScript

    (ΤΫϚεΫϦϓτ) ͱ͍͏ඪ४
  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ͷྺ࢙
  12. ֤ϒϥ΢βͷରԠঢ়گ http://kangax.github.io/compat-table/es6/ ECMAScript compatibility table

  13. • EdgeɺFFɺChromeɺSafariͷ࠷৽͸
 ES6ɺES2016ʹରԠ • IE11͸ES6ະରԠ ֤ϒϥ΢βͷରԠঢ়گ

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

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

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

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

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

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

  20. Ϗϧυ͢ΔϝϦοτ • ։ൃ࣌ • ػೳຖʹϑΝΠϧΛ෼ׂͰ͖Δ (Ϟδϡʔϧ) • ֎෦ϞδϡʔϧΛར༻͠΍͍͢ • ຊ൪ӡ༻࣌

    • ̍ͭͷϑΝΠϧʹ·ͱΊϦΫΤετ਺ݮ • Uglifyͯ͠ϑΝΠϧαΠζ΋ݮ
  21. BQQKT DBDIFKT 7VFKT TFUUJOHTKT BKBYKT "YJPTKT DBSUKT ES6Ҏ߱ ES5 webpack

    app.js : entryϑΝΠϧ cart.js : outputϑΝΠϧ Webpack + Babel (ϜʔϜʔ)
  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
  23. τϥϯεύΠϧͨ͠ͷʹ
 IE11Ͱಈ͔ͳ͍ɾɾ • Axiosͱ͍͏AjaxϥΠϒϥϦ • Promise(ES6)͕IE11ରԠ͍ͯ͠ͳ͔ͬͨ • polyfillΛ࢖͏ͱಈ࡞͢Δͱͷهड़ https://babeljs.io/learn-es2015/#ecmascript-2015-features-promises

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

  25. BQQKT DBDIFKT 7VFKT TFUUJOHTKT BKBYKT "YJPTKT DBSUKT ES6Ҏ߱ ES5 1PMZpMMKT

    webpack Webpack + Babel + Polyfill
  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
  27. https://muumuu-domain.com/?mode=faq&state=answer&id=000676

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

  29. 3. JavaScriptͷςετ

  30. BQQKT DBDIFKT 7VFKT TFUUJOHTKT BKBYKT "YJPTKT DBSUKT ES6Ҏ߱ ES5 webpack

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

    Webpack + Babel (ϜʔϜʔ) ࣗ෼ͨͪͰ։ൃͨ͠ Ϟδϡʔϧͨͪ
  32. JavaScriptͷ୯ମςετ • Ϟδϡʔϧʹ෼͚ͯ։ൃ • ͱ͍͏͜ͱ͸Ϟδϡʔϧຖʹςετ͕ॻ͚Δ

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

    Karma + Jasmine͕ͩͬͨઃఆ͕ෳࡶͩͬͨ
  34. export default class Human { constructor() { this.message = 'hello';

    } say() { return this.message; } angry() { this.message = `${this.message}!!!!!`; } } human.js (ྫ)
  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
  36. 4. JavaScriptͷLint

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

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

  39. ESLint

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


    ϜʔϜʔ͸YAML • .eslintignoreͰআ֎ϑΝΠϧΛࢦఆ • eslintίϚϯυͰLint࣮ߦ • eslint --fixͰࣗಈͰߏจमਖ਼΋Մೳ
  41. .eslintrc.yaml env: browser: true # ϒϥ΢βͷάϩʔόϧม਺Λར༻Մೳʹ͢Δ es6: true # ES6ͷ࢓༷Λ༗ޮʹ͢Δ

    rules: indent: # Πϯσϯτ͸εϖʔε2ͭ - error - 2 semi: # ηϛίϩϯΛৗʹೖΕΔ - error - always ɾɾɾ
  42. ެࣜυΩϡϝϯτʢϧʔϧʣ https://eslint.org/docs/rules/ eslint --fixͰࣗಈमਖ਼Մೳ

  43. JavaScriptߏจͷඪ४ • ಛʹܾ·Γ΍੍໿͸ͳ͍
 ։ൃ͠΍͍͢Α͏ʹ͍͚ͯ͠͹OK • ࢀߟʹͳΔελΠϧΨΠυ • Google JavaScript Style

    Guide
 https://google.github.io/styleguide/jsguide.html • NPM Coding Style
 https://docs.npmjs.com/misc/coding-style
  44. ΍ͬͨ͜ͱ࠶ܝ 1. JavaScriptΛ஌Δ 2. JavaScriptͷτϥϯεύΠϧ 3. JavaScriptͷςετ 4. JavaScriptͷLint

  45. ͍͍ײ͡ʹͳͬͨ

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