8/10の社内勉強会資料
࠷ۙͷࣗͷ πʔϧࣄfrontier-dev-jsษڧձ
View Slide
ҙ• ࠓճwebϑϩϯτΤϯυدΓͷΛ͠·͢• ϑϨʔϜϫʔΫςετϥϯφʔͷ ͠·ͤΜ• 8ׂͰ͢(དྷिެ։͠·͢ɻɻ)
ࣗݾհGithubabouthiroppytimes_about_hiroppy
ࠓͬͯͳ͍πʔϧͱ ࠓ͍ͬͯΔπʔϧ ͷ
ࠓͬͯͳ͍πʔϧ܈etc.
ࠓ͍ͬͯΔπʔϧ܈babel npmwebpack eslint
ҠΓมΘΓ͕ ܹ͗ͯ͢͠Θ͔Βͳ͍…
࠷ݶɺ։ൃͰ΄͍͠ͷ• ύοέʔδཧπʔϧ• ৽͍͠ߏจͰॻ͍ͯݹ͍ϒϥβʹ ରԠͤ͞ΔΑ͏ʹ͢ΔτϥϯεύΠϥ• Ϟδϡʔϧղܾπʔϧ• lintπʔϧ(੩తݕূπʔϧ)• ςετπʔϧ(࣌ؒͷ߹্ɺࠓճ͠·ͤΜ)
ύοέʔδཧbower npmvs
bower vs npm• ੲϑϩϯτΤϯυbowerɺόοΫΤϯυ(node)npmͩͬͨ• ύοέʔδ͕྆ํ͋ΔͱݶΒͳ͍͠ɺόʔδϣϯҧ͏Մೳੑ͋ͬͨ• browserifyͷ͓͔͛Ͱnode.jsͱಉ͡ͰϑϩϯτΤϯυͷίʔυϞδϡʔϧػೳΛ͍ ॻ͚ΔΑ͏ʹͳͬͨͨΊɺnpmͰͷཧͷํָ͕ʹͳͬͨbower npmvs
τϥϯεύΠϥtraceur-compiler babelvs
τϥϯεύΠϥͱʁ• ৽͍͠ߏจΛࠓͷ࣌ͷϒϥβͰಈ͘Α͏ʹίʔυΛు͍ͯ͘ΕΔ πʔϧ• ϒϥβʹΑͬͯ৽͍͠ߏจͷ࣮Ϩϕϧ͕ҟͳΔ͕ɺ։ൃऀͦΕΛ ؾʹ͠ͳͯ͘Α͘ͳΔ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;};
࣌ES2015(ES6)େମαϙʔτ͞Ε͖͕ͯͨɺ աڈͷϒϥβIE11ͳͲͷରԠ͕͍ͷʹରͯ͠ ಈ͘Α͏ʹ͢Δ(ES5མͱ͢)ʹτϥϯεύΠϧΛ͢Δඞཁ͕͋ΔFYI: http://kangax.github.io/compat-table/es6/
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Ճ͞Εͨػೳ
traceur-compiler vs babeltraceur-compiler babelvs• ϥϯλΠϜΛඞཁͱ͠ͳ͍ͷͰ࣮ߦ࣌ͷΦʔόϔου͕ͳ͍• babelݸʑͷڥʹରͯ͠มΛ༗ޮɺແޮʹ͢Δ͜ͱ͕Ͱ͖Δ• babelͷํ͕jsxͷαϙʔτ͕ૣ͔ͬͨ• ίϛϡχςΟ͕׆ൃ
Ϟδϡʔϧղܾvsbrowserify webpack
ओͳϞδϡʔϧγεςϜ require('./book')define(function() {return function() {}});import book from './book'; CommonJS module<br/>AMD ES2015 module<br/>
࠷ۙͷಈ• ES2015 moduleͰॻ͖͍ͨʂ• cssͱ͔ը૾ͱ͔Λ·ͱΊ͍ͨʂ (importͯ͠JavaScriptͰѻ͍͍ͨ)• JavaScriptͰHTMLΛѻ͏reactͷӨڹ େ͖͍ͱࢥ͏
browserify vs webpack͔͠͠ɺ͜ͷ2ͭత͕શ͘ಉ͡ͱ͍͏Θ͚Ͱͳ͍ͷͰ࣌ͱ߹ʹΑΔͱࢥ͏• browserifyJavaScriptͷΈΛϞδϡʔϧͱͯ͠ѻ͏ͷ͕తͱ͢Δ͕ɺ webpackjs, css, imageͳͲΛͯ͢Ϟδϡʔϧͱߟ͑JavaScript͔Βݺͼग़͢͜ͱ͕Մೳ• ·ͨੜޙͷϑΝΠϧbrowserify1ͭʹͳΔ͕ɺwebpackׂ͠ੜ͢Δ͜ͱ͕ՄೳͰ͋Δvsbrowserify webpack
webpack• σϑΥϧτͰAMDͱCommonJSΛαϙʔτ͍ͯ͠Δ• Sass, Less, Coffee, TypeScriptͳͲΛม• css, imageͳͲΛϞδϡʔϧͱͯ͠ಡΈࠐΈ͜ͱ͕Մೳ• LoaderPluginΛ͏͜ͱʹΑΓ֦ு͕Մೳ• ެࣜͷϦετʹΑΔͱେମLoader228ݸ, Plugin56ݸଘࡏ͢Δ• ෳͷόϯυϧϑΝΠϧΛग़ྗ͢Δ͜ͱ͕Մೳ• ։ൃϓϩμΫγϣϯͷઃఆ͕σϑΥϧτͰ͋Δ(sourceMap, uglify…)• dev-serverެࣜͰఏڙ͞Ε͍ͯΔॻ͖͖Εͳ͍͙Β͍ͳΜͰͰ͖Δʂ
lintjshint eslintvs
jshint vs eslint• eslintϧʔϧͷՃઃఆ͕ࣗ༝ͰPlugin͕๛• ·ͨɺ༷ʑͳελΠϧΨΠυΛ؆୯ʹ͍ΕΔ͜ͱ͕Ͱ͖Δ (༗໊Ͳ͜Ζͩͱairbnbgoogle)jshint eslintvs
͋ΕλεΫϥϯφʔɾɾɾ?grunt gulp
λεΫϥϯφʔ• ࠷ۙnpm scriptsҠߦ͢Δಈ͖͕ଟ͍• ͍͍ͩͨwebpackͰղܾͰ͖ΔͷͰઃఆϑΝΠϧΛ ॻ͘΄ͲͰͳ͍• ϑΝΠϧࢹ, τϥϯεύΠϧ, Ϗϧυ…• ͦͦgruntgulpͷઃఆϑΝΠϧΛॻ͘ͷ͕େม
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:watchpackage.jsonʹίϚϯυΛॻ͘͜ͱ͕Ͱ͖Δ
։ൃͷྲྀΕpackage.jsonΛ࡞Δwebpack, babel-loaderΛೖΕΔwebpack.config.jsΛॻ͘ࠓճwebpackΛϕʔεͰ։ൃ͢ΔఆͰॻ͖·͢
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"}
ϥΠϒϥϦΛೖΕΔ$ npm i webpack babel-loader -D# package.jsonՃ͞ΕΔ"devDependencies": {"babel-loader": "^6.2.4","webpack": "^1.13.1"}-D(—-save-dev) option devDependenciesʹ Πϯετʔϧͨ͠ϥΠϒϥϦ ͕ొ͞ΕΔ
ઃఆϑΝΠϧΛॻ͘'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
ಈ͔͢{"scripts": {"test": "echo \"Error:no test specified\" && exit1","start": "webpack -w","build": "webpack -p"}}ޙhtmlͰຒΊࠐΈϒϥβͰ͑Δঢ়ଶʹͳΓʂpackage.jsonʹίϚϯυΛొ͢Δͱָnpm start Λߦ͏ͱϑΝΠϧࢹ͕Ͱ͖Δnpm run buildΛߦ͏ͱ ϓϩμΫγϣϯ༻ͷίʔυ͕ੜ͞ΕΔ
·ͱΊbabel npmwebpack eslint
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·͢ʂ