データの先読みキャッシュ

コンピュータ用語でのキャッシュ(cache)という言葉には色々な意味がありますが、 ここで行うデータの先読みキャッシュとは、今後の利用の為に前もってデータを準備しておく機能となります。 データをあらかじめ読み込んでおく事で、実際にそのデータが要求された時に待ち時間無く利用出来るようにする為に使われます。

即時には利用されない、あるいはそもそも実際には一度も利用される事も無いかもしれないデータを、 今後アクセスされる可能性が高いと考え、前もってサーバーから取得するというのは、 必要なタイミングで必要なデータだけを取得するような実装と比較した場合に、 データ転送量やサーバー側負荷という点に関して劣るケースが多くなります。

そのようなデメリットがあるにも拘わらずAjaxによる先読みを行うのは、ユーザーの操作レスポンスを向上させる為という事に尽きます。

---

キャッシュでは、関連するデータを手当たり次第に先読みするのでは無く、 要求されたデータと関連性や連続性の高いデータに限って読み込む事が、支払うコストと得られる効果のバランスという点で重要となります。

例えば数ページ構成のWebページにおいて、ユーザーがあるページを読んだ場合には、その次のページにもアクセスするだろうと考えられますが、 最初に表示される1ページ目の段階では、ユーザーがコンテンツを読まずにページを閉じてしまう可能性を考えますと、次ページをキャッシュするか否かの判断は難しいと言えます。 そこで、1ページ目には先読みを行わず、2ページ目以降の表示時には次ページのデータの先読みをするなどの実装を行います。

さらに効率的なキャッシュを考えるなら、ある程度の期間のアクセス解析を元に、 あるページにアクセスしたユーザーが次のページにもアクセスする割合を取得し、 それに従い次のページをキャッシュするか否かを決定します。

---

先読みキャッシュの利用形態としては、上記の例のようなページ単位でのキャッシュや、 カレンダーを利用したスケジュール管理での数日分のデータの読み込みや、 ニュースのヘッドラインと詳細項目へのリンクの取得などに利用されます。

また、多数の画像が置かれるイメージギャラリーのようなページにおいては、画像ファイル名のデータはAjaxで先読み(あるいは静的なデータとして保持)し、 画像ファイル自体はブラウザのキャッシュ機能を利用して先読みするような形態も多く使われています。 これにより、現在表示中の画像の次の画像を先読みしておく事で、 読み込みに数秒要するような数百KBの画像でも、瞬時に切り替える事が可能となります。

Ajaxによるシンプルなデータ取得

まずここでは先読みではなく、要求されたデータだけを取得するような、シンプルなAjaxによるデータ更新を行います。

ページ自体の読み込み時に対象となるデータを全て読み込むのでは無く、わざわざAjaxを利用するのは、

• リアルタイム性の高いデータであり頻繁に更新する価値がある。
• データサイズが大きい為、初期時に全て読み込みを行うのでは待ち時間やコストが高すぎる。

などの理由があります。

---

この例では、サーバー側にリクエストを送信し、そのレスポンス(返答)のデータを表示するだけの処理となります。 このような実装は指定項目の情報を更新するなどに利用されます。

Ajax Requestをクリックする事で、サーバーに対しAjaxリクエストを送信し、 サーバー側でのリクエスト処理時刻と、WebJADE-タブ切り替えページへの表示指定付きリンクをランダムで表示します。

---

次に、Webサイトで実際にAjaxが利用されるケースにより近いサンプルとして、 項目を選択するドロップダウンリストを複数組み合わせ、1つのリストの選択により他のリストの内容を変更するような機能を実装します。

このような実装では、非Ajaxの場合にはページ自体の再読み込みが必要となりますが、 Ajaxを利用する事により、ページを遷移する事無くリストの内容だけを変更する事が可能になります。

上記サンプルでは、左側の都県選択リストで、ユーザーが埼玉/東京/神奈川の中からいずれかの都県を選択した時点で、 Ajaxリクエストがサーバーに対し発行されます。サーバーではどの都県の店舗データが要求されたのかを判断し、 クライアントにそれぞれの都県に存在する店舗データを返し、 そして、クライアントではそのデータを元に右側の店舗選択リストの更新を行います。

また、この例では一度取得した店舗データはクライアントで保持(ちなみにこの機能もキャッシュと呼びます)しますので、 同都県の2回目以降の選択時には、Ajaxリクエストを行わずに、保持しているデータを元に店舗選択リストを更新します。

このようにAjaxを利用する場合にも、要求するデータの更新頻度が低いと考えられる場合には、前回取得したデータを利用する事で、 毎回サーバーへリクエストを送るような事をせず、 サーバー側の負荷とトラフィックを最小限に留めるという事も重要となります。

本来なら、上記のサンプルほどのデータ量であるなら、全てのデータをJavaScriptファイルに記述し、 ページ自体の読み込み時にそのJavaScriptファイルも読み込む方がコストは少なくなりますが、 これが、全国の都道府県を対象として何百店舗もあるようなケースで、さらにそれぞれの店舗概要データも取得し表示するような場合には、 Ajaxの利用は非常に有効な手段となります。

---

複数項目構成での範囲指定による先読みキャッシュ

ここでは、連続性の高い複数の情報で構成される項目に、Ajaxによる先読みキャッシュを適用します。

範囲指定の先読みキャッシュでは、選択された項目の読み込みと同時に、その項目の前後の数項目分のデータ取得を同時に行います。 指定範囲がnの時は、a番目のデータをユーザーが選択した場合には、a-n番目からa+n番目のデータを同時に取得するような処理となります。

範囲指定の先読みにおいては、それぞれの項目にユーザーがシリアル(逐次連続)にアクセスする事を前提としますので、 そのように連続的にアクセスされるデータ構成では非常に有効に機能しますが、 ある項目群にランダムにアクセスされるような構成には不向きと言えます。

また他の形式のキャッシュと同様に、利用されなくなったデータを破棄しメモリなどの使用量を減らす事も考える必要があります。 範囲指定のキャッシュでは、キャッシュとして読み込む範囲とは別に、キャッシュを破棄すべき範囲を指定する事でそれに対応します。

---

これは映画の週間公開スケジュールを使ったサンプルとなります。

このような期間を元にしたデータ構成では、ユーザーがそれぞれの項目に順にアクセスする可能性が高いと考えられる為、 範囲を指定した先読みキャッシュを利用し易い形態と言えます。

5月1週などの項目をクリックする事で、その週に公開された映画のリストと、 それらの映画についての概略情報をAjaxを利用しサーバーから取得し、 それと同時に、範囲内(ここでは前週分と来週/再来週分)の3週分のデータについても同時にリクエストを発行します。

直接選択されたか、あるいは範囲内判定での読み込みかどうかに関わらず、一度読み込みをした週のデータについては当然キャッシュに残っていますので、 それらの週のデータが要求された場合には、Ajaxによるリクエストは行われず、キャッシュにあるデータを元に表示されます。

またここではキャッシュが有効となる範囲(-1週+2週以内)が指定されているのと共に、キャッシュが無効となる範囲も指定されています。 このサンプルでは、キャッシュの無効範囲は6週以上となっていますので、 4月3週のデータは5月5週以降が選択された時点で破棄され、同様に6月1週のデータは4月4週以前が選択されたタイミングで破棄される事になります。 破棄された週のデータは、初期状態と同様に、選択されるかキャッシュの有効範囲に入った時点で再びサーバーに対しAjaxリクエストを発行し再取得を行います。

---