Tweet
Tweet

Slide 1

Slide 1 text

JavaScript࠶ೖ໳ BabelʹΑΔϞμϯJavaScript։ൃ 2018-02-24 ໦ଜ ݑن

Slide 2

Slide 2 text

+BWB4DSJQUͱ͸ʁ #BCFMʹΑΔϞμϯ+BWB4DSJQU։ൃ

Slide 3

Slide 3 text

+BWB4DSJQUͱ͸ʁ #BCFMʹΑΔϞμϯ+BWB4DSJQU։ൃ

Slide 4

Slide 4 text

2ͭͷJavaScript ΫϥΠΞϯταΠυJavaScript αʔόαΠυJavaScript

Slide 5

Slide 5 text

ΫϥΠΞϯταΠυJavaScript ϒϥ΢βͱυΩϡϝϯτ ΦϒδΣΫτ Ϟσϧ (DOM) Λ੍ޚ͢ΔΦϒδΣΫτ Λఏڙ͢Δ͜ͱʹΑΓίΞݴޠΛ֦ு

Slide 6

Slide 6 text

αʔόαΠυJavaScript αʔόͷՔಇʹؔ࿈͢ΔΦϒδΣΫτ Λఏڙ͢Δ͜ͱʹΑΓίΞݴޠΛ֦ு

Slide 7

Slide 7 text

αʔόαΠυJavaScript αʔόͷՔಇʹؔ࿈͢ΔΦϒδΣΫτ Λఏڙ͢Δ͜ͱʹΑΓίΞݴޠΛ֦ு /PEFKT .POHP%# 3IJOP etc...

Slide 8

Slide 8 text

2ͭͷJavaScript αʔόαΠυJS ΫϥΠΞϯταΠυJS ίΞݴޠ

Slide 9

Slide 9 text

ྺུ࢙֓ ೥ ग़དྷࣄ ϒϨϯμϯɾΞΠΫ͕-JWF4DSJQUΛ૑Δ /FUTDBQFʹ+BWB4DSJQU͕౥ࡌ͞ΕΔ
 *OUFSOFU&YQMPSFSʹ+4DSJQU͕౥ࡌ͞ΕΔ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQU 
 Ҏ߱ɺຖ೥Ξοϓσʔτ

Slide 10

Slide 10 text

ྺུ࢙֓ ೥ ग़དྷࣄ ϒϨϯμϯɾΞΠΫ͕-JWF4DSJQUΛ૑Δ /FUTDBQFʹ+BWB4DSJQU͕౥ࡌ͞ΕΔ
 *OUFSOFU&YQMPSFSʹ+4DSJQU͕౥ࡌ͞ΕΔ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQU 
 Ҏ߱ɺຖ೥Ξοϓσʔτ &$."4DSJQU+BWB4DSJQUͷඪ४ن֨

Slide 11

Slide 11 text

ྺུ࢙֓ ೥ ग़དྷࣄ ϒϨϯμϯɾΞΠΫ͕-JWF4DSJQUΛ૑Δ /FUTDBQFʹ+BWB4DSJQU͕౥ࡌ͞ΕΔ
 *OUFSOFU&YQMPSFSʹ+4DSJQU͕౥ࡌ͞ΕΔ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQU 
 Ҏ߱ɺຖ೥Ξοϓσʔτ (NBJM (PPHMF.BQ

Slide 12

Slide 12 text

ྺུ࢙֓ ೥ ग़དྷࣄ ϒϨϯμϯɾΞΠΫ͕-JWF4DSJQUΛ૑Δ /FUTDBQFʹ+BWB4DSJQU͕౥ࡌ͞ΕΔ
 *OUFSOFU&YQMPSFSʹ+4DSJQU͕౥ࡌ͞ΕΔ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQU 
 Ҏ߱ɺຖ೥Ξοϓσʔτ QSPUPUZQFKT K2VFSZ

Slide 13

Slide 13 text

୅දతͳJavaScript࣮૷ ࣮૷ ౥ࡌιϑτ΢ΣΞ 7 (PPHMF$ISPNF 0QFSB /PEFKT 4QJEFS.POLFZ 'JSFGPY +BWB4DSJQU$PSF 4BGBSJ 8FC,JU $IBLSB *OUFSOFU&YQMPSFS &EHF

Slide 14

Slide 14 text

JavaScript࣮૷͝ͱͷࠩҟ ࢓༷Ͱࡦఆ͞Ε͍ͯΔ͕ɺJavaScript ࣮૷ʹΑͬͯ͸·ͩ౥ࡌ͞Ε͍ͯͳ͍

Slide 15

Slide 15 text

JavaScript࣮૷͝ͱͷࠩҟ ࢓༷Ͱࡦఆ͞Ε͍ͯΔ͕ɺJavaScript ࣮૷ʹΑͬͯ͸·ͩ౥ࡌ͞Ε͍ͯͳ͍ BabelͱPolyfillΛ࢖༻

Slide 16

Slide 16 text

+BWB4DSJQUͱ͸ʁ #BCFMʹΑΔϞμϯ+BWB4DSJQU։ൃ

Slide 17

Slide 17 text

Babel ECMAScript2015Ҏ߱ͷιʔεΛ ECMAScript5ʹม׵ͯ͠ग़ྗ

Slide 18

Slide 18 text

ྺུ࢙֓ ೥ ग़དྷࣄ ϒϨϯμϯɾΞΠΫ͕-JWF4DSJQUΛ૑Δ /FUTDBQFʹ+BWB4DSJQU͕౥ࡌ͞ΕΔ
 *OUFSOFU&YQMPSFSʹ+4DSJQU͕౥ࡌ͞ΕΔ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQU 
 Ҏ߱ɺຖ೥Ξοϓσʔτ

Slide 19

Slide 19 text

ม׵લ

Slide 20

Slide 20 text

ม׵લ BTZODBXBJU

Slide 21

Slide 21 text

ม׵ޙ

Slide 22

Slide 22 text

ม׵ޙ XIJMF ແݶϧʔϓ ʹஔ͖׵Θ͍ͬͯΔ ࣮֬ʹ࣮૷͞Ε͍ͯΔػೳʹม׵

Slide 23

Slide 23 text

Polyfill ࠷ۙͷػೳΛαϙʔτ͍ͯ͠ͳ͍ϒϥ ΢βͰͦͷػೳΛ࢖͑ΔΑ͏ʹ͢Δ

Slide 24

Slide 24 text

"SSBZQSPUPUZQFpOE +BWB4DSJQUc.%/

Slide 25

Slide 25 text

BabelʹΑΔ JavaScript։ൃ

Slide 26

Slide 26 text

ϑΥϧμɾϑΝΠϧߏ੒

Slide 27

Slide 27 text

BabelͷΠϯετʔϧ > npm install --save-dev babel-cli babel- preset-env babel-polyfill

Slide 28

Slide 28 text

Babelͷઃఆ (.babelrc) ࠷খߏ੒ɻλʔήοτϒϥ΢βΛࢦఆ͢ΔͳͲ ৄࡉͳઃఆ΋Մೳɻ

Slide 29

Slide 29 text

OQNTDSJQUT͸OPEF@NPEVMFTʹ1"5)͕
 ௨͍ͬͯΔͷͰɺ$-*πʔϧΛ࢖͏ͷʹศར

Slide 30

Slide 30 text

Babelͷ࣮ߦ > npm run build:babel

Slide 31

Slide 31 text

PolyfillͷಡΈࠐΈ babelͰੜ੒ͨ͠ϑΝΠϧʹPolyfillΛऔΓࠐΉ ผͷϑΝΠϧͷಡΈࠐΈʹ͸requireϝιου requireϝιου͸ϒϥ΢βͰ͸࢖༻Ͱ͖ͳ͍

Slide 32

Slide 32 text

PolyfillͷಡΈࠐΈ babelͰੜ੒ͨ͠ϑΝΠϧʹPolyfillΛऔΓࠐΉ ผͷϑΝΠϧͷಡΈࠐΈʹ͸requireϝιου requireϝιου͸ϒϥ΢βͰ͸࢖༻Ͱ͖ͳ͍ browserifyΛ࢖༻

Slide 33

Slide 33 text

browserifyͷΠϯετʔϧ > npm install --save-dev browserify

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

browserifyͷ࣮ߦ > npm run build:browserify ͻͱͭͷϑΝΠϧʹ݁߹

Slide 36

Slide 36 text

·ͱΊ ECMAScript͸ຖ೥ϦϦʔε JavaScript࣮૷ʹΑͬͯࠩҟ͕ଘࡏ BabelͱPolyfillʹΑͬͯࠩҟΛٵऩ

Slide 37

Slide 37 text

+BWB4DSJQUͱ͸ʁ #BCFMʹΑΔϞμϯ+BWB4DSJQU։ൃ