イライラする通信待ちなし、モダンWebをサンプルで体験する

末次章

2022.01.12

全3753文字

最新のWebサイトである「モダンWeb」では、以前のWebサイトよりも高度な技術が使われています。本特集では今どきのフロントエンド技術を活用したWebサイトの機能や仕組みを解説します。

（これまでのあらすじ）入社5年目のWeb開発エンジニアである青木進一は、上司である丸山課長の勧めで、モダンWebを解説するオンラインセミナーを受講することになった。

川本講師：企画職や管理職向けのセミナーでは、モダンWebの概要を説明した後、デモを始めるのですが、青木さんはWeb開発が仕事ですので、デモを見たときに、その内部構造を理解できる必要があります。そのため、デモの前にモダンWebにおけるフロントエンドの仕組みについて、もう少し解説を続けます。まず、フロントエンドが動作するまでの流れは、3ステップで行われます。

STEP1（事前準備）
　このステップでは、フロントエンド向けアプリケーションフレームワークを使って実行するJavaScriptプログラムを作成します。通常、複数のJavaScriptファイルを結合したモジュールとして準備します。それと同時に、<script>タグにJavaScriptモジュールを呼び出す記述をしたHTML（通常はindex.html）を準備して（図1-5）、モジュールと共にWebサーバーへアップロードします。

図1-5 index.htmlの例（module01.jsを呼び出し）

[画像のクリックで拡大表示]

STEP2（JavaScriptモジュールの起動）
　このステップでは、前ステップで作成したindex.htmlを使ってJavaScriptモジュールをフロントエンドへロードして起動します（図1-6）。

図1-6 JavaScriptモジュールが起動するまで

[画像のクリックで拡大表示]

（1）URL入力
　URL入力モダンWebでも従来型Webのスタートと同じです。ユーザーは、スタートページのHTMLのURLをWebブラウザーへ入力します。
（2）リクエスト送信
　フロントエンドはバックエンドへ、HTMLデータのリクエストを送信します。
（3）レスポンス受信
　バックエンドはフロントエンドへ、HTMLデータのレスポンスを返します。　フロントエンドは、HTMLを受信します。
（4）HTMLの分析
　受信したHTMLに記述された<script>ダグを読み取り、必要なJavaScriptモジュールを特定します。
（5）リクエスト送信
　フロントエンドはバックエンドへ、必要なJavaScriptモジュールのリクエストを送信します。
（6）レスポンス受信
　バックエンドはフロントエンドへ、JavaScriptモジュールのレスポンスを返します。フロントエンドは、JavaScriptモジュールを受信します。
（7）モジュール起動
　フロントエンドは、受信したJavaScriptモジュールを起動してスタートページ表示に必要なデータを生成します。
（8）スタートページ表示
　フロントエンドで生成されたデータを表示します。

STEP3（アプリの実行）
　このステップはJavaScriptモジュール起動後、ブラウザーを閉じるまで継続されます。ユーザーの操作をフロントエンドのJavaScriptモジュールが受け取り、データ処理とページ表示に必要なデータの生成を行い、表示します。また、JavaScriptモジュールはバックエンドと必要なときに通信します。全く通信しないこともあります。