JavaScript再入門

BabelによるモダンJavaScript開発

Transcript

1. JavaScript࠶ೖ໳ BabelʹΑΔϞμϯJavaScript։ൃ 2018-02-24 ໦ଜ ݑن
2. +BWB4DSJQUͱ͸ʁ #BCFMʹΑΔϞμϯ+BWB4DSJQU։ൃ 
3. +BWB4DSJQUͱ͸ʁ #BCFMʹΑΔϞμϯ+BWB4DSJQU։ൃ 
4. 2ͭͷJavaScript ΫϥΠΞϯταΠυJavaScript αʔόαΠυJavaScript 
5. ΫϥΠΞϯταΠυJavaScript ϒϥ΢βͱυΩϡϝϯτ ΦϒδΣΫτ Ϟσϧ (DOM) Λ੍ޚ͢ΔΦϒδΣΫτ Λఏڙ͢Δ͜ͱʹΑΓίΞݴޠΛ֦ு 
6. αʔόαΠυJavaScript αʔόͷՔಇʹؔ࿈͢ΔΦϒδΣΫτ Λఏڙ͢Δ͜ͱʹΑΓίΞݴޠΛ֦ு 
7. αʔόαΠυJavaScript αʔόͷՔಇʹؔ࿈͢ΔΦϒδΣΫτ Λఏڙ͢Δ͜ͱʹΑΓίΞݴޠΛ֦ு  /PEFKT .POHP%# 3IJOP etc...
8. 2ͭͷJavaScript  αʔόαΠυJS ΫϥΠΞϯταΠυJS ίΞݴޠ
9. ྺུ࢙֓  ೥ ग़དྷࣄ  ϒϨϯμϯɾΞΠΫ͕-JWF4DSJQUΛ૑Δ  /FUTDBQFʹ+BWB4DSJQU͕౥ࡌ͞ΕΔ
 *OUFSOFU
   &YQMPSFSʹ+4DSJQU͕౥ࡌ͞ΕΔ  &$."4DSJQU
   ୈ൛  &$."4DSJQU
   ୈ൛  &$."4DSJQU
   ୈ൛  &$."4DSJQU
   ୈ൛
   &$."4DSJQU
    
 Ҏ߱ɺຖ೥Ξοϓσʔτ
10. ྺུ࢙֓  ೥ ग़དྷࣄ  ϒϨϯμϯɾΞΠΫ͕-JWF4DSJQUΛ૑Δ  /FUTDBQFʹ+BWB4DSJQU͕౥ࡌ͞ΕΔ
 *OUFSOFU
    &YQMPSFSʹ+4DSJQU͕౥ࡌ͞ΕΔ  &$."4DSJQU
    ୈ൛  &$."4DSJQU
    ୈ൛  &$."4DSJQU
    ୈ൛  &$."4DSJQU
    ୈ൛
    &$."4DSJQU
     
 Ҏ߱ɺຖ೥Ξοϓσʔτ &$."4DSJQU
    +BWB4DSJQUͷඪ४ن֨
11. ྺུ࢙֓  ೥ ग़དྷࣄ  ϒϨϯμϯɾΞΠΫ͕-JWF4DSJQUΛ૑Δ  /FUTDBQFʹ+BWB4DSJQU͕౥ࡌ͞ΕΔ
 *OUFSOFU
    &YQMPSFSʹ+4DSJQU͕౥ࡌ͞ΕΔ  &$."4DSJQU
    ୈ൛  &$."4DSJQU
    ୈ൛  &$."4DSJQU
    ୈ൛  &$."4DSJQU
    ୈ൛
    &$."4DSJQU
     
 Ҏ߱ɺຖ೥Ξοϓσʔτ 
    (NBJM
    
    (PPHMF.BQ
12. ྺུ࢙֓  ೥ ग़དྷࣄ  ϒϨϯμϯɾΞΠΫ͕-JWF4DSJQUΛ૑Δ  /FUTDBQFʹ+BWB4DSJQU͕౥ࡌ͞ΕΔ
 *OUFSOFU
    &YQMPSFSʹ+4DSJQU͕౥ࡌ͞ΕΔ  &$."4DSJQU
    ୈ൛  &$."4DSJQU
    ୈ൛  &$."4DSJQU
    ୈ൛  &$."4DSJQU
    ୈ൛
    &$."4DSJQU
     
 Ҏ߱ɺຖ೥Ξοϓσʔτ 
    QSPUPUZQFKT
    
    K2VFSZ
13. ୅දతͳJavaScript࣮૷  ࣮૷ ౥ࡌιϑτ΢ΣΞ 7 (PPHMF
    $ISPNF
    0QFSB
    /PEFKT 4QJEFS.POLFZ 'JSFGPY +BWB4DSJQU$PSF 4BGBSJ
    8FC,JU $IBLSB *OUFSOFU
    &YQMPSFS
    &EHF
14. JavaScript࣮૷͝ͱͷࠩҟ ࢓༷Ͱࡦఆ͞Ε͍ͯΔ͕ɺJavaScript ࣮૷ʹΑͬͯ͸·ͩ౥ࡌ͞Ε͍ͯͳ͍ 
15. JavaScript࣮૷͝ͱͷࠩҟ ࢓༷Ͱࡦఆ͞Ε͍ͯΔ͕ɺJavaScript ࣮૷ʹΑͬͯ͸·ͩ౥ࡌ͞Ε͍ͯͳ͍  BabelͱPolyfillΛ࢖༻
16. +BWB4DSJQUͱ͸ʁ #BCFMʹΑΔϞμϯ+BWB4DSJQU։ൃ 
17. Babel ECMAScript2015Ҏ߱ͷιʔεΛ ECMAScript5ʹม׵ͯ͠ग़ྗ 
18. ྺུ࢙֓  ೥ ग़དྷࣄ  ϒϨϯμϯɾΞΠΫ͕-JWF4DSJQUΛ૑Δ  /FUTDBQFʹ+BWB4DSJQU͕౥ࡌ͞ΕΔ
 *OUFSOFU
    &YQMPSFSʹ+4DSJQU͕౥ࡌ͞ΕΔ  &$."4DSJQU
    ୈ൛  &$."4DSJQU
    ୈ൛  &$."4DSJQU
    ୈ൛  &$."4DSJQU
    ୈ൛
    &$."4DSJQU
     
 Ҏ߱ɺຖ೥Ξοϓσʔτ
19. ม׵લ
20. ม׵લ BTZODBXBJU
21. ม׵ޙ
22. ม׵ޙ XIJMF
    ແݶϧʔϓ
    ʹஔ͖׵Θ͍ͬͯΔ ࣮֬ʹ࣮૷͞Ε͍ͯΔػೳʹม׵
23. Polyfill ࠷ۙͷػೳΛαϙʔτ͍ͯ͠ͳ͍ϒϥ ΢βͰͦͷػೳΛ࢖͑ΔΑ͏ʹ͢Δ 
24. "SSBZQSPUPUZQFpOE
    
    +BWB4DSJQU
    c
    .%/ 
25. BabelʹΑΔ JavaScript։ൃ
26.  ϑΥϧμɾϑΝΠϧߏ੒
27. BabelͷΠϯετʔϧ  > npm install --save-dev babel-cli babel- preset-env babel-polyfill
28. Babelͷઃఆ (.babelrc)  ࠷খߏ੒ɻλʔήοτϒϥ΢βΛࢦఆ͢ΔͳͲ ৄࡉͳઃఆ΋Մೳɻ
29. OQNTDSJQUT͸OPEF@NPEVMFTʹ1"5)͕
 ௨͍ͬͯΔͷͰɺ$-*πʔϧΛ࢖͏ͷʹศར
30. Babelͷ࣮ߦ  > npm run build:babel
31. PolyfillͷಡΈࠐΈ babelͰੜ੒ͨ͠ϑΝΠϧʹPolyfillΛऔΓࠐΉ ผͷϑΝΠϧͷಡΈࠐΈʹ͸requireϝιου requireϝιου͸ϒϥ΢βͰ͸࢖༻Ͱ͖ͳ͍ 
32. PolyfillͷಡΈࠐΈ babelͰੜ੒ͨ͠ϑΝΠϧʹPolyfillΛऔΓࠐΉ ผͷϑΝΠϧͷಡΈࠐΈʹ͸requireϝιου requireϝιου͸ϒϥ΢βͰ͸࢖༻Ͱ͖ͳ͍  browserifyΛ࢖༻
33. browserifyͷΠϯετʔϧ  > npm install --save-dev browserify
35. browserifyͷ࣮ߦ  > npm run build:browserify ͻͱͭͷϑΝΠϧʹ݁߹
36. ·ͱΊ ECMAScript͸ຖ೥ϦϦʔε JavaScript࣮૷ʹΑͬͯࠩҟ͕ଘࡏ BabelͱPolyfillʹΑͬͯࠩҟΛٵऩ 
37. +BWB4DSJQUͱ͸ʁ #BCFMʹΑΔϞμϯ+BWB4DSJQU։ൃ