バーチー / GMO Pepabo, Inc. 2018.03.16 フロントエンドテックミーティング#1 https://tech.pepabo.com/2018/04/02/frontend-tech-meeting-1-report/
όʔνʔ(.01FQBCP *ODϑϩϯτΤϯυςοΫϛʔςΟϯά8FCQBDLͰ࡞Δ 7VFίϯϙʔωϯτ։ൃڥ
View Slide
ιϑτΣΞΤϯδχΞ 1)1FSIUUQCMPHIZQFSNLUKQόʔνʔ!IZQFSNLU
͡Ίʹ̏ͭ
ରऀw7VFKTͷجૅจ๏͕͔Δw7VFKTͰ࣍ͷϨϕϧʹߦ͖͍ͨ
ΰʔϧw7VFKTͰίϯϙʔωϯτ։ൃ͕࢝ΊΒΕΔΑ͏ʹͳΔ
ࠓ͓͢Δ͜ͱw ݱঢ়ͷ՝w ՝ղܾw 8FCQBDLͱྑ͘ͳΖ͏w 7VFKTͷίϯϙʔωϯτ։ൃڥΛ࡞Δw ·ͱΊ
͞ͳ͍͜ͱw ίϯϙʔωϯτͷઃܭ
ݱঢ়ͷ՝
՝7VFKTͷจ๏ͷجૅ͔ͬͨ ࣍ͷϨϕϧʹߦͨ͘ΊʹԿΛ͖͔͢
7VFKT෦Ͱ্͕Δ!Ͳ͏ͬͨΒ7VFKTͷٕज़্͕Ͱ͖Δͷ͔!جૅจ๏ͷ࣍ʹԿΛ͖͔͢※Vue.js෦ͱϖύϘࣾͷVue.jsษڧձ
՝طଘͷ)5.- $44 +BWB4DSJQUϑΝΠϧ͕ෳࡶ
طଘͷ)5.- $44 +BWB4DSJQUϑΝΠϧ͕ෳࡶ )5.-ͷߦ͕͗ͯ͢ಡղࠔ $44Ϋϥεͷ༻Օॴ͕͔Βͳ͍ɻ আͨ͠ΒσβΠϯ่Ε͕ൃੜ +BWB4DSJQUͷؔͷ༻Օॴ͕͔Βͳ͍ɻ আͨ͠Βޡಈ࡞ͨ͠KBWBTDSJQUKTIFBEFSUQM
՝ղܾ
7VFKTͷػೳͰղܾͰ͖ͳ͍͔
ίϯϙʔωϯτͳΒղܾͰ͖Δ
ίϯϙʔωϯτw )5.-ཁૉΛ࠶ར༻ՄೳʹΧϓηϧԽ͠ΧελϜλάͱͯ͠ར༻Ͱ͖Δvar Header = {template: ‘A custom component!’}new Vue({// ...components: {'my-header': Header}})
ίϯϙʔωϯτͷϝϦοτ# )5.-λάͷݻ·ΓΛίϯϙʔωϯτʹूͰ͖Δ # Մಡੑ͕͕͋Δ# ίϯϙʔωϯτΛ࠶ར༻Ͱ͖Δ# ίϯϙʔωϯτʹؔ࿈͢Δ+BWB4DSJQUॲཧ ·ͱΊΒΕΔ
ίϯϙʔωϯτͷσϝϦοτ+BWB4DSJQUͱ)5.-ίʔυ͕ࠞͬͯ͟ݟͮΒ͍ʜ)5.-ͷमਖ਼ࠔʜଟͷίϯϙʔωϯτΛએݴ͢Δͱཧͮ͠Β͍ʜ
͋Εɾɾɾ ָ͠Α͏ͱ͕ͨͣ͠ɺ ۤ௧ٯΓ
ͦ͜Ͱ ୯ҰϑΝΠϧίϯϙʔωϯτ!!
୯ҰϑΝΠϧίϯϙʔωϯτwίϯϙʔωϯτຖʹ)5.- +BWB4DSJQU $44ίʔυΛ ͭͷϑΝΠϧʹ͚Δ͜ͱ͕Ͱ͖Δw֦ுࢠWVFIUUQTKQWVFKTPSHWHVJEFTJOHMFpMFDPNQPOFOUTIUNM
୯ҰϑΝΠϧίϯϙʔωϯτແ͠class="common__header__logo js-common__header__logo" />id="header_start_btn_free_sp">͡ΊΔϗʔϜ
୯ҰϑΝΠϧίϯϙʔωϯτ༗Γ)FBEFS.FOVWVF)FBEFS4MJEFWVF4JHOVQ#VUUPOWVFίϯϙʔωϯτ୯ҐͰϑΝΠϧׂͰ͖Δ
୯ҰϑΝΠϧίϯϙʔωϯτΛ͏ʹw8FCQBDL #SPTFSJGZͳͲͷϞδϡʔϧόϯυϥʔ͕ඞཁIUUQTKQWVFKTPSHWHVJEFTJOHMFpMFDPNQPOFOUTIUNM
8FCQBDLΛ͓͏w ओྲྀ8FCQBDLw 8FCQBDL$44ը૾ͳͲ·ͱΊΔ͜ͱ͕Ͱ͖Δw #SPTFSJGZ+BWB4DSJQUϑΝΠϧͷΈ
WVFDMJͱ͍͏ͷ͕͋Γ·ͯ͠
WVFDMJͱw 7VFKTެࣜͷίϚϯυϥΠϯΠϯλʔϑΣʔεw ίϚϯυϥΠϯͰߴ͔ͭ؆୯ʹ։ൃڥ͕ߏஙͰ͖Δw IUUQTHJUIVCDPNWVFKTWVFDMJ
࠷ॳ͔ΒWVFDMJΛ༻͢ΔͷΦεεϝ͠ͳ͍w ཧ༝ͱͯ͠w 8FCQBDL #BCFMͷઃఆํ๏ͷཧղʹͭͳ͕Βͳ͍w ॳظͰੜ͞ΕΔઃఆϑΝΠϧ͕ෳࡶͳͷͰमਖ਼ࠔw ࣗͷߟ͑ͱͯ͠w ͕ࣗཧղɾཧͰ͖ΔͷΛͬͯ΄͍͠
·ͱΊw 8FCQBDL7VFKTͰ୯ҰϑΝΠϧίϯϙʔωϯτΛ༻ͯ͠ɺίϯϙʔωϯτ։ൃΛ࢝ΊΑ͏
8FCQBDLͱྑ͘ͳΖ͏
લఏw XFCQBDLWͷ͓Ͱ͢w ʹϦϦʔε͞Ε͔ͨΓw OQNΠϯετʔϧࡁΈͱ͢Δ
8FCQBDLͱԿ͔ʁ
Ϟμϯͳ+BWB4DSJQUΞϓϦέʔγϣϯ͚ͷ ϞδϡʔϧόϯυϥʔͰ͋Δ
Ϟδϡʔϧόϯυϥʔͱw ෳͷϞδϡʔϧ KT TBTTͳͲΛҰͭͷϑΝΠϧʹ όϯυϧͯ͠ ·ͱΊͯ͘ΕΔͷग़యIUUQTXFCQBDLKTPSH
·ͣ؆୯ʹ৮ͬͯΈΑ͏
ͬͯΈΔ͜ͱᶃw ̎ͭͷ+BWB4DSJQUϞδϡʔϧϑΝΠϧΛ݁߹ͯ͠ΈΔw ϒϥβͷ$POTPMFλϒʹ)FMMP8PSMEͱग़ྗ͠Α͏
ϑΝΠϧͱσΟϨΫτϦߏ$ tree ..├── index.html├── package-lock.json├── package.json├── src│ ├── app.js│ ├── hello.js│ └── world.js└── webpack.config.js1 directory, 7 files
8FCQBDLͷΠϯετʔϧ$ npm init -y $ npm install —-save-dev webpackwebpack-cliwW͔ΒίϚϯυϥΠϯΠϯλʔϑΣʔεׂ͕͞ΕͨͷͰ XFCQBDLDMJͷΠϯετʔϧඞཁ
8FCQBDLઃఆϑΝΠϧconst path = require('path');module.exports = { // ΤϯτϦϙΠϯτͷઃఆentry: './src/app.js',output: {// ग़ྗϑΝΠϧ໊ filename: 'bundle.js',// ग़ྗઌσΟϨΫτϦ path: path.join(__dirname, 'dist/')}}XFCQBDLDPOpHKT
// export defaultͰؔΛϞδϡʔϧͱͯ͠ެ։͢Δ export default function hello() {return 'Hello';}export default function world() {return 'World';}JOEFYIUNMTSDIFMMPKTTSDXPSMEKT// ֎෦Ϟδϡʔϧ͔ΒΤΫεϙʔτ͞ΕͨؔΛΠϯϙʔτ͢Δ import hello from './hello.js';import world from './world.js';console.log(hello() + world());TSDBQQKT
XFCQBDLͰϏϧυͯ͠όϯυϧϑΝΠϧΛੜ͢Δ$ npx webpackHash: e7d757560adbd755bccaVersion: webpack 4.1.1Time: 265msBuilt at: 2018-3-15 23:17:15Asset Size Chunks ChunkNamesbundle.js 592 bytes 0 [emitted] mainEntrypoint main = bundle.js[0] ./src/app.js + 2 modules 205 bytes {0}[built]| ./src/app.js 97 bytes [built]| ./src/hello.js 54 bytes [built]| ./src/world.js 54 bytes [built]WARNING in configurationThe 'mode' option has not been set. Set 'mode'option to 'development' or 'production' toenable defaults for this environment.$ tree ..├── dist│ └── bundle.js├── index.html├── src│ ├── app.js│ ├── hello.js│ └── world.js└── webpack.config.js2 directories, 6 files૿͑ͯΔ
ϒϥβͰόϯυϧϑΝΠϧΛಡΈࠐΉදࣔ͞Εͨ
ͬͯΈΔ͜ͱᶄw &4͕͑ΔΑ͏ʹ͠Α͏w खॱw 8FCQBDLͷϩʔμʔઃఆͰ&4ܗࣜͷ+BWB4DSJQU ϑΝΠϧ͕ಡΈࠐΊΔΑ͏ʹઃఆ͢Δ
#BCFMͷΠϯετʔϧ$ npm install --save babel-loaderbabel-preset-es2015wCBCFMMPBEFS#BCFMͷ8FCQBDL༻ϓϥάΠϯw8FCQBDLʹઃఆ͢Ε+BWB4DSJQUϑΝΠϧΛ&4มͯ͘͠ΕΔ
ϩʔμʔઃఆ… // লུmodule: {rules: [{test: /\.js$/, // ϩʔμʔରͷ֦ுࢠuse: [{loader: ‘babel-loader', // ར༻͢Δϩʔμʔoptions: {presets: ['es2015']}}]}]}XFCQBDLDPOpHKTwϩʔμʔઃఆͱɺ$44ͳͲ+BWB4DSJQUҎ֎ͷϑΝΠϧΛಡΈࠐΉઃఆ
࣮ߦͯ͠ΈΑ͏import hello from './hello.js';import world from './world.js';const message = hello() + ' ES6’ // ES6ͷมએݴΛ༻console.log(message);TSDBQQKTwTSDBQQKTʹ&4ه๏ͷमਖ਼Λͯ͠OQYXFCQBDLΛ࣮ߦwϒϥβͷ$POTPMFϩάʹग़ྗ͞ΕΔදࣔ͞Εͨ
ͬ͘͟ΓͱҰ࿈ͷྲྀΕ ͔Γ·ͨ͠Ͱ͠ΐ͏͔
։ൃ༻αʔόʔXFCQBDLEFWTFSWFSw ϩʔΧϧαʔόʔΛىಈͰ͖Δw ϑΝΠϧͷมߋΛݕͯࣗ͠ಈϏϧυͯ͠ɺϒϥβଆࣗಈతʹϦϩʔυw গͳ͍ઃఆͰ͙͢ʹར༻Ͱ͖Δ
XFCQBDLEFWTFSWFSͷઃఆखॱ$ npm install —-save-dev webpack-dev-serverconst path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.join(__dirname, 'dist')},devServer: {contentBase: path.join(__dirname, 'dist')},}XFCQBDLDPOpHKTᶃXFCQBDLEFWTFSWFSΛΠϯετʔϧᶄ৴ݩσΟϨΫτϦΛࢦఆ͢Δ
XFCQBDLEFWTFSWFSͷઃఆखॱ$ npx webpack-dev-serverᶅXFCQBDLEFWTFSWFSΛىಈ
ޙ 7VFKTͷίϯϙʔωϯτ։ൃڥΛ ࡞Ζ͏
खॱڥߏங8FCQBDLͷΠϯετʔϧ8FCQBDL։ൃαʔόʔͷઃఆWVF͕ಡΊΔΑ͏ʹઃఆ͢Δϩʔμʔઃఆ୯ҰϑΝΠϧίϯϙʔωϯτͷදࣔઃఆίϯϙʔωϯτϑΝΠϧͷ࡞
ڥߏஙw ·ͣϓϩδΣΫτͷσΟϨΫτϦͷதͰ QBDLBHFKTPOΛ࡞͢Δ$ mkdir webpack-with-vue $ cd webpack-with-vue $ npm init -y
8FCQBDLͷΠϯετʔϧw ࣍ʹ8FCQBDLͱ։ൃ༻αʔόʔΛΠϯετʔϧw ͜͜·Ͱ؆୯Ͱ͢Ͷ$ npm install —-save-dev webpack webpack-cliwebpack-dev-server
8FCQBDL։ൃαʔόʔͷઃఆconst path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.join(__dirname, 'dist')},devServer: {contentBase: path.join(__dirname, 'dist')},}XFCQBDLDPOpHKTHello WorldEJTUJOEFYIUNMதۭ TSDJOEFYKT
։ൃڥαʔόʔΛ֬ೝ͠Α͏$ npx webpack-dev-server ίϯιʔϧ্
WVF͕ಡΊΔΑ͏ʹઃఆ͢Δ7VFΛΠϯετʔϧ͢Δ$ npm install —-save vue$ npm install --save-dev vue-loader vue-template-compiler css-loader7VFKTͷ୯ҰϑΝΠϧίϯϙʔωϯτ WVFϑΝΠϧΛѻ͏ͨΊʹҎԼΛΠϯετʔϧ
ϩʔμʔઃఆconst path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.join(__dirname, 'dist')},module: {rules: [{test: /\.vue$/,loader: 'vue-loader',}]},devServer: {contentBase: path.join(__dirname, 'dist')},}XFCQBDLDPOpHKT
୯ҰϑΝΠϧίϯϙʔωϯτͷදࣔઃఆ EJTUJOEFYIUNMimport Vue from 'vue';import App from './components/App.vue';window.onload = function() {new Vue(App).$mount('#app');}TSDJOEFYKTw 8FCQBDLͰϏϧυͨ͠+4ΛಡΈࠐΉw 7VFͰϚϯτ͢ΔՕॴΛࢦఆw ը໘ͷಡΈࠐΈ͕ྃͨ͠Β BQQʹ"QQWVFΛϚϯτ ஔ͖͑ʣ
ίϯϙʔωϯτϑΝΠϧͷ࡞This is App component.<br/>import Header from './Header.vue';<br/>export default {<br/>components: {<br/>'header-component': Header<br/>}<br/>}<br/><br/>.blue {<br/>color: blue;<br/>}<br/> TSDDPNQPOFOUT"QQWVF{{ title }}<br/>export default {<br/>data: function() {<br/>return {<br/>title: 'This is Header component’<br/>}<br/>}<br/>}<br/><br/>.title {<br/>font-size: 20px;<br/>font-weight: bold;<br/>}<br/> TSDDPNQPOFOUT)FBEFSWVF
ϒϥβͰදࣔ͢Δͱ"QQ$PNQPOFOU)FBEFS$PNQPOFOU
ͥͻใΞϓϦΛ୯ҰϑΝΠϧίϯϙʔωϯτԽ ͯ͠Έ͍ͯͩ͘͞
·ͱΊ
·ͱΊw 8FCQBDLͷ֓ཁɺ؆୯ͳ͍ํ͕͔ͬͨw 7VFKTͷ୯ҰϑΝΠϧίϯϙʔωϯτͷϏϧυڥͷߏஙํ๏͕͔ͬͨw7VFKTͷ࣍ͷϨϕϧߦ͜͏ʂʂ
hypermkt
yusukebe
varu3
ohakutsu
antyadev
texmeijin
alli83
kazupon
ryounasso
dunglas
fornewid
philipschwarz
niftycorp
lemiorhan
chriscoyier
kneath
rocio
lauravandoore
brettharned
ammeep
bkeepers
keithpitt
mojombo
62gerente