Slide 1
Slide 1 text
࣮ફ&4.PEVMFT
͓ͷ͏͑
ॳՆͷ+BWB4DSJQUࡇJOαʔΩϡϨʔγϣϯϏϧ'PS1SP
݄
IUUQCJUMZS7J(H
͜ͷεϥΠυͷ63-
Slide 2
Slide 2 text
ࣗݾհ
w ඌ্༸հ :PTVLF0OPVF
w ຊେֶจཧֶ෦ใՊֶՊॿڭ
w ใՄࢹԽɺཧ࠷దԽɺҙࢥܾఆࢧԉͷݚڀ
w ՄࢹԽγεςϜͷ։ൃʹ8FCϑϩϯτΤϯυٕज़Λ༻
Slide 3
Slide 3 text
/FXT
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
શͯͷϞμϯϒϥβͰ
&4.PEVMFTͷಡΈࠐΈ͕
αϙʔτ͞Ε·ͨ͠
Slide 6
Slide 6 text
&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
Slide 7
Slide 7 text
*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
Slide 8
Slide 8 text
&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 …
Slide 9
Slide 9 text
&4.PEVMFTͷ͜Ε·Ͱ
w &$."4DSJQUͰจ๏͕ඪ४Խʢʣ
w CBCFMʹΑΔରԠʢʙʣ
w &4.PEVMFTΛ$PNNPO+4ελΠϧʹτϥϯεύΠϧ
w Ϟδϡʔϧόϯυϥʔʢॳ಄ʙʣ
w 8FCQBDL͔Β&4.PEVMFTΛαϙʔτ
w /PEFKTʢʙʣ
w ϑϥά͖ͰαϙʔτʢWʣ
w 8FCϒϥβͷରԠʢʣ ˞େࡶ
Slide 10
Slide 10 text
&4.PEVMFTͷԸܙ
w શͯͷϞμϯ+BWB4DSJQUʹϞδϡʔϧγεςϜ͕ಋೖ
w ಛఆͷπʔϧʹґଘ͠ͳ͍
w Ϟδϡʔϧόϯυϥʔෆཁ
w ϞδϡʔϧͷґଘؔΛ੩తʹղܾ
w ඞཁͳϞδϡʔϧͷΈͷಡΈࠐΈ
w ϦιʔεͷઌಡΈ
Slide 11
Slide 11 text
ϒϥβωΠςΟϒͷ&4.PEVMFT
w UZQFNPEVMFͷTDSJQUཁૉ
w TSDଐੑΠϯϥΠϯ྆ํ0,
w Ϟδϡʔϧ63-Ͱࢦఆ
1
2 import f, {x as value} from './mod.js'
3
4 alert(f(value));
5
⭕ɿIUUQTFYBNQMFDPNNPEKT
NPEKT
NPEKT
❌ɿNPEKT
NPE
Slide 12
Slide 12 text
ྫ
1
2 import f, {x as value} from './mod.js'
3
4 alert(f(value));
5
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
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
ʢ੩తʣ*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ͰՄೳͩͬͨ
Slide 15
Slide 15 text
%ZOBNJD*NQPSU
w JNQPSU NPEVMFOBNF
w Ϟδϡʔϧ໊+BWB4DSJQUͷจࣈྻΛͱΔ
w Ϟδϡʔϧͷ1SPNJTFΛฦ͢
w IUUQTHJUIVCDPNVVQBBEZOBNJDJNQPSUQPMZpMM
1
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
Slide 16
Slide 16 text
ྫ
1 export const x = 100
1 export const f = (v) => 2 * v
1 export const f = (v) => v + 2
1
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
JOEFYIUNM
NPEKT
NPEKT
NPEKT
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Կނ&4.PEVMFT͔ʁ
w ߏจͱΤίγεςϜͷඪ४Խ
w πʔϧ͕ݞΘΓ͖ͯͨ͠ػೳΛϒϥβࡌ
w ϥϯλΠϜͷܰྔԽ
w 8FCαΠτͷܰྔԽߴԽ
w ਐԽ͠ଓ͚Δ8FC
w 8FC$PNQPOFOUT
w )551
Slide 19
Slide 19 text
&4.PEVMFTͱ
8FC$PNQPOFOUT
Slide 20
Slide 20 text
8FC$PNQPOFOUT
w 8FCͷίϯϙʔωϯτԽͷͨΊͷඪ४"1*܈
w $VTUPN&MFNFOUT
w 4IBEPX%0.
w )5.-5FNQMBUF
w )5.-*NQPSUT
w &4.PEVMFTͷํมߋ
IUUQTXXXXFCDPNQPOFOUTPSH
Slide 21
Slide 21 text
ίϯϙʔωϯτͷ࡞ྫ
1 import {html, render} from 'https://unpkg.com/[email protected]/lit-html.js'
2
3 const template = () => html`
4
5 p {
6 color: red;
7 }
8
9
10 11
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 } NZFMFNFOUKTSlide 22
Slide 22 text
ίϯϙʔωϯτͷར༻ྫ
1 import {MyElement} from './my-element.js'
2
3 window.customElements.define('my-element', MyElement)
1
Hello,
2 WebComponents 3World!
4 NBJOKT JOEFYIUNMSlide 23
Slide 23 text
No content
Slide 24
Slide 24 text
8FCඪ४"1*͚ͩͰຊ֨తͳ
ίϯϙʔωϯτࢦ։ൃ͕Մೳʹ
Slide 25
Slide 25 text
2Կނ8FCਐԽ͢Δͷ͔ʁ
Slide 26
Slide 26 text
"ϢʔβʔͷͨΊ
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
131-ύλʔϯ
Slide 29
Slide 29 text
131-ύλʔϯ
w 1VTI
3FOEFS
1SFDBDIF
-B[ZMPBE
w ϝϦοτ
w 55*ʢ5JNF5P*OUFSBDUJWFʣͷ࠷খԽ
w Ωϟογϡޮͷ࠷େԽ
w ։ൃɾσϓϩΠϝϯτͷ؆ૉԽ
IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFQSQMQBUUFSO
Slide 30
Slide 30 text
)551ͱ4FSWFS1VTI
w ࡉ͔͍ϑΝΠϧ܈ͷಡΈࠐΈͷ࠷దԽ
w 8FCϒϥβɺ)551αʔόϨϕϧͰͷߴԽ
IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFIUUQ
Slide 31
Slide 31 text
ܰྔͳ-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 ])
Slide 32
Slide 32 text
5*14
Slide 33
Slide 33 text
$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
Slide 34
Slide 34 text
/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
Slide 35
Slide 35 text
2͙͑͢Δʁ
Slide 36
Slide 36 text
":FTͱݴ͑ͳ͍
Slide 37
Slide 37 text
&4.PEVMFTͷΠϚ
w ଟ͘ͷݱͷϫʔΫϑϩʔ8FCQBDLʹґଘ
w த݁ہ$PNNPO+4
w &4.PEVMFTωΠςΟϒͰಈ࡞͢ΔϥΠϒϥϦͷগͳ͞
w த݁ہ$PNNPO+4
w /PEFKTɺ'JSFGPYɺ&EHFɺ)551αʔόͷ࣮ঢ়گ
w ࠷৽ಈʹҙͯ͠Ϟδϡʔϧόϯυϥʔ༻͕ແʁ
w 8FCQBDLͷਐԽPSସπʔϧͷීٴΛͭ
Slide 38
Slide 38 text
·ͱΊ
w શͯͷϞμϯϒϥβͰ&4.PEVMFT͕αϙʔτ
w ϒϥβωΠςΟϒͰͷ༻๏ͷҧ͍ʹҙ
w &4.PEVMFT8FC$PNQPOFOUT
8FCαΠτͷߴԽͱ૬ੑ͕ྑ͍
w 8FCਐԽ͠ଓ͚Δ
w ࠓޙͷ։ൃελΠϧͷมԽʹඋ͑Α͏