Upgrade to Pro — share decks privately, control downloads, hide ads and more …

実践ES Modules

実践ES Modules

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

0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=128

Yosuke Onoue

May 19, 2018
Tweet

Transcript

  1. ࣮ફ&4.PEVMFT ͓ͷ͏͑ ॳՆͷ+BWB4DSJQUࡇJOαʔΩϡϨʔγϣϯϏϧ'PS1SP ೥݄೔ IUUQCJUMZS7J(H ͜ͷεϥΠυͷ63-

  2. ࣗݾ঺հ w ඌ্༸հ :PTVLF0OPVF  w ೔ຊେֶจཧֶ෦৘ใՊֶՊॿڭ w ৘ใՄࢹԽɺ਺ཧ࠷దԽɺҙࢥܾఆࢧԉͷݚڀ w

    ՄࢹԽγεςϜͷ։ൃʹ8FCϑϩϯτΤϯυٕज़Λ࢖༻
  3. /FXT

  4. None
  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
  13. None
  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
  17. None
  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
  23. None
  24. 8FCඪ४"1*͚ͩͰຊ֨తͳ ίϯϙʔωϯτࢦ޲։ൃ͕Մೳʹ

  25. 2Կނ8FC͸ਐԽ͢Δͷ͔ʁ

  26. "ϢʔβʔͷͨΊ

  27. None
  28. 131-ύλʔϯ΁

  29. 131-ύλʔϯ w 1VTI 3FOEFS 1SFDBDIF -B[ZMPBE w ϝϦοτ w 55*ʢ5JNF5P*OUFSBDUJWFʣͷ࠷খԽ

    w Ωϟογϡޮ཰ͷ࠷େԽ w ։ൃɾσϓϩΠϝϯτͷ؆ૉԽ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFQSQMQBUUFSO
  30. )551ͱ4FSWFS1VTI 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ʢ/PEFKTWʙʣ w /PEFKTWͷ-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 ࠓޙͷ։ൃελΠϧͷมԽʹඋ͑Α͏