TOP ＞ Software ＞ リアクティブJavaScript：フロントエンドアーキテクチ...
関連カテゴリー： Network
現在のソフトウエア開発界の中でも、フロントエンドアーキテクチャーは特に動きが活発だ。先駆者たちの革新的な取り組みを通じて、動的なユーザーインタフェースを構築するための強力な手段が次々と編み出され、その成果が世に送り出されている。
Webの進化を最前線で目撃できるのは、SvelteKitやSolid、React、Qwik、Astroなど、JavaScript関連のさまざまなオープンソースプロジェクトのおかげだ。現在の動きの概略を見ていこう。
ハイドレーションとは
Credit: drmakete lab
フロントエンドアーキテクチャーを進化させる取り組みの中で現在スポットが当たっているのがハイドレーションだ。その意味や、モダンなフロントエンドアーキテクチャーにおけるハイドレーションの重要性を理解するには、まずはリアクティビティの全体像を押さえておく必要がある。
リアクティビティを実現するためにフレームワークが扱わなくてはならない要素は3つある。「フレーム／ビュー（表示）」「ビヘイビア（振る舞い）」「ステート（状態）」だ。フレーム／ビューはHTMLやCSS、ビヘイビアはJavaScript、ステートはデータに相当する。
これらに対してフレームワークが果たす役割は、ビューの枠組みを配置すること、ステートを保持すること、ビューとステートとの連携を管理することである。MVCパターンをご存じであれば、似たような話を聞いたことがあると思う。
この3つの要素がそろえば、ユーザーに向けてページをきちんと表示し、インタラクティブに操作してもらうことができる。
基本的で素直な手法を用いるとしたら、クライアント（Webブラウザー）が必要とする要素一式、すなわちフレームとリアクティブなコード、ステートを、サーバーから単純に送る。これを受けてクライアントは、枠組みの表示（つまりUIの描画）とJavaScriptの解釈、ステートの関連付けを行う。
この手法の単純さは大きなメリットだ。コードの動作がシンプルになり、そのコードを読む人間にも理解しやすい。一方で、最初にページを描画するときに、一連の処理がすべて終わるのを待たなくてはならない点が大きなデメリットだ。ネットワークやブラウザーが一生懸命に処理をこなしている間、ユーザーは待つしかない。また、何らかの配慮をしない限り、表示したページが最終的なレイアウトとして整うまでの流れがスムーズでないことが多く、見栄えがあまりよくない。
そこで、最初のページをサーバー側でまずレンダリングし（SSR：サーバーサイドレンダリング）、その結果をクライアントに送る手法が取り入れられるようになった。こうして、ある程度の外観を持つページをユーザーにいち早く見せ、その裏で残りのコードとステートの送信や動作に対応できる。かなり単純化した説明だが、これが基本的な背景となる考え方だ。
ページを表示する際に、最初の基本的なレイアウトが表示されるまでの時間をFCP（First Contentful Paint）という。また、ユーザーが実際にページを操作できるようになるまでの時間をTTI（Time to Interactive）という。
そしてハイドレーションとは、最初に送ったページにインタラクティブ性を加えることを表す。
からの記事と詳細 ( リアクティブJavaScript：フロントエンドアーキテクチャーの進化（上） - リアクティブJavaScript：フロントエンドアーキテクチャーの進...：Computerworld - Nikkei Business Publications )
https://ift.tt/3pEBV6M
科学＆テクノロジー
No comments:
Post a Comment