Webフレームワークとともに利用するWeb components / JSConf.jp おかわり

JSConf.jp おかわり Node学園46時限目でspring-rainingが発表したスライドです。

References
* https://github.com/spring-raining
* https://developer.mozilla.org/docs/Web/API/CustomElementRegistry
* https://speakerdeck.com/lycorptech_jp/guan-li-hua-mian-xiang-keuikonponentonoshe-ji-web-componentsdehuremuwakufei-yi-cun-womu-zhi-su
* https://zagjs.com/
* https://react.dev/blog/2024/12/05/react-19#support-for-custom-elements
* https://custom-elements-everywhere.com/
* https://github.com/webcomponents/custom-elements-manifest
* https://custom-elements-manifest.netlify.app/
* https://sakupi01.github.io/slides/ja/2025_02_27_web-components-v6/

Transcript

1. 8FCϑϨʔϜϫʔΫͱͱ΋ʹ
   ར༻͢Δ8FC
   $PNQPOFOUT +4$POGKQ
   ͓͔ΘΓ
   /PEFֶԂ࣌ݶ໨
   
   'FC
   
   
   5BNBEB
   "LJIJSP
   TQSJOHSBJOJOH
2. ୭ʁ w 5BNBEB
   "LJIJSP
   
   TQSJOHSBJOJOH
   w 8FCϑϩϯτΤϯυΤϯδχΞ
   w 044։ൃ
   7JWMJPTUZMF
   w ໊ݹ԰ࡏॅ
   w ޷͖ͳ$44ϓϩύςΟɿQPJOUFSFWFOUT IUUQTHJUIVCDPNTQSJOHSBJOJOH
3. ΞδΣϯμ w 8FC
   DPNQPOFOUTʹ͍ͭͯ
   w 8FC
   DPNQPOFOUTͷͭΒΈ
   w ͦΕʹରͯ͠ݱ࣌఺Ͱࢲ͕ͨͪͰ͖Δ͜ͱ
4. 8FC
   DPNQPOFOUTʹ͍ͭͯ w ಠࣗͷ)5.-ཁૉʮ$VTUPN
   FMFNFOUTʯΛ࡞੒͢ΔͨΊͷٕज़
   w 4IBEPX
   %0.΍UFNQMBUFɺ TMPUཁૉͳͲɺෳ਺ͷٕज़ཁૉͷ ू·Γ
5. 8FC
   DPNQPOFOUTͷҙٛ w ͢΂ͯ8FCඪ४ͷٕज़ɾ"1*ͷΈͰ࣮ݱ͍ͯ͠Δ
   w ͜Ε·Ͱ3FBDUͳͲͷ8FCϑϨʔϜϫʔΫΛ࢖Θͳ͍ͱ࡞੒Ͱ͖ͳ ͔ͬͨʮίϯϙʔωϯτʯ͕ɺ8FCٕज़ͷΈͰ࡞ΕΔΑ͏ʹͳΔʜʜ ͔΋
6. ͜͜·Ͱ͸8FC
   DPNQPOFOUTͷ
   ཧ૝ͷ࿩
7. ࣮ࡍɺ8FC
   DPNQPOFOUTʹ͍ͭͯͲͷΑ͏ʹ ࢥͬͯΔʁ w 8FC
   DPNQPOFOUTࣗମ͸ͦΕ΄Ͳ৽͍ٕ͠ज़Ͱ͸ͳ͍
   w पΓͷҙݟΛ·ͱΊΔͱʮ΍Γ͍ͨ͜ͱ͸Θ͔Δ͕ɺݱ࣮తʹ͸৭ʑ ೉͍͠ʯ IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC"1*$VTUPN&MFNFOU3FHJTUSZ
8. 8FC
   DPNQPOFOUTͷ೉͍͠఺ w ૉͷ8FC
   "1*͚ͩͰ8FC
   DPNQPOFOUΛ࣮૷͢Δͷ͸େมʁ
   w ଞͷ8FCϑϨʔϜϫʔΫͱ૊Έ߹Θͤͯ࢖͑ͳ͍ʁ
   w $MJFOUTJEF
   +BWB4DSJQUͷଘࡏΛલఏͱͨ͠"1*
   w 443ɺ34$ʹ͸ରԠͰ͖ͳ͍ʁ
   w 4IBEPX
   CPVOEBSZͷ໰୊
9. ૉͷ8FC
   "1*͚ͩͰ8FC
   DPNQPOFOUΛ࣮૷͢Δͷ͸େมʁ
10. 8FC
    DPNQPOFOUT͸Ұ͔Β࡞Δ΋ͷʁ w 8FC
    DPNQPOFOUTΛ࡞Δʹطଘͷ8FCϑϨʔϜϫʔΫΛ࢖Θͳ͍ɺ Ͱ͸ͳ͍
    w طଘͷ8FCϑϨʔϜϫʔΫͷ$VTUPN
    FMFNFOUTϏϧυػೳΛ࢖͏
    7VFKT
    4WFMUF
    4PMJE
    1SFBDU
    w ࠷ॳ͔Β$VTUPN
    FMFNFOUTͱͯ͠Ϗϧυ͢Δ͜ͱΛ໨తͱͨ͠ϑ ϨʔϜϫʔΫ
    -JU
    4UFODJM
11. ͲͪΒͷํ਑Ͱ࣮૷͢Δ΂͖ʁ w έʔεʹ΋ΑΔ͕ɺՄೳͰ͋Ε͹ޙऀͷϑϨʔϜϫʔΫΛબ୒͢΂͖
    w 8FC
    DPNQPOFOUTͷٕज़ʹ࠷దԽ͞Ε͓ͯΒͣɺόϯυϧαΠζ ໘Ͱෆར
    w ͦͷϑϨʔϜϫʔΫ͕কདྷʹΘͨͬͯ$VTUPN
    FMFNFOUTΤΫε ϙʔτػೳΛαϙʔτ͢Δͱ͸ݶΒͳ͍
    w લऀ͕༗ޮͳྫɿݩ͔ΒͦͷϑϨʔϜϫʔΫͰ։ൃ͍ͯͨ͠8FCΞϓ ϦΛͦͷ··$VTUPN
    FMFNFOUTԽ͢ΔΑ͏ͳέʔε
12. -JUͷجຊతͳ࢖͍ํ -JU&MFNFOUͱ͍͏ΫϥεΛFYUFOE͢Δ ͜ͱͰίϯϙʔωϯτΛఆٛ QSPQFSUZσίϨʔλʔΛ͚ͭͨΫϥε ϑΟʔϧυʹରͯ͠ϦΞΫςΟϏςΟ͕ ಇ͘ IUNMλά෇͖ςϯϓϨʔτϦςϥϧΛ ࢖ͬͯςϯϓϨʔτΛఆٛ͠ɺSFOEFS ϝιου͔ΒϨϯμϦϯά݁ՌΛฦ͢
13. -JUͷ"1*ઃܭ w σίϨʔλʔ΍ΫϥεΛۦ࢖͓ͯ͠ΓɺҰൠతͳ8FCϑϨʔϜϫʔΫ ͱൺֱͯ͠ͱ͖ͬͭͮΒ͍"1*ͷΑ͏ʹݟ͑Δ͕ʜʜ
    w -JUͷ"1*͸͔ͳΓϓϦϛςΟϒͳ෦෼·Ͱ෼ׂ͞Ε͍ͯΔ
    w )5.-ϨϯμϦϯά
    -JU&MFNFOU
    MJUIUNM
    w ϦΞΫςΟϏςΟ
    3FBDUJWF&MFNFOU
    w ϑϨʔϜϫʔΫͱ͍͏ΑΓ͸ɺ)5.-&MFNFOUΫϥεʹศརͳϝ ιουΛ௥Ճͨ͠ϥΠϒϥϦूͱ͍͏දݱ͕͍ۙ
14. -JUΛ༻͍ͨ։ൃͷελϯε w ެࣜυΩϡϝϯτͷ಺༰͸͋͘·Ͱ࣮૷ͷҰྫ
    w ιʔείʔυΛಡΜͰ͍͘ͱɺ-JUͷ"1*͸ҙਤతʹ෼ׂͯ͠ར༻Ͱ ͖ΔΑ͏ʹͳ͍ͬͯΔ͜ͱ͕Θ͔Δ
    w -JUͷؾʹೖΒͳ͍෦෼͸ࣗ෼Ͱ࡞Ε͹ྑ͍
15. IUUQTTQFBLFSEFDLDPNMZDPSQUFDI@ KQHVBOMJIVBNJBOYJBOHLFVJLPOQPOFOUPOPTIFKJXFC DPNQPOFOUTEFIVSFNVXBLVGFJZJDVOXPNV[IJTV ஫ɿൃදதͷ಺༰ʹ͸ݱ࣌఺ͷख๏ɾҙݟͱҰ෦ҟͳΔ఺΋͋Γ·͢
16. ྫɿ;BH w ϑϨʔϜϫʔΫඇґଘͳίϯϙʔωϯτϥΠϒϥϦ
    w "SL
    6*ɿ;BHKTΛ࢖༻ͨ͠)FBEMFTT
    6*
    MJCSBSZ
    w ίϯϙʔωϯτͷঢ়ଶ؅ཧΛ;BHKTʹҠৡ͢Δ͜ͱͰɺ-JUʹର͢Δֶ शίετΛ͔͚Δ͜ͱͳ͘ίϯϙʔωϯτͷৼΔ෣͍Λ࣮૷ IUUQT[BHKTDPN
17. ;BHͷϑϨʔϜϫʔΫந৅Խ TFSWJDF BQJ QSPQT QSPQT &MFNFOU &MFNFOU .BDIJOF
    EF fi OJUJPO useMachine() .connect() .getInputProps() .getLabelProps() normalizeProps() normalizeProps() .BDIJOF
    VQEBUFE ;BHͷεςʔτ؅ཧ͸ಛఆͷ8FCϑϨʔϜϫʔΫͷ ࣮૷ʹґଘ͠ͳ͍ઃܭʹͳ͍ͬͯΔ 8FCϑϨʔϜϫʔΫݻ༗ͷ࣮૷͸͜ͷ෦෼ͷΈ
18. ;BHͱ-JUͷ݁߹ -JUͷϥΠϑαΠΫϧ
    DPOOFDUFE$BMMCBDLͳͲ ʹ߹Θͤͯ;BHͷεςʔτϚγϯΛߋ৽ ಘΒΕͨQSPQTΦϒδΣΫτΛ΋ͱʹ)5.-&MFNFOU ʹରͯ͠௚઀ଐੑ΍ΠϕϯτϋϯυϥʔΛ௥Ճɾ࡟আ ;BHͷBQJΦϒδΣΫτ͸-JUͷ$POUFYUػೳΛ࢖ͬͯ $VTUPN
    FMFNFOUؒͰड͚౉͠
19. $VTUPN
    FMFNFOUͷ)FBEMFTTԽ w Ҏ্ͷίϯϙʔωϯτΛ-JHIU
    %0.ͱͯ͠ఏڙ͢Δ͜ͱͰɺ )FBEMFTT
    6*
    -JCSBSZͱಉ͡ײ֮Ͱ$VTUPN
    FMFNFOU͕ར༻Ͱ͖Δʂ
20. ଞͷ8FCϑϨʔϜϫʔΫͱ
    ૊Έ߹Θͤͯ࢖͑ͳ͍ʁ
21. طଘ8FCϑϨʔϜϫʔΫͱͷ૬ੑ w Ҏલ͸໰୊͕ͩͬͨɺղܾͭͭ͋͠Δ
    w 3FBDU
    ͔Β͸$VTUPN
    FMFNFOUʹQSPQTΛ౉ͨ͠ͱ͖ͷڍಈ͕վ ળ͠ɺ໰୊ͳ͘࢖͑ΔΑ͏ʹʂ IUUQTDVTUPNFMFNFOUTFWFSZXIFSFDPN IUUQTSFBDUEFWCMPHSFBDUTVQQPSUGPSDVTUPNFMFNFOUT
22. ໰୊͸ղܾ͔ͨ͠ʁ w $VTUPN
    FMFNFOUT͸)5.-&MFNFOUΛFYUFOEͨ͠୯ͳΔ +BWB4DSJQUͷDMBTTͳͷͰɺͦΕ͚ͩͰ͸ͦͷ$VTUPN
    FMFNFOU͕Ͳ ͷΑ͏ͳଐੑQSPQFSUZΛड͚औΔ͔Λ஌Δखஈ͕ͳ͍
    w ʹ5ZQF4DSJQUͷܕͰ$VTUPN
    FMFNFOUͷQSPQTΛදݱͰ͖ͳ͍
    w 8FCϑϨʔϜϫʔΫ͔Β$VTUPN
    FMFNFOUͰ͋Δ͜ͱΛҙࣝͤͣʹ ࢖͏ʹ͸ɺ͞ΒͳΔ޻෉͕ඞཁ
23. $VTUPNFMFNFOUTNBOJGFTU
    DFN w $VTUPN
    FMFNFOUTͷߏ੒΍ϝλσʔλΛએݴతʹදݱ͢Δ+40/
    w σϑΝΫτελϯμʔυɺͱ·Ͱ͸ݴ͑ͳ͍͕ɺ
    4UPSZCPPLͷ8FC
    DPNQPOFOUT޲͚GSBNFXPSL͸
    DFNͷ಺༰Λ΋ͱʹLOPC΍EPDTΛੜ੒ͨ͠Γ͢Δ IUUQTHJUIVCDPNXFCDPNQPOFOUTDVTUPNFMFNFOUTNBOJGFTU
24. $FNͷੜ੒ w !DVTUPNFMFNFOUTNBOJGFTUBOBMZ[FSΛ࢖͏͜ͱͰɺ -JU&MFNFOU͔ΒDFNΛੜ੒͢Δࣄ͕Ͱ͖Δ͕ʜʜ
    w ඞવతʹίʔυͷ੩తղੳΛ͢ΔͨΊɺ͔ͳΓෳࡶͳॲཧ
    w -JUͰඪ४తͳॻ͖ํ͔Β֎ΕΔͱ͏·͘෼ੳͰ͖ͳ͍͓ͦΕ
    w ಠࣗͷ࣮૷ͰDFNΛੜ੒͢Δ͜ͱʹ IUUQTDVTUPNFMFNFOUTNBOJGFTUOFUMJGZBQQ
25. QSPQTͷநग़ w EF fi OF$PNQPOFOU1SPQTͱ ͍͏ϝιουΛ༻ҙͯ͠ɺͦ ͜ʹܕύϥϝʔλͱͯ͠ QSPQTͷ৘ใΛهड़
    w EF fi OF$PNQPOFOU1SPQTࣗ ମ͸Կͷ࣮૷΋࣋ͨͳ͍ؔ਺ ͰɺDFNੜ੒ͷ౎߹ͷͨΊͩ ͚ʹଘࡏ͍ͯ͠Δ
26. ϥούʔίϯϙʔωϯτͷੜ੒ w ੜ੒͞ΕͨDFNΛ΋ͱʹ֤8FCϑϨʔϜϫʔΫͷΠϯλʔϑΣʔεʹ ԊͬͯίʔυΛੜ੒
    w Ұݟෳࡶͦ͏͕ͩɺDFNͷੜ੒͑͞Ͱ͖Ε͹ඞཁͳ৘ใ͸ܾ·ͬͨ ϑΥʔϚοτͰ·ͱΊΒΕΔ CVUUPOUT DVTUPNFMFNFOUTKTPO CVUUPOUTY CVUUPOWVF
27. 3FBDUͱ7VFKTͷϥούʔίϯϙʔωϯτͷྫ DFNͷதʹ͋Δ"UUSJCVUF &WFOUͷ৘ใΛ΋ͱʹQSPQTͷ ܕΛੜ੒ ͞Βʹɺ7VFKTʹؔͯ͠͸4MPU ͷϥούʔ΋ఏڙ
28. 443ɺ34$ʹ͸ରԠͰ͖ͳ͍ʁ
29. 443ʹ͸ରԠͰ͖ͳ͍ʁ w %FDMBSBUJWF
    4IBEPX
    %0.
    %4%
    ʹΑΓٕज़తͳ໰୊͸ղܾ
    w $VTUPN
    FMFNFOUTͷதʹTIBEPXSPPUNPEFଐੑΛ࣋ͭ UFNQMBUF͕͋ͬͨ৔߹ɺͦͷ$VTUPN
    FMFNFOUT͕·ͩ%0.ʹ ొ࿥͞Ε͍ͯͳ͍ঢ়ଶͰ΋ͦͷUFNQMBUF͕4IBEPX
    %0.ʹΞλο ν͞Εͨ΋ͷͱͯ͠)5.-͕ϨϯμϦϯά͞ΕΔ
30. ಈ࡞ྫ w +4͕ಡΈࠐ·ΕΔؒͷελΠϧΛఆٛ͢Δ͜ͱͰ'06$Λճආ
31. 8FCϑϨʔϜϫʔΫͱͷ࿈ܞ
    ະݕূ w લड़ͷϥούʔίϯϙʔωϯτ಺Ͱ%4%ΛϨϯμϦϯά͢ΔΑ͏ͳί ϯϙʔωϯτ͕ੜ੒Ͱ͖Ε͹ɺࣗಈతʹ֤ϑϨʔϜϫʔΫͷ443ͷ࢓ ૊ΈΛར༻Ͱ͖Δ͸ͣ
    w 4FSWFSTJEF࣮ߦ༻ʹίϯϙʔωϯτͷॳظϨϯμϦϯά݁ՌΛฦ͢ ϝιουΛ༻ҙ͢Δʁ
32. w 4IBEPX
    SPPU͸%PDVNFOU
    SPPUͱ͸ಠཱ͍ͯ͠ΔͨΊɺ4IBEPX
    
    %0.
    USFFΛ௒͑ͯཁૉΛࢀর͢Δ͜ͱ͕Ͱ͖ͳ͍
    w JOQVUͱMBCFMͷؔ࿈෇͚
    w BSJBMBCFMMFECZ
    BSJBDPOUSPMT
    ʜ
    w ϚʔΫΞοϓ΍ΞΫηγϏϦςΟͷ؍఺Ͱ໰୊ 4IBEPX
    CPVOEBSZͷ໰୊ EJW MBCFM TIBEPX
    SPPU EJW JOQVU id=input:1 for=input:1 DVTUPNJOQVU
33. 4IBEPX
    %0.ͷݶք w རศੑΛ٘ਜ਼ʹͯ͠ɺ)PTUଆͰએݴͨ͠ཁૉΛTMPUͰड͚౉ͯ͠ղܾ
    w কདྷతʹ͸ղܾʜʜʁ EJW MBCFM TIBEPX
    SPPU EJW JOQVU id=input:1 for=input:1 DVTUPNJOQVU TMPU JOQVU IUUQTTBLVQJHJUIVCJPTMJEFTKB @@@XFCDPNQPOFOUTW
34. ·ͱΊ w 8FC
    DPNQPOFOUͱ8FCϑϨʔϜϫʔΫ͸ೋऀ୒ҰͰ͸ͳ͍
    w ҙਤతʹݱ࣌఺Ͱར༻Ͱ͖Δखஈʹݶͬͯ঺հ͠·͕ͨ͠ɺ8FC
    DPNQPOFOUTؔ࿈ͷ৽͍͠ػೳ͸ࠓͰ΋׆ൃʹٞ࿦͞Ε͍ͯ·͢
    w ਺೥ޙʹৼΓฦΔͱશવҧ͍ͬͯͦ͏
    w ʮ8FC
    DPNQPOFOUTݩ೥ʯ͕͍ͭདྷΔ͔͸ෆ໌͕ͩɺʮ͍ͭͷ·ʹ ͔8FC
    DPNQPOFOUTΛ࢖͍ͬͯͨʯ͸ҙ֎ͱ͍͔ۙ΋