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

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ΛखʹऩΊΑ͏