実践ES Modules

初夏のJavaScript祭2018の登壇資料です。

1. ࣮ફ&4
   .PEVMFT ͓ͷ͏͑ ॳՆͷ+BWB4DSJQUࡇ
   JO
   αʔΩϡϨʔγϣϯϏϧ
   'PS1SP
   ೥݄೔
   IUUQCJUMZS7J(H ͜ͷεϥΠυͷ63-
2. ࣗݾ঺հ w ඌ্
   ༸հ
   :PTVLF
   0OPVF
   w ೔ຊେֶ
   จཧֶ෦
   ৘ใՊֶՊ
   ॿڭ
   w ৘ใՄࢹԽɺ਺ཧ࠷దԽɺҙࢥܾఆࢧԉͷݚڀ
   w ՄࢹԽγεςϜͷ։ൃʹ8FCϑϩϯτΤϯυٕज़Λ࢖༻
3. /FXT
5. શͯͷϞμϯϒϥ΢βͰ
   &4
   .PEVMFTͷಡΈࠐΈ͕
   αϙʔτ͞Ε·ͨ͠
6. &4
   .PEVMFTʁ w +BWB4DSJQUඪ४ͷϞδϡʔϧγεςϜ 1 import defaultExport from 'module-name' 2 3 export default { 4 value: 123 5 } 1 const defaultExport = require('module-name') 2 3 module.exports = { 4 value: 123 5 } $PNNPO+4
   /PEFKT &4
   .PEVMFT
7. *NQPSU import defaultExport from 'module-name' import * as name from 'module-name' import { export } from 'module-name' import { export as alias } from 'module-name' import { export1 , export2 } from 'module-name' import { export1 , export2 as alias2 , [...] } from 'module-name' import defaultExport, { export [ , [...] ] } from 'module-name' import defaultExport, * as name from 'module-name' import 'module-name' IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC+BWB4DSJQU3FGFSFODF4UBUFNFOUTJNQPSU
8. &YQPSU IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC+BWB4DSJQU3FGFSFODF4UBUFNFOUTFYQPSU export { name1, name2, …, nameN } export { variable1 as name1, variable2 as name2, …, nameN } export let name1, name2, …, nameN // also var export let name1 = …, name2 = …, …, nameN // also var, const export function FunctionName(){...} export class ClassName {...} export default expression export default function (…) { … } // also class, function* export default function name1(…) { … } // also class, function* export { name1 as default, … } export * from … export { name1, name2, …, nameN } from … export { import1 as name1, import2 as name2, …, nameN } from … export { default } from …
9. &4
   .PEVMFTͷ͜Ε·Ͱ w &$."4DSJQU
   Ͱจ๏͕ඪ४Խʢ೥ʣ
   w CBCFMʹΑΔରԠʢ೥ʙʣ
   w &4
   .PEVMFTΛ$PNNPO+4ελΠϧʹτϥϯεύΠϧ
   w Ϟδϡʔϧόϯυϥʔʢ೥ॳ಄ʙʣ
   w 8FCQBDL
   ͔Β͸&4
   .PEVMFTΛαϙʔτ
   w /PEFKTʢ೥ʙʣ
   w ϑϥά෇͖ͰαϙʔτʢWʣ
   w 8FCϒϥ΢βͷରԠʢ೥ʣ ˞೥਺͸େࡶ೺
10. &4
    .PEVMFTͷԸܙ w શͯͷϞμϯ+BWB4DSJQUʹϞδϡʔϧγεςϜ͕ಋೖ
    w ಛఆͷπʔϧʹґଘ͠ͳ͍
    w Ϟδϡʔϧόϯυϥʔෆཁ
    w Ϟδϡʔϧͷґଘؔ܎Λ੩తʹղܾ
    w ඞཁͳϞδϡʔϧͷΈͷಡΈࠐΈ
    w ϦιʔεͷઌಡΈ
11. ϒϥ΢βωΠςΟϒͷ&4
    .PEVMFT w UZQFNPEVMFͷTDSJQUཁૉ
    w TSDଐੑ
    
    ΠϯϥΠϯ
    ྆ํ0,
    w Ϟδϡʔϧ͸63-Ͱࢦఆ 1 <script type="module"> 2 import f, {x as value} from './mod.js' 3 4 alert(f(value)); 5 </script> ⭕ɿIUUQTFYBNQMFDPNNPEKT
    NPEKT
    NPEKT ❌ɿNPEKT
    NPE
12. ྫ 1 <script type="module"> 2 import f, {x as value} from './mod.js' 3 4 alert(f(value)); 5 </script> JOEFYIUNM 1 import {y} from './submod.js' 2 3 export const x = y + 23 4 5 export default (value) => { 6 return 2 * value 7 } NPEKT 1 export const y = 100 TVCNPEKT
14. ʢ੩తʣ*NQPSU
    
    &YQPSUͷ੍໿ 1 import {x} from './submod.js' 2 3 if (x % 2 == 0) { 4 import './optional-mod.js' 5 } 6 7 if (x % 2 == 1) { 8 export default 234 9 } ❌ɿಈతͳ*NQPSU
    
    &YQPSU 1 const x = 10 2 3 import `./mod${x}.js` ❌ɿϞδϡʔϧ໊ͷಈతͳղܾ ˞
    $PNNPO+4ͰͷSFRVJSFͰ͸Մೳͩͬͨ
15. %ZOBNJD
    *NQPSU w JNQPSU NPEVMFOBNF
    w Ϟδϡʔϧ໊͸+BWB4DSJQUͷจࣈྻΛͱΔ
    w Ϟδϡʔϧͷ1SPNJTFΛฦ͢
    w IUUQTHJUIVCDPNVVQBBEZOBNJDJNQPSUQPMZpMM 1 <script type="module"> 2 import {x} from './mod1.js' 3 4 const modName = x % 2 == 0 ? './mod2.js' : './mod3.js' 5 6 import(modName).then((module) => { 7 alert(module.f(x)) 8 }) 9 </script>
16. ྫ 1 export const x = 100 1 export const f = (v) => 2 * v 1 export const f = (v) => v + 2 1 <script type="module"> 2 import {x} from './mod1.js' 3 4 const modName = x % 2 == 0 ? './mod2.js' : './mod3.js' 5 6 import(modName).then((module) => { 7 alert(module.f(x)) 8 }) 9 </script> JOEFYIUNM NPEKT NPEKT NPEKT
18. Կނ&4
    .PEVMFT͔ʁ w ߏจͱΤίγεςϜͷඪ४Խ
    w πʔϧ͕ݞ୅ΘΓ͖ͯͨ͠ػೳΛϒϥ΢β΁౥ࡌ
    w ϥϯλΠϜͷܰྔԽ
    w 8FCαΠτͷܰྔԽ
    
    ߴ଎Խ΁
    w ਐԽ͠ଓ͚Δ8FC
    w 8FC$PNQPOFOUT
    w )551
19. &4
    .PEVMFTͱ
    8FC$PNQPOFOUT
20. 8FC$PNQPOFOUT w 8FCͷίϯϙʔωϯτԽͷͨΊͷඪ४"1*܈
    w $VTUPN
    &MFNFOUT
    w 4IBEPX
    %0.
    w )5.-
    5FNQMBUF
    w )5.-
    *NQPSUT
    w &4
    .PEVMFT΁ͷํ਑มߋ IUUQTXXXXFCDPNQPOFOUTPSH
21. ίϯϙʔωϯτͷ࡞੒ྫ 1 import {html, render} from 'https://unpkg.com/lit-html@0.10.0/lit-html.js' 2 3 const template = () => html` 4 <style> 5 p { 6 color: red; 7 } 8 </style> 9 <p> 10 <slot /> 11 </p> 12 ` 13 14 export class MyElement extends window.HTMLElement { 15 constructor () { 16 super() 17 this.attachShadow({mode: 'open'}) 18 } 19 20 connectedCallback () { 21 render(template(), this.shadowRoot) 22 } 23 } NZFMFNFOUKT
22. ίϯϙʔωϯτͷར༻ྫ 1 import {MyElement} from './my-element.js' 2 3 window.customElements.define('my-element', MyElement) 1 <p>Hello,</p> 2 <my-element>WebComponents</my-element> 3 <p>World!</p> 4 <script type="module" src="./main.js" async></script> NBJOKT JOEFYIUNM
24. 8FCඪ४"1*͚ͩͰຊ֨తͳ
    ίϯϙʔωϯτࢦ޲։ൃ͕Մೳʹ
25. 2
    Կނ8FC͸ਐԽ͢Δͷ͔ʁ
26. "
    ϢʔβʔͷͨΊ
28. 131-ύλʔϯ΁
29. 131-ύλʔϯ w 1VTI
    3FOEFS
    1SFDBDIF
    -B[ZMPBE
    w ϝϦοτ
    w 55*
    ʢ5JNF
    5P
    *OUFSBDUJWFʣͷ࠷খԽ
    w Ωϟογϡޮ཰ͷ࠷େԽ
    w ։ൃɾσϓϩΠϝϯτͷ؆ૉԽ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFQSQMQBUUFSO
30. )551ͱ4FSWFS
    1VTI w ࡉ͔͍ϑΝΠϧ܈ͷಡΈࠐΈͷ࠷దԽ
    w 8FCϒϥ΢βɺ)551αʔόϨϕϧͰͷߴ଎Խ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFIUUQ
31. ܰྔͳ-B[ZMPBEJOHͷ࣮૷ྫ 1 import UniversalRouter from './universal-router.js' 2 3 export const router = new UniversalRouter([ 4 { 5 path: '', 6 action: () => ({redirect: '/posts'}) 7 }, 8 { 9 path: '/posts', 10 children: [ 11 { 12 path: '', 13 action: (context) => { 14 import('./pages/post-list.js').then((action) => action(context)) 15 } 16 }, 17 { 18 path: '/:postId', 19 action: (context) => { 20 import('./pages/post-detail.js').then((action) => action(context)) 21 } 22 } 23 ] 24 } 25 ])
32. 5*14
33. $PNNPO+4ϞδϡʔϧΛ&4
    .PEVMFTͰ࢖͏ w SPMMVQKTΛ࢖͏ 1 import commonjs from 'rollup-plugin-commonjs' 2 import resolve from 'rollup-plugin-node-resolve' 3 4 export default { 5 input: 'node_modules/universal-router/main.js', 6 output: { 7 file: 'public/vendor/universal-router.js', 8 format: 'es' 9 }, 10 plugins: [ 11 commonjs(), 12 resolve() 13 ] 14 } $ rollup -c rollup.config.js SPMMVQDPOpHKT
34. /PEFKTͷಈ޲ w ֦ுࢠʮNKTʯ
    w FYQFSJNFOUBMNPEVMFTʢ/PEFKT
    Wʙʣ
    w /PEFKT
    Wͷ-54͔Βຊ֨ར༻͔ 1 import v from './sub.mjs' 2 3 console.log(v) 1 export default 123 NBJONKT TVCNKT $ node --experimental-modules main.mjs
35. 2
    ͙͢࢖͑Δʁ
36. "
    :FTͱ͸ݴ͑ͳ͍
37. &4
    .PEVMFTͷΠϚ w ଟ͘ͷݱ৔ͷϫʔΫϑϩʔ͸8FCQBDLʹґଘ
    w த਎͸݁ہ$PNNPO+4
    w &4
    .PEVMFTωΠςΟϒͰಈ࡞͢ΔϥΠϒϥϦͷগͳ͞
    w த਎͸݁ہ$PNNPO+4
    w /PEFKTɺ'JSFGPYɺ&EHFɺ)551αʔόͷ࣮૷ঢ়گ
    w ࠷৽ಈ޲ʹ஫ҙͯ͠Ϟδϡʔϧόϯυϥʔ࢖༻͕ແ೉ʁ
    w 8FCQBDLͷਐԽ
    PS
    ୅ସπʔϧͷීٴΛ଴ͭ
38. ·ͱΊ w શͯͷϞμϯϒϥ΢βͰ&4
    .PEVMFT͕αϙʔτ
    w ϒϥ΢βωΠςΟϒͰͷ࢖༻๏ͷҧ͍ʹ஫ҙ
    w &4
    .PEVMFT͸8FC$PNQPOFOUT΍
 8FCαΠτͷߴ଎Խͱ૬ੑ͕ྑ͍
    w 8FC͸ਐԽ͠ଓ͚Δ
    w ࠓޙͷ։ൃελΠϧͷมԽʹඋ͑Α͏