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

my tools

my tools

8/10の社内勉強会資料

7496c69c781c91d16637ea6102311e26?s=128

Yuta Hiroto

August 10, 2016
Tweet

Transcript

  1. ࠷ۙͷࣗ෼ͷ
 πʔϧࣄ৘ frontier-dev-jsษڧձ

  2. ஫ҙ • ࠓճ͸webϑϩϯτΤϯυدΓͷ࿩Λ͠·͢ • ϑϨʔϜϫʔΫ΍ςετϥϯφʔͷ࿩͸
 ͠·ͤΜ • ׬੒౓8ׂͰ͢(དྷिެ։͠·͢ɻɻ)

  3. ࣗݾ঺հ Github abouthiroppy times_about_hiroppy

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

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

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

  7. ҠΓมΘΓ͕
 ܹ͗ͯ͢͠Θ͔Βͳ͍…

  8. ࠷௿ݶɺ։ൃͰ΄͍͠΋ͷ • ύοέʔδ؅ཧπʔϧ • ৽͍͠ߏจͰॻ͍ͯ΋ݹ͍ϒϥ΢βʹ
 ରԠͤ͞ΔΑ͏ʹ͢ΔτϥϯεύΠϥ • Ϟδϡʔϧղܾπʔϧ • lintπʔϧ(੩తݕূπʔϧ)

    • ςετπʔϧ(࣌ؒͷ౎߹্ɺࠓճ͸࿩͠·ͤΜ)
  9. ύοέʔδ؅ཧ bower npm vs

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

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

  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; };
  13. ࣌୅͸ES2015(ES6) େମ͸αϙʔτ͞Ε͖͕ͯͨɺ
 աڈͷϒϥ΢β΍IE11ͳͲͷରԠ཰͕௿͍΋ͷʹରͯ͠
 ಈ͘Α͏ʹ͢Δ(ES5΁མͱ͢)ʹ͸τϥϯεύΠϧΛ͢Δඞཁ͕͋Δ FYI: http://kangax.github.io/compat-table/es6/

  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 ௥Ճ͞Εͨػೳ
  15. traceur-compiler vs babel traceur-compiler babel vs • ϥϯλΠϜΛඞཁͱ͠ͳ͍ͷͰ࣮ߦ࣌ͷΦʔόϔου͕ͳ͍ • babel͸ݸʑͷ؀ڥʹରͯ͠ม׵Λ༗ޮɺແޮʹ͢Δ͜ͱ͕Ͱ͖Δ

    • babelͷํ͕jsxͷαϙʔτ͕ૣ͔ͬͨ • ίϛϡχςΟ͕׆ൃ
  16. Ϟδϡʔϧղܾ vs browserify webpack

  17. ओͳϞδϡʔϧγεςϜ <script src="./index.js"></script> require('./book') define(function() { return function() {} });

    import book from './book'; <script> CommonJS module AMD ES2015 module
  18. ࠷ۙͷಈ޲ • ES2015 moduleͰॻ͖͍ͨʂ • cssͱ͔ը૾ͱ͔Λ·ͱΊ͍ͨʂ
 (importͯ͠JavaScriptͰѻ͍͍ͨ) • JavaScript಺ͰHTMLΛѻ͏reactͷӨڹ͸
 େ͖͍ͱࢥ͏

  19. browserify vs webpack ͔͠͠ɺ͜ͷ2ͭ͸໨త͕શ͘ಉ͡ͱ͍͏Θ͚Ͱ͸ͳ͍ͷͰ࣌ͱ৔߹ʹΑΔͱ͸ࢥ͏ • browserify͸JavaScriptͷΈΛϞδϡʔϧͱͯ͠ѻ͏ͷ͕໨తͱ͢Δ͕ɺ
 webpack͸js, css, imageͳͲΛ͢΂ͯϞδϡʔϧͱߟ͑JavaScript͔Βݺͼग़͢͜ͱ͕Մೳ •

    ·ͨੜ੒ޙͷϑΝΠϧ͸browserify͸1ͭʹͳΔ͕ɺwebpack͸෼ׂ͠ੜ੒͢Δ͜ͱ͕ՄೳͰ͋Δ vs browserify webpack
  20. webpack • σϑΥϧτͰAMDͱCommonJSΛαϙʔτ͍ͯ͠Δ • Sass, Less, Coffee, TypeScriptͳͲΛม׵ • css,

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

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

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

  24. λεΫϥϯφʔ • ࠷ۙ͸npm scripts΁Ҡߦ͢Δಈ͖͕ଟ͍ • ͍͍ͩͨwebpackͰղܾͰ͖ΔͷͰઃఆϑΝΠϧΛ
 ॻ͘΄ͲͰ΋ͳ͍ • ϑΝΠϧ؂ࢹ, τϥϯεύΠϧ,

    Ϗϧυ… • ͦ΋ͦ΋grunt΍gulpͷઃఆϑΝΠϧΛॻ͘ͷ͕େม
  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ʹίϚϯυΛॻ͘͜ͱ͕Ͱ͖Δ
  26. ։ൃͷྲྀΕ package.jsonΛ࡞Δ webpack, babel-loaderΛೖΕΔ webpack.config.jsΛॻ͘ ࠓճ͸webpackΛϕʔεͰ։ൃ͢Δ૝ఆͰॻ͖·͢

  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 <git@about-hiroppy.com>", "license": "MIT" }
  28. ϥΠϒϥϦΛೖΕΔ $ npm i webpack babel-loader -D # package.json΁௥Ճ͞ΕΔ "devDependencies":

    { "babel-loader": "^6.2.4", "webpack": "^1.13.1" } -D(—-save-dev) option
 
 devDependenciesʹ
 Πϯετʔϧͨ͠ϥΠϒϥϦ
 ͕ొ࿥͞ΕΔ
  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
  30. ಈ͔͢ { "scripts": { "test": "echo \"Error: no test specified\"

    && exit 1", "start": "webpack -w", "build": "webpack -p" } } ޙ͸htmlͰຒΊࠐΈϒϥ΢βͰ࢖͑Δঢ়ଶʹͳΓ׬੒ʂ package.jsonʹίϚϯυΛొ࿥͢Δͱָ npm start Λߦ͏ͱϑΝΠϧ؂ࢹ͕Ͱ͖Δ npm run buildΛߦ͏ͱ
 ϓϩμΫγϣϯ༻ͷίʔυ͕ੜ੒͞ΕΔ
  31. ·ͱΊ babel npm webpack eslint

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