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

my tools

my tools

8/10の社内勉強会資料

Yuta Hiroto

August 10, 2016
Tweet

More Decks by Yuta Hiroto

Other Decks in Technology

Transcript

  1. ࠷ۙͷࣗ෼ͷ

    πʔϧࣄ৘
    frontier-dev-jsษڧձ

    View Slide

  2. ஫ҙ
    • ࠓճ͸webϑϩϯτΤϯυدΓͷ࿩Λ͠·͢
    • ϑϨʔϜϫʔΫ΍ςετϥϯφʔͷ࿩͸

    ͠·ͤΜ
    • ׬੒౓8ׂͰ͢(དྷिެ։͠·͢ɻɻ)

    View Slide

  3. ࣗݾ঺հ
    Github
    abouthiroppy
    times_about_hiroppy

    View Slide

  4. ࠓ࢖ͬͯͳ͍πʔϧͱ

    ࠓ࢖͍ͬͯΔπʔϧ

    ͷ࿩

    View Slide

  5. ࠓ͸࢖ͬͯͳ͍πʔϧ܈
    etc.

    View Slide

  6. ࠓ࢖͍ͬͯΔπʔϧ܈
    babel npm
    webpack eslint

    View Slide

  7. ҠΓมΘΓ͕

    ܹ͗ͯ͢͠Θ͔Βͳ͍…

    View Slide

  8. ࠷௿ݶɺ։ൃͰ΄͍͠΋ͷ
    • ύοέʔδ؅ཧπʔϧ
    • ৽͍͠ߏจͰॻ͍ͯ΋ݹ͍ϒϥ΢βʹ

    ରԠͤ͞ΔΑ͏ʹ͢ΔτϥϯεύΠϥ
    • Ϟδϡʔϧղܾπʔϧ
    • lintπʔϧ(੩తݕূπʔϧ)
    • ςετπʔϧ(࣌ؒͷ౎߹্ɺࠓճ͸࿩͠·ͤΜ)

    View Slide

  9. ύοέʔδ؅ཧ
    bower npm
    vs

    View Slide

  10. bower vs npm
    • ੲ͸ϑϩϯτΤϯυ͸bowerɺόοΫΤϯυ(node)͸npmͩͬͨ
    • ύοέʔδ͕྆ํ͋Δͱ΋ݶΒͳ͍͠ɺόʔδϣϯҧ͏Մೳੑ΋͋ͬͨ
    • browserifyͷ͓͔͛Ͱnode.jsͱಉ͡ͰϑϩϯτΤϯυͷίʔυ΋ϞδϡʔϧػೳΛ࢖͍

    ॻ͚ΔΑ͏ʹͳͬͨͨΊɺnpmͰͷ؅ཧͷํָ͕ʹͳͬͨ
    bower npm
    vs

    View Slide

  11. τϥϯεύΠϥ
    traceur-compiler babel
    vs

    View Slide

  12. τϥϯεύΠϥͱ͸ʁ
    • ৽͍͠ߏจΛࠓͷ࣌୅ͷ
    ϒϥ΢βͰ΋ಈ͘Α͏ʹ
    ίʔυΛు͍ͯ͘ΕΔ

    πʔϧ
    • ϒϥ΢βʹΑͬͯ৽͍͠
    ߏจͷ࣮૷Ϩϕϧ͕ҟͳ
    Δ͕ɺ։ൃऀ͸ͦΕΛ

    ؾʹ͠ͳͯ͘΋Α͘ͳΔ
    const post = (mail = 'tegami') => {
    const index = 0
    }
    'use strict';
    var post = function post() {
    var mail = arguments.length <= 0 ||
    arguments[0] === undefined ? 'tegami' :
    arguments[0];
    var index = 0;
    };

    View Slide

  13. ࣌୅͸ES2015(ES6)
    େମ͸αϙʔτ͞Ε͖͕ͯͨɺ

    աڈͷϒϥ΢β΍IE11ͳͲͷରԠ཰͕௿͍΋ͷʹରͯ͠

    ಈ͘Α͏ʹ͢Δ(ES5΁མͱ͢)ʹ͸τϥϯεύΠϧΛ͢Δඞཁ͕͋Δ
    FYI: http://kangax.github.io/compat-table/es6/

    View Slide

  14. ES2015
    • ECMAScriptͱ͍͏JavaScriptͷඪ४ن֨Ͱ

    ES2015(ES6)ͱ͸ୈ6൛ͷϦϦʔε
    • arrows
    • classes
    • enhanced object literals
    • template strings
    • destructuring
    • default + rest + spread
    • let + const
    • iterators + for..of
    • generators
    • unicode
    • modules
    • module loaders
    • map + set + weakmap +
    weakset
    • proxies
    • symbols
    • subclassable built-ins
    • promises
    • math + number + string +
    array + object APIs
    • binary and octal literals
    • reflect api
    • tail calls
    ௥Ճ͞Εͨػೳ

    View Slide

  15. traceur-compiler vs babel
    traceur-compiler babel
    vs
    • ϥϯλΠϜΛඞཁͱ͠ͳ͍ͷͰ࣮ߦ࣌ͷΦʔόϔου͕ͳ͍
    • babel͸ݸʑͷ؀ڥʹରͯ͠ม׵Λ༗ޮɺແޮʹ͢Δ͜ͱ͕Ͱ͖Δ
    • babelͷํ͕jsxͷαϙʔτ͕ૣ͔ͬͨ
    • ίϛϡχςΟ͕׆ൃ

    View Slide

  16. Ϟδϡʔϧղܾ
    vs
    browserify webpack

    View Slide

  17. ओͳϞδϡʔϧγεςϜ
    require('./book')
    define(function() {
    return function() {}
    });
    import book from './book';
    CommonJS module<br/>AMD ES2015 module<br/>

    View Slide

  18. ࠷ۙͷಈ޲
    • ES2015 moduleͰॻ͖͍ͨʂ
    • cssͱ͔ը૾ͱ͔Λ·ͱΊ͍ͨʂ

    (importͯ͠JavaScriptͰѻ͍͍ͨ)
    • JavaScript಺ͰHTMLΛѻ͏reactͷӨڹ͸

    େ͖͍ͱࢥ͏

    View Slide

  19. browserify vs webpack
    ͔͠͠ɺ͜ͷ2ͭ͸໨త͕શ͘ಉ͡ͱ͍͏Θ͚Ͱ͸ͳ͍ͷͰ࣌ͱ৔߹ʹΑΔͱ͸ࢥ͏
    • browserify͸JavaScriptͷΈΛϞδϡʔϧͱͯ͠ѻ͏ͷ͕໨తͱ͢Δ͕ɺ

    webpack͸js, css, imageͳͲΛ͢΂ͯϞδϡʔϧͱߟ͑JavaScript͔Βݺͼग़͢͜ͱ͕Մೳ
    • ·ͨੜ੒ޙͷϑΝΠϧ͸browserify͸1ͭʹͳΔ͕ɺwebpack͸෼ׂ͠ੜ੒͢Δ͜ͱ͕ՄೳͰ͋Δ
    vs
    browserify webpack

    View Slide

  20. webpack
    • σϑΥϧτͰAMDͱCommonJSΛαϙʔτ͍ͯ͠Δ
    • Sass, Less, Coffee, TypeScriptͳͲΛม׵
    • css, imageͳͲΛϞδϡʔϧͱͯ͠ಡΈࠐΈ͜ͱ͕Մೳ
    • Loader΍PluginΛ࢖͏͜ͱʹΑΓ֦ு͕Մೳ
    • ެࣜͷϦετʹΑΔͱେମLoader͸228ݸ, Plugin͸56ݸଘࡏ͢Δ
    • ෳ਺ͷόϯυϧϑΝΠϧΛग़ྗ͢Δ͜ͱ͕Մೳ
    • ։ൃ΍ϓϩμΫγϣϯͷઃఆ͕σϑΥϧτͰ͋Δ(sourceMap, uglify…)
    • dev-server΋ެࣜͰఏڙ͞Ε͍ͯΔ
    ॻ͖͖Εͳ͍͙Β͍ͳΜͰ΋Ͱ͖Δʂ

    View Slide

  21. lint
    jshint eslint
    vs

    View Slide

  22. jshint vs eslint
    • eslint͸ϧʔϧͷ௥Ճ΍ઃఆ͕ࣗ༝ͰPlugin͕๛෋
    • ·ͨɺ༷ʑͳελΠϧΨΠυΛ؆୯ʹ͍ΕΔ͜ͱ͕Ͱ͖Δ

    (༗໊Ͳ͜Ζͩͱairbnb΍google)
    jshint eslint
    vs

    View Slide

  23. ͋ΕλεΫϥϯφʔ͸ɾɾɾ?
    grunt gulp

    View Slide

  24. λεΫϥϯφʔ
    • ࠷ۙ͸npm scripts΁Ҡߦ͢Δಈ͖͕ଟ͍
    • ͍͍ͩͨwebpackͰղܾͰ͖ΔͷͰઃఆϑΝΠϧΛ

    ॻ͘΄ͲͰ΋ͳ͍
    • ϑΝΠϧ؂ࢹ, τϥϯεύΠϧ, Ϗϧυ…
    • ͦ΋ͦ΋grunt΍gulpͷઃఆϑΝΠϧΛॻ͘ͷ͕େม

    View Slide

  25. npm-scripts
    "scripts": {
    "test": "ava",
    "test:watch": "ava -w",
    "lint": "eslint src",
    "start": "webpack-dev-server",
    "build": "webpack --config ./webpack.production.config.js"
    }
    ͜ͷΑ͏ʹॻ͘͜ͱ͕ՄೳͰ͋Δ
    $ npm start
    $ npm run test:watch
    package.jsonʹίϚϯυΛॻ͘͜ͱ͕Ͱ͖Δ

    View Slide

  26. ։ൃͷྲྀΕ
    package.jsonΛ࡞Δ
    webpack, babel-loaderΛೖΕΔ
    webpack.config.jsΛॻ͘
    ࠓճ͸webpackΛϕʔεͰ։ൃ͢Δ૝ఆͰॻ͖·͢

    View Slide

  27. package.jsonΛ࡞Δ
    $ npm init
    {
    "name": "test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "abouthiroppy ",
    "license": "MIT"
    }

    View Slide

  28. ϥΠϒϥϦΛೖΕΔ
    $ npm i webpack babel-loader -D
    # package.json΁௥Ճ͞ΕΔ
    "devDependencies": {
    "babel-loader": "^6.2.4",
    "webpack": "^1.13.1"
    }
    -D(—-save-dev) option


    devDependenciesʹ

    Πϯετʔϧͨ͠ϥΠϒϥϦ

    ͕ొ࿥͞ΕΔ

    View Slide

  29. ઃఆϑΝΠϧΛॻ͘
    'use strict';
    const path = require('path');
    module.exports = {
    // Ҿ਺Ͱ౉͢ͳΒentry, output, resolve͸ॻ͔ͳͯ͘΋ྑ͍
    entry: path.join(__dirname, 'index.js'),
    output: {
    filename: path.join(__dirname, 'bundle.js')
    },
    resolve: {
    extensions: ['', '.js']
    },
    module: {
    loaders: [
    {
    test: /\.js$/,
    loader: 'babel',
    exclude: path.join(__dirname, 'node_modules')
    }
    ]
    }
    }
    webpack.config.js

    View Slide

  30. ಈ͔͢
    {
    "scripts": {
    "test": "echo \"Error:
    no test specified\" && exit
    1",
    "start": "webpack -w",
    "build": "webpack -p"
    }
    }
    ޙ͸htmlͰຒΊࠐΈϒϥ΢βͰ࢖͑Δঢ়ଶʹͳΓ׬੒ʂ
    package.jsonʹίϚϯυΛొ࿥͢Δͱָ
    npm start Λߦ͏ͱϑΝΠϧ؂ࢹ͕Ͱ͖Δ
    npm run buildΛߦ͏ͱ

    ϓϩμΫγϣϯ༻ͷίʔυ͕ੜ੒͞ΕΔ

    View Slide

  31. ·ͱΊ
    babel npm
    webpack eslint

    View Slide

  32. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·͢ʂ

    View Slide