Slide 1
Slide 1 text
ϞϊϦγοΫͳ
ΞϓϦέʔγϣϯʹ͓͚Δ
ϑϩϯτΤϯυ෦ͷڞ௨Խ
1)1ΧϯϑΝϨϯε
,FOJDIJSP,JTIJEB
!TJ[VIJLP
Slide 2
Slide 2 text
,FOJDIJSP,JTIJEB
5PLZP
+"1"/
TJ[VIJLP!HNBJMDPN
!TJ[VIJLP
IUUQTHJUIVCDPNTJ[VIJLP
IUUQCMPHPQFOUPLZPKQ
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
)5514ϦΫΤετ
)5.-+4$44
Ϩεϙϯε
41"
)5.-+4$44
ϦΫΤετ9.-)UUQ3FRVFTU
Ϩεϙϯε+40/
Slide 5
Slide 5 text
wK2VFSZ
w#PPUTUSBQ
wFUDʜ
w"OHVMBS
w3FBDU
w7VF
wFUDʜ
Slide 6
Slide 6 text
wK2VFSZ
w#PPUTUSBQ
wFUDʜ
w"OHVMBS
w3FBDU
w7VF
wFUDʜ
ίϯϙʔωϯτࢦ
ίϯϙʔωϯτ
Slide 7
Slide 7 text
• UI Plugin
• UI Widget
• UI Component
Slide 8
Slide 8 text
͋ͳͨਓੜͰ͍ͭ͘ͷ
%BUF1JDLFSΛ࡞͖ͬͯ·͔ͨ͠ʁ
Slide 9
Slide 9 text
wϓϩδΣΫτͱ෦ͷ$44ͷিಥ
w%0.ૢ࡞ʹΑΔ༧ظͤ͵ഁյ
wϥΠϒϥϦϑϨʔϜϫʔΫɺϒϥ
βͷόʔδϣϯҧ͍
wෳࡶͳ%0.ߏ
w͍
Slide 10
Slide 10 text
wʹ(PPHMF͕ఏҊ
w4DPQFE $44%0.
w$VTUPN&MFNFOUT
w#SPXTFS/BUJWF%0."DDFTT
w8$4UBOEBSE
8FC$PNQPOFOUT
Slide 11
Slide 11 text
w1PMZpMMඞཁͳΜͰ͠ΐʁ
w#PXFS͏ͷʁʂ
w1PMZNFSͰͳ͍ͱ࡞Εͳ͍ΜͰ͠ΐ
w)5.-*NQPSU༷ͬͯʹͳΔͷʁ
8FC$PNQPOFOUT
Slide 12
Slide 12 text
/FFE1PMZpMM
Slide 13
Slide 13 text
6TF5IF1MBUGPSN
Slide 14
Slide 14 text
!BOHVMBSFMFNFOUT
https://angular.io/api/elements
Slide 15
Slide 15 text
7VF$VTUPN&MFNFOU
https://karol-f.github.io/vue-custom-element/
Slide 16
Slide 16 text
-JU&MFNFOU
w 1PMZNFSϕʔεͷ
ܰྔ$VTUPN&MFNFOU
ϕʔεΫϥε
w IUUQTMJUFMFNFOU
QPMZNFSQSPKFDU
PSH
Slide 17
Slide 17 text
.BUFSJBMDPNQPOFOUT
w (PPHMF*0Ͱൃද͞
Εͨ৽͍͠σβΠϯͷ
8FC$PNQPOFOUT
w IUUQTHJUIVCDPN
NBUFSJBMDPNQPOFOUT
NBUFSJBMDPNQPOFOUT
XFCDPNQPOFOUT
w IUUQTNBUFSJBMDPNQPOFOUTHJUIVCJP
NBUFSJBMDPNQPOFOUTXFCDPNQPOFOUT
EFNPTJOEFYIUNM
Slide 18
Slide 18 text
w8$0.10/&/5403(
IUUQTXXXXFCDPNQPOFOUTPSH
wOQN
w(JU)VC
1BDLBHF3FQPTJUPSZ
WBBEJOEBUFQJDLFS
ΛݟͯΈΑ͏
Slide 19
Slide 19 text
w$VTUPN&MFNFOUT
w)5.-$44+BWB4DSJQU
w$VTUPN$441SPQFSUJFT
5FDIOJDBM3FRVJSFNFOUT
Slide 20
Slide 20 text
$VTUPN&MFNFOU4USVDUVSF
Πϯϙʔτ
ΤϨϝϯτఆٛ
Πϕϯτॲཧ
ϓϩύςΟఆٛ
ςϯϓϨʔτఆٛ
ΤϨϝϯτొ
Slide 21
Slide 21 text
https://polymer-japan.github.io/polymer3-first-element/index.ja.html
Slide 22
Slide 22 text
+
Slide 23
Slide 23 text
w -BSBWFM
https://github.com/JeffreyWay/laravel-mix
w "4ZNGPOZCVOEMFUIBUJOUFHSBUFT-BSBWFM.JY
https://github.com/iulyanp/elixir-mix-bundle
w )FMQFSUPVTFMBSBWFMNJYXJUI$BLF1)1
https://github.com/mosaxiv/cakephp-mix
An elegant wrapper around Webpack for the 80% use case.
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
w8FC$PNQPOFOUT
w"OHVMBS
w3FBDU
w7VF
wFUDʜ
Slide 26
Slide 26 text
w8FC$PNQPOFOUT
w"OHVMBS
w3FBDU
w7VF
wFUDʜ
ίϯϙʔωϯτ
Λڞ௨Խ͍ͨ͠
Slide 27
Slide 27 text
w8FC$PNQPOFOUT
w"OHVMBS
w3FBDU
w7VF
wFUDʜ
Slide 28
Slide 28 text
$VTUPN&MFNFOUT&WFSZXIFSF
https://custom-elements-everywhere.com/
•Angular
•AngularJs
•CanJs
•Dio
•Dojo2
•Hybrids
•HyperHTML
•Mithril
•Polymer
•Preact
•React
•Skate
•Surplus
•Svelte
•Vue
Slide 29
Slide 29 text
5IF8FC4UBDL
Web primitives
Built-in modules
Frameworks
Web Components
Day 2 Keynote (Chrome Dev Summit 2018) https://youtu.be/SbUAkQ_s7Os
Slide 30
Slide 30 text
As front-end engineers in the Chrome team, our
mission is to make the web better.
We work on libraries and tools to help
developers unlock the web’s full potential, taking
advantage of cutting-edge features like Web
Components, Service Workers and HTTP/2.
We experiment with new patterns for building
faster, smaller web applications.
We advocate for standards, helping ensure that
web developers have a strong voice in the
process.
"CPVUUIF1PMZNFS1SPKFDU
Slide 31
Slide 31 text
w$444IBEPX1BSUT
https://drafts.csswg.org/css-shadow-parts/
w$VTUPN&MFNFOU3FHJTUFST
https://github.com/w3c/webcomponents/issues/716
w1BDLBHFOBNFNBQT
https://github.com/domenic/package-name-maps
w)5.-.PEVMFT
https://github.com/w3c/webcomponents/issues/645
https://github.com/PolymerLabs/html-modules-toolkit
w)5.-5FNQMBUF*OTUBOUJBUJPO
https://github.com/w3c/webcomponents/blob/gh-pages/
proposals/Template-Instantiation.md
Slide 32
Slide 32 text
WJTJUNZCMPHHJUIVC
https://github.com/sizuhiko
http://blog.open.tokyo.jp