ãŠã§ãã³ã³ããŒãã³ãã§ãã¹ã±ãŒã©ãã«ã§ä¿å®æ§ã®é«ãããã¬ãŒã ã¯ãŒã¯éäŸåã®ã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ãå ç¢ãªã°ããŒãã«ãšã³ã¿ãŒãã©ã€ãºã·ã¹ãã ã®ããã®ã¢ãŒããã¯ãã£ãã¿ãŒã³ã解説ããŸãã
ãŠã§ãã³ã³ããŒãã³ããã¬ãŒã ã¯ãŒã¯ïŒã¹ã±ãŒã©ãã«ãªã¢ãŒããã¯ãã£ã®ããã®èšèšå³
æ¥éã«é²åãããŠã§ãéçºã®äžçã«ãããŠãã¹ã±ãŒã©ãã«ã§ä¿å®æ§ãé«ããå°æ¥æ§ã®ããã¢ãŒããã¯ãã£ã®æ¢æ±ã¯ãäžçäžã®ãšã³ãžãã¢ãªã³ã°ãªãŒããŒãã¢ãŒããã¯ãã«ãšã£ãŠçµ¶ãéãªã課é¡ã§ããç§ãã¡ã¯ãã¬ãŒã ã¯ãŒã¯ã次ã ãšä¹ãæããã¢ããªã·ãã¯ãªããã³ããšã³ãã®è€éããä¹ãè¶ããæè¡çãªããã¯ã€ã³ã®çã¿ãæããŠããŸããããã解決çãå¥ã®æ°ãããã¬ãŒã ã¯ãŒã¯ã§ã¯ãªãããã©ãããã©ãŒã ãã®ãã®ãžã®ååž°ã ãšãããã©ãã§ããããïŒããã§ç»å Žããã®ããŠã§ãã³ã³ããŒãã³ãã§ãã
ãŠã§ãã³ã³ããŒãã³ãã¯æ°ããæè¡ã§ã¯ãããŸãããããã®æç床ãšåšèŸºããŒã«ã¯èšçç¹ã«éããŠãããçŸä»£çã§ã¹ã±ãŒã©ãã«ãªããã³ããšã³ãã¢ãŒããã¯ãã£ã®ç€ãšãªã£ãŠããŸãããããã¯ãã©ãã€ã ã·ãããæäŸããŸããã€ãŸãããã¬ãŒã ã¯ãŒã¯åºæã®ãµã€ãããè±åŽããUIãæ§ç¯ããããã®æ®éçã§æšæºããŒã¹ã®ã¢ãããŒããžãšç§»è¡ããã®ã§ãããã®èšäºã¯ãåäžã®ã«ã¹ã¿ã ãã¿ã³ãäœæããæ¹æ³ã ãã解説ãããã®ã§ã¯ãããŸãããããã¯ãã°ããŒãã«ãªãšã³ã¿ãŒãã©ã€ãºã¢ããªã±ãŒã·ã§ã³ã®èŠæ±ã«åãããŠèšèšãããããŠã§ãã³ã³ããŒãã³ããã¬ãŒã ã¯ãŒã¯ã䜿çšããå æ¬çã§ã¹ã±ãŒã©ãã«ãªã¢ãŒããã¯ãã£ãå®è£ ããããã®æŠç¥çã¬ã€ãã§ãã
ãã©ãã€ã ã·ããïŒãªãã¹ã±ãŒã©ãã«ãªã¢ãŒããã¯ãã£ã«ãŠã§ãã³ã³ããŒãã³ããªã®ãïŒ
é·å¹Žã«ããããå€§äŒæ¥ã¯ç¹°ãè¿ãããåé¡ã«çŽé¢ããŠããŸãããããéšéã®ããŒã ã¯Angularã䜿ã£ãŠè£œåã¹ã€ãŒããæ§ç¯ããŸããå¥ã®ããŒã ã¯ãè²·åã奜ã¿ã®çµæãReactã䜿çšããŸãã3çªç®ã®ããŒã ã¯Vueã䜿ããŸããåããŒã ã¯çç£çã§ãããçµç¹å šäœãšããŠã¯åªåã®éè€ã«èŠããã§ããŸãããã¿ã³ãæ¥ä»ããã«ãŒãããããŒã®ãããªUIèŠçŽ ã®åäžã§å ±æå¯èœãªã©ã€ãã©ãªãååšããªãã®ã§ãããã®æçåã¯ã€ãããŒã·ã§ã³ãé»å®³ããã¡ã³ããã³ã¹ã³ã¹ããå¢å€§ããããã©ã³ãã®äžè²«æ§ãæªå€¢ã®ãããªãã®ã«ããŸãã
ãŠã§ãã³ã³ããŒãã³ãã¯ããã©ãŠã¶ãã€ãã£ããªAPIçŸ€ãæŽ»çšããããšã§ããã®åé¡ã«çŽæ¥å¯ŸåŠããŸããããã«ãããç¹å®ã®JavaScriptãã¬ãŒã ã¯ãŒã¯ã«çžãããªããã«ãã»ã«åããåå©çšå¯èœãªUIèŠçŽ ãäœæã§ããŸãããããããã®ã¢ãŒããã¯ãã£äžã®åã®åºç€ã§ãã
ã¹ã±ãŒã©ããªãã£ã®ããã®äž»èŠãªå©ç¹
- ãã¬ãŒã ã¯ãŒã¯éäŸåïŒ ãããæå€§ã®ç¹åŸŽã§ããLitãStencilã®ãããªã©ã€ãã©ãªã§æ§ç¯ããããŠã§ãã³ã³ããŒãã³ãã¯ãReactãAngularãVueãSvelteããããã¯ãã¬ãŒã³ãªHTML/JavaScriptãããžã§ã¯ãã§ãã·ãŒã ã¬ã¹ã«äœ¿çšã§ããŸããããã¯ã倿§ãªæè¡ã¹ã¿ãã¯ãæã€å€§äŒæ¥ã«ãšã£ãŠç»æçãªããšã§ãããæ®µéçãªç§»è¡ãä¿é²ããé·æçãªãããžã§ã¯ãã®å®å®æ§ãå¯èœã«ããŸãã
- Shadow DOMã«ããçã®ã«ãã»ã«åïŒ å€§èŠæš¡ãªCSSã«ãããæå€§ã®èª²é¡ã®äžã€ã¯ã¹ã³ãŒãã§ããã¢ããªã±ãŒã·ã§ã³ã®äžéšã®ã¹ã¿ã€ã«ãæŒãåºããæå³ããã«å¥ã®éšåã«åœ±é¿ãäžããããšããããŸããShadow DOMã¯ãã³ã³ããŒãã³ãã®ããã«ãã©ã€ããŒãã§ã«ãã»ã«åãããDOMããªãŒãäœæããç¬èªã®ã¹ã³ãŒãä»ãã¹ã¿ã€ã«ãšããŒã¯ã¢ãããæã¡ãŸãããã®ãèŠå¡ãã¯ãã¹ã¿ã€ã«ã®è¡çªãã°ããŒãã«åå空éã®æ±æãé²ããã³ã³ããŒãã³ããå ç¢ã§äºæž¬å¯èœãªãã®ã«ããŸãã
- åå©çšæ§ãšçžäºéçšæ§ã®åäžïŒ ãŠã§ãæšæºã§ããããããŠã§ãã³ã³ããŒãã³ãã¯ç©¶æ¥µã®ã¬ãã«ã®åå©çšæ§ãæäŸããŸããäžå€®éæš©çãªãã¶ã€ã³ã·ã¹ãã ãã³ã³ããŒãã³ãã©ã€ãã©ãªãäžåºŠæ§ç¯ããNPMã®ãããªããã±ãŒãžãããŒãžã£ãŒãä»ããŠé åžã§ããŸããéžæãããã¬ãŒã ã¯ãŒã¯ã«é¢ä¿ãªãããã¹ãŠã®ããŒã ããããã®ã³ã³ããŒãã³ããå©çšã§ãããã¹ãŠã®ããžã¿ã«ããããã£ã§èŠèŠçããã³æ©èœçãªäžè²«æ§ã確ä¿ã§ããŸãã
- æè¡ã¹ã¿ãã¯ã®å°æ¥æ§ã確ä¿ïŒ ãã¬ãŒã ã¯ãŒã¯ã¯ç§»ãå€ãããŸããããŠã§ããã©ãããã©ãŒã ã¯åç¶ããŸãããŠã§ãæšæºã®äžã«ã³ã¢UIã¬ã€ã€ãŒãæ§ç¯ããããšã§ãåäžã®ãã¬ãŒã ã¯ãŒã¯ã®ã©ã€ããµã€ã¯ã«ãããããåãé¢ãããšãã§ããŸãã5幎åŸã«æ°ããããè¯ããã¬ãŒã ã¯ãŒã¯ãç»å Žãããšããã³ã³ããŒãã³ãã©ã€ãã©ãªå šäœãæžãçŽãå¿ èŠã¯ãªããåã«ãããçµ±åããã ãã§ããããã«ãããæè¡ã®é²åã«äŒŽããªã¹ã¯ãšã³ã¹ããå€§å¹ ã«åæžãããŸãã
ãŠã§ãã³ã³ããŒãã³ãã¢ãŒããã¯ãã£ã®äžæ žããªãæ±
ã¹ã±ãŒã©ãã«ãªã¢ãŒããã¯ãã£ãå®è£ ããããã«ã¯ããŠã§ãã³ã³ããŒãã³ããæ§æãã4ã€ã®äž»èŠãªä»æ§ãçè§£ããããšãéèŠã§ãã
1. ã«ã¹ã¿ã èŠçŽ ïŒãã«ãã£ã³ã°ãããã¯
Custom Elements APIã䜿çšãããšãç¬èªã®HTMLã¿ã°ãå®çŸ©ã§ããŸãã<custom-button>ã<profile-card>ãäœæãããã®åäœãå®çŸ©ããããã®é¢é£ããJavaScriptã¯ã©ã¹ãæã€ããšãã§ããŸãããã©ãŠã¶ã¯ãããã®ã¿ã°ãèªèãããããã«ééãããã³ã«ã¯ã©ã¹ãã€ã³ã¹ã¿ã³ã¹åããããã«æããããŸãã
äž»ãªç¹åŸŽã¯ãã³ã³ããŒãã³ãã®ã©ã€ãã«ãããéèŠãªç¬éã«ããã¯ã§ããäžé£ã®ã©ã€ããµã€ã¯ã«ã³ãŒã«ããã¯ã§ãïŒ
connectedCallback()ïŒã³ã³ããŒãã³ããDOMã«æ¿å ¥ããããšãã«çºç«ããŸããã»ããã¢ãããããŒã¿ãã§ãããã€ãã³ããªã¹ããŒã®è¿œå ã«æé©ã§ããdisconnectedCallback()ïŒã³ã³ããŒãã³ããDOMããåé€ããããšãã«çºç«ããŸããã¯ãªãŒã³ã¢ããã¿ã¹ã¯ã«æé©ã§ããattributeChangedCallback()ïŒã³ã³ããŒãã³ãã®ç£èŠå¯Ÿè±¡ã®å±æ§ã®ããããã倿Žããããšãã«çºç«ããŸããããã¯ãå€éšããã®ããŒã¿å€æŽã«åå¿ããããã®äž»èŠãªã¡ã«ããºã ã§ãã
2. Shadow DOMïŒã«ãã»ã«åã®èŠå¡
åè¿°ã®éããShadow DOMã¯çã®ã«ãã»ã«åã®ããã®ç§èš£ã§ããããã¯ãèŠçŽ ã«é ãããå¥ã®DOMãã¢ã¿ããããŸããã·ã£ããŠã«ãŒãå ã®ããŒã¯ã¢ãããšã¹ã¿ã€ã«ã¯ãã¡ã€ã³ããã¥ã¡ã³ãããéé¢ãããŸããããã¯ãã¡ã€ã³ããŒãžã®CSSãã³ã³ããŒãã³ãã®å éšã«åœ±é¿ãäžããããšãã§ãããã³ã³ããŒãã³ãã®å éšCSSãå€éšã«æŒããããšããªãããšãæå³ããŸããå€éšããã³ã³ããŒãã³ããã¹ã¿ã€ãªã³ã°ããå¯äžã®æ¹æ³ã¯ãäž»ã«CSSã«ã¹ã¿ã ããããã£ã䜿çšããŠãæç¢ºã«å®çŸ©ãããå ¬éAPIãä»ããããšã§ãã
3. HTMLãã³ãã¬ãŒããšã¹ãããïŒã³ã³ãã³ãæ³šå ¥ã¡ã«ããºã
<template>ã¿ã°ã䜿çšãããšãããã«ã¯ã¬ã³ããªã³ã°ãããŸããããåŸã§ã¯ããŒã³ããŠäœ¿çšã§ããããŒã¯ã¢ããã®ãã©ã°ã¡ã³ãã宣èšã§ããŸããããã¯ãã³ã³ããŒãã³ãã®å
éšæ§é ãå®çŸ©ããããã®éåžžã«å¹ççãªæ¹æ³ã§ãã
<slot>èŠçŽ ã¯ããŠã§ãã³ã³ããŒãã³ãã®åæã¢ãã«ã§ããããã¯ãã³ã³ããŒãã³ãã®Shadow DOMå
ã®ãã¬ãŒã¹ãã«ããŒãšããŠæ©èœããå€éšããç¬èªã®ããŒã¯ã¢ããã§åããããšãã§ããŸããããã«ãããã«ã¹ã¿ã ããããŒãããã£ãããã¿ãŒã泚å
¥ã§ããæ±çšçãª<modal-dialog>ãªã©ãæè»ã§æ§æå¯èœãªã³ã³ããŒãã³ããäœæã§ããŸãã
ããŒã«ã®éžæïŒãŠã§ãã³ã³ããŒãã³ããã¬ãŒã ã¯ãŒã¯ãšã©ã€ãã©ãª
ããã©JavaScriptã§ãŠã§ãã³ã³ããŒãã³ããæžãããšãã§ããŸãããç¹ã«ã¬ã³ããªã³ã°ããªã¢ã¯ãã£ããã£ãããããã£ãæ±ãå Žåãåé·ã«ãªããã¡ã§ããææ°ã®ããŒã«ã¯ãã®å®åçãªã³ãŒããæœè±¡åããéçºäœéšãã¯ããã«ã¹ã ãŒãºã«ããŸãã
LitïŒGoogle補ïŒ
Litã¯ãé«éãªãŠã§ãã³ã³ããŒãã³ããæ§ç¯ããããã®ã·ã³ãã«ã§è»œéãªã©ã€ãã©ãªã§ããæ¬æ Œçãªãã¬ãŒã ã¯ãŒã¯ã§ããããšã¯ããŸããã代ããã«ããã³ãã¬ãŒãïŒJavaScriptã®ã¿ã°ä»ããã³ãã¬ãŒããªãã©ã«ã䜿çšïŒããªã¢ã¯ãã£ãããããã£ãã¹ã³ãŒãä»ãã¹ã¿ã€ã«ã®ããã®å®£èšçãªAPIãæäŸããŸãããŠã§ããã©ãããã©ãŒã ãžã®è¿ããšãã®å°ããªãããããªã³ãã«ãããå ±æå¯èœãªã³ã³ããŒãã³ãã©ã€ãã©ãªããã¶ã€ã³ã·ã¹ãã ãæ§ç¯ããããã®åªããéžæè¢ãšãªããŸãã
StencilïŒIonicããŒã 補ïŒ
Stencilã¯ã©ã€ãã©ãªãšããããã³ã³ãã€ã©ã§ããTypeScriptãJSXã®ãããªææ°ã®æ©èœã䜿çšããŠã³ã³ããŒãã³ããèšè¿°ãããšãStencilã¯ããããæšæºã«æºæ ããæé©åããããŠã§ãã³ã³ããŒãã³ãã«ã³ã³ãã€ã«ããã©ãã§ãå®è¡ã§ããããã«ããŸããä»®æ³DOMãéåæã¬ã³ããªã³ã°ãã³ã³ããŒãã³ãã®ã©ã€ããµã€ã¯ã«ãªã©ã®æ©èœãå«ããReactãVueã®ãããªãã¬ãŒã ã¯ãŒã¯ã«äŒŒãéçºè äœéšãæäŸããŸããããã«ãããããæ©èœè±å¯ãªç°å¢ãæ±ããããŒã ãããŠã§ãã³ã³ããŒãã³ãã®éåäœãšããŠè€éãªã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããŠããããŒã ã«ãšã£ãŠæé©ãªéžæè¢ãšãªããŸãã
ã¢ãããŒãã®æ¯èŒ
- Litã䜿çšããå ŽåïŒ äž»ãªç®æšããä»ã®ã¢ããªã±ãŒã·ã§ã³ã§å©çšããã軜éã§é«æ§èœãªãã¶ã€ã³ã·ã¹ãã ãåã ã®ã³ã³ããŒãã³ãã®ã©ã€ãã©ãªãæ§ç¯ããããšã§ããå Žåããã©ãããã©ãŒã æšæºã«å¿ å®ã§ããããšãéèŠããå Žåã
- Stencilã䜿çšããå ŽåïŒ å®å šãªã¢ããªã±ãŒã·ã§ã³ãå€§èŠæš¡ã§è€éãªã³ã³ããŒãã³ãã¹ã€ãŒããæ§ç¯ããŠããå ŽåãããŒã ãTypeScriptãJSXãçµã¿èŸŒã¿ã®éçºãµãŒããŒãšããŒã«ãåããããããå šéšå ¥ããã®äœéšã奜ãå Žåã
- ããã©JSã䜿çšããå ŽåïŒ ãããžã§ã¯ããéåžžã«å°ããã峿 ŒãªäŸåé¢ä¿ãªãã®ããªã·ãŒãããããŸãã¯æ¥µç«¯ã«ãªãœãŒã¹ãå¶çŽãããç°å¢åãã«æ§ç¯ããŠããå Žåã
ã¹ã±ãŒã©ãã«ãªå®è£ ã®ããã®ã¢ãŒããã¯ãã£ãã¿ãŒã³
ããã§ã¯ãåã ã®ã³ã³ããŒãã³ããè¶ ããŠãã¢ããªã±ãŒã·ã§ã³ãã·ã¹ãã å šäœãã¹ã±ãŒã©ããªãã£ã®ããã«ã©ã®ããã«æ§æããããæ¢ã£ãŠã¿ãŸãããã
ãã¿ãŒã³1ïŒäžå€®éæš©çã§ãã¬ãŒã ã¯ãŒã¯éäŸåã®ãã¶ã€ã³ã·ã¹ãã
ããã¯ãå€§äŒæ¥ã«ããããŠã§ãã³ã³ããŒãã³ãã®æãäžè¬çã§åŒ·åãªãŠãŒã¹ã±ãŒã¹ã§ããç®æšã¯ããã¹ãŠã®UIèŠçŽ ã®ä¿¡é Œã§ããå¯äžã®æ å ±æºïŒsingle source of truthïŒãäœæããããšã§ãã
ä»çµã¿ïŒ å°çšããŒã ããLitãŸãã¯Stencilã䜿çšããŠãã³ã¢UIã³ã³ããŒãã³ãïŒäŸïŒ<brand-button>ã<data-table>ã<global-header>ïŒã®ã©ã€ãã©ãªãæ§ç¯ã»ç¶æããŸãããã®ã©ã€ãã©ãªã¯ãã©ã€ããŒãNPMã¬ãžã¹ããªã«å
¬éãããŸããçµç¹å
šäœã®è£œåããŒã ã¯ãReactãAngularãVueã®ãããã䜿çšããŠãããã«é¢ãããããããã®ã³ã³ããŒãã³ããã€ã³ã¹ããŒã«ããŠäœ¿çšã§ããŸãããã¶ã€ã³ã·ã¹ãã ããŒã ã¯ãæç¢ºãªããã¥ã¡ã³ãïŒå€ãã®å ŽåãStorybookã®ãããªããŒã«ã䜿çšïŒãããŒãžã§ã³ç®¡çãããã³ãµããŒããæäŸããŸãã
ã°ããŒãã«ãªåœ±é¿ïŒ åç±³ããšãŒããããã¢ãžã¢ã«éçºæ ç¹ãæã€ã°ããŒãã«äŒæ¥ã¯ãAngularã§æ§ç¯ããã瀟å 人äºããŒã¿ã«ããReactã§æ§ç¯ãããäžè¬åãeã³ããŒã¹ãµã€ããŸã§ããã¹ãŠã®ããžã¿ã«è£œåãåãèŠèŠèšèªãšãŠãŒã¶ãŒäœéšãå ±æããããšãä¿èšŒã§ããŸããããã«ãããèšèšãšéçºã®åé·æ§ãå€§å¹ ã«åæžããããã©ã³ãã¢ã€ãã³ãã£ãã£ã匷åãããŸãã
ãã¿ãŒã³2ïŒãŠã§ãã³ã³ããŒãã³ãã«ãããã€ã¯ãããã³ããšã³ã
ãã€ã¯ãããã³ããšã³ããã¿ãŒã³ã¯ãå€§èŠæš¡ã§ã¢ããªã·ãã¯ãªããã³ããšã³ãã¢ããªã±ãŒã·ã§ã³ããç¬ç«ããŠãããã€å¯èœãªããå°ããªãµãŒãã¹ã«åè§£ããŸãããŠã§ãã³ã³ããŒãã³ãã¯ããã®ãã¿ãŒã³ãå®è£ ããããã®çæ³çãªæè¡ã§ãã
ä»çµã¿ïŒ åãã€ã¯ãããã³ããšã³ãã¯ã«ã¹ã¿ã èŠçŽ ã§ã©ãããããŸããããšãã°ãeã³ããŒã¹ã®è£œåããŒãžã¯ãè€æ°ã®ãã€ã¯ãããã³ããšã³ãã§æ§æãããããšããããŸãïŒ<search-header>ïŒæ€çŽ¢ããŒã ã管çïŒã<product-recommendations>ïŒããŒã¿ãµã€ãšã³ã¹ããŒã ã管çïŒã<shopping-cart-widget>ïŒãã§ãã¯ã¢ãŠãããŒã ã管çïŒã軜éãªã·ã§ã«ã¢ããªã±ãŒã·ã§ã³ããããŒãžäžã§ãããã®ã³ã³ããŒãã³ãã調æŽãã責任ãè² ããŸããåã³ã³ããŒãã³ãã¯æšæºã®ãŠã§ãã³ã³ããŒãã³ãã§ãããããããŒã ã¯äžè²«ããã«ã¹ã¿ã èŠçŽ ã€ã³ã¿ãŒãã§ãŒã¹ãå
¬éããéããä»»æã®æè¡ïŒReactãVueãªã©ïŒã§ããããæ§ç¯ã§ããŸãã
ã°ããŒãã«ãªåœ±é¿ïŒ ããã«ãããäžçäžã«åæ£ããããŒã ãèªåŸçã«äœæ¥ã§ããããã«ãªããŸããã€ã³ãã®ããŒã ã¯ããã€ãã®æ€çŽ¢ããŒã ãšèª¿æŽããããšãªããè£œåæšèŠæ©èœãæŽæ°ããŠãããã€ã§ããŸãããã®çµç¹çããã³æè¡çãªåé¢ã«ãããéçºãšãããã€ã®äž¡æ¹ã§å€§èŠæš¡ãªã¹ã±ãŒã©ããªãã£ãå¯èœã«ãªããŸãã
ãã¿ãŒã³3ïŒãã¢ã€ã©ã³ããã¢ãŒããã¯ãã£
ãã®ãã¿ãŒã³ã¯ãããã©ãŒãã³ã¹ãæéèŠèŠãããã³ã³ãã³ããããŒãªãŠã§ããµã€ãã«æé©ã§ããã¢ã€ãã¢ã¯ãäž»ã«éçãªãµãŒããŒã¬ã³ããªã³ã°ãããHTMLããŒãžã«ããŠã§ãã³ã³ããŒãã³ãã«ãã£ãŠååãäŸçµŠãããå°ããå€ç«ããã€ã³ã¿ã©ã¯ãã£ããã£ã®ãå³¶ããæäŸããããšã§ãã
ä»çµã¿ïŒ ããšãã°ããã¥ãŒã¹èšäºã®ããŒãžã¯ãäž»ã«éçãªããã¹ããšç»åã§æ§æãããŠããŸãããã®ã³ã³ãã³ãã¯ãµãŒããŒäžã§ã¬ã³ããªã³ã°ããããã©ãŠã¶ã«éåžžã«è¿ éã«éä¿¡ã§ãããããåªããFirst Contentful PaintïŒFCPïŒæéãåŸãããŸãããããªãã¬ãŒã€ãŒãã³ã¡ã³ãã»ã¯ã·ã§ã³ã賌èªãã©ãŒã ãªã©ã®ã€ã³ã¿ã©ã¯ãã£ããªèŠçŽ ã¯ããŠã§ãã³ã³ããŒãã³ããšããŠé ä¿¡ãããŸãããããã®ã³ã³ããŒãã³ãã¯é å»¶èªã¿èŸŒã¿ãå¯èœã§ãã€ãŸãããŠãŒã¶ãŒã«è¡šç€ºãããçŽåã«ãªããŸã§ããã®JavaScriptã¯ããŠã³ããŒãããã³å®è¡ãããŸããã
ã°ããŒãã«ãªåœ±é¿ïŒ ã°ããŒãã«ãªã¡ãã£ã¢äŒæ¥ã«ãšã£ãŠãããã¯ãã€ã³ã¿ãŒãããæ¥ç¶ãé ãå°åã®ãŠãŒã¶ãŒããã€ã³ã¿ã©ã¯ãã£ããªæ©èœã段éçã«èªã¿èŸŒãŸããäžã§ãã³ã¢ã³ã³ãã³ããã»ãŒç¬æã«åãåããããšãæå³ããŸããããã«ãããäžçäžã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãšSEOã©ã³ãã³ã°ãåäžããŸãã
ãšã³ã¿ãŒãã©ã€ãºçŽã·ã¹ãã ã®ããã®é«åºŠãªèæ ®äºé
ã³ã³ããŒãã³ãéã®ç¶æ 管ç
éä¿¡ã®ããã®ããã©ã«ããã¿ãŒã³ã¯ãããããã£ã¯äžã«ãã€ãã³ãã¯äžã«ïŒproperties down, events upïŒã§ãã芪èŠçŽ ã¯å±æ§/ããããã£ãä»ããŠåã«ããŒã¿ãæž¡ããåã¯ã«ã¹ã¿ã ã€ãã³ããçºè¡ããŠèŠªã«å€æŽãéç¥ããŸããããè€éã§æšªæçãªç¶æ ïŒãŠãŒã¶ãŒèªèšŒã¹ããŒã¿ã¹ãã·ã§ããã³ã°ã«ãŒãããŒã¿ãªã©ïŒã«ã€ããŠã¯ãããã€ãã®æŠç¥ã䜿çšã§ããŸãïŒ
- ã€ãã³ããã¹ïŒ ã·ã³ãã«ãªã°ããŒãã«ã€ãã³ããã¹ã䜿çšããŠãè€æ°ã®ç¡é¢ä¿ãªã³ã³ããŒãã³ãããªãã¹ã³ããå¿ èŠã®ããã¡ãã»ãŒãžããããŒããã£ã¹ãã§ããŸãã
- å€éšã¹ãã¢ïŒ ReduxãMobXãZustandãªã©ã®è»œéãªç¶æ 管çã©ã€ãã©ãªãçµ±åã§ããŸããã¹ãã¢ã¯ã³ã³ããŒãã³ãã®å€ã«ååšããã³ã³ããŒãã³ãã¯ããã«æ¥ç¶ããŠç¶æ ãèªã¿åããã¢ã¯ã·ã§ã³ããã£ã¹ãããããŸãã
- ã³ã³ããã¹ããããã€ããŒãã¿ãŒã³ïŒ ã³ã³ãããšãªããŠã§ãã³ã³ããŒãã³ããç¶æ ãä¿æããããããã£ãä»ããŠããŸãã¯åããã£ããã£ããã€ãã³ãããã£ã¹ãããããããšã«ãã£ãŠããã¹ãŠã®åå«ã«ãããæž¡ãããšãã§ããŸãã
å€§èŠæš¡ãªã¹ã¿ã€ãªã³ã°ãšããŒãèšå®
ã«ãã»ã«åããããŠã§ãã³ã³ããŒãã³ãã®ããŒãèšå®ã®éµã¯ãCSSã«ã¹ã¿ã ããããã£ã§ãã倿°ã䜿çšããŠãã³ã³ããŒãã³ãã®å ¬éã¹ã¿ã€ãªã³ã°APIãå®çŸ©ããŸãã
ããšãã°ããã¿ã³ã³ã³ããŒãã³ãã®å
éšCSSã¯æ¬¡ã®ããã«ãªããããããŸããïŒ
.button { background-color: var(--button-primary-bg, blue); color: var(--button-primary-color, white); }
ã¢ããªã±ãŒã·ã§ã³ã¯ã芪èŠçŽ ãŸãã¯:rootã§ãããã®å€æ°ãå®çŸ©ããããšã«ãããç°¡åã«ããŒã¯ããŒããäœæã§ããŸãïŒ
.dark-theme { --button-primary-bg: #333; --button-primary-color: #eee; }
ããé«åºŠãªã¹ã¿ã€ãªã³ã°ã®ããã«ã::part()ç䌌èŠçŽ ã䜿çšãããšãã³ã³ããŒãã³ãã®Shadow DOMå
ã®ç¹å®ã®ãäºåã«å®çŸ©ãããéšåãã¿ãŒã²ããã«ããããšãã§ããæ¶è²»è
ã«ããå€ãã®ã¹ã¿ã€ãªã³ã°å¶åŸ¡ãå®å
šãã€æç€ºçã«äžããæ¹æ³ãæäŸããŸãã
ãã©ãŒã ãšã¢ã¯ã»ã·ããªãã£ïŒA11yïŒ
ã«ã¹ã¿ã ã³ã³ããŒãã³ããã倿§ãªããŒãºãæã€äžçäžã®ãŠãŒã¶ãŒã«ãšã£ãŠã¢ã¯ã»ã¹å¯èœã§ããããšãä¿èšŒããããšã¯ãè²ããªãæ¡ä»¶ã§ããããã¯ãARIAïŒAccessible Rich Internet ApplicationsïŒå±æ§ã«çްå¿ã®æ³šæãæãããã©ãŒã«ã¹ã管çããå®å
šãªããŒããŒãããã²ãŒã·ã§ã³ã確ä¿ããããšãæå³ããŸããã«ã¹ã¿ã ãã©ãŒã ã³ã³ãããŒã«ã®å ŽåãElementInternalsãªããžã§ã¯ãã¯ãã«ã¹ã¿ã èŠçŽ ããã€ãã£ãã®<input>èŠçŽ ã®ããã«ãã©ãŒã ã®éä¿¡ãšæ€èšŒã«åå ã§ããããã«ãããããæ°ããAPIã§ãã
å®è·µçãªã±ãŒã¹ã¹ã¿ãã£ïŒã¹ã±ãŒã©ãã«ãªè£œåã«ãŒãã®æ§ç¯
Litã䜿çšããŠããã¬ãŒã ã¯ãŒã¯ã«äŸåããªã<product-card>ã³ã³ããŒãã³ããèšèšããããšã§ããããã®æŠå¿µãé©çšããŠã¿ãŸãããã
ã¹ããã1ïŒã³ã³ããŒãã³ãã®APIïŒProps & EventsïŒã®å®çŸ©
ç§ãã¡ã®ã³ã³ããŒãã³ãã¯ãããŒã¿ãåãå ¥ãããŠãŒã¶ãŒã¢ã¯ã·ã§ã³ãã¢ããªã±ãŒã·ã§ã³ã«éç¥ããå¿ èŠããããŸãã
- ããããã£ïŒå
¥åïŒïŒ
productNameïŒæååïŒãpriceïŒæ°å€ïŒãcurrencySymbolïŒæååãäŸïŒ"$", "â¬", "Â¥"ïŒãimageUrlïŒæååïŒã - ã€ãã³ãïŒåºåïŒïŒ
addToCartïŒè£œå詳现ãšãšãã«ãããªã³ã°ããCustomEventïŒã
ã¹ããã2ïŒã¹ãããã䜿çšããHTMLã®æ§é å
ã¹ãããã䜿çšããŠãæ¶è²»è
ããã»ãŒã«äžãããæ°çããªã©ã®ã«ã¹ã¿ã ãããžã远å ã§ããããã«ããŸãã
${this.currencySymbol}${this.price}
<div class="card">
<img src="${this.imageUrl}" alt="${this.productName}">
<div class="badge"><slot name="badge"></slot></div>
${this.productName}
ã¹ããã3ïŒããžãã¯ãšããŒãèšå®ã®å®è£
Litã³ã³ããŒãã³ãã¯ã©ã¹ã¯ãããããã£ãšãã«ã¹ã¿ã ã€ãã³ãããã£ã¹ããããã_handleAddToCartã¡ãœãããå®çŸ©ããŸããCSSã¯ããŒãèšå®ã«ã«ã¹ã¿ã ããããã£ã䜿çšããŸãã
CSSã®äŸïŒ
:host {
--card-background: #fff;
--card-border-color: #ddd;
--card-primary-font-color: #333;
}
.card {
background-color: var(--card-background);
border: 1px solid var(--card-border-color);
color: var(--card-primary-font-color);
}
ã¹ããã4ïŒã³ã³ããŒãã³ãã®å©çš
ããã§ããã®ã³ã³ããŒãã³ãã¯ã©ãã§ã䜿çšã§ããŸãã
ãã¬ãŒã³ãªHTMLã§ã®äœ¿çšïŒ
<product-card
product-name="ã°ããŒãã«ã¹ããŒããŠã©ãã"
price="199"
currency-symbol="$"
image-url="/path/to/image.jpg">
<span slot="badge">ãã¹ãã»ã©ãŒ</span>
</product-card>
Reactã³ã³ããŒãã³ãã§ã®äœ¿çšïŒ
function ProductDisplay({ product }) {
const handleAddToCart = (e) => console.log('ã«ãŒãã«è¿œå ãããŸããïŒ', e.detail);
return (
<product-card
productName={product.name}
price={product.price}
currencySymbol={product.currency}
imageUrl={product.image}
onAddToCart={handleAddToCart}
>
<span slot="badge">ãã¹ãã»ã©ãŒ</span>
</product-card>
);
}
ïŒæ³šïŒReactã®çµ±åã«ã¯ãå°ããªã©ãããŒãå¿
èŠã«ãªãå ŽåããCustom Elements Everywhereã®ãããªãªãœãŒã¹ã§ãã¬ãŒã ã¯ãŒã¯åºæã®èæ
®äºé
ã確èªããå¿
èŠãããå ŽåããããŸããïŒ
æªæ¥ã¯æšæºåãããŠãã
ãŠã§ãã³ã³ããŒãã³ãããŒã¹ã®ã¢ãŒããã¯ãã£ãæ¡çšããããšã¯ãããã³ããšã³ããšã³ã·ã¹ãã ã®é·æçãªå¥å šæ§ãšã¹ã±ãŒã©ããªãã£ãžã®æŠç¥çæè³ã§ããããã¯ãReactãAngularã®ãããªãã¬ãŒã ã¯ãŒã¯ã眮ãæããããšã§ã¯ãªããå®å®ããçžäºéçšå¯èœãªåºç€ã§ããããè£åŒ·ããããšã§ããã³ã¢ãã¶ã€ã³ã·ã¹ãã ãæ§ç¯ãããã€ã¯ãããã³ããšã³ãã®ãããªãã¿ãŒã³ãæšæºããŒã¹ã®ã³ã³ããŒãã³ãã§å®è£ ããããšã«ããããã¬ãŒã ã¯ãŒã¯ã®ããã¯ã€ã³ããè§£æŸãããäžçäžã«åæ£ããããŒã ãããå¹ççã«äœæ¥ã§ããããã«ãªããæªæ¥ã®å¿ ç¶çãªå€åã«åŒ·ãæè¡ã¹ã¿ãã¯ãæ§ç¯ã§ããŸãã
ãã©ãããã©ãŒã äžã§æ§ç¯ãå§ããæã¯ä»ã§ããããŒã«ã¯æçãããã©ãŠã¶ã®ãµããŒãã¯æ®éçã§ãããçã«ã¹ã±ãŒã©ãã«ãªã°ããŒãã«ã¢ããªã±ãŒã·ã§ã³ãäœæããããã®ã¢ãŒããã¯ãã£äžã®å©ç¹ã¯åŠå®ã§ããŸããã