Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ムームードメインのJavaScript環境を整えた話 / prepare muumuu-dom...

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ͱ͸ʁ • ΠϯλϓϦλܕ • ಈతܕ෇͚ • ΦϒδΣΫτࢦ޲ݴޠ • ࠷৽͸Ϋϥε΋ॻ͚Δ Mozilla

    Developer Network(MDN) https://developer.mozilla.org/ja/docs/Web/JavaScript
  2. 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ͷྺ࢙
  3. BQQKT DBDIFKT 7VFKT TFUUJOHTKT BKBYKT "YJPTKT DBSUKT ES6Ҏ߱ ES5 webpack

    app.js : entryϑΝΠϧ cart.js : outputϑΝΠϧ Webpack + Babel (ϜʔϜʔ)
  4. 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
  5. 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
  6. BQQKT DBDIFKT 7VFKT TFUUJOHTKT BKBYKT "YJPTKT DBSUKT ES6Ҏ߱ ES5 webpack

    Webpack + Babel (ϜʔϜʔ) ࣗ෼ͨͪͰ։ൃͨ͠ Ϟδϡʔϧͨͪ
  7. export default class Human { constructor() { this.message = 'hello';

    } say() { return this.message; } angry() { this.message = `${this.message}!!!!!`; } } human.js (ྫ)
  8. 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
  9. ESLint • ϧʔϧϑΝΠϧ͸ .eslintrc.[ json | js | yaml ]


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

    rules: indent: # Πϯσϯτ͸εϖʔε2ͭ - error - 2 semi: # ηϛίϩϯΛৗʹೖΕΔ - error - always ɾɾɾ
  11. JavaScriptߏจͷඪ४ • ಛʹܾ·Γ΍੍໿͸ͳ͍
 ։ൃ͠΍͍͢Α͏ʹ͍͚ͯ͠͹OK • ࢀߟʹͳΔελΠϧΨΠυ • Google JavaScript Style

    Guide
 https://google.github.io/styleguide/jsguide.html • NPM Coding Style
 https://docs.npmjs.com/misc/coding-style