TOPSoftware > リアクティブJavaScript:フロントエンドアーキテクチ...

Software

リアクティブJavaScript:フロントエンドアーキテクチャーの進化(中)

2022/06/22

Matthew Tyson InfoWorld

 現在のソフトウエア開発界の中でも、フロントエンドアーキテクチャーは特に動きが活発だ。先駆者たちの革新的な取り組みを通じて、動的なユーザーインタフェースを構築するための強力な手段が次々と編み出され、その成果が世に送り出されている。

前回から続く)

ハイドレーションの改良に向けたアプローチ

Credit: IDG
Credit: IDG

 ハイドレーションの手法の改良にあたっては、物事をきめ細かく検討していくやり方が基本だ。ビュー、ビヘイビア、ステートのそれぞれを細分化することで、読み込みや動作の段階的な処理を実現し、FCPやTTIが向上するように最適化できる。主な手法を見ていく。

JavaScriptの完全な回避

 ベストプラクティスに取り入れられているアプローチの1つでは、サイトの中でJavaScriptを必要としないページを解析によって探り出す。これは最近のMPA(マルチページアプリケーション)の概念に関連し、SPA(シングルページアプリケーション)と、ページ単位での単純なナビゲーション(基本的なWebの動作)との、いわば中間にあたる。基本的な考え方としては、アプリケーションの各部分のうちで、HTML+アセットとして直ちに送り出せるものを見つけ出す。この結果、SEO(検索エンジン最適化)や読み込み速度を最適化できる。

 JavaScriptなしのこうしたアプローチは、例えばSvelteKitで見られる。リアクティブな連携を必要とするページに関しては当然何もしない。SPAとして動作するページのハイドレーションは引き続きフレームワークで対処する必要がある。

↑ページ先頭へ