Tweet
Tweet

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

w͜Ε·Ͱͷ՝୊ w8FC$PNQPOFOUTͷ঺հͱɺͦͷٕज़ ͕ղܾ͢Δ͜ͱ wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻ w࣍ੈ୅΁ w1PMZNFS1SPKFDUͷࠓޙͱ8$ 4UBOEBSE 5PEBZT

Slide 5

Slide 5 text

w͜Ε·Ͱͷ՝୊ w8FC$PNQPOFOUTͷ঺հͱɺͦͷٕज़ ͕ղܾ͢Δ͜ͱ wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻ w࣍ੈ୅΁ w1PMZNFS1SPKFDUͷࠓޙͱ8$ 4UBOEBSE 5PEBZT

Slide 6

Slide 6 text

)5514ϦΫΤετ )5.-+4$44 Ϩεϙϯε 41"
 )5.-+4$44 ϦΫΤετ9.-)UUQ3FRVFTU
 Ϩεϙϯε+40/

Slide 7

Slide 7 text

wK2VFSZ w#PPUTUSBQ wFUDʜ w"OHVMBS w3FBDU w7VF wFUDʜ

Slide 8

Slide 8 text

wK2VFSZ w#PPUTUSBQ wFUDʜ w"OHVMBS w3FBDU w7VF wFUDʜ ίϯϙʔωϯτࢦ޲ ίϯϙʔωϯτ

Slide 9

Slide 9 text

• UI Plugin • UI Widget • UI Component

Slide 10

Slide 10 text

͋ͳͨ͸ਓੜͰ͍ͭ͘ͷ %BUF1JDLFSΛ࡞͖ͬͯ·͔ͨ͠ʁ

Slide 11

Slide 11 text

wϓϩδΣΫτͱ෦඼ͷ$44ͷিಥ w%0.ૢ࡞ʹΑΔ༧ظͤ͵ഁյ wϥΠϒϥϦ΍ϑϨʔϜϫʔΫɺϒϥ΢ βͷόʔδϣϯҧ͍ wෳࡶͳ%0.ߏ଄ w஗͍

Slide 12

Slide 12 text

w͜Ε·Ͱͷ՝୊ w8FC$PNQPOFOUTͷ঺հͱɺͦͷٕज़ ͕ղܾ͢Δ͜ͱ wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻ w࣍ੈ୅΁ w1PMZNFS1SPKFDUͷࠓޙͱ8$ 4UBOEBSE 5PEBZT

Slide 13

Slide 13 text

w೥ʹ(PPHMF͕ఏҊ w4DPQFE $44%0.  w$VTUPN&MFNFOUT w#SPXTFS/BUJWF%0."DDFTT w8$4UBOEBSE 8FC$PNQPOFOUT

Slide 14

Slide 14 text

w1PMZpMMඞཁͳΜͰ͠ΐʁ w#PXFS࢖͏ͷʁʂ w1PMZNFSͰͳ͍ͱ࡞Εͳ͍ΜͰ͠ΐ w)5.-*NQPSUͬͯ࢓༷ʹͳΔͷʁ 8FC$PNQPOFOUT

Slide 15

Slide 15 text

/FFE1PMZpMM

Slide 16

Slide 16 text

6TF5IF1MBUGPSN

Slide 17

Slide 17 text

!BOHVMBSFMFNFOUT https://angular.io/api/elements

Slide 18

Slide 18 text

7VF$VTUPN&MFNFOU https://karol-f.github.io/vue-custom-element/

Slide 19

Slide 19 text

-JU&MFNFOU w 1PMZNFSϕʔεͷ௒ ܰྔ$VTUPN&MFNFOU ϕʔεΫϥε w IUUQTMJUFMFNFOU
 QPMZNFSQSPKFDU
 PSH

Slide 20

Slide 20 text

.BUFSJBMDPNQPOFOUT w (PPHMF*0Ͱൃද͞ Εͨ৽͍͠σβΠϯͷ 8FC$PNQPOFOUT w IUUQTHJUIVCDPN NBUFSJBMDPNQPOFOUT NBUFSJBMDPNQPOFOUT XFCDPNQPOFOUT w IUUQTNBUFSJBMDPNQPOFOUTHJUIVCJP NBUFSJBMDPNQPOFOUTXFCDPNQPOFOUT EFNPTJOEFYIUNM

Slide 21

Slide 21 text

w8&#$0.10/&/5403(
 IUUQTXXXXFCDPNQPOFOUTPSH wOQN w(JU)VC 1BDLBHF3FQPTJUPSZ WBBEJOEBUFQJDLFS ΛݟͯΈΑ͏

Slide 22

Slide 22 text

w$VTUPN&MFNFOUT w)5.-$44+BWB4DSJQU w$VTUPN$441SPQFSUJFT 5FDIOJDBM3FRVJSFNFOUT

Slide 23

Slide 23 text

$VTUPN&MFNFOU4USVDUVSF Πϯϙʔτ ΤϨϝϯτఆٛ Πϕϯτॲཧ ϓϩύςΟఆٛ ςϯϓϨʔτఆٛ ΤϨϝϯτొ࿥

Slide 24

Slide 24 text

https://polymer-japan.github.io/polymer3-first-element/index.ja.html

Slide 25

Slide 25 text

w͜Ε·Ͱͷ՝୊ w8FC$PNQPOFOUTͷ঺հͱɺͦͷٕज़ ͕ղܾ͢Δ͜ͱ wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻ w࣍ੈ୅΁ w1PMZNFS1SPKFDUͷࠓޙͱ8$ 4UBOEBSE 5PEBZT

Slide 26

Slide 26 text

+

Slide 27

Slide 27 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 28

Slide 28 text

DEMO https://github.com/sizuhiko/phpcon-2019-sendai

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

w͜Ε·Ͱͷ՝୊ w8FC$PNQPOFOUTͷ঺հͱɺͦͷٕज़ ͕ղܾ͢Δ͜ͱ wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻ w࣍ੈ୅΁ w1PMZNFS1SPKFDUͷࠓޙͱ8$ 4UBOEBSE 5PEBZT

Slide 31

Slide 31 text

w8FC$PNQPOFOUT w"OHVMBS w3FBDU w7VF wFUDʜ

Slide 32

Slide 32 text

w8FC$PNQPOFOUT w"OHVMBS w3FBDU w7VF wFUDʜ ίϯϙʔωϯτ Λڞ௨Խ͍ͨ͠

Slide 33

Slide 33 text

w8FC$PNQPOFOUT w"OHVMBS w3FBDU w7VF wFUDʜ

Slide 34

Slide 34 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 35

Slide 35 text

5IF8FC4UBDL Web primitives Built-in modules Frameworks Web Components Day 2 Keynote (Chrome Dev Summit 2018) https://youtu.be/SbUAkQ_s7Os

Slide 36

Slide 36 text

w͜Ε·Ͱͷ՝୊ w8FC$PNQPOFOUTͷ঺հͱɺͦͷٕज़ ͕ղܾ͢Δ͜ͱ wϞϊϦγοΫͳ1)1ΞϓϦ͔Βͷར༻ w࣍ੈ୅΁ w1PMZNFS1SPKFDUͷࠓޙͱ8$ 4UBOEBSE 5PEBZT

Slide 37

Slide 37 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 38

Slide 38 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 39

Slide 39 text

WJTJUNZCMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp