my tools

8/10の社内勉強会資料

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