ð€ HTMLã«「ã€ã³ã¯ã«ãŒã」ããªãã®ã¯ããŒ?éçºè ã®é·å¹Žã®çåã培åºè§£å!#Webéçº #HTML #ããã³ããšã³ã #äº04
【Webéçºã®è¬ð€】HTMLã ãã§ãã¡ã€ã«ãã€ã³ã¯ã«ãŒãã§ããªãã®ã¯ãªã?30幎æ¥ã®çåã«è¿«ã!#HTML #Webæšæº #ããã³ããšã³ã
åœããåã®ããã«äœ¿ãããããããŒ/ããã¿ãŒå ±éå。ã§ã、HTMLãã€ãã£ãã®è§£æ±ºçããªãã®ã¯ãªã? ð€ éçºè ãæ±ããæ ¹æ¬çãªçåã培åºè§£èª¬!
ð ç®æ¬¡
- åºæ:ãªãä»、ãã®åããªã®ã?
- ã¯ããã«:åé¡ã®æ žå¿ãšçŸç¶ã®è§£æ±ºç
- 次ã«:ãªã「ãã€ãã£ãHTMLã€ã³ã¯ã«ãŒã」ãå¿ èŠãšãããã®ã?
- çŸç¶ã®è§£æ±ºçãšãã®éç
- ã§ã¯、ãªãçŽç²ãªHTMLã§ã®ã€ã³ã¯ã«ãŒãã¯å®çŸããªãã®ã?èããããçç±
- ããã©ãŒãã³ã¹ãžã®æžå¿µ (ããªããŒãã¹ãã£ãç Žå£?)
- éåæèªã¿èŸŒã¿ãšã¬ã€ã¢ãŠãã·ãã
- HTMLã®çŽç²æ§ãšè€éæ§
- ãã¹ããšåŸªç°åç §ã®é£ãã
- ãã¹ãã£ã³ã°åŽã®åçº?
- ã»ãã¥ãªãã£ãšå¶çŽ (CORSãªã©)
- æŽå²ççµç·¯ãš「Living Standard」
- çã®éèŠãšåªå 床ã®åé¡?
- éå»ã®è©Šã¿「HTML Imports」ã®å€±æ
- ãã®èšäºã®ãã®ä»ã®åœã«ããã圱é¿、åã³æèš
- ãã®èšäºã®æ¥æ¬ã«ããã圱é¿、åã³æèš
- ãã®èšäºã«å¯ŸããŠçåç¹ã¯ãªãã?å€è§çèŠç¹ã¯ãªãã?
- äºæž¬ããããããåå¿ (Reddit/HackerNews颚) ãšåè«
- çµè«:「ã€ã³ã¯ã«ãŒã」ã¯HTMLå²åŠã®æ ¹å¹¹ãæºããã?æªæ¥ãžã®å±æ
- çæ:è© ãã§ã¿ãŸãã ð
- åèæç®
- çšèªçŽ¢åŒ (ã¢ã«ãã¡ãããé )
- è£è¶³1: çšèªè§£èª¬ (ãããããé )
- è£è¶³2: æœåšçèªè ã®ããã«
- è£è¶³3: æ³å®åç (åŠäŒçºè¡šé¢š Q&A)
- è£è¶³4: äºæž¬ããããããåå¿ (2ch/ã¯ãŠã/ãã³å颚) ãšåè«
- è£è¶³5: äºæž¬ããããããåå¿ (ãªãJæ°é¢š) ãšãã¡ããã
- è£è¶³6: äºæž¬ããããããåå¿ (ã¬ã«ã¡ãã/ãžã¢ãã£ãŒæ°é¢š) ãšåè«
- è£è¶³7: äºæž¬ããããããåå¿ (ã€ãã³ã¡/ã³ã¡ã³ããã©ã¹é¢š) ãšåè«
- è£è¶³8: äºæž¬ããããããåå¿ (Tiktok/ãã€ãã§ã/çãµã€æ°é¢š) ãšåè«
- è£è¶³9: SUNOçšæè©æ¡
- è£è¶³10: æšèŠå³æž
- è£è¶³11: äžæ¹æŒ«æ「HTMLã€ã³ã¯ã«ãŒã」
- è£è¶³12: äžäººããªããã³ã
- è£è¶³13: 倧åå©
- è£è¶³14: SFã·ã§ãŒãã·ã§ãŒã「ã€ã³ã¯ã«ãŒã・ãã©ããã¯ã¹」
- è£è¶³15: æ±æžèœèª「ã€ã³ã¯ã«ãŒãé·å±éšå」
- è£è¶³16: è±èªåŠç¿è ã®ããã®è±åèªãªã¹ã
åºæ:ãªãä»、ãã®åããªã®ã?
ããã«ã¡ã¯!売ãã£åããã¬ãŒã®çè ã§ã。( ・`Ï・´)✨ ãŠã§ããµã€ããäœãäžã§、å€ãã®éçºè ãäžåºŠã¯ã¶ã€ããã§ãããçŽ æŽãªçåããããŸã。ããã¯、「ãªãHTMLã ãã§、ä»ã®HTMLãã¡ã€ã«(äŸãã°å ±éã®ããããŒãããã¿ãŒ)ãç°¡åã«èªã¿èŸŒããªãã®ã ãã?」ãšãããã®ã§ã。
CSSã¯@importã§ä»ã®CSSãèªã¿èŸŒããŸã。JavaScriptã¯importæã§ä»ã®ã¢ãžã¥ãŒã«ãèªã¿èŸŒããŸã。ç»åã¯ã§è¡šç€ºã§ããŸã。ããã、HTMLãHTMLãçŽæ¥、ã·ã³ãã«ã«åã蟌ãããã®æšæºçãªã¿ã°ã¯、é©ãã»ã©é·ãé、ååšããŸãã。<0xF0><0x9F><0xA4><0xAF>
ãã¡ãã、ãã®åé¡ã解決ããæ¹æ³ã¯å±±ã»ã©ãããŸã。ãµãŒããŒãµã€ãã®æè¡ã䜿ã£ãã、JavaScriptã§åçã«èªã¿èŸŒãã ã、éçãµã€ããžã§ãã¬ãŒã¿ãŒã䜿ã£ãã… ã§ã、ãªãæãåºæ¬çãªããŒã¯ã¢ããèšèªã§ããHTMLèªäœã«、ãã®æ©èœããªãã®ã§ãããã?
çè ã¯、ãã®「åœããå」ãšãããå¶çŽã®è£ã«ããçç±ãæ¢æ±ããããšã、çŸä»£ã®Webéçºã®è€éãã、Webæšæºãã©ã®ããã«é²å(ãããã¯åæ»?)ããŠããã®ããçè§£ããäžã§éåžžã«éèŠã ãšèã、ãã®èšäºãå·çããã«è³ããŸãã。ãã®èšäºãéããŠ、èªè ã®çããã«ã¯åãªãæè¡çãªå¥œå¥å¿ãæºããã ãã§ãªã、Webãã©ãããã©ãŒã ã®èšèšææ³ãæŽå²çèæ¯、ãããŠæªæ¥ã®å¯èœæ§ã«ã€ããŠäžç·ã«èããŠããã ããã°å¹žãã§ã。ð
ã¯ããã«:åé¡ã®æ žå¿ãšçŸç¶ã®è§£æ±ºç
ãŠã§ããµã€ãå¶äœã«ãããŠ、「åãã³ãŒããäœåºŠãæžããªã」ãšããDRY(Don't Repeat Yourself)ååã¯åºæ¬äžã®åºæ¬ã§ã。å€ãã®ãµã€ãã§ã¯、å šããŒãžå ±éã®ããããŒ、ããã¿ãŒ、ããã²ãŒã·ã§ã³ã¡ãã¥ãŒãªã©ãååšããŸã。ããããåHTMLãã¡ã€ã«ã«ã³ããããã®ã¯éå¹ççã§、ä¿®æ£ãå¿ èŠã«ãªã£ãå Žåã«å€§å€ãªæéãããããŸã。
çæ³çã«ã¯、ã®ãããªã·ã³ãã«ãªHTMLã¿ã°ãããã°、ãã®åé¡ã¯è§£æ±ºãããã§ã。ããã、çŸå®ã«ã¯ãã®ãããªãã€ãã£ããªHTMLã¿ã°ã¯ååšããŸãã。
éçºè ã¯ãã®åºæ¬çãªããŒãºãæºããããã«、æ§ã ãªä»£æ¿ææ®µãçšããŠããŸãã。
- ãµãŒããŒãµã€ãã€ã³ã¯ã«ãŒã(SSI)
- PHP、Ruby、Pythonãªã©ã®ãµãŒããŒãµã€ãèšèªã«ãããã³ãã¬ãŒãåŠç
- React、Vue、Angularãªã©ã®JavaScriptãã¬ãŒã ã¯ãŒã¯/ã©ã€ãã©ãª
- Astro、Next.js、Hugo、Jekyllãªã©ã®éçãµã€ããžã§ãã¬ãŒã¿ãŒ(SSG)
- JavaScriptãçšãã
fetchAPIã«ããåçèªã¿èŸŒã¿ - Web Components
- (éå®çãªãã)
ãã¿ã°
ãããã®è§£æ±ºçã¯æå¹ã§ãã、ããããçŽç²ãªHTMLã ãã§ã¯å®çµããŸãã。远å ã®ããŒã«、èšèª、ãã«ãããã»ã¹、ãããã¯å®è¡æã®JavaScriptãå¿ èŠãšãªããŸã。ãªã、ãããªã«ãåºæ¬çãªæ©èœã、HTMLæšæºãšããŠæäŸãããŠããªãã®ã§ãããã?ãã®èšäºã§ã¯、ãã®è¬ã«è¿«ããŸã。
次ã«:ãªã「ãã€ãã£ãHTMLã€ã³ã¯ã«ãŒã」ãå¿ èŠãšãããã®ã?
「æ¢åã®è§£æ±ºçã§ååãããªãã?」ãšæããããããããŸãã。ããã、ãã€ãã£ããªHTMLã€ã³ã¯ã«ãŒãæ©èœãããã°、以äžã®ãããªã¡ãªãããèããããŸã。
- ã·ã³ãã«ã: HTMLãåŠã³å§ããã°ããã®åå¿è ã§ã、è€éãªããŒã«ãèšèªãåŠã¶ããšãªã、ç°¡åã«ã³ã³ããŒãã³ãã®åå©çšãå®çŸã§ããŸã。ããã¯、Webéçºã®åŠç¿æ²ç·ãç·©ããã«ããå¯èœæ§ããããŸã。ð
- ãã«ãããã»ã¹äžèŠã®å¯èœæ§: ã¡ãã£ãšããå人ãµã€ãããããã¿ã€ããäœæããå Žå、ãµãŒããŒãµã€ãã®ã»ããã¢ãããè€éãªãã«ãããŒã«ãªãã«、HTMLãã¡ã€ã«ã ãã§å®çµã§ãããããããŸãã。ããã«ãã、éçºäœéšãåäžã、ããæè»œã«Webãµã€ããäœæã§ããããã«ãªããŸã。ð ️➡️ð
- æšæºåã«ããçžäºéçšæ§: ãã¬ãŒã ã¯ãŒã¯ãããŒã«ã«äŸåããªãæšæºçãªæ¹æ³ãããã°、ç°ãªãç°å¢éã§ã®ã³ãŒãã®åå©çšãç§»è¡ã容æã«ãªããŸã。ãšã³ã·ã¹ãã å šäœã®å¥å šæ§ã«ãå¯äžããã§ããã。ð
- ããã©ãŒãã³ã¹æé©åã®å¯èœæ§: ãã©ãŠã¶ããã€ãã£ãã«ã€ã³ã¯ã«ãŒããåŠçã§ããã°、ããªããŒãããã£ãã·ã¥æŠç¥ãæé©åã、æ¢åã®JavaScriptããŒã¹ã®ãœãªã¥ãŒã·ã§ã³ãããå¹ççã«åäœããå¯èœæ§ããããŸã。(ãã ã、åŸè¿°ããããã«ããã©ãŒãã³ã¹äžã®æžå¿µãææãããŠããŸã)ð
äºå®、å€ãã®éçºè ãé·å¹Žã«ããã、ãã®ãããªæ©èœãæãã§ããŸãã。GitHubã®WHATWG HTMLãªããžããªã«ã¯、ãã®ããŒãã«é¢ããé·å€§ãªè°è«ãååšããŸã。ããã¯、åãªãäžéšã®éçºè ã®ããããªèŠæã§ã¯ãªã、æ ¹åŒ·ãããŒãºãããããšã瀺åããŠããŸã。
ãã®「åºæ¬çãªã¯ãã®æ©èœ」ããªãæšæºåãããªãã®ã、ãã®èæ¯ãæ¢ãããšã¯、Webæè¡ã®é²åã®æ¹åæ§ãçè§£ããäžã§éåžžã«éèŠã§ã。
ð ã³ã©ã :ãã®é 、åãã¯HTMLãææžãããŠãã…
ä»ã§ãã、ãã¬ãŒã ã¯ãŒã¯ãSSGãåœããåã§ãã、ãã€ãŠWebãµã€ãã¯ã¡ã¢åž³ãã·ã³ãã«ãªãšãã£ã¿ã§HTMLãäžè¡äžè¡ææžãããã®ãæ®éã§ãã。(é ãç®…ð) ãã®é 、ããããŒãããã¿ãŒãå
±éåããã®ã«、ãµãŒããŒãµã€ãã€ã³ã¯ã«ãŒã(SSI)ã¯ãŸãã«æäžäž»ã§ãã。 ã®ãããªã³ã¡ã³ã颚ã®èšè¿°ã§、ãµãŒããŒãHTMLãçµã¿ç«ãŠãŠãããã®ã§ã。ã·ã³ãã«ã§åŒ·åã§ããã、ãµãŒããŒã®èšå®ãå¿
èŠã§ãã。HTMLã ãã§å®çµã§ããã…ãšãã倢ã¯、ãã®é ããå€ãã®éçºè
ãæ±ããŠããã®ãããããŸããã。
/\___/ãœ
/ ● \
| ι ● | < æãããã®ã
…
| ▼ |
/ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄\
| ãµãŒããŒèšå®ãšã |
| ããã©ãã£ã… |
\__________/
çŸç¶ã®è§£æ±ºçãšãã®éç
ãã€ãã£ããªHTMLã€ã³ã¯ã«ãŒããååšããªã代ããã«、éçºè ã¯æ§ã ãªå·¥å€«ã§ãã®èª²é¡ã«å¯Ÿå¿ããŠããŸãã。ããã、ããããã®æ¹æ³ã«ã¯äžé·äžçããããŸã。
JavaScriptã«ãããã§ãããšæ¿å ¥
fetch APIã䜿ã£ãŠHTMLãã©ã°ã¡ã³ããååŸã、DOMæäœã§ç¹å®ã®å Žæã«æ¿å
¥ããæ¹æ³ã§ã。
ã³ãŒãäŸ (ã¯ãªãã¯ã§å±é)
fetch('header.html')
.then(response => response.text())
.then(data => {
document.getElementById('header-placeholder').innerHTML = data;
});
- ã¡ãªãã: ã¯ã©ã€ã¢ã³ããµã€ãã§å®çµã§ãã。ç¹å¥ãªãµãŒããŒèšå®ããã«ãããŒã«ãäžèŠ。
- ãã¡ãªãã:
- JavaScriptãç¡å¹ã ãšæ©èœããªã。
- ã³ã³ãã³ãã®èªã¿èŸŒã¿ãé å»¶ã、ã¬ã€ã¢ãŠãã·ãã(ããŒãžã®è¡šç€ºãã¬ã¯ããšãããçŸè±¡)ãåŒãèµ·ããå¯èœæ§ããã。
- SEOãžã®åœ±é¿ãæžå¿µãããå Žåããã(ã¯ããŒã©ãŒãJSãå®è¡ããªã/é å»¶ããå Žå)。
- èªã¿èŸŒãHTMLå ã«ã¹ã¯ãªãããªã©ãå«ãŸããå Žå、å®è¡ã¿ã€ãã³ã°ãã¹ã³ãŒãã®åé¡ãçºçããã。
ãµãŒããŒãµã€ãã€ã³ã¯ã«ãŒã (SSI)
ApacheãNginxãªã©ã®WebãµãŒããŒã®æ©èœã䜿ã£ãŠ、HTMLãã¡ã€ã«é
ä¿¡åã«ä»ã®ãã¡ã€ã«ãåãèŸŒãæ¹æ³ã§ã。ã®ãããªç¹æ®ãªã³ã¡ã³ããèšè¿°ããŸã。
- ã¡ãªãã: å€ãããããæ¯ããæè¡。ã¯ã©ã€ã¢ã³ãåŽã«ã¯å®æããHTMLãé ä¿¡ããããã、JSäžèŠã§ã¬ã€ã¢ãŠãã·ãããèµ·ãã«ãã。
- ãã¡ãªãã:
- WebãµãŒããŒãSSIã«å¯Ÿå¿ããŠãã、èšå®ãå¿ èŠ。
- éçºç°å¢ã§ã®ãã¬ãã¥ãŒãé¢åãªå Žåããã。
- éçãã¹ãã£ã³ã°ãµãŒãã¹(GitHub Pagesã®åºæ¬æ©èœãªã©)ã§ã¯å©çšã§ããªãããšãå€ã。
éçãµã€ããžã§ãã¬ãŒã¿ãŒ (SSG) / ã¿ã¹ã¯ã©ã³ããŒ
Hugo, Jekyll, Astro, Next.js (SSGã¢ãŒã), Gulp, Gruntãªã©。éçºæã«ãã³ãã¬ãŒããã³ã³ããŒãã³ãããæçµçãªéçHTMLãã¡ã€ã«ãçæ(ãã«ã)ããŸã。
- ã¡ãªãã: é«éãªéçãµã€ããçæã§ãã。å€ãã®é«æ©èœãªãã³ãã¬ãŒãæ©èœãå©çšå¯èœ。ããã©ãŒãã³ã¹ãè¯ã。
- ãã¡ãªãã:
- éçºç°å¢ã®ã»ããã¢ãããåŠç¿ã³ã¹ããå¿ èŠ。
- ãã«ãããã»ã¹ãå¿ èŠã«ãªã。
- ããå°èŠæš¡ãªãµã€ãã«ã¯ãã倧ãããªå Žåããã。
ããã¯ãšã³ãèšèª / ãã³ãã¬ãŒããšã³ãžã³
PHP, Ruby on Rails, Django (Python), Express (Node.js)ãªã©。ãµãŒããŒåŽã§ãªã¯ãšã¹ãã«å¿ããŠåçã«HTMLãçæããŸã。å€ãã®ãã³ãã¬ãŒããšã³ãžã³(EJS, Pug, Jinja2ãªã©)ãã€ã³ã¯ã«ãŒãæ©èœãæäŸããŸã。
- ã¡ãªãã: åçãªã³ã³ãã³ãçæãšçµã¿åããããã。æçãããšã³ã·ã¹ãã 。
- ãã¡ãªãã:
- ãµãŒããŒãµã€ãã®å®è¡ç°å¢ãå¿ èŠ。
- ã€ã³ãã©ç®¡çãã³ã¹ããçºçãã。
- éçãµã€ãã«æ¯ã¹ãŠäžè¬çã«å¿çé床ã¯é ããªãå¯èœæ§ããã。
Web Components
Custom Elements, Shadow DOM, HTML Templatesãªã©ã®æšæºæè¡ãçµã¿åãã、åå©çšå¯èœãªã«ãã»ã«åãããã³ã³ããŒãã³ããäœæããæè¡。
- ã¡ãªãã: Webæšæºã«åºã¥ããŠãã。ãã¬ãŒã ã¯ãŒã¯éäŸåã§åå©çšå¯èœ。ã«ãã»ã«åã«ããã¹ã¿ã€ã«ãã¹ã¯ãªããã®è¡çªãé²ãããã。
- ãã¡ãªãã:
- å€éšHTMLãã¡ã€ã«ãçŽæ¥ã€ã³ã¯ã«ãŒãããåçŽãªæ©èœãšã¯å°ãç°ãªã(ã³ã³ããŒãã³ãå®çŸ©ãäž»)。
- JavaScriptã®ç¥èãå¿ èŠ。
- Shadow DOMã®æŠå¿µãªã©、åŠç¿ã³ã¹ããããé«ããšæãã人ããã。
- ãµãŒããŒãµã€ãã¬ã³ããªã³ã°(SSR)ãšã®é£æºãè€éã«ãªãå Žåããã。
iframe / object ã¿ã°
ã ãäœ¿ãæ¹æ³。
- ã¡ãªãã: çŽç²ãªHTMLã¿ã°。ç°¡åã«å€éšã³ã³ãã³ããåã蟌ãã。
- ãã¡ãªãã:
- åã蟌ãŸããã³ã³ãã³ãã¯ç¬ç«ããææžãšããŠæ±ãã、芪ããŒãžã®ã¹ã¿ã€ã«ãã¬ã€ã¢ãŠãã®åœ±é¿ãåãã«ãã(ãŸãã¯ãã®é)。
- ã³ã³ãã³ãã«å¿ããé«ãã®èªå調æŽãéåžžã«é£ãã(ãããæå€§ã®æ¬ ç¹ã®äžã€)。
- ããã©ãŒãã³ã¹ãã¢ã¯ã»ã·ããªãã£äžã®åé¡ãåŒãèµ·ããããã。
- ããããŒãããã¿ãŒã®ãããªããŒãžã®æ§é éšåãšããŠäœ¿ãã«ã¯、極ããŠäžåã。
- å èšäºã®ã¯ãªã¹・ã³ã€ã€ãŒæ°ã「æè¡çã«ã¯çŽç²ãªHTMLãœãªã¥ãŒã·ã§ã³ã ã、å šäœçãªããã©ãŒãã³ã¹、ã¢ã¯ã»ã·ããªãã£ã«æªã、äžè¬çã«éåžžã«æ±ãã«ãã」ãšææããŠããŸã。åºå ž
ãã®ããã«、ã©ã®è§£æ±ºçãå®ç§ã§ã¯ãªã、äœããã®ãã¬ãŒããªããååšããŸã。「ãã HTMLãã€ã³ã¯ã«ãŒããããã ããªã®ã«…」ãšããã·ã³ãã«ãªèŠæ±ã«å¯ŸããŠ、çŸç¶ã®éžæè¢ã¯ããè€éãªã®ã§ã。ð
ã§ã¯、ãªãçŽç²ãªHTMLã§ã®ã€ã³ã¯ã«ãŒãã¯å®çŸããªãã®ã?èããããçç±
ããã»ã©åºæ¬çãªèŠæ±ã«ãé¢ããã、ãªãHTMLæšæºãšããŠã·ã³ãã«ãªã€ã³ã¯ã«ãŒãæ©èœãæäŸãããªãã®ã§ãããã?æç¢ºãªå ¬åŒåçãããããã§ã¯ãããŸããã、æè¡çãªè°è«ãéå»ã®çµç·¯ãã、ããã€ãã®çç±ãæšæž¬ãããŸã。
ããã©ãŒãã³ã¹ãžã®æžå¿µ (ããªããŒãã¹ãã£ãç Žå£?) ð➡️ð
ãã©ãŠã¶ã¯HTMLãè§£æããé、ããªããŒãã¹ãã£ããšããä»çµã¿ã䜿ã£ãŠ、CSS、JavaScript、ç»åãªã©ã®éèŠãªãªãœãŒã¹ãæ©æã«çºèŠã、ããã¯ã°ã©ãŠã³ãã§ããŠã³ããŒããéå§ããŸã。ããã«ãã、ããŒãžã®è¡šç€ºé床ãåäžãããŠããŸã。
ããHTMLã€ã³ã¯ã«ãŒããå°å ¥ããããš、ã€ã³ã¯ã«ãŒããããHTMLã®äžã«ããã«éèŠãªãªãœãŒã¹ãå«ãŸããŠããå¯èœæ§ããããŸã。ãããå¹ççã«åŠçã、ããªããŒãã¹ãã£ãã®éªéãããªãããã«å®è£ ããã®ã¯æè¡çã«é£ããå¯èœæ§ããããŸã。åæçã«ã€ã³ã¯ã«ãŒããåŠçãããšã¬ã³ããªã³ã°ããããã¯ãã、éåæã«åŠçãããšæ¬¡ã®åé¡ãçºçããŸã。
ããªããŒãã¹ãã£ããšã¯?
ãã©ãŠã¶ãHTMLã®ã¡ã€ã³è§£æãåŸ ããã«、å èªã¿ããŠç»å、ã¹ã¯ãªãã、ã¹ã¿ã€ã«ã·ãŒããªã©ã®ãªãœãŒã¹ãæ©æã«æ€åºã、ããŠã³ããŒããéå§ããæé©åæè¡ã§ã。ããã«ãã、ããŒãžã®ã¬ã³ããªã³ã°å®äºãŸã§ã®æéãççž®ã§ããŸã。
éåæèªã¿èŸŒã¿ãšã¬ã€ã¢ãŠãã·ãã ð
ããã©ãŒãã³ã¹ãèæ ®ããŠã€ã³ã¯ã«ãŒããéåæ(ããŒãžã®ä»ã®éšåã®èªã¿èŸŒã¿ãšäžŠè¡ããŠ)ã§è¡ãå Žå、ã€ã³ã¯ã«ãŒããããã³ã³ãã³ããèªã¿èŸŒãŸããæç¹ã§ããŒãžã®ã¬ã€ã¢ãŠãã倧ããå€ãã(ã¬ã€ã¢ãŠãã·ãã)å¯èœæ§ããããŸã。ããã¯ãŠãŒã¶ãŒäœéšãèããæãªããŸã。CLS (Cumulative Layout Shift) ãšããææšã§èšæž¬ãã、Googleã®Core Web Vitalsã§ãéèŠèŠãããŠããŸã。
ãããé²ãã«ã¯、äºåã«ã€ã³ã¯ã«ãŒããããã³ã³ãã³ãã®ãµã€ãºãæå®ãããªã©ã®å¯Ÿçãå¿ èŠã«ãªããããããŸããã、åžžã«ãµã€ãºãåãããšã¯éãã、å®è£ ãè€éã«ãªããŸã。
HTMLã®çŽç²æ§ãšè€éæ§ ð️
HTMLã¯å æ¥、ææžã®æ§é ãããŒã¯ã¢ããããããã®èšèªã§ãã、ããã°ã©ãã³ã°çãªããžãã¯ãæã€ããšã¯æå³ãããŠããŸããã§ãã(äžéšã®ã³ã¡ã³ãã§ã¯「HTMLã¯ç¶æ ãæããªã(ã¹ããŒãã¬ã¹)ã¹ã」ãšããæèŠã)。ã€ã³ã¯ã«ãŒãæ©èœã¯、ãã®「æ§é èšè¿°」ãšãã圹å²ãè¶ ã、ã³ã³ãã³ãã®çµã¿ç«ãŠãäŸåé¢ä¿ãšãã£ãè€éãªæŠå¿µãæã¡èŸŒãããšã«ãªããŸã。
ãŸã、ã€ã³ã¯ã«ãŒããããHTMLãã©ã°ã¡ã³ãã、ããèªäœã§å®å
šãªHTMLææžã§ããå¿
èŠã¯ãªã(äŸ: ã , , ã¿ã°ãäžèŠ)å Žå、ãã®å®çŸ©ãæ±ããã©ãæšæºåããã、ãšããåé¡ãçããŸã。
HTMLã®å²åŠ?
äžéšã®éçºè ã¯、HTMLã¯ãããŸã§「çµæ」ã衚瀺ãããã®ã§ãã、ãã®çæããžãã¯ã¯ãµãŒããŒãµã€ããJavaScriptãæ ãã¹ãã ãšèããŠããŸã。ãã€ãã£ãã€ã³ã¯ã«ãŒãã¯、ãã®å¢çç·ãææ§ã«ããå¯èœæ§ããããšæžå¿µãããŠããŸã。
ãã¹ããšåŸªç°åç §ã®é£ãã ð
ã€ã³ã¯ã«ãŒããããHTMLã、ããã«å¥ã®HTMLãã€ã³ã¯ã«ãŒããã(ãã¹ã)å Žå、äŸåé¢ä¿ã®è§£æ±ºãè€éã«ãªããŸã。ç¹ã«、ãã¡ã€ã«Aããã¡ã€ã«Bãã€ã³ã¯ã«ãŒãã、ãã¡ã€ã«Bããã¡ã€ã«Aãã€ã³ã¯ã«ãŒããããããªåŸªç°åç §ãçºçããå Žå、ç¡éã«ãŒãã«é¥ãå¯èœæ§ããããŸã。
ãããé²ãããã®ã«ãŒã«(äŸ: 埪ç°ãæ€åºããããšã©ãŒã«ãã、ç¹å®ã®æ·±ããŸã§ãããã¹ããèš±å¯ããªããªã©)ãå®çŸ©ã、å
šãã©ãŠã¶ã§äžè²«ããŠå®è£
ããå¿
èŠããããŸã。éå»ã®ãã¬ãŒã ã»ãã(frameset)ã§ã¯、å
ç¥ã®URLãå床èªã¿èŸŒãããšãããã¬ãŒã ã¯ç©ºã«ãªã、ãšããã«ãŒã«ããããŸããã、ããè€éãªã±ãŒã¹ãèããããŸã。
A.html -> include B.html B.html -> include A.html ð± Infinite Loop!
ãã¹ãã£ã³ã°åŽã®åçº? ðž
ãã€ãã£ããªHTMLã€ã³ã¯ã«ãŒããæ®åãããš、1ã€ã®ããŒãžã衚瀺ããããã«è€æ°ã®HTTPãªã¯ãšã¹ããçºçããå¯èœæ§ããããŸã。ããã¯ãµãŒããŒããããã¯ãŒã¯ãžã®è² è·ãå¢å ãããå¯èœæ§ããã、ç¹ã«ç¡æãŸãã¯å®äŸ¡ãªãã¹ãã£ã³ã°ãµãŒãã¹ã«ãšã£ãŠã¯æžå¿µææãšãªããããããŸãã。(ãã ã、HTTP/2ãHTTP/3ã®å€éåã«ãã、ãã®åœ±é¿ã¯ä»¥åã»ã©å€§ãããªããšããèŠæ¹ããããŸã)
ã»ãã¥ãªãã£ãšå¶çŽ (CORSãªã©) ð
ããç°ãªããã¡ã€ã³ããHTMLãã€ã³ã¯ã«ãŒãã§ããããã«ããå Žå、ã»ãã¥ãªãã£äžã®å€§ããªæžå¿µãçããŸã。æªæã®ããHTMLãã¹ã¯ãªãããæ¿å ¥ããããªã¹ã¯ã§ã。ãããé²ãããã«ã¯、CORS (Cross-Origin Resource Sharing) ã CSP (Content Security Policy) ã®ãããªæ¢åã®ã»ãã¥ãªãã£ã¡ã«ããºã ãæ¡åŒµ・é©çšããå¿ èŠããããŸãã、ãã®ä»æ§çå®ã¯è€éã§ã。
çŸç¶、ç»åãCSS、JSã¯æ¯èŒçèªç±ã«ã¯ãã¹ãã¡ã€ã³ã§èªã¿èŸŒããŸãã、HTMLã®ã€ã³ã¯ã«ãŒãã«å¯ŸããŠã¯、ããå³ããå¶çŽã課ãããå¯èœæ§ãé«ãã§ããã。ãããæ©èœã®æçšæ§ãå¶éããŠããŸããããããŸãã。
æŽå²ççµç·¯ãš「Living Standard」ð°️
HTMLã®åæã«ã¯、SGML (Standard Generalized Markup Language) ã®æ©èœã®äžéšãšããŠãšã³ãã£ãã£åç
§ã䜿ã£ãã€ã³ã¯ã«ãŒãã®ãããªæŠå¿µããããŸãã ( ... &header;)。ããã、HTMLãXMLããŒã¹ããç¬èªã®é²å(Living Standard)ãéããäžã§、ãã®ãããªæ©èœã¯äž»æµã«ãªããŸããã§ãã。
ãŸã、HTML5以é、WHATWGã«ãã「Living Standard(çããæšæº)」ã¢ãããŒããæ¡çšãã、ã¡ãžã£ãŒããŒãžã§ã³ã¢ããã§ã¯ãªãç¶ç¶çãªæ¹åãè¡ãããŠããŸã。ããã、äžéšã®æèŠ(å èšäºã³ã¡ã³ãã®pdæ°ãªã©)ã§ã¯、ãã®ã¢ãããŒãã«ãªã£ãŠããæ°ããHTMLã¿ã°ã®è¿œå ã¯ãããåæ»ããŠãã、倧ããªæ©èœè¿œå ãé£ãããªã£ãã®ã§ã¯ãªãããšææãããŠããŸã。「HTMLã¯èŽåœçãªæ°Žæºã«ãªã£ã」ãšããå³ãã衚çŸãèŠãããŸã。
çã®éèŠãšåªå 床ã®åé¡? ð€
「æ¬åœã«å€ãã®äººããã®æ©èœãå¿ èŠãšããŠããã®ã?」ãšããçåãååšããŸã。æ¢åã®è§£æ±ºç(ç¹ã«SSGããã¬ãŒã ã¯ãŒã¯)ãåºãæ®åã、å€ãã®éçºè ããããã«æ £ã芪ããã§ãããã、「ãã€ãã£ãHTMLã€ã³ã¯ã«ãŒã」ã®åªå 床ã¯çžå¯Ÿçã«äœããšèŠãªãããŠããå¯èœæ§ããããŸã。
Webæšæºãçå®ãã人ã (ãã©ãŠã¶ãã³ããŒãWHATWG/W3Cã®é¢ä¿è )ã¯、éããããªãœãŒã¹ã®äžã§、ãã圱é¿ã®å€§ããåé¡ã、æ¢åã®ããŒã«ã§ã¯è§£æ±ºãé£ããåé¡ã«æ³šåããåŸåããããŸã。é·å¹Žè°è«ãããŠããŠã、å ·äœçãªä»æ§ææ¡ãå®è£ ãžã®åŒ·ãæšé²åããªããã°、ãªããªãå®çŸã«ã¯è³ããŸãã。äžéšã®ã³ã¡ã³ãã§ã¯、「ãã®æ©èœãæãå¿ èŠãšããŠããã§ãããå°èŠæš¡éçºè ãã€ã³ãã£ãŒWebã®äººã ã®å£°ã、æšæºåããã»ã¹ã«å±ãã«ããã®ã§ã¯ãªãã」ãšããææããããŸã (Ernestæ°)。
éå»ã®è©Šã¿「HTML Imports」ã®å€±æ ð«
ãã€ãŠ、Web Componentsã®äžéšãšããŠHTML Importsãšãã仿§ãææ¡ãã、Chrome(Blinkãšã³ãžã³)ã«ã¯å®è£
ãããŸãã。ããã¯ã®ãããªåœ¢åŒã§HTMLãã¡ã€ã«ãã€ã³ããŒããããã®ã§ããã、ããã€ãã®çç±ã§ä»ã®ãã©ãŠã¶ãã³ããŒ(Mozilla Firefox, Apple Safari)ã®åæãåŸããã、æçµçã«å»æ¢ãããŸãã。
HTML Importsã倱æããçç±ãšããŠã¯、以äžã®ãããªç¹ãæããããŸã。
- ES6ã¢ãžã¥ãŒã«ãšã®æ©èœçãªéè€
- å®è£ ã®è€éããšããã©ãŒãã³ã¹ãžã®æžå¿µ
- ã»ãã¥ãªãã£ãžã®åœ±é¿
- ãŠãŒã¹ã±ãŒã¹ãäž»ã«Web Componentsã®ããŒãã«éå®ãã、å èšäºã§æ±ããããŠãããããªåçŽãª「HTMLãã©ã°ã¡ã³ãã®æ¿å ¥」ãšã¯å°ãç®çãç°ãªã£ãŠãã(JSã«ããã€ã³ã¹ã¿ã³ã¹åãå¿ èŠã ã£ã)
ãã®å€±æçµéšã、æ°ããªHTMLã€ã³ã¯ã«ãŒãæ©èœã®ææ¡ã«å¯Ÿããæ éãªå§¿å¢ã«ã€ãªãã£ãŠããå¯èœæ§ãèããããŸã。
ð€ ã³ã©ã :Webæšæºã®é·ãéã®ã
æ°ããWebæè¡ãæšæºã«ãªããŸã§ã«ã¯、ãã®ãããŒãé·ãæéãšè°è«ãå¿ èŠã§ã。ã¢ã€ãã¢ãåºãŠ、ææ¡ãããŠ、æ§ã ãªãã©ãŠã¶ãã³ããŒãéçºè ãè°è«ã、仿§ãç·Žãäžã、å®è£ ãã、ãã¹ããã…æã«ã¯æ¿æ²»çãªé§ãåŒãããã£ãããªãã£ãã?ð HTMLã€ã³ã¯ã«ãŒãã®ãããª「ãã£ãã䟿å©ãã」ãªæ©èœã§ã、ããã ãã®æžå¿µäºé ããã、åæåœ¢æãé£ããã®ã§ãã。æ®æ®µäœæ°ãªã䜿ã£ãŠããWebæè¡ã®è£åŽã«ã¯、ããããã®äººã ã®åªåãšè€éãªããã»ã¹ãé ãããŠããã®ã§ã。ãŸãã«、dopingconsomme.blogspot.com ã®ãããªæè¡ããã°ã§ãã®çé±ã远ãã®ãé¢çœããããããŸãã。(宣äŒä¹!w)
/l、
(ïŸ、 。 ïŒ < æšæºå、倧å€ã㣅
l、 ~ãœ
ããf_, )ã
ãã®èšäºã®ãã®ä»ã®åœã«ããã圱é¿、åã³æèš
HTMLã€ã³ã¯ã«ãŒãã®åé¡ã¯、èšèªãåœå¢ãè¶ããŠ、äžçäžã®Webéçºè ãå ±æããæ®éçãªèª²é¡ã§ã。
- ã°ããŒãã«ãªéçºã³ãã¥ããã£ã§ã®è°è«: Hacker NewsãRedditã®r/webdev、Stack Overflowãªã©、åœéçãªéçºè ã³ãã¥ããã£ã§ã¯、宿çã«「ãªãHTMLã«ã¯ã€ã³ã¯ã«ãŒãããªãã®ã?」ãšããè°è«ãåçããŸã。ããã¯、解決çã倿°ååšããã«ãé¢ããã、æ ¹æºçãªã·ã³ãã«ããžã®æžæãããããšã瀺ããŠããŸã。
- 倿§ãªæè¡ã¹ã¿ãã¯: äžççã«èŠããš、Webéçºã®æè¡ã¹ã¿ãã¯ã¯éåžžã«å€æ§ã§ã。PHPãäŸç¶ãšããŠåŒ·åãªåœãããã°、Node.jsãPython (Django/Flask) ãäž»æµã®å°å、ãããã¯.NETã匷ãäŒæ¥ããããŸã。éçãµã€ããžã§ãã¬ãŒã¿ãŒãåçš®ããã³ããšã³ããã¬ãŒã ã¯ãŒã¯ã®æ®åçãæ§ã ã§ã。ãã®å€æ§æ§ã、ç¹å®ã®ããŒã«ã«äŸåããªã「æšæºçãª」HTMLã€ã³ã¯ã«ãŒããžã®æœåšçãªéèŠãçãã§ããåŽé¢ããããŸã。
- æè²ãžã®åœ±é¿: Webéçºã®ååŠè ã«ãšã£ãŠ、HTMLã ãã§åºæ¬çãªãµã€ãæ§æ(ããããŒ/ããã¿ãŒåé¢ãªã©)ãå®çŸã§ããªãããšã¯、åŠç¿åæã®ããŒãã«ãšãªãåŸãŸã。å€ãã®åœã§、Webéçºæè²ã®ã«ãªãã¥ã©ã ã¯、æ©ã段éã§JavaScriptããµãŒããŒãµã€ãèšèª、ãããã¯ãã¬ãŒã ã¯ãŒã¯ã®å°å ¥ãäœåãªããããŠããŸã。ãã€ãã£ãã€ã³ã¯ã«ãŒããããã°、ããæ®µéçãªåŠç¿ãå¯èœã«ãªããããããŸãã。
- Webæšæºãžã®é¢å¿: ãã®åé¡ã¯、Webæšæºãã©ã®ããã«äœãã、ãªãç¹å®ã®æ©èœãæ¡çšãããããããªãã£ããããã®ã、ãšããããã»ã¹èªäœãžã®é¢å¿ãåèµ·ããŸã。WHATWGãW3Cã®æŽ»åã¯è±èªåäžå¿ã«ãªããã¡ã§ãã、ãã®çš®ã®æ®éçãªèª²é¡ã¯、éè±èªåã®éçºè ãæšæºåããã»ã¹ã«é¢äžãããã£ããã«ããªãåŸãŸã。
æèš: Webéçºã«ããã「ã·ã³ãã«ã」ã®è¿œæ±ã¯、äžçå ±éã®ããŒãã§ã。æ¢åã®é«åºŠãªããŒã«ããã¬ãŒã ã¯ãŒã¯ãåé¡ã解決ããŠããããã«èŠããŠã、åºæ¬çãªæ§æèŠçŽ ã¬ãã«ã§ã®æ¹åèŠæ±ã¯æ ¹åŒ·ãååšããŸã。ãŸã、Webæšæºã®é²åã¯、æè¡çãªåçæ§ã ãã§ãªã、ã³ãã¥ããã£ã®éèŠ、ãã©ãŠã¶ãã³ããŒéã®ååŠ、æŽå²ççµç·¯ãªã©、æ§ã ãªèŠå ã«ãã£ãŠå·Šå³ãããè€éãªããã»ã¹ã§ããããšã瀺åããŠããŸã。ð
ãã®èšäºã®æ¥æ¬ã«ããã圱é¿、åã³æèš
æ¥æ¬åœå ã®Webéçºã·ãŒã³ã«ãããŠã、HTMLã€ã³ã¯ã«ãŒãåé¡ã¯ä»äººäºã§ã¯ãããŸãã。
- ã¬ã©ããŽã¹åãšæšæºæè¡: ãã€ãŠæ¥æ¬ã®Webéçº、ç¹ã«æºåž¯é»è©±åããµã€ããªã©ã§ã¯ç¬èªã®æè¡é²åãèŠãããŸããã、çŸåšã§ã¯ã°ããŒãã«ãªæšæºæè¡ãžã®è¿œåŸãäžè¬çã§ã。ããã、äŸç¶ãšããŠç¹å®ã®ãã³ããŒãæè¡(äŸãã°、ç¹å®ã®CMSãåœå ç¬èªã®ãã¬ãŒã ã¯ãŒã¯)ãžã®äŸåãèŠãããã±ãŒã¹ããããŸã。HTMLãã€ãã£ããªã€ã³ã¯ã«ãŒãæ©èœãããã°、ãã®ãããªç¹å®ã®æè¡ãžã®ããã¯ã€ã³ãé¿ã、ããããŒã¿ãã«ãªéçºã¹ã¿ã€ã«ãä¿é²ããå¯èœæ§ããããŸã。ð¯ðµ
- éçãµã€ããžã®ååž°ãšã¢ãã³æè¡: æ¥æ¬ã§ã、äŒæ¥ã®ã³ãŒãã¬ãŒããµã€ããå°èŠæš¡ãªã¡ãã£ã¢ãµã€ããªã©ã§、éçšã³ã¹ããã»ãã¥ãªãã£ã®èгç¹ããéì ãµã€ãã®å©ç¹ãèŠçŽãããŠããŸã。AstroãNext.js (SSG)ã®ãããªã¢ãã³ãªSSGãæ³šç®ãéããŠããŸãã、äžæ¹ã§、ããã·ã³ãã«ãªæ§æã奜ãå±€ãååšããŸã。ãã€ãã£ãHTMLã€ã³ã¯ã«ãŒãã¯、ãã®ãããªã·ã³ãã«ãªéçãµã€ãæ§ç¯ã®ããŒãºã«å¿ãããããããŸãã。
- Webå¶äœã®åæ¥äœå¶: æ¥æ¬ã®Webå¶äœçŸå Žã§ã¯、ãã¶ã€ããŒãšã³ãŒããŒ(ããŒã¯ã¢ãããšã³ãžãã¢)、ããã³ããšã³ããšã³ãžãã¢、ããã¯ãšã³ããšã³ãžãã¢ãšãã£ã忥äœå¶ãæ¯èŒçã¯ã£ããããŠããå ŽåããããŸã。HTMLã³ãŒããŒã、è€éãªãã«ãããŒã«ãJSãã¬ãŒã ã¯ãŒã¯ã®ç¥èãªãã«、ãã¶ã€ããŒããæž¡ãããããŒããçµã¿åãããŠå¹ççã«ããŒãžãäœæããäžã§、ã·ã³ãã«ãªã€ã³ã¯ã«ãŒãæ©èœã¯åœ¹ç«ã€å¯èœæ§ããããŸã。ð§ð»ð©ð»
- æ å ±çºä¿¡ãšã³ãã¥ããã£: QiitaãZenn、åäººã®æè¡ããã°ãªã©、æ¥æ¬åœå ã®éçºè ã³ãã¥ããã£ã§ã、HTMLã€ã³ã¯ã«ãŒãã«é¢ãã話é¡ã代æ¿çã®ç޹ä»ã¯é »ç¹ã«èŠãããŸã。ç¹ã«HTMXã®ãããª、HTMLãæ¡åŒµããŠåçãªæ©èœãå®çŸããããšããã©ã€ãã©ãªãžã®é¢å¿ãé«ãŸã£ãŠãã、HTMLèªäœãžã®æ©èœè¿œå ã«å¯ŸããæœåšçãªæåŸ æããããããŸã。
æèš: æ¥æ¬ã®Webéçºã«ãããŠã、å¹çåãšã·ã³ãã«ããžã®èŠæ±ã¯åžžã«ååšããŸã。ã°ããŒãã«ãªæè¡ãã¬ã³ãã远ããããäžæ¹ã§、çŸå Žã¬ãã«ã§ã®å ·äœçãªèª²é¡(åŠç¿ã³ã¹ã、忥、ããŒã«äŸåãªã©)ã«å¯Ÿå¿ã§ãã、ããåºç€çãªè§£æ±ºçãžã®ããŒãºãç¡èŠã§ããŸãã。Webæšæºã®ååãæ³šèŠãã€ã€、åœå ã®ç¶æ³ã«åãããæé©ãªæè¡éžæãæ±ããããŸã。ðž
ãã®èšäºã«å¯ŸããŠçåç¹ã¯ãªãã?å€è§çèŠç¹ã¯ãªãã?
ãããŸã§HTMLãã€ãã£ãã€ã³ã¯ã«ãŒãã®äžåšçç±ãæ¢ã£ãŠããŸããã、åžžã«å€è§çãªèŠç¹ãæã€ããšãéèŠã§ã。ãã®èšäºã§æç€ºãããè°è«ã«å¯ŸããŠã、ããã€ãã®çåç¹ãç°ãªãèŠæ¹ãèããããŸã。
- æ¬åœã«「å¿ èŠäžå¯æ¬ 」ã?: å€ãã®ä»£æ¿çãååšã、ããããé«åºŠã«é²åããŠããçŸåš、ãã€ãã£ãHTMLã€ã³ã¯ã«ãŒãã¯æ¬åœã«「å¿ èŠ」ãªã®ã§ãããã? ãããããã、ããã¯äžéšã®éçºè ã®ãã¹ã¿ã«ãžãŒãçæ³è«ã«éãã、çŸä»£ã®Webéçºã®è€éãªèŠæ±ã«ã¯çµå±å¿ããããªã「ããã°è¯ããª」çšåºŠã®æ©èœãããããŸãã。ð€
- 「ã·ã³ãã«ã」ã®å¹»æ³: ãã€ãã£ãã€ã³ã¯ã«ãŒããå®çŸãããšããŠã、æ¬åœã«ã·ã³ãã«ã«ãªãã®ã§ãããã? ããã©ãŒãã³ã¹、ã»ãã¥ãªãã£、ãã£ãã·ã¥å¶åŸ¡、ãšã©ãŒãã³ããªã³ã°ãªã©ãèæ ®ãããš、çµå±ã¯äœããã®èšå®ã屿§、ãããã¯JavaScriptã«ããè£å©ãå¿ èŠã«ãªã、åœåæåŸ ãããã»ã©ã®「ã·ã³ãã«ã」ã¯åŸãããªãå¯èœæ§ããããŸã。è€éãã¯é¿ããããªãã®ãããããŸãã。ð
- Web Componentsãšã®é¢ä¿æ§: Web Componentsã¯、ãŸãã«åå©çšå¯èœãªUIéšåãäœãããã®æšæºæè¡ã§ã。HTMLã€ã³ã¯ã«ãŒãã®èŠæ±ã¯、Web Componentsã®æ®åãçè§£ãé²ãã°、èªç¶ãšè§£æ¶ãããŠããåé¡ã§ã¯ãªãã§ãããã? ãããã¯、Web Componentsã®ä»æ§èªäœã、ããåçŽãªHTMLãã©ã°ã¡ã³ãã®ã€ã³ã¯ã«ãŒãçšéã«ã䜿ããããæ¡åŒµããæ¹åæ§ã®æ¹ãçŸå®çãããããŸãã。ð§©
- ãã©ãŠã¶ãã³ããŒã®åæ©: ãã©ãŠã¶ãã³ããŒ(Google, Mozilla, Apple, Microsoft)ã¯、ããããç¬èªã®æŠç¥ãåªå é äœãæã£ãŠããŸã。圌ããHTMLã€ã³ã¯ã«ãŒãæ©èœã®å®è£ ã«ç©æ¥µçã§ãªãã®ã¯、åã«æè¡çãªå°é£ãã ãã§ãªã、èªç€Ÿã®ä»ã®è£œåããµãŒãã¹(ã¯ã©ãŠããã©ãããã©ãŒã 、éçºããŒã«、ãã¬ãŒã ã¯ãŒã¯ãªã©)ãšã®å Œãåãã、Webãã©ãããã©ãŒã å šäœã®é²åã®æ¹åæ§ã«é¢ããæŠç¥çãªå€æãããã®ãããããŸãã。ð¢
- 「èè£ ãããçé」ã®ååã¯çµ¶å¯Ÿã?: Webæšæºã¯ãã°ãã°「éçºè ãæ¢ã«è¡ã£ãŠããããš(cowpaths)ãèè£ ãã」ãšèšãããŸã。HTMLã€ã³ã¯ã«ãŒãã¯ãŸãã«å€ãã®éçºè ãæ§ã ãªæ¹æ³ã§å®çŸããŠãã「çé」ã§ãã、ãããå¿ ãããèè£ ãããã¹ããšã¯éããŸãã。èè£ ããããšã§äºæãã¬åé¡(ããã©ãŒãã³ã¹äœäž、ã»ãã¥ãªãã£ãªã¹ã¯å¢å€§ãªã©)ãçºçãããªã、ãããŠèè£ ããªã、ãšãã倿ãæãåŸãã§ããã。ðð£️
- ãã®èšäºã®ãã€ã¢ã¹: çè èªèº«ã「ãã€ãã£ãHTMLã€ã³ã¯ã«ãŒãããã£ããè¯ãã®ã«」ãšãã顿ãæã£ãŠãããã、ãã®äžåšã«å¯Ÿããçç±ä»ãã«åããçããŠããå¯èœæ§ã¯ãªãã§ãããã? å察æèŠã代æ¿çã®ã¡ãªããããã£ãšåŒ·èª¿ãã¹ããããããŸãã。ð€·♂️
ãããã®çåç¹ãèæ ®ããããšã§、HTMLã€ã³ã¯ã«ãŒãåé¡ã«å¯Ÿããããæ·±ã、ãã©ã³ã¹ã®åããçè§£ã«è³ãããšãã§ããã§ããã。絶察çãªæ£è§£ã¯ãªã、æ§ã ãªãã¬ãŒããªãã®äžã§çŸåšã®Webæè¡ãååšããŠããããšãèªèããããšãéèŠã§ã。
äºæž¬ããããããåå¿ (Reddit/HackerNews颚) ãšåè«
ãããã®èšäºãRedditã®r/webdevãHacker Newsã«æçš¿ãããã、ã©ã®ãããªã³ã¡ã³ããã€ãã§ãããã? ããã€ãäºæ³ã、ããã«å¯Ÿããåè«ãèããŠã¿ãŸã。ð¬
- ã³ã¡ã³ã1 (ããã©ãŒãã³ã¹æžå¿µæŽŸ):
-
"Client-side HTML includes sound like a performance nightmare. Imagine the cascading network requests and layout shifts. Preload scanner would be wrecked. Just use a SSG or server-side rendering like a grown-up."
(ã¯ã©ã€ã¢ã³ããµã€ãHTMLã€ã³ã¯ã«ãŒããªããŠããã©ãŒãã³ã¹ã®æªå€¢ã ã。é£éãããããã¯ãŒã¯ãªã¯ãšã¹ããšã¬ã€ã¢ãŠãã·ãããæ³åããŠã¿ã。ããªããŒãã¹ãã£ãã¯ç Žå£ããã。倧人ããSSGãSSRã䜿ãã。) - åè«:
-
ããã©ãŒãã³ã¹æžå¿µã¯æ£åœã§ãã、å¿
ããã解決äžå¯èœã§ã¯ãããŸãã。HTTP/2, HTTP/3ã®å€éå、
Early Hints(HTTP 103) ã®æŽ»çš、ã€ã³ã¯ã«ãŒããããèŠçŽ ã®ãµã€ãºæå®(äŸ: CSS `contain`ããããã£ãwidth/height屿§)、è³¢ããã£ãã·ã¥æŠç¥ãªã©、ãã©ãŠã¶ã¬ãã«ã§ã®æé©åã®äœå°ã¯ãããŸã。ãŸã、「ã·ã³ãã«ã」ãæ±ãããŠãŒã¹ã±ãŒã¹ã§ã¯、å¿ ãããæé«ã®ããã©ãŒãã³ã¹ãæåªå äºé ãšã¯éããŸãã。SSG/SSRãåžžã«æé©è§£ãšã¯éãã、ããŒã«ã䜿ããªãéžæè¢ãå°éãããã¹ãã§ã。✨ - ã³ã¡ã³ã2 (æ¢åæè¡ååæŽŸ):
-
"This problem has been solved a million times. We have JS frameworks, Web Components, SSGs, server-side languages, even good ol' SSI. Why reinvent the wheel with a native HTML tag that will inevitably be too limited or too complex?"
(ãã®åé¡ã¯çŸäžå解決ãããŠã。JSãã¬ãŒã ã¯ãŒã¯、Web Components、SSG、ãµãŒããŒãµã€ãèšèª、å€ãè¯ãSSIããã。å¿ ç¶çã«æ©èœãéå®çããããè€éãããããããã€ãã£ãHTMLã¿ã°ã§、ããããè»èŒªã®åçºæãããå¿ èŠãã?) - åè«:
-
æ¢åã®è§£æ±ºçã¯「åé¡ãåé¿」ããŠããã ãã§、「HTMLã ãã§ã·ã³ãã«ã«è§£æ±º」ã¯ããŠããŸãã。ããããã®è§£æ±ºçã«ã¯åŠç¿ã³ã¹ã、ããŒã«äŸå、ãã«ãããã»ã¹、å®è¡æãªãŒããŒããããªã©ã®ãã¬ãŒããªãããããŸã。æšæºåãããã·ã³ãã«ãªæ¹æ³ãããã°、ããŒã«ã®ä¹±ç«ãæã、éçºã®åææ®µéãæè²、å°èŠæš¡ãããžã§ã¯ãã«ãããåå
¥éå£ãäžããããšãã§ããŸã。éå®çã§ãã£ãŠã、åºæ¬çãªãŠãŒã¹ã±ãŒã¹ãæºããæšæºæ©èœã«ã¯äŸ¡å€ããããŸã。
ã¿ã°ã ã£ãŠæåã¯éå®çã§ãã。ð ️➡️ simplicitas!
- ã³ã¡ã³ã3 (Web Componentsæšé²æŽŸ):
-
"Isn't this what Web Components are for? Custom Elements + Shadow DOM + Templates give you reusable, encapsulated components. HTML Imports failed for a reason. Let's focus on improving and simplifying Web Components instead."
(ããã£ãŠWeb Componentsã®åœ¹å²ãããªãã®? Custom Elements + Shadow DOM + Templatesã§åå©çšå¯èœã§ã«ãã»ã«åãããã³ã³ããŒãã³ããäœãã。HTML Importsã¯çç±ããã£ãŠå€±æãããã 。代ããã«Web Componentsã®æ¹åãšåçŽåã«æ³šåãããã。) - åè«:
- Web Componentsã¯åŒ·åã§ãã、「å€éšã®HTMLãã¡ã€ã«ãç¹å®ã®å Žæã«æ¿å ¥ãã」ãšããåçŽãªèŠæ±ã«å¯ŸããŠã¯、çŸç¶ãã倧ããã§è€éã§ã(ç¹ã«Shadow DOMã䜿ããªãå Žåã§ãJSã§ã®å®çŸ©ãå¿ èŠ)。åŠç¿ã³ã¹ããæ¯èŒçé«ãã§ã。Web Componentsãš、ããåçŽãªHTMLãã©ã°ã¡ã³ãã€ã³ã¯ã«ãŒãã¯、ç®çãå°ãç°ãªããŸã。äž¡è ã¯å ±åã§ããå¯èœæ§ããã、åŸè ã®ãããª、ããäœã¬ãã«ã§ã·ã³ãã«ãªæ©èœãžã®éèŠãäŸç¶ãšããŠååšããŸã。å¿ ããã「ã©ã¡ããäžæ¹」ã§ããå¿ èŠã¯ãããŸãã。ð§© + α = ✨
- ã³ã¡ã³ã4 (HTMX/Hypermedia掟):
-
"Just use HTMX. It achieves this kind of declarative HTML inclusion (and much more) with a small JS library. It embraces the original hypermedia principles of the web."
(HTMXã䜿ãã°ããããã。å°ããªJSã©ã€ãã©ãªã§、ãããã宣èšçãªHTMLã€ã³ã¯ã«ãŒã(ãšããã£ãšè²ã )ãå®çŸã§ãã。Webæ¬æ¥ã®ãã€ããŒã¡ãã£ã¢ã®ååãåãå ¥ããŠãã。) - åè«:
- HTMXã¯çŽ æŽãããã©ã€ãã©ãªã§ãã、HTMLäžå¿ã®ã¢ãããŒãã§å€ãã®åé¡ã解決ããŸãã、çµå±ã¯JavaScriptã©ã€ãã©ãªã«äŸåããŠããŸã。ãã®èšäºã®æ žå¿çãªåãã¯「ãªã*HTMLã ã*ã§ã§ããªãã®ã?」ã§ãã、æšæºåããããã€ãã£ãæ©èœã®äžåšçç±ãæ¢ããã®ã§ã。HTMXã®ãããªã©ã€ãã©ãªã®ååšã¯、ããããã€ãã£ãæ©èœãžã®éèŠãããããšã®èšŒå·ŠãšãèšããŸã。ãããã€ãã£ãæ©èœãããã°、HTMXã¯ããã«ãã®äžã§é«åºŠãªæ©èœãæäŸããããšã«æ³šåã§ãããããããŸãã。ð
- ã³ã¡ã³ã5 (ã»ãã¥ãªãã£æžå¿µæŽŸ):
-
"Cross-domain HTML includes? Sounds like a massive security hole waiting to happen. Think of XSS and data exfiltration. CORS/CSP for HTML fragments would be a nightmare to spec and implement correctly."
(ã¯ãã¹ãã¡ã€ã³HTMLã€ã³ã¯ã«ãŒã? å€§èŠæš¡ãªã»ãã¥ãªãã£ããŒã«ã«ãªãããã ãª。XSSãããŒã¿æŒæŽ©ãèããã。HTMLãã©ã°ã¡ã³ãçšã®CORS/CSPãªããŠ、仿§çå®ãæ£ããå®è£ ãæªå€¢ã ã。) - åè«:
- ã»ãã¥ãªãã£æžå¿µã¯éåžžã«éèŠã§ãã、ã¯ãã¹ãã¡ã€ã³ã€ã³ã¯ã«ãŒããèš±å¯ããå Žåã¯å³æ Œãªå¶åŸ¡(ããã©ã«ãã§æåŠã、ãªããã€ã³ã§èš±å¯ãããªã©)ãå¿ èŠã§ã。ããã、å€ãã®ãŠãŒã¹ã±ãŒã¹ã¯åäžãã¡ã€ã³å (äŸ: ããããŒ/ããã¿ãŒã®å ±éå)ã§ãã、ãŸãã¯åäžãã¡ã€ã³ã«éå®ãã仿§ããå§ããããšãèããããŸã。æè¡çãªèª²é¡ã¯ãããŸãã、ç»åãã¹ã¯ãªããã§æ¢ã«å®çŸã§ããŠããã¯ãã¹ãã¡ã€ã³å¶åŸ¡ã®ç¥èŠãå¿çšã§ããªãããã§ã¯ãããŸãã。段éçã«é²ããã°、å®å šãªå®è£ ã¯äžå¯èœã§ã¯ãªãã¯ãã§ã。ð¡️
ãããã®åå¿ã¯、HTMLã€ã³ã¯ã«ãŒãåé¡ãããã«å€é¢çã§、ç°¡åãªçãããªããã瀺ããŠããŸã。æè¡çãªå®çŸå¯èœæ§、ããã©ãŒãã³ã¹、ã»ãã¥ãªãã£、æ¢åãšã³ã·ã¹ãã ãšã®é¢ä¿、ãããŠWebã®å²åŠãŸã§、æ§ã ãªåŽé¢ããã®æ€èšãå¿ èŠã§ã。
çµè«:「ã€ã³ã¯ã«ãŒã」ã¯HTMLå²åŠã®æ ¹å¹¹ãæºããã?æªæ¥ãžã®å±æ
çµå±ã®ãšãã、「ãªãHTMLã ãã§ã€ã³ã¯ã«ãŒãã§ããªãã®ã?」ãšããåãã«å¯Ÿããæç¢ºãªåäžã®çãã¯ãããŸãã。ããã©ãŒãã³ã¹、ã»ãã¥ãªãã£、è€éæ§、æŽå²ççµç·¯、ä»£æ¿ææ®µã®ååš、ãããŠæšæºåããã»ã¹ã®çŸå®ãªã©、æ§ã ãªèŠå ã絡ã¿åã£ãŠããŸã。
ããã、ãã£ã𿷱局ã«ããã®ã¯、HTMLãšããèšèªã®「å²åŠ」ã«é¢ããåé¡ãªã®ãããããŸãã。HTMLã¯å
æ¥、ææžã®æ§é ãšæå³(ã»ãã³ãã£ã¯ã¹)ãèšè¿°ããããã®èšèªã§ãã。ä»ã®ææžãžã®åç
§ã¯ãã€ããŒãªã³ã¯(<a>)ã«ãã£ãŠè¡ãã、ææžèªäœã¯èªå·±å®çµçã§ããããšãåºæ¬ã§ãã。ç»åãã¹ã¿ã€ã«ã·ãŒã、ã¹ã¯ãªããã®åã蟌ã¿ã¯åŸãã远å ãããæ¡åŒµã§ãã、「ææžã®äžéšãšããŠä»ã®HTMLãã©ã°ã¡ã³ããåã蟌ã」ãšããè¡çºã¯、ãã®åœåã®å²åŠããã¯å°ãéžè±ãããã®ãšæããããŠããã®ãããããŸãã。ããã¯、ææžã「çµã¿ç«ãŠã」ãšãã、ããããã°ã©ã çãªè¡çºã«è¿ã¥ãããã§ã。ããã³ã¡ã³ã(TZubiriæ°)ã§ã¯「HTMLã¯åç
§æž¡ã(pass by reference)ã§ãã、ã³ããŒæž¡ã(pass by copy)ã§ã¯ãªã」ãšè¡šçŸãããŠããŸã。
æŽå²çã«èŠãã°、SGMLæä»£ã®ãšã³ãã£ãã£åç §、ãã¬ãŒã ã»ãã、ãµãŒããŒãµã€ãã€ã³ã¯ã«ãŒã、ãããŠå€±æããHTML Imports、çŸä»£ã®Web ComponentsãHTMXã«è³ããŸã§、éçºè ã¯åžžã«「HTMLã®éšååãšåå©çš」ãšãã課é¡ã«åãçµãã§ããŸãã。ããã¯、WebãåçŽãªææžå ¬éã®å Žãã、è€éãªã¢ããªã±ãŒã·ã§ã³ãã©ãããã©ãŒã ãžãšé²åããŠããå¿ ç¶çãªæµããšãèšããŸã。ãã®æèã«ãããŠ、ãã€ãã£ãHTMLã€ã³ã¯ã«ãŒãæ©èœã®äžåšã¯、Webã®é²åã«ãããéæž¡çãª「ããã·ã³ã°ãªã³ã¯」ãªã®ãããããŸãã。
ä»åŸ、ã©ã®ãããªç ç©¶ãæšæºåãæãŸããã§ãããã?
- ããã·ã³ãã«ãªWeb Componentsã®ææ¡: çŸåšã®Web Components仿§ã、åçŽãªHTMLãã©ã°ã¡ã³ãã®ã€ã³ã¯ã«ãŒãçšéã«ãã£ãšäœ¿ãããã、軜éã«ããããã®æ¡åŒµãæ°ããAPIãææ¡ããããããããŸãã。äŸãã°、JavaScriptãå¿ é ãšããªã宣èšçãªæ¹æ³ãªã©ã§ã。
- ãã©ãŠã¶ãã€ãã£ãæé©åã®ç ç©¶: ããã©ãŒãã³ã¹ãã¬ã€ã¢ãŠãã·ããã®åé¡ãå æãããã、ãã©ãŠã¶å éšã§ã®HTMLã€ã³ã¯ã«ãŒãåŠçã®æé©å(è³¢ãããªããŒã、ã¬ã³ããªã³ã°æŠç¥ãªã©)ã«é¢ããç ç©¶ãé²ãå¯èœæ§ããããŸã。
- ã»ãã¥ãªãã£ã¢ãã«ã®é²å: ããå®å šã«HTMLãã©ã°ã¡ã³ãã(ç¹ã«ã¯ãã¹ãã¡ã€ã³ã§)ã€ã³ã¯ã«ãŒãããããã®æ°ããã»ãã¥ãªãã£ã¢ãã«ã、æ¢åã®CORS/CSPã®æ¡åŒµãæ€èšããããããããŸãã。
ãã、å®å šã§ããã©ãŒãã³ã¹ãé«ã、ã·ã³ãã«ãªãã€ãã£ãHTMLã€ã³ã¯ã«ãŒãæ©èœãå®çŸãããã°、Webéçºã®å ¥éã容æã«ãªã、å°èŠæš¡ãµã€ãã®æ§ç¯ãããæè»œã«ãªãã§ããã。ãŸã、ãã¬ãŒã ã¯ãŒã¯ããã«ãããŒã«ãžã®äŸå床ãäžã、ãã倿§ãªéçºã¹ã¿ã€ã«ãå¯èœã«ãããããããŸãã。ããã¯、Webã®「æ§æèŠçŽ 」ã¬ãã«ã§ã®å€§ããªé²åãšèšããã§ããã。
ãã®HTMLã€ã³ã¯ã«ãŒããå·¡ãé·å¹Žã®è°è«ã¯、Webãåžžã«ã·ã³ãã«ããšé«æ©èœæ§ã®éã§æºãåã、æšæºåãšç¬èªã®è§£æ±ºçããããåããªããé²åããŠããæŽå²ãã®ãã®ã象城ããŠããã®ãããããŸãã。
æ ããæž©ããŠæ°ãããç¥ã、以ãŠåž«ãšçºãå¯ã。
(å€ãæããç©äºãç ç©¶ã、ããããæ°ããç¥èãéçãçºèŠããããšãã§ããã°、人ãæå°ããåž«ãšãªãããšãã§ãã。)
HTMLã®æŽå²ãšçŸç¶ã®èª²é¡ãèŠã€ãçŽãããšã§、æªæ¥ã®Webã®ããæ¹ãèŠããŠããã®ãããããŸããã。✨
çæ:è© ãã§ã¿ãŸãã ð
HTML ãªãã«å«ã㬠ä»ã®æ ããããŒããã¿ãŒ DRYã«ããã
(ããã¡ãŠããŒãããã ãªãã«ãµãã㬠ã»ãã®ãµã¿ ãžã£ã ãŒãµã£ã㌠ã©ããã«ããã)
代æ¿ã¯ æ°å€ããã©ã ã²ãšæéã ãã€ãã£ããªãã°ãš 倢æ³ããæ¥ã
(ã ããã㯠ããŸãããã©ã ã²ãšãŠãŸã ãããŠãã¶ãªãã°ãš ãããããã²ã³)
åèæç®
- Coyier, Chris. "Seeking an Answer: Why can't HTML alone do includes?". Frontend Masters Blog. April 29, 2025. https://frontendmasters.com/blog/seeking-an-answer-why-cant-html-alone-do-includes/
- WHATWG. "HTML Living Standard". https://html.spec.whatwg.org/multipage/
- WHATWG/html GitHub Issue #2791. "Client-side includes for HTML". https://github.com/whatwg/html/issues/2791
- W3C. "HTML Imports (Obsolete)". https://www.w3.org/TR/html-imports/
- MDN Web Docs. "Web Components". https://developer.mozilla.org/ja/docs/Web/API/Web_components
- MDN Web Docs. "Server-sent events". (Note: This is related to server push, not directly includes, but relevant to real-time updates) https://developer.mozilla.org/ja/docs/Web/API/Server-sent_events/Using_server-sent_events
- MDN Web Docs. "<iframe>: ã€ã³ã©ã€ã³ãã¬ãŒã èŠçŽ ". https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe
- Wikipedia. "Server Side Includes". https://ja.wikipedia.org/wiki/Server_Side_Includes
- Wikipedia. "Transclusion". https://en.wikipedia.org/wiki/Transclusion
- HTMX. https://htmx.org/
- Doping Consomme Blog. (Various related articles) https://dopingconsomme.blogspot.com/
çšèªçŽ¢åŒ (ã¢ã«ãã¡ãããé )
- CORS (Cross-Origin Resource Sharing)
- ãªãªãžã³éãªãœãŒã¹å ±æ。Webãã©ãŠã¶ã、ãããªãªãžã³(ãã¡ã€ã³、ãããã³ã«、ããŒãã®çµã¿åãã)ã§åäœããŠããWebã¢ããªã±ãŒã·ã§ã³ã«、ç°ãªããªãªãžã³ã«ããéžæããããªãœãŒã¹ãžã®ã¢ã¯ã»ã¹æš©ãäžãããããµãŒããŒã«æç€ºããããã®ä»çµã¿。ã»ãã¥ãªãã£äžã®çç±ãã、éåžžãã©ãŠã¶ã¯ç°ãªããªãªãžã³ãžã®ãªã¯ãšã¹ããå¶éããŸãã、CORSã䜿ãããšã§å®å šã«å¶éãç·©åã§ããŸã。æ¬æã§ã®èšåç®æ
- CSP (Content Security Policy)
- ã³ã³ãã³ãã»ãã¥ãªãã£ããªã·ãŒ。ã¯ãã¹ãµã€ãã¹ã¯ãªããã£ã³ã°(XSS)ãããŒã¿ã€ã³ãžã§ã¯ã·ã§ã³æ»æãªã©、ç¹å®ã®çš®é¡ã®æ»æãæ€ç¥ã、圱é¿ã軜æžããããã®è¿œå ã®ã»ãã¥ãªãã£ã¬ã€ã€ãŒ。Webãµã€ã管çè ã、ãŠãŒã¶ãŒãšãŒãžã§ã³ã(ãã©ãŠã¶)ãç¹å®ã®ããŒãžã§èªã¿èŸŒã¿ãèš±å¯ãããŠãããªãœãŒã¹ãå¶åŸ¡ã§ããããã«ããŸã。æ¬æã§ã®èšåç®æ
- DOM (Document Object Model)
- ããã¥ã¡ã³ããªããžã§ã¯ãã¢ãã«。HTMLãXMLææžã®ããã®ããã°ã©ãã³ã°ã€ã³ã¿ãŒãã§ã€ã¹。ææžã®æ§é ãããªãŒç¶ã®ãªããžã§ã¯ã(ããŒã)ã®éåãšããŠè¡šçŸã、JavaScriptãªã©ã®ã¹ã¯ãªããèšèªãææžã®å 容、æ§é 、ã¹ã¿ã€ã«ãåçã«èªã¿åã£ãã倿Žãããã§ããããã«ããŸã。æ¬æã§ã®èšåç®æ
- DRY (Don't Repeat Yourself)
- 「åãããšãç¹°ãè¿ããª」。ãœãããŠã§ã¢éçºã«ãããååã®äžã€ã§、åãæ å ±ãããžãã¯ã®ç¹°ãè¿ããæžããããšãç®æããŸã。ããã«ãã、ã³ãŒãã®ä¿å®æ§、å¯èªæ§、ä¿¡é Œæ§ãåäžããŸã。æ¬æã§ã®èšåç®æ
- Frameset
- ãã¬ãŒã ã»ãã。å€ãHTMLã®æ©èœã§、ãã©ãŠã¶ãŠã£ã³ããŠãè€æ°ã®ãã¬ãŒã ã«åå²ã、ããããã«ç°ãªãHTMLææžã衚瀺ãããããã®ã¿ã°。ãã£ãŒããªã³ã¯ã®åé¡ããŠãŒã¶ããªãã£ã®åé¡ãã、çŸåšã§ã¯éæšå¥šãšãªã、HTML5ã§å»æ¢ãããŸãã。ãšã¯ç°ãªããŸã。æ¬æã§ã®èšåç®æ
- HTML Imports
- HTMLã€ã³ããŒã。Web Components仿§ã®äžéšãšããŠææ¡ããã、HTMLææžãä»ã®HTMLææžã«ã€ã³ããŒãããããã®ä»çµã¿(
)。äž»ã«ã«ã¹ã¿ã èŠçŽ ã®å®çŸ©ãªã©ãã«ãã»ã«åããããã«äœ¿ãããããšãæå³ããŠããŸããã、äž»èŠãªãã©ãŠã¶ãã³ããŒéã®åæãåŸããã廿¢ãããŸãã。æ¬æã§ã®èšåç®æ - HTMX
- HTMLã«å±æ§ã远å ããã ãã§、AJAX、CSSãã©ã³ãžã·ã§ã³、WebSocketãªã©ãçŽæ¥å©çšã§ããããã«ããJavaScriptã©ã€ãã©ãª。HTMLäžå¿ã§、JavaScriptãããŸãæžããã«åçãªWebã€ã³ã¿ãŒãã§ãŒã¹ãæ§ç¯ããããšãç®æããŠããŸã。æ¬æã§ã®èšåç®æ, æ¬æã§ã®èšåç®æ
- iframe (Inline Frame)
- ã€ã³ã©ã€ã³ãã¬ãŒã 。HTMLææžå ã«å¥ã®HTMLææžãåã蟌ãããã®èŠçŽ 。åã蟌ãŸããææžã¯ç¬ç«ããé²èЧã³ã³ããã¹ããæã¡ãŸã。åºå、å°å³、åç»ãªã©ã®å€éšã³ã³ãã³ãåã蟌ã¿ã«ãã䜿ãããŸãã、ããŒãžã®äž»èŠãªæ§é éšå(ããããŒ、ããã¿ãŒãªã©)ãšããŠã®å©çšã«ã¯å€ãã®åé¡ããããŸã。æ¬æã§ã®èšåç®æ
- Layout Shift
- ã¬ã€ã¢ãŠãã·ãã。WebããŒãžã®è¡šç€ºäžã«、èŠçŽ ã®äœçœ®ãäºæããç§»åããããš。éåæã§èªã¿èŸŒãŸããã³ã³ãã³ã(ç»å、åºå、ã€ã³ã¯ã«ãŒããããHTMLãªã©)ãåŸãã衚瀺ãã、æ¢åã®ã³ã³ãã³ããæŒãäžãã(ãŸãã¯æšªã«ããã)ããšã§çºçããŸã。ãŠãŒã¶ãŒäœéšãæãªããã、Core Web Vitalsã®CLS (Cumulative Layout Shift) ææšã§è©äŸ¡ãããŸã。æ¬æã§ã®èšåç®æ, æ¬æã§ã®èšåç®æ
- Living Standard
- çããæšæº。WHATWGãHTMLãDOMãªã©ã®Webæšæºãç¶æããããã«æ¡çšããŠããã¢ãããŒã。ç¹å®ã®ããŒãžã§ã³çªå·(äŸ: HTML5, HTML6)ãä»ããã®ã§ã¯ãªã、æšæºä»æ§ãç¶ç¶çã«æŽæ°ã、åžžã«ææ°ã®ç¶æ ã«ä¿ã¡ãŸã。æ¬æã§ã®èšåç®æ
- Preload Scanner
- ããªããŒãã¹ãã£ã。Webãã©ãŠã¶ãHTMLãè§£æããéçšã§、ããŒãžã®ã¬ã³ããªã³ã°ããããã¯ããå¯èœæ§ã®ãããªãœãŒã¹(CSS、åæJavaScriptãªã©)ã、åŸã§å¿ èŠã«ãªããªãœãŒã¹(ç»åãªã©)ãæ©æã«çºèŠã、ã¡ã€ã³ã®HTMLè§£æãã¬ã³ããªã³ã°ãšäžŠè¡ããŠããŠã³ããŒããéå§ããæé©åã¡ã«ããºã 。æ¬æã§ã®èšåç®æ
- Shadow DOM
- ã·ã£ããŠDOM。Web Componentsã®äž»èŠæè¡ã®äžã€。DOMããªãŒã®äžéšãã«ãã»ã«åã、ã¡ã€ã³ææžã®DOMããé èœ(ã·ã£ããŠã€ã³ã°)ããæ©èœ。ããã«ãã、ã³ã³ããŒãã³ãã®å éšæ§é ãã¹ã¿ã€ã«ãå€éšãã圱é¿ãåããã、å€éšã«åœ±é¿ãäžãããããã®ãé²ãããšãã§ããŸã。æ¬æã§ã®èšåç®æ
- SGML (Standard Generalized Markup Language)
- æšæºäžè¬åããŒã¯ã¢ããèšèª。ææžã®æ§é ãå 容ãèšè¿°ããããã®ããŒã¯ã¢ããèšèªãå®çŸ©ããããã®åœéèŠæ Œ(ISO 8879)。HTMLãXMLã®å ã«ãªã£ãèšèªã§ã。éåžžã«åŒ·åã§æè»æ§ããããŸãã、è€éãããã«Webã§ã¯ããã·ã³ãã«ãªHTMLãXMLãäž»æµãšãªããŸãã。æ¬æã§ã®èšåç®æ
- SPA (Single Page Application)
- ã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³。åäžã®HTMLããŒãžãæåã«èªã¿èŸŒã¿、ãã®åŸã¯JavaScriptã䜿ã£ãŠããŒãžå šäœãŸãã¯äžéšãåçã«æžãæããããšã§、ãŠãŒã¶ãŒãšã®å¯Ÿè©±ãè¡ãWebã¢ããªã±ãŒã·ã§ã³。ããŒãžé·ç§»ãé«éã§、ãã€ãã£ãã¢ããªã®ãããªæäœæãæäŸã§ããŸãã、åæããŒãæéãSEO察çã«èª²é¡ãããå ŽåããããŸã。
- SSI (Server Side Includes)
- ãµãŒããŒãµã€ãã€ã³ã¯ã«ãŒã。WebãµãŒããŒãHTMLãã¡ã€ã«ãã¯ã©ã€ã¢ã³ãã«éä¿¡ããåã«、ãã¡ã€ã«å
ã«èšè¿°ãããç¹å®ã®ã³ãã³ã(äŸ:
)ãåŠçã、ä»ã®ãã¡ã€ã«ã®å 容ãåã蟌ãã ã、ç°¡åãªåŠçãå®è¡ãããããæ©èœ。æ¬æã§ã®èšåç®æ, ã³ã©ã ã§ã®èšåç®æ - SSG (Static Site Generator)
- éçãµã€ããžã§ãã¬ãŒã¿ãŒ。Markdownãã¡ã€ã«ããã³ãã¬ãŒããã¡ã€ã«ãªã©ã®ãœãŒã¹ãã¡ã€ã«ãå ã«、å®å šãªéçHTML、CSS、JavaScriptãã¡ã€ã«ãçæ(ãã«ã)ããããŒã«。çæããããã¡ã€ã«ã¯WebãµãŒããŒã«é 眮ããã ãã§åäœã、é«éã§å®å šãªWebãµã€ããæ§ç¯ã§ããŸã。äŸ: Hugo, Jekyll, Next.js (SSGã¢ãŒã), Astro。æ¬æã§ã®èšåç®æ, æ¬æã§ã®èšåç®æ
- Transclusion
- ãã©ã³ã¹ã¯ã«ãŒãžã§ã³。ããææž(ãªãœãŒã¹)ã®äžéšãŸãã¯å šéšã、åç §ã«ãã£ãŠå¥ã®ææžã«èªåçã«å«ããããš。ãã€ããŒãªã³ã¯ãåã«åç §å ãžã®「ãžã£ã³ã」ãæäŸããã®ã«å¯Ÿã、ãã©ã³ã¹ã¯ã«ãŒãžã§ã³ã¯åç §å ã®ã³ã³ãã³ããçŸåšã®ææžå ã«「åã蟌ã」ããšãæå³ããŸã。Project Xanaduã§æå±ãããæŠå¿µã§、HTMLã€ã³ã¯ã«ãŒãåé¡ã®æ žå¿ãšãèšããŸã。
- Web Components
- ãŠã§ãã³ã³ããŒãã³ã。HTML、CSS、JavaScriptã®æšæºæè¡(Custom Elements, Shadow DOM, HTML Templates)ãçµã¿åãããŠ、åå©çšå¯èœã§ã«ãã»ã«åãããã«ã¹ã¿ã HTMLèŠçŽ ãäœæããããã®æè¡ã¹ã€ãŒã。æ¬æã§ã®èšåç®æ
- WHATWG (Web Hypertext Application Technology Working Group)
- ãŠã§ããã€ããŒããã¹ãã¢ããªã±ãŒã·ã§ã³æè¡ã¯ãŒãã³ã°ã°ã«ãŒã。Apple、Google、Mozilla、Microsoftãªã©ã®ãã©ãŠã¶ãã³ããŒã®ã¡ã³ããŒãäžå¿ãšãªã、HTMLãDOMãªã©ã®äž»èŠãªWebæšæºä»æ§ãéçº・ä¿å®ããŠããã³ãã¥ããã£。æ¬æã§ã®èšåç®æ, æ¬æã§ã®èšåç®æ
- WICG (Web Incubator Community Group)
- ãŠã§ãã€ã³ãã¥ããŒã¿ãŒã³ãã¥ããã£ã°ã«ãŒã。W3C (World Wide Web Consortium) å ã®ã³ãã¥ããã£ã°ã«ãŒãã®äžã€ã§、æ°ããWebãã©ãããã©ãŒã æ©èœã®ã¢ã€ãã¢ãè°è«ã、仿§ã®èæ¡ãäœæããããã®å Ž。ããã§ææãšãããææ¡ã、åŸã«æ£åŒãªæšæºåãã©ãã¯ã«é²ãããšããããŸã。æ¬æã§ã®èšåç®æ
- XSLT (Extensible Stylesheet Language Transformations)
- æ¡åŒµå¯èœã¹ã¿ã€ã«ã·ãŒãèšèªå€æ。XMLææžãå¥ã®XMLææžã、HTML、ãã¬ãŒã³ããã¹ããªã©ã®ä»ã®åœ¢åŒã«å€æããããã®èšèª。XMLããŒã¹ã®ãã³ãã¬ãŒããšã³ãžã³ãšèããããšãã§ã、ã€ã³ã¯ã«ãŒããæ¡ä»¶åå²、ç¹°ãè¿ããªã©ã®æ©èœãæã£ãŠããŸã。ãã€ãŠã¯æ³šç®ãããŸããã、çŸåšã§ã¯å©çšå Žé¢ã¯éå®çã§ã。
è£è¶³1: çšèªè§£èª¬ (ãããããé )
-
iframe (ãããµããŒã)
- æå³: HTMLææžå ã«å¥ã®HTMLææžãåã蟌ãããã®èŠçŽ 。ã€ã³ã©ã€ã³ãã¬ãŒã ãšãåŒã°ãã。
- çšäŸ: 「YouTubeåç»ããµã€ãã«åã蟌ãããã«
iframeã¿ã°ã䜿ã£ã。」「ããããŒãiframeã§èªã¿èŸŒãã®ã¯ã¬ã€ã¢ãŠã調æŽãé£ãã。」 - é¡èª: ãã¬ãŒã (
frame, å€ãæè¡), ãªããžã§ã¯ã (object, çšéãåºã) - Wikipedia: IFrame
-
ãµãŒããŒãµã€ãã€ã³ã¯ã«ãŒã (Server Side Includes, SSI)
- æå³: WebãµãŒããŒãã¯ã©ã€ã¢ã³ãã«HTMLãéãåã«、ç¹å®ã®æç€ºã«åºã¥ããŠä»ã®ãã¡ã€ã«ã®å 容ãHTMLå ã«åã蟌ãæè¡。
- çšäŸ: 「Apacheã®èšå®ã§SSIãæå¹ã«ãã。」「å ±éããã¿ãŒã¯SSIã§èªã¿èŸŒãã§ãã。」
- é¡èª: ãã³ãã¬ãŒããšã³ãžã³ (ãã髿©èœãªå Žåãå€ã)
- Wikipedia: Server Side Includes
-
éçãµã€ããžã§ãã¬ãŒã¿ãŒ (Static Site Generator, SSG)
- æå³: Markdownããã³ãã¬ãŒããã、宿ããHTML・CSS・JSãã¡ã€ã«ãçæããããŒã«。
- çšäŸ: 「ããã°ãHugoãšããSSGã§æ§ç¯ãã。」「SSGã䜿ããšãã«ãæéãå¿ èŠã«ãªã。」
- é¡èª: ãã«ãããŒã« (ããåºç¯ãªæŠå¿µ)
- Wikipedia: éçãµã€ããžã§ãã¬ãŒã¿ãŒ
-
ãã©ã³ã¹ã¯ã«ãŒãžã§ã³ (Transclusion)
- æå³: ããææžã®å 容ãåç §ã«ãã£ãŠå¥ã®ææžã«èªåçã«åã蟌ãããš。
- çšäŸ: 「Wikipediaã®ãã³ãã¬ãŒãæ©èœã¯ãã©ã³ã¹ã¯ã«ãŒãžã§ã³ã®äžäŸã 。」「HTMLãã€ãã£ãã€ã³ã¯ã«ãŒãã¯、äžçš®ã®ã¯ã©ã€ã¢ã³ããµã€ããã©ã³ã¹ã¯ã«ãŒãžã§ã³ãšèšãã。」
- é¡èª: ã€ã³ã¯ã«ãŒã、åã蟌ã¿
- Wikipedia: Transclusion (è±èª)
-
ããªããŒãã¹ãã£ã (Preload Scanner)
- æå³: ãã©ãŠã¶ãHTMLãå èªã¿ããŠéèŠãªãªãœãŒã¹ãæ©æã«ããŠã³ããŒãããæé©åæ©èœ。
- çšäŸ: 「ããªããŒãã¹ãã£ãã®ãããã§、ç»åãCSSã®èªã¿èŸŒã¿ãéããªã。」「HTMLã€ã³ã¯ã«ãŒããããªããŒãã¹ãã£ãã®åäœã劚ããªããå¿é ã 。」
- é¡èª: å èªã¿æ©èœ、ã«ãã¯ã¢ãããããŒãµãŒ
-
Web Components (ãŠã§ãã³ã³ããŒãã³ã)
- æå³: åå©çšå¯èœã§ã«ãã»ã«åãããã«ã¹ã¿ã HTMLèŠçŽ ãäœæããããã®æšæºæè¡çŸ€ (Custom Elements, Shadow DOM, HTML Templates)。
- çšäŸ: 「ç¬èªã®ãã¶ã€ã³ã·ã¹ãã ãWeb Componentsã§æ§ç¯ãã。」「Web Componentsã¯ãã¬ãŒã ã¯ãŒã¯ã«äŸåããªãã®ãå©ç¹ã 。」
- é¡èª: ã«ã¹ã¿ã èŠçŽ 、ã³ã³ããŒãã³ãæå
- Wikipedia: Web Components
è£è¶³2: æœåšçèªè ã®ããã«
ãã£ãããŒãªã¿ã€ãã«æ¡
- HTMLã®é·å¹Žã®è¬!ãªãããããŒã
ã§ããªãã®ã? ð€ #Webéçº - 【åå¿è è±åŽ】HTMLã€ã³ã¯ã«ãŒãããªãçç±ãç¥ãã°Webããã£ãšããã!ð¡
ã¯OK、ãªãHTMLã¯NG? ãã€ãã£ãã€ã³ã¯ã«ãŒãäžåšã®æ·±ã€ã€çç±
- ReactãSSGãäžèŠ? HTMLã ãã§å®çµããã! ãªãã§ããªã? ð€·♀️ #ã·ã³ãã«Web
- 30幎ç®ã®çå笊❓ HTMLã€ã³ã¯ã«ãŒãé察å¿åé¡、培åºèšè«!ð¥
SNSå ±æçšããã·ã¥ã¿ã°æ¡
- #HTML
- #Webæšæº
- #ããã³ããšã³ã
- #Webéçº
- #Webå¶äœ
- #ããã°ã©ãã³ã°åå¿è
- #HTMLã€ã³ã¯ã«ãŒã
- #Webã®è¬
- #éçºTips
- #ã³ãŒãã£ã³ã°
- #æè¡ããã°
- #dopingconsomme
SNSå ±æçšæç« (120å以å )
【ãªãHTMLã ãã§ãã¡ã€ã«ãã€ã³ã¯ã«ãŒãã§ããªã?ð€】Webéçºè
ãªã誰ããæãçå!JSãSSGã«é Œãã、HTMLãã€ãã£ãã§ããããŒ/ããã¿ãŒãå
±éåã§ããªãçç±ãæ·±æã解説。ããã©ãŒãã³ã¹、ã»ãã¥ãªãã£、æŽå²çèæ¯ãŸã§! #HTML #Webæšæº #ããã³ããšã³ã
[ãã®èšäºã®URL]
ããã¯ããŒã¯çšã¿ã°
[HTML][include][Webæšæº][ããã³ããšã³ã][éçº][èå¯][æŽå²][ããã©ãŒãã³ã¹][ã»ãã¥ãªãã£][WebComponents]
ãã®èšäºã«ããã¿ãªã®çµµæå
ð€❓ð¡ðð§©ð⚙️ð°️ððð¡️ðð§
ã«ã¹ã¿ã ããŒããªã³ã¯æ¡
- why-no-native-html-include
- html-include-mystery
- seeking-html-include-answer
- native-html-component-reuse
è£è¶³3: æ³å®åç (åŠäŒçºè¡šé¢š Q&A)
- Q1: çºè¡šããããšãããããŸãã。倧å€è峿·±ãèå¯ã§ãã。çµå±ã®ãšãã、æè¡çãªéå£(ããã©ãŒãã³ã¹ãã»ãã¥ãªãã£)ãš、æšæºåããã»ã¹ã®åé¡(åæåœ¢æã®é£ãããåªå 床)ã®ã©ã¡ãã、HTMLãã€ãã£ãã€ã³ã¯ã«ãŒããå®çŸããªãäž»ãªçç±ã ãšãèãã§ãã?
- A1: ã質åããããšãããããŸã。äž¡è ã¯å¯æ¥ã«é¢é£ããŠãããšèããããŸãã、æ¢ããŠéã¿ä»ãããããªãã°、æè¡çãªéå£ãä¹ãè¶ããããã®æç¢ºãªä»æ§ãšå®è£ ãžã®åæåœ¢æãé£ãã、ãšããç¹ã倧ãããšæšæž¬ããŸã。ããã©ãŒãã³ã¹ãã»ãã¥ãªãã£ã®åé¡ã¯ç¢ºãã«ååšããŸãã、ãããã解決ããããã®ãã¬ãŒããªã(äŸãã°、æ©èœå¶éãè€éãªå±æ§ã®è¿œå )ãçºçããŸã。ãã®ãã¬ãŒããªãã«ã€ããŠ、å šãŠã®ãã©ãŠã¶ãã³ããŒãéçºè ã³ãã¥ããã£ãçŽåŸãã「æé©è§£」ãèŠåºãããšã、æšæºåããã»ã¹ã®æå€§ã®é£é¢ã§ãããšèããããŸã。éå»ã®HTML Importsã®å€±æã、ãã®èšŒå·Šãšèšããã§ããã。
- Q2: HTMXã®ãããªã©ã€ãã©ãªã人æ°ãéããŠããçŸç¶ã¯、ãã€ãã£ãå®è£ ãžã®è¿œã颚ã«ãªããšæãããŸãã?ãããšã、éã«「ã©ã€ãã©ãªã§åå」ãšããèªèãåºã、ãã€ãã£ãå®è£ ã®æ©éãåãå¯èœæ§ãããã§ãããã?
- A2: éåžžã«è¯ãç¹ã§ã。ããã¯äž¡æ¹ã®åŽé¢ããããšæããŸã。HTMXã®æåã¯、HTMLäžå¿ã§å®£èšçãªã¢ãããŒããžã®éèŠãæ ¹åŒ·ãããšã瀺ããŠãã、ãã€ãã£ãå®è£ ãžã®æåŸ æãé«ããå¯èœæ§ããããŸã。äžæ¹ã§、HTMXãæäŸããæ©èœ(åçŽãªã€ã³ã¯ã«ãŒã以äžã®ãã®ãå«ã)ã«æºè¶³ããéçºè ãå¢ããã°、「ãã€ãã£ãæ©èœã¯äžèŠ、ãããã¯HTMXã®ãããªã©ã€ãã©ãªã«ä»»ããã¹ã」ãšããæèŠã匷ãŸãå¯èœæ§ãåŠå®ã§ããŸãã。æçµçã«ã¯、ãã€ãã£ãå®è£ ãHTMXã®ãããªã©ã€ãã©ãªã§ã¯æäŸã§ããªãç¬èªã®äŸ¡å€(äŸãã°、ãã«ãããã»ã¹ãJSã©ã³ã¿ã€ã ãªãã§ã®å®å šãªåäœ、ãã©ãŠã¶ã¬ãã«ã§ã®æ·±ãæé©åãªã©)ã瀺ãããã©ããã«ããã£ãŠãããšèããŸã。
- Q3: åäžãªãªãžã³å ã®ã€ã³ã¯ã«ãŒãã«éå®ããã°、ã»ãã¥ãªãã£ãªã¹ã¯ã¯å€§å¹ ã«äœæžã§ãããšæãããŸã。ãªã、ãã®ãããªéå®çãªä»æ§ããã§ãæšæºåãé²ãŸãªãã®ã§ãããã?
- A3: ãã£ãããéã、åäžãªãªãžã³ã«éå®ããã°ã»ãã¥ãªãã£æžå¿µã¯å€§ããç·©åãããŸã。ããã、ããã§ãããã©ãŒãã³ã¹(ãã¹ãã«ãããªã¯ãšã¹ãå¢å 、ã¬ã€ã¢ãŠãã·ãã)、埪ç°åç §ã®ãã³ããªã³ã°、ã€ã³ã¯ã«ãŒããããHTMLãã©ã°ã¡ã³ãã®å®çŸ©(å®å šãªHTMLææžã、éšåã)ãšãã£ãåé¡ã¯æ®ããŸã。ãŸã、äžåºŠéå®çãªä»æ§ãå°å ¥ããåŸ、å°æ¥çã«ã¯ãã¹ãªãªãžã³ãžæ¡åŒµããéã«、åŸæ¹äºææ§ãä¿ã¡ã€ã€å®å šãªèšèšãè¡ãããšãå°é£ã«ãªãå¯èœæ§ãæžå¿µããããããããŸãã。ããã«、「éå®çãªæ©èœãªãæ¢åã®è§£æ±ºçã§åå」ãšããæèŠãäŸç¶ãšããŠååšããå¯èœæ§ããããŸã。æšæºåã¯、å°æ¥çãªæ¡åŒµæ§ãäžè²«æ§ãèæ ®ã«å ¥ããå¿ èŠããããã、åçŽãªç¬¬äžæ©ãèžã¿åºãããšèªäœãé£ããã®ãããããŸãã。
- Q4: Web Componentsã®é²åã«ãã£ãŠ、ãã®åé¡ã¯ããã解決ããããšããèŠæ¹ã«ã€ããŠ、ããå°ã詳ãããèãããã ãã。å ·äœçã«、Web Componentsãã©ã®ããã«「ã·ã³ãã«ãªHTMLã€ã³ã¯ã«ãŒã」ã®ä»£æ¿ãšãªãåŸãã®ã§ãããã?
-
A4: Web Components、ç¹ã«Custom Elementsãçšããã°、äŸãã°
ã®ãããªç¬èªã®ã¿ã°ãå®çŸ©ã§ããŸã。ãã®ã«ã¹ã¿ã èŠçŽ ã®å éšã§、fetchã䜿ã£ãŠå€éšHTML (`header-template.html`ãªã©) ãèªã¿èŸŒã¿、èªèº«ã®Shadow DOM(ãŸãã¯Light DOM)ã«æ¿å ¥ããããžãã¯ãJavaScriptã§å®è£ ããããšãå¯èœã§ã。çŸç¶ã§ã¯JSãå¿ èŠã§ãã、å°æ¥çã«ã¯、ã«ã¹ã¿ã èŠçŽ ã®å®çŸ©æã«å€éšHTMLãã³ãã¬ãŒãã®URLãæå®ããã ãã§、ãã©ãŠã¶ãèªåçã«èªã¿èŸŒãã§ã¬ã³ããªã³ã°ãããããª、ãã宣èšçãªä»çµã¿ãå°å ¥ãããå¯èœæ§ã¯èããããŸã。ãããªãã°、å®è³ªçã«「ã·ã³ãã«ãªHTMLã€ã³ã¯ã«ãŒã」ã«è¿ãäœéšãæäŸã§ãããããããŸãã。ãã ã、ãããçŸç¶ã®Web Componentsã®ææ³ãšåèŽããã、ãŸã、ã©ã®çšåºŠã®ã·ã³ãã«ããå®çŸã§ãããã¯、ä»åŸã®ä»æ§ç宿¬¡ç¬¬ãšèšããŸã。
è£è¶³4: äºæž¬ããããããåå¿ (2ch/ã¯ãŠã/ãã³å颚) ãšåè«
- ã³ã¡ã³ã1 (2ch颚): 「ã¯?HTMLã€ã³ã¯ã«ãŒã? SSIã§ã°ã°ãã«ã¹。æ
匱ä¹。」
- åè«: SSIã¯ãµãŒããŒèšå®ãå¿ èŠã ã、䜿ããªãç°å¢ãå€ããã ããªã。ã¯ã©ã€ã¢ã³ãã ãã§å®çµãããã£ãŠè©±ã ãjk。å°ãã¯æèèªãã。ð
- ã³ã¡ã³ã2 (ã¯ãŠã颚): 「b:id:user1 HTMLã®åºæ¬èšèšææ³ããèããã°åœç¶ã§ã¯。ææžæ§é ã瀺ãèšèªã«åçã€ã³ã¯ã«ãŒããæ±ããã®ãçéã。ä»£æ¿ææ®µã§åå。」
- åè«: èšèšææ³ã¯ããããã©、imgãscriptã§å€éšãªãœãŒã¹èªã¿èŸŒããŠãæç¹ã§çŽç²ãªææžæ§é ã ããããªããã? å®éã¿ããªå°ã£ãŠä»£æ¿ææ®µäœ¿ã£ãŠããã ãã、æšæºã§ã·ã³ãã«ãªæ¹æ³ããã£ãŠãããã®ã§ã¯?ð€ çŸå®çãªããŒãºç¡èŠããããããªã?
- ã³ã¡ã³ã3 (ãã³å颚): 「ã€ã³ã¯ã«ãŒãw iframeã§ææ
¢ããwww → é«ã調æŽå°ç → JSã§ãŽãã§ãŽãã§ → çµå±JSãã! _| ̄|○ il||li」
- åè«: ãããªwww iframeã®é«ãèªå調æŽã¯ããžã§çœ 。ã ãããã、ãã£ãšãã·ãªãã€ãã£ãæ©èœã欲ããã£ãŠèšã£ãŠããã ããªã…。JSæžããã«æžããªãããã«è¶ããããšã¯ãªã。(´・Ï・`)
- ã³ã¡ã³ã4 (ã¯ãŠã颚): 「b:id:user2 ããã©ãŒãã³ã¹å£åãšã»ãã¥ãªãã£ãªã¹ã¯èããã、æšæºã«å
¥ããã®ã¯ç¡è¬。çŸç¶ã®SSGããã¬ãŒã ã¯ãŒã¯äœ¿ãã®ãåçç。」
- åè«: ãªã¹ã¯ã¯ç¢ºãã«ãããã©、æè¡çã«è§£æ±ºäžå¯èœãšæ±ºãã€ããã®ã¯æ©èšãããªã? åäžãã¡ã€ã³éå®ãšã、æ©èœå¶éã€ããã°ãªã¹ã¯ç®¡çã§ãããã。äœã§ãããã§ã髿©èœããŒã«åæã«ããã®ã、ããã¯ããã§åŠç¿ã³ã¹ããšãè€éæ§ã®åé¡ããããã ããªã。ãã©ã³ã¹å€§äº。⚖️
- ã³ã¡ã³ã5 (2ch颚): 「ã©ããGoogleæ§ãWeb ComponentsãŽãªæŒãããŠ、ãããæ£çŸ©ã«ãªããã ã? ç¥ã£ãŠã。」
- åè«: Web Componentsãéžæè¢ã®äžã€ã ãã©、ãããå¯äžã®è§£ãã¯ãŸã åãããªãã。HTML Importsã廿¢ãããã¿ããã«、ãã³ããŒéã®ææã§ç¶æ³ã¯å€ããã。決ãã€ãã¯è¯ããªã。( ´Ð`)=3
è£è¶³5: äºæž¬ããããããåå¿ (ãªãJæ°é¢š) ãšãã¡ããã
- ã³ã¡ã³ã1: 「HTMLã€ã³ã¯ã«ãŒã? ãªãããã、ã¯ã€ã®ç¥ã£ãŠãHTMLãšéããã?ð€ æ®éã«ã³ããã§ãããã(ïŸïŸ
ïŸïœŒïŸïœ°」
- ãã¡ããã: ã、ãã…ãã®èª¿åã§1000ããŒãžå šéšæäœæ¥ã§ä¿®æ£、é 匵ãããã§…ðª ãã¡ã€ãã!(ãªãä¿å®æ§)
- ã³ã¡ã³ã2: 「iframeã§ãããã、äœãäžæºãªãã?é«ã?æ°åã§åãããã!( ・`Ï・´)」
- ãã¡ããã: ãããå 貎!æ°åãããã°iframeã®é«ããèªç±èªåšã! ã¬ã¹ãã³ã·ã? ç¥ãããªã!ð(※ç䌌ããªãã§ãã ãã)
- ã³ã¡ã³ã3: 「SSG? React? ãªããç¥ãããã©、ã¯ã€ã¯jQueryãšPHPãããã°æåŒ·ãªãã!ðª å€ãè¯ãæä»£ã¯è¯ãã£ãã³ãŽ…」
- ãã¡ããã: jQueryã¯ãŸã ããPHPãã…ãŸã、åãã°ãšã·!ð …ã£ãŠèšããããã©、ããããæ°ããããšãèŠããããª?ãª?ð
- ã³ã¡ã³ã4: 「çµå±ãã©ãŠã¶ãã³ããŒæ§ã®éœåãã? Googleæ§ã『ããããã¯〇〇ã!』ã£ãŠèšã£ãã、ã¿ããªããã«åŸããã。éãã£ããæå
«åãã§ð±」
- ãã¡ããã: ããããã³。GAFAæ§ã®åŸ¡å¿æ¬¡ç¬¬ããªð ã¯ã€ãã¯ãã ç¥ãã®ã¿…ð åç¡é¿åŒ¥éä»。
- ã³ã¡ã³ã5: 「ã€ã³ã¯ã«ãŒããšãã©ãã§ãããã! ããããã¯ã€ã®äœã£ãæåŒ·ã®å人ãµã€ãèŠãŠããã!→ [æªããURL]」
- ãã¡ããã: ãã£、宣äŒä¹! …ã£ãŠèžãããŒã!ð« ã¿ããª、æªãããªã³ã¯ã¯ã¯ãªãã¯ãããã¢ã«ã³ã§!ð ♀️
è£è¶³6: äºæž¬ããããããåå¿ (ã¬ã«ã¡ãã/ãžã¢ãã£ãŒæ°é¢š) ãšåè«
- ã³ã¡ã³ã1 (ã¬ã«ã¡ãã颚): 「HTML?ã€ã³ã¯ã«?ããåãããªããã©、ã³ããã§è¯ããªã?ðŠ ããã©ãããã®å«ã~ð
♀️ ãã£ãšç°¡åãªæ¹æ³ãªãã®?」
- åè«: ããã§ããã、æåã¯ã³ãããæ¥œã«æããŸãããð ã§ã、åŸã§ã¡ãã£ãšçŽãããæã«å šéšã®ããŒãžãçŽãã®ãããã倧å€ã«ãªã£ã¡ãããã§ãðŠ ã ãã、ãã£ãšæ¥œã§ããæ¹æ³ãHTMLèªäœã«ãã£ãããããªã£ãŠãã話ãªãã§ãã~。
- ã³ã¡ã³ã2 (ãžã¢ãã£ãŒé¢š): 「ããŒã ããŒãžäœããããã ãã©、ç¡æã§ç°¡åã«ããããŒãšãå
±éã«ã§ããªãã®?ð€ ãªããããŒã«ãšãããã®?ãéããã?」
- åè«: ç¡æã§ã§ããæ¹æ³ããããããããŸãã!✨ äŸãã°GitHub Pagesãšç°¡åãªããŒã«ãçµã¿åãããã、ç¡æã®ãµãŒããŒã§SSIã䜿ã£ãã。ãã 、HTMLãã¡ã€ã«ã ããã³ãšçœ®ãã ãã§å ±éåã§ãããšãã£ãšç°¡åã ãã、ã£ãŠããã®ããã®èšäºã®ããŒããªãã§ã。ããç°¡åãªæ¹æ³ãæ¢ãã§ããã、[é¢é£ããåå¿è åãèšäºãžã®ãªã³ã¯ç] ãåèã«ãªããããããŸãã。
- ã³ã¡ã³ã3 (ã¬ã«ã¡ãã颚): 「Web Components? Shadow DOM? äœããåªæ?ð§♀️ ãã£ã𿥿¬èªã§åããããã説æããŠã»ãããã ãã©!ð¥」
- åè«: ããããªãã、å°éçšèªãå€ããŠåããã«ããã£ãã§ãããð♀️ Web Componentsã¯、ã¬ãŽãããã¯ã¿ããã«WebããŒãžã®éšåãäœã£ãŠäœ¿ãåããæè¡ã®ããšãªãã§ã。Shadow DOMã¯、ãã®ãããã¯ã®äžèº«ãå€ã«åœ±é¿ããªãããã«ããå£ã¿ãããªãã®ã§ã。ãã£ãšç°¡åãªèšèã§èª¬æã§ããããã«、æ¬æãä¿®æ£ããŠã¿ãŸãã!✍️
- ã³ã¡ã³ã4 (ãžã¢ãã£ãŒé¢š): 「æ、ããŒã ããŒãžãã«ããŒã§äœã£ãŠãæã¯、ãªããå
±ééšåãšãç°¡åã«ã§ããæ°ããããã ãã©ãªã…ð€ æè¿ã®ã¯é£ããã®?」
- åè«: ããŒã ããŒãžãã«ããŒã®ãããªãœããã¯、è£åŽã§ããããå ±éåã®ä»çµã¿ãèªåã§ãã£ãŠãããŠãããã§ãã!䟿å©ã§ããããð ãã 、ææžãã§HTMLãäœãå Žåã、ãã£ãšèªç±ãªãã¶ã€ã³ããããå Žåã«ã¯、ããããåºæ¬çãªéšåã§「ãã?ã§ããªãã®?」ã£ãŠãªãããšããããã§ã。æã®ãœããããã£ãŠãããŠãããããªäŸ¿å©ãã、Webã®æšæºæ©èœãšããŠããããšãããª、ãšããæãããããŸã。
è£è¶³7: äºæž¬ããããããåå¿ (ã€ãã³ã¡/ã³ã¡ã³ããã©ã¹é¢š) ãšåè«
- ã³ã¡ã³ã1 (ã€ãã³ã¡é¢š): 「çµå±、æè¡è
ã®èªå·±æºè¶³ãããªãã? æ®éã®å©çšè
ã¯ããããŒãã©ããã£ãŠèªã¿èŸŒãŸããŠãããªããŠæ°ã«ããªã。衚瀺ãéããŠäœ¿ãããããã°ããã§ãã。」
- åè«: å©çšè èŠç¹ã¯éåžžã«éèŠã§ã。ããã、éçºã®ã·ã³ãã«ããå¹çæ§ã¯、æçµçã«ãµã€ãã®å質、æŽæ°é »åºŠ、ãããŠè¡šç€ºé床ã䜿ããããã«ãç¹ãããŸã。éçºè ãå¹ççã«äœæ¥ã§ããã°、ããè¯ããµãŒãã¹ãå©çšè ã«æäŸãããããªããšããåŽé¢ããçè§£ããã ãããšå¹žãã§ã。åºç€æè¡ã®æ¹åã¯、å·¡ãå·¡ã£ãŠå©çšè ã®å©çã«ããªãåŸãŸã。
- ã³ã¡ã³ã2 (ã³ã¡ã³ããã©ã¹é¢š - æèè
): 「Webæšæºã®æŽå²ççµç·¯ãèãããš、HTMLãæ§é 、CSSãè£
食、JSãæåãšåé¢ããååãæ ¹åŒ·ã。HTMLã«ã€ã³ã¯ã«ãŒãã®ãããª『çµã¿ç«ãŠ』æ©èœãå
¥ããã®ã¯、ãã®ååããã®éžè±ãšæããã、åæåœ¢æãé£ããã®ã ãã。Web Componentsããã®çŸå®çãªèœãšãæãããããªã。」
- åè«: å°éçãªãæèŠããããšãããããŸã。åååé¢ã¯çè§£ã§ããŸãã、çŸå®ã®Webéçºã§ã¯ãã®å¢çã¯ææ§ã«ãªããã¡ã§ã。äŸãã°`
`ã¯æ§é ãšãèšããŸãã、å€éšãªãœãŒã¹ã®åã蟌ã¿ã§ã。Web Componentsã¯ææã§ãã、ãŸã æ®åã䜿ããããã«èª²é¡ããããŸã。å©çšå®æ ã«åãããŠååãåè§£éã、ããå®çšçãªæšæºã暡玢ããäœå°ã¯ãªãã§ãããã。
- åè«: å°éçãªãæèŠããããšãããããŸã。åååé¢ã¯çè§£ã§ããŸãã、çŸå®ã®Webéçºã§ã¯ãã®å¢çã¯ææ§ã«ãªããã¡ã§ã。äŸãã°`
- ã³ã¡ã³ã3 (ã€ãã³ã¡é¢š): 「ãããªçްããããšè°è«ããŠãæããã£ãã、ãã£ãšã»ãã¥ãªãã£å¯Ÿçãšã、ãã§ã€ã¯ãã¥ãŒã¹å¯Ÿçãšã、ããã¹ãããšãããã ããã«。」
- åè«: ã»ãã¥ãªãã£ããã§ã€ã¯ãã¥ãŒã¹å¯Ÿçã¯ãã¡ããéèŠèª²é¡ã§ã。ããã、Webã®åºç€æè¡ã«é¢ããè°è«ã、é·æçã«èŠãŠWebå šäœã®å¥å šæ§ãçºå±ã«ã¯äžå¯æ¬ ã§ã。éçºå¹çãäžããã°、ãšã³ãžãã¢ã¯ä»ã®éèŠãªèª²é¡ã«ããå€ãã®æéãå²ããããã«ãªããããããŸãã。æ§ã ãªã¬ãã«ã§ã®æ¹åãåæã«é²ããããã¹ãã ãšèããŸã。
- ã³ã¡ã³ã4 (ã³ã¡ã³ããã©ã¹é¢š - ãžã£ãŒããªã¹ã): 「ãã®èšäºã¯、ITæ¥çã«ããã『æšæºå』ã®é£ããã象城ããŠãã。æè¡çåçæ§ã ãã§ãªã、äŒæ¥éã®ç«¶äº、éå»ã®ãããã¿、éçºè
æåãªã©ãè€éã«çµ¡ã¿åã、ã·ã³ãã«ãªã¯ãã®èŠæ±ãå®çŸããªã。ããã¯ä»ã®ç£æ¥åéã§ãèŠããã課é¡ã 。」
- åè«: (åè«ãšããããåæ) éããææããããšãããããŸã。ãŸãã«ãã®éãã§、æè¡ã®äžçã人é瀟äŒã®çž®å³ã§ãã、æ§ã ãªèŠå ã圱é¿ãåã£ãŠããŸã。ãã®èšäºã、åãªãæè¡è§£èª¬ã«ãšã©ãŸãã、ãããã「æšæºåã®æ¿æ²»åŠ」ã®ãããªåŽé¢ã«ãå ãåœãŠãäžå©ãšãªãã°å¹žãã§ã。
è£è¶³8: äºæž¬ããããããåå¿ (Tiktok/ãã€ãã§ã/çãµã€æ°é¢š) ãšåè«
- ã³ã¡ã³ã1 (Tiktok颚): 「htmlã€ã³ã¯ã«?ãªã«ãã?ð€ãšããããèžã£ãŠã¿ãð #htmlãããããã #誰ãæããŠ」
- åè«: èžãã¯çŽ æµã ãã©、ãããã解決ããªãã~ð Webãµã€ãã®å ±éããŒããæ¥œã«äœ¿ãåãæ¹æ³ã®è©±!æ°ã«ãªããªãæ¬æèªãã§ã¿ãŠãð
- ã³ã¡ã³ã2 (ãã€ãã§ã颚): 「ãªãHTMLã€ã³ã¯ã«ãŒããã§ããªãã? ã©ããæè¡çéã®ç·æ§äžå¿äž»çŸ©çãªèšèšææ³ã§ãã? 女æ§éçºè
ã®æèŠãåæ ãããŠãªãããããªãã®? #æ§é çå·®å¥」
- åè«: æè¡çãªèª²é¡ãæŽå²ççµç·¯、æšæºåããã»ã¹ã®è€éããäž»ãªçç±ã§ãã、ç¹å®ã®æ§å¥ã«ããå·®å¥çãªæå³ã§èšèšããããšãã蚌æ ã¯ãããŸãã。Webæšæºã®è°è«ã¯èª°ã§ãåå å¯èœã§ãã、ãã倿§ãªå£°ãåæ ããããã、ã³ãã¥ããã£å šäœã®åªåã¯ä»åŸãå¿ èŠã§ã。課é¡ããžã§ã³ããŒåé¡ã«ç絡ãããã®ã¯å»ºèšçã§ã¯ãããŸãã。
- ã³ã¡ã³ã3 (çãµã€æ°é¢š): 「ãåãHTMLåŠãã§ã°ãã°ãèšã£ãŠãããããŒã!ð SSIãPHPã§ãã£ãšãããã±!話ãªããŒãã ãã«ã¹!」
- åè«: å£ãæªãã§ããð SSIãPHPã䜿ããªãç°å¢ã、ãã£ãšã·ã³ãã«ãªæ¹æ³ãæ±ãã声ãããããè°è«ã«ãªã£ãŠããã§ãã。è²ã ãªäºæ ããããã§ããã、ããå°ãå·éã«è©±ããŸããã?(å€åç¡é§)
- ã³ã¡ã³ã4 (ãã€ãã§ã颚): 「『ã·ã³ãã«ã』ãšã『åçæ§』ãšãç·æ§çãªäŸ¡å€èгã§èªãã®ãããŠã»ãã。ãã£ãšå€æ§ãªWebã®ããæ¹ãããã¯ã。ã€ã³ã¯ã«ãŒãã§ããªãçŸç¶ããã、倿§æ§ã®è¡šããããããªã。」
- åè«: ã·ã³ãã«ããå¹çæ§ã¯、æ§å¥ã«é¢ãããå€ãã®éçºè ãæ±ããæ®éçãªäŸ¡å€ã§ã。ãŸã、çŸç¶ã¯å€æ§æ§ã®çµæãšãããã、æè¡ç・æŽå²çãªå¶çŽãåæåœ¢æã®é£ããã«ãããã®ãšèããããŸã。åé¡ãããæ¿ããã®ã§ã¯ãªã、建èšçãªè°è«ãç®æããŸããã。
- ã³ã¡ã³ã5 (çãµã€æ°é¢š): 「ã¯?ãã®èšäºæžãããã€、ã©ãã®ã©ãã€ã ? ç¹å®ããŠæãäžããããŽã«ã¡!ð 」
- åè«: èœã¡çããŠãã ãã。ããã¯æè¡çãªè°è«ã®å Žã§ã。åäººæ»æãè è¿«ã¯å®å šã«çå€ãã§ãã、æ³çã«ãåé¡ããããŸãã。建èšçãªæèŠããé¡ãããŸã。ð®
è£è¶³9: SUNOçšæè©æ¡
(Verse 1) ãŠã§ããµã€ãäœããã³ ããããŒãšããã¿ãŒ åãã³ãŒã ã³ããã®æ¥ã 㯠ããçµãããã DRYåå å®ããããã (Chorus) Oh ãªã HTML åã ããã ã§ããªãã®? Include CSSã JSã ã§ããã®ã« ã·ã³ãã«ãªé¡ã å±ããªã (Verse 2) ãµãŒããŒãµã€ã SSI ãã«ããã SSG JavaScript ãã§ããã㊠DOMæäœ åãéã°ãã ãªããªãã ã? (Chorus) Oh ãªã HTML åã ããã ã§ããªãã®? Include ããã©ãŒãã³ã¹? ã»ãã¥ãªãã£? è€éã? æ¬åœã®çç± æããŠã (Bridge) Web Components ã¡ãã£ãšéã iframe åé¡å€ ãã ãã¡ã€ã«ã åã蟌ã¿ãã ããã ããªã®ã« é ãéã®ã (Chorus) Oh ãªã HTML åã ããã ã§ããªãã®? Include æšæºå åŸ ã£ãŠã ãã€ãŸã§ã æªæ¥ã®ãã©ãŠã¶ å¶ããŠã (Outro) Include me, HTML Simple is best, you know? HTML Include... Someday...è£è¶³10: æšèŠå³æž
ãã®èšäºã®å 容ãããæ·±ãçè§£ããããã«、以äžã®åéã«é¢ããæžç±ãè³æã圹ç«ã€ãããããŸãã。
-
HTML & CSS ã®åºç€ãšæŽå²:
- MDN Web Docs (HTML, CSS): Webæšæºã«é¢ããæãä¿¡é Œã§ãããªãœãŒã¹ã®äžã€。MDN HTML, MDN CSS
- æžç±: 『HTML5&CSS3ãã¶ã€ã³ããã¯』、『詳现HTML&XHTML&CSSèŸå ž』ãªã©、åºæ¬çãªã¿ã°ãæŠå¿µ、æŽå²ççµç·¯ã«è§ŠããŠãããã®。 (ç¹å®ã®æžç±ã®æšå¥šã¯é¿ããŸãã、Googleæ€çŽ¢: HTML CSS æŽå² æžç±)
-
Webæšæºåããã»ã¹:
- WHATWG ãš W3C ã®ãŠã§ããµã€ã: 仿§çå®ã®ããã»ã¹ãè°è«ã®æ§åãç¥ãããšãã§ããŸã。WHATWG, W3C
- 解説èšäº/æžç±: Webæšæºåã®ä»çµã¿ãæŽå²ã«ã€ããŠè§£èª¬ãããã®。(äŸ: Googleæ€çŽ¢: Webæšæºåããã»ã¹ 解説)
-
Web Components:
- MDN Web Docs: Web Components ã®è©³çްãªè§£èª¬ãšãã¥ãŒããªã¢ã«。MDN Web Components
- æžç±: 『Web Componentså ¥é』ãªã©、å®è·µçãªäœ¿ãæ¹ã解説ããæžç±。(äŸ: Googleæ€çŽ¢: Web Components å ¥é æžç±)
-
ãµãŒããŒãµã€ãæè¡ / éçãµã€ããžã§ãã¬ãŒã¿ãŒ:
- åæè¡ã®å ¬åŒãµã€ããããã¥ã¡ã³ã: PHP, Node.js, Ruby on Rails, Django, Hugo, Jekyll, Astro ãªã©。
- å ¥éæž: åæè¡ã®åºæ¬çãªäœ¿ãæ¹ããã³ãã¬ãŒããšã³ãžã³ã®ä»çµã¿ã解説ããæžç±。(äŸ: Googleæ€çŽ¢: éçãµã€ããžã§ãã¬ãŒã¿ãŒ æ¯èŒ æžç±)
-
Webããã©ãŒãã³ã¹ / ã»ãã¥ãªãã£:
- web.dev by Google: Core Web Vitals ãããã©ãŒãã³ã¹æé©å、ã»ãã¥ãªãã£ã«é¢ããææ°æ å ±。web.dev
- æžç±: 『ãã€ããã©ãŒãã³ã¹Webãµã€ã』、『Webã»ãã¥ãªãã£æ åœè ã®ããã®è匱æ§èšºæã¹ã¿ãŒãã¬ã€ã』ãªã©。(äŸ: Googleæ€çŽ¢: Webããã©ãŒãã³ã¹ æé©å æžç±, Googleæ€çŽ¢: Webã»ãã¥ãªãã£ å ¥é æžç±)
è£è¶³11: äžæ¹æŒ«æ「HTMLã€ã³ã¯ã«ãŒã」
(èå°è¢ãã、ããã・ããã颚ã®ã³ã³ããç»å Ž)
ããã:ã©ãŒããŒ! æãã§ããã!
ããã:ã¯ã、ã©ãŒããŒ! å°ããªããšããã³ãã³ããš、ãããã§ã。
ããã:ãããã¢ã¬ããª、ãããå。æè¿ã®Webã£ã¡ã ããã¯、ãããããããšã°ã£ããããª!
ããã:ãŸããŸã、ããããã。æè¡ã¯æ¥ã 鲿©ããŠãŸããã。
ããã:鲿©ããããã©ãª、åºæ¬çãªãšããã¢ã«ã³ããªãã! ã¯ã·ãª、ãã®åããŒã ããŒãžäœããæããŠãª、ããããŒã£ã¡ã ãäžã®ãšããš、ããã¿ãŒã£ã¡ã ãäžã®ãšã、å šéšã®ããŒãžã§åãããã、äžç®æã«æžããšããŠ、ä»ã®ããŒãžããã·ã¥ããšèªã¿èŸŒããæãããã。
ããã:ããŒ、ãããŸãã。å ±ééšåã®ã€ã³ã¯ã«ãŒã、DRYååã§ãã。
ããã:ãã©ã€ããŠãšãããç¥ããã! ãããããª、HTMLã ãããšã§ããžãèšããã! ãªãã§ããã!
ããã:ããŒ、HTMLåäœã§ã®ãã€ãã£ããªã€ã³ã¯ã«ãŒãæ©èœã¯、çŸç¶æšæºã§ã¯ãªããã§ãã。
ããã:ãªãã§ã! ç»åã¯imgã§ãã³ãã! CSSã¯linkã§ã·ã¥ãã! JSã¯scriptã§ãã«ã³ã! ãªãã§HTMLãHTMLãã€ã³ã¯ã«ãŒãã§ããžããã! ãããããã!
ããã:ãŸããŸãèœã¡çããŠãã ãã。è²ã çç±ããããã§ãã。ããã©ãŒãã³ã¹ã®åé¡ãšã、ã»ãã¥ãªãã£ãšã、æããã®HTMLã®èãæ¹ãšã…
ããã:èãæ¹ãŠãªãããã! 䟿å©ãã£ããããã§ãããã! ãã£ã¡ã¯ãª、ã³ããå°çã§è©åã£ãŠããããªãããã!
ããã:ä»£æ¿ææ®µã¯è²ã ãããã§ãã。ãµãŒããŒãµã€ãã€ã³ã¯ã«ãŒããšã、éçãµã€ããžã§ãã¬ãŒã¿ãŒãšã、JavaScriptã§èªã¿èŸŒããšã…
ããã:ãŸã暪æåã°ã£ãã䞊ã¹ãã£ãŠ! ãã£ãšã·ã£ãããšãããã! ã€ã³ã¯ã«ãŒãã¿ã°、äžåäœã£ãããããã! ãšããªããšã!
ããã:(èŠç¬)ãã、ãããªåçŽãªè©±ã§ããªããŠã§ãã… ããããããããAãããã¡ã€ã«ã§Bãèªã¿èŸŒãã§、Bãããã¡ã€ã«ã§Aãèªã¿èŸŒãã ã、ããããåã£ãŠæ¢ãŸããªããªããŸããã?
ããã:ããæã¯æ°åã§æ¢ãããã!
ããã:æ°åããæ¢ãŸããŸãããŠ! ç¡éã«ãŒãã§ãã! ãããšã、æªã人ãäœã£ãHTMLèªã¿èŸŒãããã£ãã、ãŠã€ã«ã¹å ¥ã£ããããŸããã。
ããã:ãªãã、çµå±ã§ããžãã®ãããª! ã€ãŸããã®ã! ã»ãª、ã¯ã·ãäœã£ããã! æåŒ·ã®HTMLã€ã³ã¯ã«ãŒãã¿ã°! ãã®åã…「æãã§ãããã¿ã°」ã!
ããã:ãã、çµ¶å¯Ÿæšæºã«ãªããŸãããŠ、ãã… ããããã!
ããã・ããã:ã©ãã、ããããšãããããŸãããŒ!
è£è¶³12: äžäººããªããã³ã
「HTMLã ãã§ã€ã³ã¯ã«ãŒãã§ãã²ããŠ、ããžããŒ! ãªãã§ããã! ããããŒãšãããã¿ãŒãšã、ãã¡ãã¡å
šéšã®ãã¡ã€ã«ã«ã³ãããšã、ã¢ãããããããã! DRYååã©ããã£ããã!
…ããåŸ
ãŠã?
ããç°¡åã«ã€ã³ã¯ã«ãŒãã§ããã、AãBèªãã§、BãCèªãã§、CãAèªã、ã¿ãããªç¡éã«ãŒãèµ·ããããããã㪅 ãã©ãŠã¶åºãŸãããã!
ããã«、ã©ã£ãã®æªããã€ãäœã£ãæªæããHTMLèªã¿èŸŒãããã£ãã… ãã、ãã£ã¡ãæã! ã»ãã¥ãªãã£ã¬ãã¬ããã!
ããš、èªã¿èŸŒãã¿ã€ãã³ã°ã§ã¬ã€ã¢ãŠããã¬ã¯ããŠãããã… ãã£ã¡ãã€ã©ã€ã©ãããã€ãã!
…ã£ãŠ、ãã?
ãªãã、ã§ãã²ãçç±、ãã£ã¡ãçŽåŸããŠãããŠããã!
ãªãã§ãããŒãŒã! ã·ã³ãã«ã«ããããã ããã®ã«、ãªãã§ãããªè€éãªããšèããªããããã! ãã£ã±ãããããã! 䟿å©ã«ããŠããããŒ!」
ãœ( `д)ïŸ ãªãã§ããã!
( ïŸÐŽïŸ)ïŸïœ¯! …ãã、ãããã©…
(´・Ï・`) …ãªãã»ã©ãª…
( ´Ð`)=3 …ã§ããã£ã±ã…
ãœ(>Ð<)ïŸ ãªãã§ãããŒãŒã!
è£è¶³13: 倧åå©
ãé¡: HTMLã«ãã€ãã£ããªã€ã³ã¯ã«ãŒãæ©èœãã€ãã«å®è£ ! ãã®é©ãã®ä»æ§ãšã¯?
- åç1: ã¿ã°åã¯
- åç2: ã€ã³ã¯ã«ãŒããããããšãã©ãŠã¶ã「ããããã」ãšé¢è¥¿åŒã§ãšã©ãŒãåºã。
- åç3:
ã®ããã«、ææ§ãªå±æ§ãå¿ é 。 - åç4: èªã¿èŸŒã¿ã«å€±æãããš、èªåçã«「å·¥äºäž」ã®GIFã¢ãã¡ã衚瀺ããã。
___ V V V ___ |å·¥äºäž Î¥ Î¥| |___ Î¥____ Î¥| / Î¥ / Î¥ <0xE3><0x80><0x80><0xE3><0x80><0x80><0xE3><0x80><0x80> - åç5: ã€ã³ã¯ã«ãŒãã§ããã®ã¯、ãã¡ã€ã«åããããšãã§ç¹ãã£ãŠããHTMLã ã。
- åç6:
iframeã¿ã°ã«actually-useful="true"屿§ã远å ããããšã§、ã€ã³ã¯ã«ãŒããšããŠæ©èœããããã«ãªã。 - åç7: éçºè ãã€ã³ã¯ã«ãŒãã¿ã°ãæžããš、èåŸãããã£ã ・ããŒããŒãº=ãªãŒãçŸããŠ「ããã§ããã®ãã?」ãšåããããŠãã。
- åç8: ã€ã³ã¯ã«ãŒãããåæ°ã«å¿ããŠ、ãã©ãŠã¶ã®ã¿ãã«ç«ã®ã¢ã€ã³ã³ãå¢ããŠãã。
[ã¿ã1 ð±] [ã¿ã2 ð±ð±] [ã¿ã3 ð±ð±ð±]
è£è¶³14: SFã·ã§ãŒãã·ã§ãŒã「ã€ã³ã¯ã«ãŒã・ãã©ããã¯ã¹」
西æŠ2242幎、ãŠã§ãã¯èªå·±çµç¹åããæå³è«ãããã¯ãŒã¯ãžãšé²åããŠãã。HTML15ã¯、ãã¯ã人éãèšè¿°ãããã®ã§ã¯ãªã、æŠå¿µéã®é¢ä¿æ§ã«åºã¥ããŠèªåçæãããæ å ±æ§é äœã ã£ã。
é§ãåºãã®ãŠã§ãã¢ãŒããã¯ã、ã¢ãªã¢ã¯å€ãèšé²――21äžçŽåé ã®「HTMLã€ã³ã¯ã«ãŒãåé¡」ã«é¢ããè°è«ãçºèŠã、倱ç¬ãã。「ãªããŠåå§çãªæ©ã¿! ä»ã®ãŠã§ããªã、å¿ èŠãªã³ã³ããŒãã³ãã¯æèã«å¿ããŠèªåçã«『å®äœå』ããã®ã«」
圌女ã¯å®éšãšããŠ、21äžçŽã®å¶çŽãæš¡å£ãããµã³ãããã¯ã¹ç°å¢ã§、å€å žçãª「ããããŒã€ã³ã¯ã«ãŒã」ãHTML15ã®æŠå¿µãã¬ãŒã ã¯ãŒã¯ã§åçŸããããšãã。ããããŒæŠå¿µããŒããš、ãããåç §ããè€æ°ããŒãžã®æŠå¿µããŒããäœæã、é¢ä¿æ§ãå®çŸ©ãã。
次ã®ç¬é、ã·ãã¥ã¬ãŒã·ã§ã³ç©ºéãæ¿ããæ¯åãå§ãã。ã¢ã©ãŒãã鳎ãé¿ã。「èŠå:ååšè«çãã©ããã¯ã¹æ€ç¥。ã¬ãã«ïŒã«ã¹ã±ãŒã倱æã®å¯èœæ§」
ãããã¯ã«é¥ãã¢ãªã¢。ã¢ãã¿ãŒã«ã¯、ããããŒæŠå¿µã、ãããã€ã³ã¯ã«ãŒãããŠããã¯ãã®ããŒãžæŠå¿µã、ããã«ã€ã³ã¯ã«ãŒãããããšã、ãã®ããŒãžæŠå¿µããŸãããããŒæŠå¿µã…ãšããç¡éã®åç §ã«ãŒããèŠèŠåãããŠãã。
「ãªã? 埪ç°åç §ã¯èªåçã«è§£æ±ºãããã¯ããªã®ã«!」
ããã©ã³ã¢ãŒããã¯ãã®ã«ã€ãé§ãã€ã、ã³ã³ãœãŒã«ãå©ãã。「ã¢ãªã¢、åã¯『ã€ã³ã¯ã«ãŒã』ãšããæŠå¿µãã®ãã®ãã€ã³ã¯ã«ãŒãããããšãããã !」
「ã?」
「HTML15ã§ã¯、ãããããã®ãæå³è«ããŒãã 。åãäœã£ã『ããããŒãã€ã³ã¯ã«ãŒããã』ãšããé¢ä¿æ§å®çŸ©èªäœã、äžåã®ããŒããšããŠååšããŠãã。ãããŠ、ãã®『ã€ã³ã¯ã«ãŒãé¢ä¿ããŒã』ã、誀ã£ãŠèªåèªèº«ãå«ãã«ãŒãæ§é ã圢æããŠããŸã£ããã 。ããã¯å€å žçãªèªå·±èšåãã©ããã¯ã¹…ã©ãã»ã«ã®ãã©ããã¯ã¹ã®ãŠã§ãçã !」
ã«ã€ã®æžåœãªæäœã§、ã·ãã¥ã¬ãŒã·ã§ã³ã¯åŽ©å£å¯žåã§åæ¢ãã。ã¢ãªã¢ã¯å·ãæ±ãæã£ã。
「åçŽãª『ã€ã³ã¯ã«ãŒã』ã、å®å®ã®æ³åãæºããããªã㊅」
ã«ã€ã¯ããæ¯ãã€ãã。「ããã。ã ããæã ã®å ç¥ã¯、ãã€ãã£ããªHTMLã€ã³ã¯ã«ãŒããäœããªãã£ãã®ãããããªã。ããŸãã«ãå±éºãªåã ã£ããã㪅」
圌ãã®èåŸã§、å®å®åãããã·ãã¥ã¬ãŒã·ã§ã³ç©ºéã®çé ã«、å°ããªHTMLãã¡ã€ã«ãäžã€、éãã«çæãããŠãã。ãã¡ã€ã«å㯠`warning.html`。ãã®äžèº«ã¯、ãã äžèš、ããæžãããŠãã。
``
è£è¶³15: æ±æžèœèª「ã€ã³ã¯ã«ãŒãé·å±éšå」
(ãã¥〜、ãããããã…)
å «äºé: ãé å± 、ãé å± ! 倧å€ã§ãã!
ãé å± : ãããã、å «ã£ã€ãã、ãããªã«æ ãŠãŠã©ããããã ã? ãŸãçãããšå§å©ã§ãããã®ãã?
å «äºé: ããã©ãããããããã§ãã! é·å±ã®ããšã§ãã! å€§å®¶ã®æºå µè¡ããã、é æ±ããŠåžã£ãŠããã§。
ãé å± : æºå µè¡ããã? ãã®åå…ãã、å å®ãªå€§å®¶ããã、ãã£ããã©ãããã£ãŠãã ã?
å «äºé: ãããã、é·å±ã®è¡šæã§ããã、衚æ。
ãé å± : 衚æ? ãã、ããªãã æ°ããããã£ãŠèšã£ãŠããª。æšã®æã«èŠäºãªåã§「çäºé」「å «äºé」ã£ãŠæžããŠãã…
å «äºé: ããã§ãã、倧家ãã、èãããã§。「ãã®é·å±ã¯『æ¡é·å±』ã£ãŠèšããã ãã、ã©ã®è¡šæã«ã『æ¡é·å±』ã£ãŠååãå ¥ããã」ã£ãŠ。
ãé å± : ãªãã»ã©、ããã¯çµ±äžæããã£ãŠãããããªãã。
å «äºé: ãšããã、衚æäžæäžæã«『æ¡é·å±』ã£ãŠæžãã®ãé¢åã ã£ãŠèšãåºãããã§ãã。
ãé å± : ãŸã、確ãã«åæ°è»åæžãã®ã¯éªšãæããããª。
å «äºé: ããã§å€§å®¶ãã、åŠãªããšãèãããã£ã。「ããã ! 『æ¡é·å±』ã£ãŠæžããå°ããæãäžã€ã ãäœã£ãŠãããŠ、ä»ã®è¡šæãããã®å°ããæããã…ã·ã¥ããš、éããã¿ããã«èªã¿èŸŒãŸããããããã !」ã£ãŠ。
ãé å± : ã»ã? éããã§èªã¿èŸŒã? ããããŸã、ãã€ã«ã©ãª…ãã、å¥åŠãªããšãèããããã ãª。
å «äºé: ã§ãã? ããã§、倧家ãã、ç¥ãåãã®ã«ã©ã¯ãªåž«ã®ãšããã«é Œã¿ã«è¡ã£ãããããã§ã。「HTML…ãã、ãããã®ã¿ããã・ã¢ããã³ã€・ã«ãŒã«ã£ã¡ã ãã«ã©ã¯ãªã§、æããæãèªã¿èŸŒã仿ããäœã£ãŠãã」ã£ãŠ。
ãé å± : ãããã®ã¿ããã・ã¢ããã³ã€・ã«ãŒã«? ãªãã ãããã。
å «äºé: ãã£ããããåãããããã§ãã、ã«ã©ã¯ãªåž«ã«èšãããããã§。「倧家ãã、ãããç¡çãªçžè«ã 。æããæãèªã¿èŸŒããªããŠ、ãããªéœåã®ããã«ã©ã¯ãªã¯ããã§ãã」ã£ãŠ。
ãé å± : ãããããã ãããª。
å «äºé: ã«ã©ã¯ãªåž«ãèšãã«ã¯、「ãããããªããšããã、èªã¿èŸŒãã æããŸãå¥ã®æãèªã¿èŸŒãã§、ããããåã£ãŠèš³ãåãããªããªã£ã¡ãŸã。ããã«、æªããã奎ã『å¶』ã£ãŠæžããæãèªã¿èŸŒãŸããã、ã¿ããªã®è¡šæã『å¶』ã«ãªã£ã¡ãŸããããããã。å±ãªããŠã§ãããã」ã£ãŠ。
ãé å± : ãªãã»ã©、çå±ã¯éã£ãŠããª。
å «äºé: ããèããŠ、倧家ãã、ã«ã³ã«ã³ã«æã£ã¡ãã£ãŠ。「ãªãã§ã§ããããã ! ä»ã®ã«ã©ã¯ãª、äŸãã°çµµå§¿ãèªã¿èŸŒã『ããããã®è¡』ãšã、å€åœã®æåãèªã¿èŸŒã『ããŒããããã®è¡』ã¯ã§ããããããã! ãªãã§æã ããã¡ãªãã !」ã£ãŠ。
ãé å± : ã¯ã£ã¯ã£ã¯、ããã倧家ãããæåºå°ã«ãªã£ãŠããª。
å «äºé: ã§、çµå±ã©ãã«ããªããªããŠ、ä»、倧家ãã、èªæ£ã«ãªã£ãŠäžæäžæ『æ¡é·å±』ã£ãŠæžããŠããã§ãã、ããå«ã«ãªã£ã¡ãã£ãŠ。「ããã、é¢åã ! ãã®é·å±ã¯ä»æ¥ãã『åç¡ãé·å±』ã !」ãªããŠèšãåºãå§æ«ã§。
ãé å± : ãããããã、ããããå «ã£ã€ãã。ãããã倧家ããã®æ°æã¡ãåããã、åºæ¬ã¯å€§äºã 。æéãæãããããããã。ãŸãã«『Don't Repeat Yourself』…ãã、『åãéã¡ãç¹°ãè¿ããªãã』ã 。é¢åã§ã、äžæäžæå¿ã蟌ããŠæžãã®ãäžçªãªãã ã。
å «äºé: ãé å± ã®èšãéãã§ããããã…
ãé å± : ãŸã、ããã 。倧家ããã«ã¯、ä»åºŠãã£ããã『ãµãŒããŒãµã€ãå°ç± 』…ãã、『å·®ãå ¥ã』ã§ãæã£ãŠè¡ã£ãŠ、æ °ããŠãããšããã。ã¯ã£ã¯ã£ã¯。
è£è¶³16: è±èªåŠç¿è ã®ããã®è±åèªãªã¹ã
æ¬æäžã§(ç¹ã«åŒçšå èšäºãã³ã¡ã³ãã§)䜿ãããè±åèªã®ããã€ããçšäŸ・çºé³èšå·・é¡èªãšå ±ã«ç޹ä»ããŸã。
-
include (verb)
- Meaning: å«ãã、çµã¿èŸŒã (to contain something as part of something else)
- Example: "We need to include the header in all three pages."
- Pronunciation: /ɪnËkluËd/
- Synonyms: incorporate, contain, comprise, embed
-
directive (noun)
- Meaning: æä»€、æç€º (an official instruction)
- Example: "The server uses a special directive to include the file."
- Pronunciation: /dɪËrektɪv/, /daɪËrektɪv/
- Synonyms: instruction, command, order, mandate
-
fetch (verb)
- Meaning: (ããŒã¿ãªã©ã)åã£ãŠãã、ååŸãã (to go and get something)
- Example: "JavaScript has to fetch the HTML and insert it."
- Pronunciation: /fetÊ/
- Synonyms: retrieve, get, obtain, acquire
-
insert (verb)
- Meaning: æ¿å ¥ãã、å·®ã蟌ã (to put something inside or into something else)
- Example: "Fetch the HTML and insert it here."
- Pronunciation: /ɪnËsÉËt/
- Synonyms: put in, embed, incorporate, inject
-
pave the cowpaths (idiom)
- Meaning: æ¢åã®æ £ç¿ããŠãŒã¶ãŒã®è¡åã远èª・æŽåãã (to formalize or build infrastructure based on existing informal practices or user behavior)
- Example: "Web standards often aim to pave the cowpaths by providing solutions for what developers are already doing."
- Pronunciation: /peɪv Ã°É ËkaÊpÊΞs/
- Synonyms: formalize existing practices, follow user behavior
-
preload scanner (noun phrase)
- Meaning: ããªããŒãã¹ãã£ã (a browser optimization mechanism that looks ahead in the HTML to find resources to download early)
- Example: "Could native HTML includes break the preload scanner?"
- Pronunciation: /ËpriËlÉÊd ËskÊnÉr/
- Synonyms: lookahead parser, early resource loader
-
asynchronous (adjective)
- Meaning: éåæã® (not happening or done at the same time or speed)
- Example: "Loading the includes asynchronously might cause layout shifts."
- Pronunciation: /ËeɪËsɪÅkrÉnÉs/
- Synonyms: non-synchronous, concurrent (in some contexts)
- Antonym: synchronous (/ËsɪÅkrÉnÉs/)
-
recursion (noun)
- Meaning: ååž° (the process of repeating items in a self-similar way; in programming, when a function calls itself)
- Example: "Handling nested or circular includes involves dealing with recursion."
- Pronunciation: /rɪËkÉËrÊn/
- Synonyms: self-reference (in concept)
-
obsolete (adjective)
- Meaning: å»ãã、æä»£é ãã® (no longer produced or used; out of date)
- Example: "The HTML Imports specification is now obsolete."
- Pronunciation: /ËÉbsÉliËt/
- Synonyms: outdated, archaic, defunct, superseded
-
transclusion (noun)
- Meaning: ãã©ã³ã¹ã¯ã«ãŒãžã§ã³ (the inclusion of part or all of an electronic document into one or more other documents by hypertext reference)
- Example: "The feature requested is essentially client-side transclusion for HTML."
- Pronunciation: /trÊnzËkluËÊÉn/
- Synonyms: embedding (by reference), inclusion
ã³ã¡ã³ã
ã³ã¡ã³ããæçš¿