my tools

8/10の社内勉強会資料

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·͢ʂ