最新のWebサイトである「モダンWeb」では、以前のWebサイトよりも高度な技術が使われています。本特集では今どきのフロントエンド技術を活用したWebサイトの機能や仕組みを解説します。
（これまでのあらすじ）入社5年目のWeb開発エンジニアである青木進一は、上司である丸山課長の勧めで、モダンWebを解説するセミナーを受講することになった。
青木：気になることがあります。複利計算アプリではJavaScriptモジュールが起動後、バックエンドとの通信はありませんでした。このケースで通信待ちが発生しないのはわかります。しかし、データベース検索などではバックエンドとデータ交換が必要なことがあります。この場合は、通信待ちが発生して従来型Webに逆戻りです。どうするのですか？
川本講師：青木さんが指摘するとおり、モダンWebであっても、バックエンドと連携するケースでは通信待ちが発生します。この事実は変えようがありません。しかし、通信をしてもユーザーに待ちを感じさせない方法ならあります。
青木：そんなことが可能なのですか。
川本講師：従来型Webでは、ユーザーが送信ボタンをクリックしてから、通信を開始し、受信結果を画面に表示していました。この方法では、ユーザーが操作しないと通信が開始しないし、通信が完了しないと表示できません。それぞれの処理は、前の処理に依存しているので順序の変更ができず、通信中は画面がロックされ操作できません。これでは、どう頑張ってもユーザーから見て、通信待ちが発生します。
青木：その通りです。
川本講師：一方、モダンWebでは、ユーザー操作に関係なく、任意のタイミングでJavaScriptモジュールが通信可能です。さらに、通信はバックグラウンドで行われるため、たとえ操作中であっても、画面はロックされず、ユーザーは通信していることを意識しません。
青木：また、マジックですね。従来型Webでは通信中は画面がロックしてユーザー操作できなかったのが、モダンWebではユーザーが気づかないうちに通信可能ということですか？
川本講師：その通りです。この特性を活かして、「通信をしてもユーザーに待ちを感じさせない」動作を行います。
青木：具体的には、どうするのですか？
川本講師：基本は、表示に必要なデータをバックエンドから事前に取得しておいて、ユーザーが操作したときは、取得済のデータを使って瞬時に表示するという考え方です。こうすれば、「通信しても待ちを感じさせない」ことができます。種明かしをすれば当たり前のことです。
青木：確かに当たり前ですが、まだイメージがつかめません。もう少し、説明してもらえますか。
川本講師：基本パターンは、「起動時ダウンロード」です。JavaScriptモジュールの起動時にアプリ全体で必要なデータをバックエンドからダウンロードしてWebストレージに保存します（図1-15：（1）～（4）の処理）。ユーザーが検索ボタンをクリックしたときは、既にデータがフロントエンド内に保存されているので、瞬時に画面表示が行われます（図1-15：（5）～（8）の処理）。
青木：でも、ダウンロードのサイズが大きいと起動時に待たされませんか？
川本講師：ダウンロードデータをWebストレージに保存すれば、2回目以降で起動待ちは発生しません。そのため、実運用上は問題にならないことが多いです。しかし、初回起動時の待ち時間も短縮したい場合は、「遅延ダウンロード」という方法があります。起動時は最小限のダウンロードをして、残りはスタート画面表示後、ユーザーの操作中にバックグラウンド通信でデータを取得します。
