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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ਖ਼͍͠දه͸JavaScript ✕ javascript ✕ Javascript ✕ Java Script ✕ Java

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

JavaScript΍Γ·ͨ͠

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

1. JavaScriptΛ஌Δ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

JavaScriptͷඪ४Խ • Ecma International - ΤΫϚɾΠϯλʔφγϣφϧ  ʢຊ෦͸εΠε δϡωʔϒʣ • ECMAScript (ΤΫϚεΫϦϓτ) ͱ͍͏ඪ४

Slide 11

Slide 11 text

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ͷྺ࢙

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

• EdgeɺFFɺChromeɺSafariͷ࠷৽͸  ES6ɺES2016ʹରԠ • IE11͸ES6ະରԠ ֤ϒϥ΢βͷରԠঢ়گ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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.conﬁg.js

Slide 23

Slide 23 text

τϥϯεύΠϧͨ͠ͷʹ  IE11Ͱಈ͔ͳ͍ɾɾ • Axiosͱ͍͏AjaxϥΠϒϥϦ • Promise(ES6)͕IE11ରԠ͍ͯ͠ͳ͔ͬͨ • polyﬁllΛ࢖͏ͱಈ࡞͢Δͱͷهड़ https://babeljs.io/learn-es2015/#ecmascript-2015-features-promises

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

BQQKT DBDIFKT 7VFKT TFUUJOHTKT BKBYKT "YJPTKT DBSUKT ES6Ҏ߱ ES5 1PMZpMMKT webpack Webpack + Babel + Polyﬁll

Slide 26

Slide 26 text

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.conﬁg.js

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

3. JavaScriptͷςετ

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

4. JavaScriptͷLint

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

ESLint

Slide 40

Slide 40 text

ESLint • ϧʔϧϑΝΠϧ͸ .eslintrc.[ json | js | yaml ]  ϜʔϜʔ͸YAML • .eslintignoreͰআ֎ϑΝΠϧΛࢦఆ • eslintίϚϯυͰLint࣮ߦ • eslint --ﬁxͰࣗಈͰߏจमਖ਼΋Մೳ

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

ެࣜυΩϡϝϯτʢϧʔϧʣ https://eslint.org/docs/rules/ eslint --ﬁxͰࣗಈमਖ਼Մೳ

Slide 43

Slide 43 text

JavaScriptߏจͷඪ४ • ಛʹܾ·Γ΍੍໿͸ͳ͍  ։ൃ͠΍͍͢Α͏ʹ͍͚ͯ͠͹OK • ࢀߟʹͳΔελΠϧΨΠυ • Google JavaScript Style Guide  https://google.github.io/styleguide/jsguide.html • NPM Coding Style  https://docs.npmjs.com/misc/coding-style

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

͍͍ײ͡ʹͳͬͨ

Slide 46

Slide 46 text

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