最新のWebサイトである「モダンWeb」では、以前のWebサイトよりも高度な技術が使われています。本特集では今どきのフロントエンド技術を活用したWebサイトの機能や仕組みを解説します。
（これまでのあらすじ）入社5年目のWeb開発エンジニアである青木進一は、上司である丸山課長の勧めで、モダンWebを解説するセミナーを受講することになった。
川本講師：ここまでモダンWebの概要について解説しました。これまで不可能だったことが多く含まれていたので、理屈は理解できるものの、本当に動作するのか半信半疑だと思います。そこで、公開されているWebサイトを使い、これまで紹介した機能のデモを行います。青木さん自身の目で確認して、理解を深めてください。何か希望はありますか？
青木：誰でも知っているモダンWebを導入済みのサイトを知りたいです。この研修の後、社内のエンジニアにモダンWebを紹介するときに、「モダンWeb？それって何？」と聞かれたときに、「コレです」と説明するためです。
川本講師：Google検索のサイトはいかがですか？バックグラウンド通信と分割ダウンロードを組み合わせた無限スクロール機能を使っています。大量の検索結果をページを切り替えることなく、通信待ちなしでスムーズにスクロールできます。
青木：Google検索なら、誰でも使っているのでモダンWebを知らない人に説明するのにピッタリです。しかし、Google検索に無限スクロール機能が使われているようには見えません。どの画面で使われているのでしょうか？
川本講師：青木さんが指摘するように、Google検索（検索対象「すべて」）には、無限スクロール機能はありません。1ページ分の検索結果が表示され、続きを見たいときはページ送りの操作が必要です。しかし、Google検索（検索対象「画像」）は、検索結果の無限スクロールが可能になります。それでは、やってみましょう。ここでは、Google Chromeを使って説明します。このデモは青木さんのPCでも確認できます。
（1）PCでWebブラウザを開き、検索キーワードに「東京タワー」と入力してGoogle検索（検索対象「すべて」）を行います（図2-1）。東京タワーに関する検索結果が、見慣れたレイアウトで表示されます＊1。
（2）下方向にスクロールすると、ページ末尾にページ送りのリンクが表示されます（図2-2）。検索結果の続きを見るためにはページ送りの操作が必要です。
（3）Google検索結果の画面から［画像］メニューを選択します（図2-3）。今度は、東京タワーの画像のGoogle検索（検索対象「画像」）結果が表示されます。このページは無限スクロールになっています。マウスのホイールで下方向にスクロールすると、通信待ちを感じることなく、大量の画像をスムーズに表示できます。
（4）ある程度スクロールが進むとスクロールは一時停止しますが、［結果をもっと表示］ボタンをクリックすると、無限スクロールが継続されます（図2-4）。
ここまでが、Google検索（検索対象「画像」）を例にした無限スクロール機能（バックグラウンド通信＋分割ダウンロード）のデモです。ページ送りが不要なので、大量の写真の中から自分のイメージに合ったものを目視で探す場合に、とても楽に探せます。いかがですか？
青木：「無限スクロール機能」については、半信半疑でしたが、使ってみると便利で、動きもスムーズです。バックグラウンド通信で分割ダウンロードをしているのは、見かけ上はわかりません。まるで、表計算ソフトのExcelで、大量のデータをスクロールして見ているようです。「バックグラウンド通信がユーザー操作に影響しないか？」「スクロールの動作がぎこちなくないか？」といった心配も、実際の動作を見て解消しました。
川本講師：このデモは社内のエンジニアさん達に、モダンWebの事例として使えそうですか？
青木：もちろん、身近な事例として使えます。また、Google検索（検索対象「すべて」）がページ送り、Google検索（検索対象「画像」）が無限スクロールなので、従来型とモダンWebの比較説明にも使えます。この便利さを知ると、もうページ送りを使う気になりません。社内のエンジニアに紹介するのが楽しみです。
無限スクロールのデメリット
無限スクロールは、ページ送り方式より優れています。大きなデメリットは見当たりません。それでもGoogle検索（検索対象「すべて」）でページ送り方式が採用されているのはビジネス上の理由と思われます。また、インターネット検索すると、「無限スクロールのデメリットとして、フッターを表示できない」などの記事が見つかります。これは従来の画面デザインをそのまま踏襲できないという意味です。画面デザインを無限スクロールに最適化する前提であれば、問題ありません。
