Tweet
Tweet

Slide 1

Slide 1 text

όʔνʔ(.01FQBCP *OD ϑϩϯτΤϯυςοΫϛʔςΟϯά 8FCQBDLͰ࡞Δ
 7VFίϯϙʔωϯτ։ൃ؀ڥ

Slide 2

Slide 2 text

ιϑτ΢ΣΞΤϯδχΞ
 1)1FS IUUQCMPHIZQFSNLUKQ όʔνʔ !IZQFSNLU

Slide 3

Slide 3 text

͸͡Ίʹ̏ͭ

Slide 4

Slide 4 text

ର৅ऀ w7VFKTͷجૅจ๏͕෼͔Δ w7VFKTͰ࣍ͷϨϕϧʹߦ͖͍ͨ

Slide 5

Slide 5 text

ΰʔϧ w7VFKTͰίϯϙʔωϯτ։ൃ͕࢝ΊΒΕΔΑ͏ʹͳΔ

Slide 6

Slide 6 text

ࠓ೔͓࿩͢Δ͜ͱ w ݱঢ়ͷ՝୊ w ՝୊ղܾ w 8FCQBDLͱ஥ྑ͘ͳΖ͏ w 7VFKTͷίϯϙʔωϯτ։ൃ؀ڥΛ࡞Δ w ·ͱΊ

Slide 7

Slide 7 text

࿩͞ͳ͍͜ͱ w ίϯϙʔωϯτͷઃܭ

Slide 8

Slide 8 text

ݱঢ়ͷ՝୊

Slide 9

Slide 9 text

՝୊ 7VFKTͷจ๏ͷجૅ͸෼͔ͬͨ
 ࣍ͷϨϕϧʹߦͨ͘ΊʹԿΛ͢΂͖͔

Slide 10

Slide 10 text

7VFKT෦Ͱ্͕Δ੠ !Ͳ͏΍ͬͨΒ7VFKTͷٕज़͕޲্Ͱ͖Δͷ͔ !جૅจ๏ͷ࣍ʹԿΛ͢΂͖͔ ※Vue.js෦ͱ͸ϖύϘࣾ಺ͷVue.jsษڧձ

Slide 11

Slide 11 text

՝୊ طଘͷ)5.- $44 +BWB4DSJQU ϑΝΠϧ͕ෳࡶ

Slide 12

Slide 12 text

طଘͷ)5.- $44 +BWB4DSJQUϑΝΠϧ͕ෳࡶ )5.-ͷߦ਺͕௕͗ͯ͢ಡղࠔ೉ $44Ϋϥεͷ࢖༻Օॴ͕෼͔Βͳ͍ɻ
 ࡟আͨ͠ΒσβΠϯ่Ε͕ൃੜ +BWB4DSJQUͷؔ਺ͷ࢖༻Օॴ͕෼͔Βͳ͍ɻ
 ࡟আͨ͠Βޡಈ࡞ͨ͠ KBWBTDSJQUKT IFBEFSUQM

Slide 13

Slide 13 text

՝୊ղܾ

Slide 14

Slide 14 text

7VFKTͷػೳͰղܾͰ͖ͳ͍͔

Slide 15

Slide 15 text

ίϯϙʔωϯτͳΒղܾͰ͖Δ

Slide 16

Slide 16 text

ίϯϙʔωϯτ w )5.-ཁૉΛ࠶ར༻ՄೳʹΧϓηϧԽ͠ΧελϜλάͱ͠ ͯར༻Ͱ͖Δ var Header = { template: ‘

A custom component!

’ } new Vue({ // ... components: { 'my-header': Header } })

Slide 17

Slide 17 text

ίϯϙʔωϯτͷϝϦοτ # )5.-λάͷݻ·ΓΛίϯϙʔωϯτʹू໿Ͱ͖Δ
 # Մಡੑ͕͕͋Δ # ίϯϙʔωϯτΛ࠶ར༻Ͱ͖Δ # ίϯϙʔωϯτ಺ʹؔ࿈͢Δ+BWB4DSJQUॲཧ΋
 ·ͱΊΒΕΔ

Slide 18

Slide 18 text

ίϯϙʔωϯτͷσϝϦοτ +BWB4DSJQUͱ)5.-ίʔυ͕ࠞͬͯ͟ݟͮΒ͍ʜ )5.-ͷमਖ਼ࠔ೉ʜ ଟ਺ͷίϯϙʔωϯτΛએݴ͢Δͱ؅ཧͮ͠Β͍ʜ

Slide 19

Slide 19 text

͋Εɾɾɾ
 ָ͠Α͏ͱͨ͠͸͕ͣɺ
 ۤ௧΁ٯ໭Γ

Slide 20

Slide 20 text

ͦ͜Ͱ
 ୯ҰϑΝΠϧίϯϙʔωϯτ!!

Slide 21

Slide 21 text

୯ҰϑΝΠϧίϯϙʔωϯτ wίϯϙʔωϯτຖʹ)5.- +BWB4DSJQU $44ίʔυΛ
 ͭͷϑΝΠϧʹ෼͚Δ͜ͱ ͕Ͱ͖Δ w֦ுࢠ͸WVF IUUQTKQWVFKTPSHWHVJEFTJOHMFpMFDPNQPOFOUTIUNM

Slide 22

Slide 22 text

୯ҰϑΝΠϧίϯϙʔωϯτແ͠

ϗʔϜϖʔδ࡞੒αʔϏεͳΒʮάʔϖʯ by GMOϖύϘ

͸͡ΊΔ
  • ϗʔϜ

Slide 23

Slide 23 text

୯ҰϑΝΠϧίϯϙʔωϯτ༗Γ )FBEFS.FOVWVF )FBEFS4MJEFWVF 4JHOVQ#VUUPOWVF ίϯϙʔωϯτ୯ҐͰ ϑΝΠϧ෼ׂͰ͖Δ

Slide 24

Slide 24 text

୯ҰϑΝΠϧίϯϙʔωϯτΛ࢖͏ʹ͸ w8FCQBDL #SPTFSJGZͳͲͷϞδϡʔϧόϯυϥʔ͕ඞཁ IUUQTKQWVFKTPSHWHVJEFTJOHMFpMFDPNQPOFOUTIUNM

Slide 25

Slide 25 text

8FCQBDLΛ࢖͓͏ w ओྲྀ͸8FCQBDL w 8FCQBDL͸$44ը૾ͳͲ΋·ͱΊΔ͜ͱ͕Ͱ͖Δ w #SPTFSJGZ͸+BWB4DSJQUϑΝΠϧͷΈ

Slide 26

Slide 26 text

WVFDMJͱ͍͏ͷ͕͋Γ·ͯ͠

Slide 27

Slide 27 text

WVFDMJͱ͸ w 7VFKTެࣜͷίϚϯυϥΠϯΠϯλʔϑΣʔε w ίϚϯυϥΠϯͰߴ଎͔ͭ؆୯ʹ։ൃ؀ڥ͕ߏஙͰ͖Δ w IUUQTHJUIVCDPNWVFKTWVFDMJ

Slide 28

Slide 28 text

࠷ॳ͔ΒWVFDMJΛ࢖༻͢Δͷ͸Φεεϝ͠ͳ͍ w ཧ༝ͱͯ͠ w 8FCQBDL #BCFMͷઃఆํ๏ͷཧղʹͭͳ͕Βͳ͍ w ॳظͰੜ੒͞ΕΔઃఆϑΝΠϧ͕ෳࡶͳͷͰमਖ਼ࠔ೉ w ࣗ෼ͷߟ͑ͱͯ͠ w ࣗ෼͕ཧղɾ؅ཧͰ͖Δ΋ͷΛ࢖ͬͯ΄͍͠

Slide 29

Slide 29 text

·ͱΊ w 8FCQBDL7VFKTͰ୯ҰϑΝΠϧίϯϙʔωϯτΛ࢖༻ ͯ͠ɺίϯϙʔωϯτ։ൃΛ࢝ΊΑ͏

Slide 30

Slide 30 text

8FCQBDLͱ஥ྑ͘ͳΖ͏

Slide 31

Slide 31 text

લఏ w XFCQBDLWͷ͓࿩Ͱ͢ w ʹϦϦʔε͞Εͨ͹͔Γ w OQN͸ΠϯετʔϧࡁΈͱ͢Δ

Slide 32

Slide 32 text

8FCQBDLͱ͸Կ͔ʁ

Slide 33

Slide 33 text

Ϟμϯͳ+BWB4DSJQUΞϓϦέʔγϣϯ޲͚ͷ
 ϞδϡʔϧόϯυϥʔͰ͋Δ

Slide 34

Slide 34 text

Ϟδϡʔϧόϯυϥʔͱ͸ w ෳ਺ͷϞδϡʔϧ KT TBTTͳͲ ΛҰͭͷϑΝΠϧʹ
 όϯυϧͯ͠ ·ͱΊͯ ͘ΕΔ΋ͷ ग़యIUUQTXFCQBDLKTPSH

Slide 35

Slide 35 text

·ͣ͸؆୯ʹ৮ͬͯΈΑ͏

Slide 36

Slide 36 text

΍ͬͯΈΔ͜ͱᶃ w ̎ͭͷ+BWB4DSJQUϞδϡʔϧϑΝΠϧΛ݁߹ͯ͠ΈΔ w ϒϥ΢βͷ$POTPMFλϒʹ)FMMP8PSMEͱग़ྗ͠Α͏

Slide 37

Slide 37 text

ϑΝΠϧͱσΟϨΫτϦߏ੒ $ tree . . ├── index.html ├── package-lock.json ├── package.json ├── src │ ├── app.js │ ├── hello.js │ └── world.js └── webpack.config.js 1 directory, 7 files

Slide 38

Slide 38 text

8FCQBDLͷΠϯετʔϧ $ npm init -y
 $ npm install —-save-dev webpack webpack-cli wW͔ΒίϚϯυϥΠϯΠϯλʔϑΣʔε͕෼ׂ͞ΕͨͷͰ
 XFCQBDLDMJͷΠϯετʔϧ΋ඞཁ

Slide 39

Slide 39 text

8FCQBDLઃఆϑΝΠϧ const path = require('path'); module.exports = {
 // ΤϯτϦϙΠϯτͷઃఆ entry: './src/app.js', output: { // ग़ྗϑΝΠϧ໊
 filename: 'bundle.js', // ग़ྗઌσΟϨΫτϦ
 path: path.join(__dirname, 'dist/') } } XFCQBDLDPOpHKT

Slide 40

Slide 40 text

// export defaultͰؔ਺ΛϞδϡʔϧͱͯ͠ެ։͢Δ
 export default function hello() { return 'Hello'; } export default function world() { return 'World'; } JOEFYIUNM TSDIFMMPKT TSDXPSMEKT // ֎෦Ϟδϡʔϧ͔ΒΤΫεϙʔτ͞Εͨؔ਺ΛΠϯϙʔτ͢Δ
 import hello from './hello.js'; import world from './world.js'; console.log(hello() + world()); TSDBQQKT

Slide 41

Slide 41 text

XFCQBDLͰϏϧυͯ͠όϯυϧϑΝΠϧΛੜ੒͢Δ $ npx webpack Hash: e7d757560adbd755bcca Version: webpack 4.1.1 Time: 265ms Built at: 2018-3-15 23:17:15 Asset Size Chunks Chunk Names bundle.js 592 bytes 0 [emitted] main Entrypoint 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 configuration The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment. $ tree . . ├── dist │ └── bundle.js ├── index.html ├── src │ ├── app.js │ ├── hello.js │ └── world.js └── webpack.config.js 2 directories, 6 files ૿͑ͯΔ

Slide 42

Slide 42 text

ϒϥ΢βͰόϯυϧϑΝΠϧΛಡΈࠐΉ දࣔ͞Εͨ

Slide 43

Slide 43 text

΍ͬͯΈΔ͜ͱᶄ w &4͕࢖͑ΔΑ͏ʹ͠Α͏ w खॱ w 8FCQBDLͷϩʔμʔઃఆͰ&4ܗࣜͷ+BWB4DSJQU
 ϑΝΠϧ͕ಡΈࠐΊΔΑ͏ʹઃఆ͢Δ

Slide 44

Slide 44 text

#BCFMͷΠϯετʔϧ $ npm install --save babel-loader babel-preset-es2015 wCBCFMMPBEFS#BCFMͷ8FCQBDL༻ϓϥάΠϯ w8FCQBDLʹઃఆ͢Ε͹+BWB4DSJQUϑΝΠϧΛ&4ม׵͠ ͯ͘ΕΔ

Slide 45

Slide 45 text

ϩʔμʔઃఆ … // লུ module: { rules: [ { test: /\.js$/, // ϩʔμʔର৅ͷ֦ுࢠ use: [{ loader: ‘babel-loader', // ར༻͢Δϩʔμʔ options: { presets: ['es2015'] } }] } ] } XFCQBDLDPOpHKT wϩʔμʔઃఆͱ͸ɺ$44ͳͲ+BWB4DSJQUҎ֎ͷϑΝΠϧΛ ಡΈࠐΉઃఆ

Slide 46

Slide 46 text

࣮ߦͯ͠ΈΑ͏ import hello from './hello.js'; import world from './world.js'; const message = hello() + ' ES6’ // ES6ͷม਺એݴΛ࢖༻ console.log(message); TSDBQQKT wTSDBQQKTʹ&4ه๏ͷमਖ਼Λͯ͠OQYXFCQBDLΛ࣮ߦ wϒϥ΢βͷ$POTPMFϩάʹग़ྗ͞ΕΔ දࣔ͞Εͨ

Slide 47

Slide 47 text

ͬ͘͟ΓͱҰ࿈ͷྲྀΕ͸
 ෼͔Γ·ͨ͠Ͱ͠ΐ͏͔

Slide 48

Slide 48 text

։ൃ༻αʔόʔXFCQBDLEFWTFSWFS w ϩʔΧϧαʔόʔΛىಈͰ͖Δ w ϑΝΠϧͷมߋΛݕ஌ͯࣗ͠ಈϏϧυͯ͠ɺϒϥ΢βଆ΋ ࣗಈతʹϦϩʔυ w গͳ͍ઃఆͰ͙͢ʹར༻Ͱ͖Δ

Slide 49

Slide 49 text

XFCQBDLEFWTFSWFSͷઃఆखॱ $ npm install —-save-dev webpack-dev-server 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') }, } XFCQBDLDPOpHKT ᶃXFCQBDLEFWTFSWFSΛΠϯετʔϧ ᶄ഑৴ݩσΟϨΫτϦΛࢦఆ͢Δ

Slide 50

Slide 50 text

XFCQBDLEFWTFSWFSͷઃఆखॱ $ npx webpack-dev-server ᶅXFCQBDLEFWTFSWFSΛىಈ

Slide 51

Slide 51 text

ޙ൒
 7VFKTͷίϯϙʔωϯτ։ൃ؀ڥΛ
 ࡞Ζ͏

Slide 52

Slide 52 text

खॱ ؀ڥߏங 8FCQBDLͷΠϯετʔϧ 8FCQBDL։ൃαʔόʔͷઃఆ WVF͕ಡΊΔΑ͏ʹઃఆ͢Δ ϩʔμʔઃఆ ୯ҰϑΝΠϧίϯϙʔωϯτͷදࣔઃఆ ίϯϙʔωϯτϑΝΠϧͷ࡞੒

Slide 53

Slide 53 text

؀ڥߏங w ·ͣ͸ϓϩδΣΫτͷσΟϨΫτϦͷதͰ
 QBDLBHFKTPOΛ࡞੒͢Δ $ mkdir webpack-with-vue
 $ cd webpack-with-vue
 $ npm init -y

Slide 54

Slide 54 text

8FCQBDLͷΠϯετʔϧ w ࣍ʹ8FCQBDLͱ։ൃ༻αʔόʔΛΠϯετʔϧ w ͜͜·Ͱ͸؆୯Ͱ͢Ͷ $ npm install —-save-dev webpack webpack-cli webpack-dev-server

Slide 55

Slide 55 text

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') }, } XFCQBDLDPOpHKT Hello World EJTUJOEFYIUNM த਎͸ۭ TSDJOEFYKT

Slide 56

Slide 56 text

։ൃ؀ڥαʔόʔΛ֬ೝ͠Α͏ $ npx webpack-dev-server ίϯιʔϧ্

Slide 57

Slide 57 text

WVF͕ಡΊΔΑ͏ʹઃఆ͢Δ 7VFΛΠϯετʔϧ͢Δ $ npm install —-save vue $ npm install --save-dev vue-loader vue-template- compiler css-loader 7VFKTͷ୯ҰϑΝΠϧίϯϙʔωϯτ WVFϑΝΠϧ Λѻ ͏ͨΊʹҎԼΛΠϯετʔϧ

Slide 58

Slide 58 text

ϩʔμʔઃఆ 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

Slide 59

Slide 59 text

୯ҰϑΝΠϧίϯϙʔωϯτͷදࣔઃఆ 

EJTUJOEFYIUNM import Vue from 'vue'; import App from './components/App.vue'; window.onload = function() { new Vue(App).$mount('#app'); } TSDJOEFYKT w 8FCQBDLͰϏϧυͨ͠+4ΛಡΈࠐΉ w 7VFͰϚ΢ϯτ͢ΔՕॴΛࢦఆ w ը໘ͷಡΈࠐΈ͕׬ྃͨ͠Β
 BQQʹ"QQWVFΛϚ΢ϯτ ஔ͖׵͑ʣ

Slide 60

Slide 60 text

ίϯϙʔωϯτϑΝΠϧͷ࡞੒

This is App component.

import Header from './Header.vue'; export default { components: { 'header-component': Header } } .blue { color: blue; } TSDDPNQPOFOUT"QQWVF

{{ title }}

export default { data: function() { return { title: 'This is Header component’ } } } .title { font-size: 20px; font-weight: bold; } TSDDPNQPOFOUT)FBEFSWVF

Slide 61

Slide 61 text

ϒϥ΢βͰදࣔ͢Δͱ "QQ$PNQPOFOU )FBEFS$PNQPOFOU

Slide 62

Slide 62 text

ͥͻ೔ใΞϓϦΛ ୯ҰϑΝΠϧίϯϙʔωϯτԽ
 ͯ͠Έ͍ͯͩ͘͞

Slide 63

Slide 63 text

·ͱΊ

Slide 64

Slide 64 text

·ͱΊ w 8FCQBDLͷ֓ཁɺ؆୯ͳ࢖͍ํ͕෼͔ͬͨ w 7VFKTͷ୯ҰϑΝΠϧίϯϙʔωϯτͷϏϧυ؀ڥͷߏங ํ๏͕෼͔ͬͨ w7VFKTͷ࣍ͷϨϕϧ΁ߦ͜͏ʂʂ