「HTML ファースト・ウェブ開発」に関する論文の技術的サマリー

Juho Vepsäläinen 氏（アールト大学）による論文「The Case for HTML First Web Development」は、現代のウェブ開発において過度に JavaScript フレームワークに依存する傾向に対し、**「HTML ファースト」**というアプローチの重要性を再評価し、その技術的利点を論理的・実証的に示したものです。

以下に、問題定義、手法、主要な貢献、結果、および意義について詳細にまとめます。

---

1. 問題定義 (Problem)

現代のウェブ開発は、2000 年代半ば以降の「Web 2.0」や「シングルページアプリケーション（SPA）」の台頭により、複雑な UI を構築するために JavaScript フレームワーク（React, Vue, Next.js など）への依存が極端に進みました。これにより以下の問題が発生しています。

• HTML の軽視と機能の未活用: 開発者が HTML の持つ強力な標準機能（フォームバリデーション、ダイアログ、セマンティック要素など）を無視し、JavaScript で再実装している。
• 「Div スープ」の蔓延: セマンティクスを失った <div> の入れ子構造が増え、アクセシビリティやパフォーマンスが低下している。
• 複雑化とメンテナンスコスト: 構築ステップ（ビルドプロセス）の必要性、クライアントサイドの状態管理の複雑さ、そしてフレームワークのバージョンアップに伴う依存関係の管理コストが増大している。
• プラットフォームの進化とのミスマッチ: 近年の HTML5 や Living Standard の進化により、ブラウザ自体が多くの複雑な UI 機能を実装できるようになったにもかかわらず、開発者は古いアプローチに固執している。

2. 研究方法 (Methodology)

本論文は、定性的な議論と定量的なベンチマークを組み合わせた混合研究手法を採用しています。

• 文献調査と概念分析:
  • 「HTML ファースト・マニフェスト（2023）」や「プログレッシブ・コンプレキシティ・マニフェスト（2025）」などの思想を分析。
  • HTML の標準化の歴史（XHTML2 と HTML5 の対立、Living Standard への移行）を振り返り、なぜ HTML が軽視されたかの背景を解明。
• ケーススタディの収集:
  • htmx プロジェクトの事例（React や Next.js からの移行事例）を収集し、コード量削減や開発速度への影響を分析。
• ホロタイプ（Web アプリケーションの分類）に基づく比較ベンチマーク:
  • コンテンツ系、ニュース系、EC サイトなどの異なるカテゴリにおいて、「HTML 重視サイト」と「JavaScript 多量サイト」をペアで比較。
  • 測定ツール: Google PageSpeed Insights、Puppeteer（JS リクエスト数とサイズ計測）。
  • 対象サイト: Learn Rust vs Next.js Docs, Hacker News vs The Verge, Kirby CMS vs Shopify など。
• 実機リファクタリング実験（Yle 事例）:
  • フィンランド放送協会（Yle）のランディングページをスナップショット取得し、JavaScript（特に CSS-in-JS）を除去し、HTML ファースト原則（静的 CSS、最小限の JS）に書き換えたバージョンを作成。
  • 測定ツール: Google Lighthouse（パフォーマンス、アクセシビリティ、SEO などのスコア比較）。

3. 主要な貢献と技術的提言 (Key Contributions)

A. HTML ファースト開発の原則の具体化

論文は、単に「HTML を使おう」というスローガンを、具体的な技術的指針として定義しています。

1. 最小権限の原則: HTML → CSS → JavaScript の順で、より単純な技術から選択する。
2. ビルドステップの排除: 可能な限りビルドツールを不要にし、ブラウザで直接動作するコードを書く。
3. クライアントサイド状態の最小化: 状態管理をサーバーサイドへ移行し、クライアントの複雑さを減らす。
4. View-Source の affordance（ affordance: 利用者が何ができるかを示唆する性質）の維持: コンパイル前のコードがブラウザで直接確認でき、デバッグが容易な状態を維持する。
5. 軽量ライブラリの活用: 必要であれば、Alpine.js（状態管理）や htmx（サーバーとの通信と HTML スワップ）のような、HTML のセマンティクスを拡張する軽量ライブラリ（10-20KB 程度）を使用する。

B. HTML だけで実現可能な UI パパターンの提示

現代の HTML 標準だけで実装可能な機能の具体例を示しました。

• 折りたたみコンテナ: <details> と <summary> タグ。
• フォームバリデーション: autocomplete 属性や HTML 標準の検証機能。
• ダイアログ/ポップオーバー: <dialog> 要素や関連 API。
• カスタム属性による拡張: 属性ベースのディレクティブ（例: hx-post）を用いた宣言的なロジック記述。

C. 技術的エビデンスの提示

理論的な主張だけでなく、実データに基づいた性能向上と保守性の向上を示しました。

4. 結果 (Results)

ケーススタディ（htmx 事例）

• コード量の劇的削減: React から htmx へ移行した SaaS プロダクトでは、コードベースが67% 削減され、JavaScript 依存関係が96% 削減されました。
• ビルド時間の短縮: ビルド時間が 40 秒から 5 秒へ（88% 削減）。
• パフォーマンス向上: 初回読み込み時間（TTI）が半減し、メモリ使用量が約半分になりました。
• 例外: Gumroad のような高度なインタラクションを必要とする SaaS では、htmx への移行は不適切であり、既存のフレームワークの方が適しているケースも存在することが示されました。

ホロタイプ比較ベンチマーク

• パフォーマンス: HTML 重視サイト（例：Learn Rust, Hacker News）は、JavaScript 多量サイト（例：Next.js Docs, The Verge）に比べて、PageSpeed のパフォーマンススコアが著しく高い傾向にあります。
• JS 量: HTML 重視サイトは JS ファイルサイズが極めて小さく（例：10.2KB）、リクエスト数も少ないのに対し、JS 多量サイトは数 MB に達する場合があります。
• アクセシビリティ: Hacker News は HTML 重視ですが、アクセシビリティスコアが低く、HTML 重視であってもベストプラクティス（セマンティックなマークアップ）の遵守が重要であることを示唆しました。

Yle 网站リファクタリング実験

• Lighthouse スコアの向上:
  • パフォーマンス：58 → 90
  • アクセシビリティ：91 → 95
  • ベストプラクティス：57 → 75
• メトリクスの改善:
  • FCP (First Contentful Paint): 4.4s → 2.0s
  • LCP (Largest Contentful Paint): 10.2s → 3.4s
  • TBT (Total Blocking Time): 310ms → 0ms
• 要因: JavaScript による CSS 処理の排除と、ペイロードの削減が主な要因でした。

5. 意義と結論 (Significance & Conclusion)

技術的意義

• フレームワーク依存症（Frameworkitis）への対抗: 過度な抽象化を避け、ウェブプラットフォームそのものの能力を最大限に活用することで、開発の複雑さを根本から減らすアプローチを提唱しています。
• 保守性と可読性の向上: 「行動の局所性（Locality of Behavior）」を促進し、関連するコードを HTML 属性内で完結させることで、コードの発見可能性と理解性を高めます。
• 将来への耐性: 標準化された HTML 機能は長期的に安定しており、フレームワークの流行廃りに左右されにくい堅牢なシステム構築を可能にします。

社会的・将来的意義

• AI との親和性: 生成 AI や AI エージェントがウェブページを解析・操作する際、クリーンで構造化された HTML は極めて重要です。HTML ファーストは AI 時代におけるウェブの基盤として適しています。
• アクセシビリティの向上: セマンティックな HTML を重視することは、法的要件（EU アクセシビリティ法など）を満たすだけでなく、すべてのユーザーにとっての基盤となります。

今後の課題

• 複雑なインタラクションが必要なアプリケーション（没入型アプリなど）における HTML ファーストの適用限界。
• AI を用いた HTML ファーストへのリファクタリング支援の可能性。
• 開発者が最新の HTML 機能をどの程度理解しているかという知識格差の解消。

まとめ

本論文は、現代のウェブ開発が「JavaScript 中心」から「HTML 中心」へパラダイムシフトする必要性を、過去の失敗の教訓、最新の標準機能の進化、そして実証的なパフォーマンスデータに基づいて強く説いています。HTML ファーストは単なるレトロな回帰ではなく、**「プログレッシブ・コンプレキシティ（漸増的な複雑さ）」**を考慮した、より効率的で保守性が高く、未来の AI 時代にも耐えうる現代的な開発手法として位置づけられています。