ハイパーメディア・システムへの回帰：JavaScriptをHTMLに置き換える

現代のウェブ開発の状況は、ブラウザをドキュメントビューアではなくアプリケーションのランタイムとして扱う複雑なクライアントサイド・フレームワークによって支配されています。しかし、ハイパーメディア・システムというウェブの本来の意図に立ち返ることを提唱する動きが広がっています。JavaScriptよりもHTMLを優先することで、開発者は複雑さを軽減し、初期ロード時間を改善し、数十年にわたりウェブをスケーラブルにしてきたアーキテクチャ・パターンに合わせることができます。

HTMLファースト開発の意義

その核心において、ウェブはハイパーメディア・システムです。重いJavaScriptバンドルから離れ、サーバーサイド・レンダリング（SSR）とネイティブなHTML遷移に立ち返ることで、現代のSPA（Single Page Applications）の喧騒の中で失われがちな「驚異的に速い」パフォーマンスとシンプルさを再発見することができます。

コミュニティメンバーが指摘するように、Goのようなバックエンドを使用してプリレンダリングされたHTMLを提供することで、ブラウザが最も得意とする「ドキュメントの解析とレンダリング」を行うことができます。このアプローチは、サーバーが単一の真実のソース（single source of truth）であり続けるため、クライアントとサーバー間の複雑な状態同期の必要性を排除します。

シンプルさとパフォーマンスのバランス

HTMLファースト開発への移行は魅力的ですが、トレードオフがないわけではありません。主な対立点は、サーバー駆動型アプローチのシンプルさと、クライアントサイドのインタラクティビティによる最適化されたユーザー体験との間にあります。

ネットワーク・ラウンドトリップの問題

HTMLファースト・アプローチに対する主な批判の一つは、ネットワーク・リクエストへの依存度が高まることです。従来のSPAでは、少量のJavaScriptを使用して、サーバーにアクセスすることなくローカルの状態変数を更新し、UI要素のサイズや表示/非表示を切り替えることができます。厳格なHTML駆動型モデルでは、ビューの状態を変更するために、フルページのリロード、またはサーバーからのフラグメント更新が必要になる場合があります。

ある開発者が指摘したように：

"With the change, I now need another roundtrip network request to get new sizes of the same content on the current page that would have been able to be done in just a couple hundred bytes of JavaScript."

代替的な中間策

これらの問題を軽減するために、ブラウザ・プラットフォームは進化しています。開発者は、HTMLのシンプルさを維持しつつ、JS駆動型アプリの流動性を提供するハイブリッド・アプローチを探索しています。これらには以下が含まれます：

  • CSS Variables: レイアウトやサイズを制御するCSS変数を切り替えるためだけにJavaScriptを使用し、関心の分離をクリーンに保ちながら、完全なサーバー・ラウンドトリップを回避します。
  • Web Components: 重いフレームワークを必要とせずに、振る舞いをカプセル化するためにネイティブなブラウザ・コンポーネントを活用します。
  • View Transitions API: CSS遷移とView Transitions APIの使用は、そのギャップを埋めるのに役立ち、サーバーサイドのナビゲーションをクライアントサイドの遷移と同じようにシームレスに感じさせることができます。ただし、ブラウザのサポート（特にFirefox）は依然として制限要因となっています。

ハイパーメディア・システムの未来

ウェブ・プラットフォームは、より堅牢なハイパーメディア・システムになるために進化しています。単純なHTMLを超えて、汎用的なトランスクルージョン（transclusion）やその他のアーキテクチャの改善に関する提案が開発されており、ウェブが「JS-everything」パラダイムに依存することなく、より表現力豊かになることを可能にします。

最終的に、目標はJavaScriptを完全に排除することではなく、適切な仕事に適切なツールを見つけることです。HTMLをアプリケーションの状態の主要なドライバーとして扱い、JavaScriptをプログレッシブ・エンハンスメントとして使用することで、開発者は、よりアクセシブルで、回復力があり、大幅にメンテナンスが容易なアプリケーションを作成することができます。

Sources