【海外記事紹介】HTMLは死んだ — 問題だらけのWeb技術をどう未来につなげるか

8月6日、acko.netが「HTML is Dead, Long Live HTML」と題した記事を公開し、話題を呼んでいる。この記事では、HTMLとDOMの現在の構造的問題点を検証し、現代的なUI開発との乖離、そして将来に向けた再構築の必要性について詳しく紹介されている。

以下に、その内容を紹介する。

DOMとHTMLの現状：終焉と限界

記事は、Web開発の現場において、HTMLやDOMが肥大化し、今や誰も全容を把握できないほど複雑化しているという問題意識から始まる。

たとえば、Chromeにおけるdocument.bodyには350以上のプロパティが存在し、document.body.styleには660個を超えるCSSプロパティが定義されている。セマンティックHTMLも目標を果たせておらず、アクセシビリティ対応としてはARIAに頼る現状だ。

また、<thread>や<comment>といったタグが存在せず、記事構造を正確に表現する手段は今も曖昧である。HTMLは「ドキュメント指向」の思想を捨てきれず、UI志向のアプリケーション構築には不向きな構造を抱えたまま放置されている。

レイアウト面でも問題は深刻だ。CSSは原則として「内から外」へ伸びるinside-outモデルで設計されており、アプリケーションのような「外から内」への構造的制約を必要とするレイアウトには適さない。

<div>
  <div style="height: 50%">...</div>
  <div style="height: 50%">...</div>
</div>

上記のようなコードは、一見して親要素を縦に2分割しているように見えるが、実際には親の高さが未定義なため機能しない。

このギャップを埋める手段として、FlexboxやCSS Gridが登場したが、それらは結果としてCSSのレイアウトモデルをより複雑にし、二重計算や推測的レイアウトによる性能問題を引き起こしている。

FlexboxやCSS Gridは柔軟なレイアウトを可能にするが、内部的にはレイアウトを二度行う必要があり、予期せぬパフォーマンス問題やレイアウト崩壊が起こる。

このため、以下のようなプリミティブが必要になる：

これらは「DOM全体への拘束」から解放する技術であり、CSSが本来持っていない階層分離の必要性を示している。

SVGはDOMに統合されているが、CSSとの連携には多くの不整合がある。transformの扱いやイベントのヒットテストなど、機能が重複しつつも異なっている。たとえば、CSSはポリゴンのヒットテストができない。

現行のHTMLは、長年にわたる後方互換性維持の結果、無数の過去の遺産を抱えている。こうした遺物を一掃し、ドラスティックな刷新を行った「HTML6」があっても良いかもしれない。

とはいえ現実的に、現状を打破する手段として提案されているのが、「HTML in Canvas」プロジェクトである。これは、DOMのビジュアル表現をcanvasに描画することで、見た目とロジックを切り離し、自由度の高いUI表現を可能にするというものだ。

しかし、この手法もDOMとの連携やアクセシビリティ、レイアウト管理の問題を引きずっており、完全な解決策とは言えない。

筆者は、再構築の方向性として「Use.GPU」というプロジェクトを紹介している。これは、HTMLやCSSを模倣しつつも、DOMやスタイル継承の複雑さを排除したGPUベースのUIフレームワークである。

Use.GPUでは、以下のような特徴がある：

つまり、「DOMを再発明する」というアイデアをすでに形にしている軽量な実装例といえる。

記事タイトル「HTML is Dead, Long Live HTML」は、単なる皮肉ではなく、「現在のHTMLは限界を迎えたが、その理念を引き継いで再創造するべき時が来ている」という宣言である。

筆者は、ブラウザエンジンが進化し、Web開発者のニーズが大きく変化した今こそ、HTMLの本質を問い直し、「文書のためのHTML」から「アプリケーションのためのHTML」へと構造を再定義すべきだと訴えている。

とりあえず、まずはノードごとに 350 を超えるプロパティを持たないデータモデルである必要がある。「これはもはや解決不可能だ」と思わないこと、これが出発点だ。

詳細はHTML is Dead, Long Live HTMLを参照していただきたい。