キャッシュとは?アプリ開発者のための分かりやすい解説
キャッシュとは、取得が遅かったり高くついたりするものの、写しを手元に用意しておくことです。次にそれが必要になったとき、元のデータを取りに行かずに、その写しで素早く応答できます。保存された写しはキャッシュと呼ばれます。たとえば、ブラウザーは画像をキャッシュするので、2回目以降の訪問ではサイトが速く表示されます。サーバーは、遅いデータベースのクエリの結果をキャッシュして、訪問者ごとに毎回実行しなくて済むようにします。
キャッシュはアプリを速く、安く動かすのに役立ちます。大きなトレードオフは、写しが古くなる可能性があることです。
AIでアプリを作るときにキャッシュが重要な理由
AIで作ったアプリでは、キャッシュに次の3つの形で出会うことがあります。
- 「アプリを更新したのに、まだ古いバージョンが見える」。 これはキャッシュに関する最もよくある場面で、たいていは害のない現象です。ブラウザーかCDNが、保存されたコピーを表示しているだけです。
- 速度。 訪問者ごとに同じ計算をし直しているためにページが遅いなら、結果をキャッシュすると、すぐに表示されるように感じられることがあります。
- コスト。 多くのAIビルダーやホスティングサービスは、計算資源、データベースの処理時間、外部APIの呼び出しに料金を請求します。同じ高コストなリクエストを1,000人の訪問者が発生させるなら、キャッシュしておけば料金を1回分で済ませられます。
基本を知っていれば、キャッシュが役立つ場面で適切に依頼でき、キャッシュが原因で表示がおかしく見えるときにも気づけます。
身近なたとえ
混雑したカフェの厨房を想像してください。
毎朝、店員は注文が入るたびに挽きたての豆から一杯ずつコーヒーを淹れることもできます。でもそれでは時間がかかります。そこで、ドリップコーヒーをあらかじめポットで用意して、保温プレートの上に置いておきます。ほとんどのお客さまはすぐに一杯受け取れます。これがキャッシュヒットです。ポットが空になったら、新しく淹れます。これがキャッシュミスです。
ただし、長く置いたコーヒーは味が落ちるので、店には「30分を過ぎたポットは捨てる」というルールがあります。このルールが、キャッシュの有効期限です。同じポットを一日中使い続ける人はいませんし、特別な注文(オーツミルクを入れて砂糖を3つ入れる、など)を事前に淹れておく人もいません。つまり、一部のものはそもそもキャッシュすべきではないのです。
キャッシュが置かれる場所
1回のページ表示は、利用者に近いものから遠いものまで、いくつものキャッシュを通ることがあります。
| キャッシュ | 場所 | 通常保存するもの | 例 |
|---|---|---|---|
| ブラウザーキャッシュ | 訪問者の端末の中 | 画像、スタイルシート、スクリプト、フォント | 2ページ目以降はロゴがすぐに表示される |
| CDNキャッシュ | 世界中の、利用者の近くにあるサーバー | 静的ファイル、場合によってはページ全体 | 東京の訪問者が、元のサーバーではなく近くのサーバーからファイルを受け取る |
| アプリケーションキャッシュ | サーバーの上、またはその近く。多くはメモリーやRedis上 | 遅いクエリや外部APIの呼び出し結果 | 今日の為替レートを1時間に1回取得して保存する |
| データベースキャッシュ | データベースの内部 | 最近使われたデータや、クエリの実行計画 | よく使われる行が、高速なメモリーに残る |
CDN(コンテンツ配信ネットワーク)は、サイトのファイルを置いた世界規模のキャッシュのネットワークと考えるとわかりやすいです。
キャッシュが保存内容を決める仕組み
どのキャッシュも、次の問いに答える必要があります。
- 何をキャッシュしてよいか? 公開された共有データ(商品画像、ブログ記事など)はキャッシュしてよいです。個人データ(ユーザーのアカウントページ、メッセージなど)は、共有キャッシュには決して入れません。
- どれくらいの期間保存するか? これはTTL(有効期間)と呼ばれます。ロゴは1年間キャッシュしてよいかもしれませんが、在庫数は30秒が妥当かもしれません。
- どう更新されるか? 保存したコピーの期限が切れて再度取得されるか、データが変わったときにアプリが意図的に削除するかのどちらかです。後者は無効化と呼ばれます。
ウェブサイトでは、サーバーが Cache-Control ヘッダーを使って、ブラウザーやCDNに各ファイルのキャッシュ方法を伝えます。たとえば Cache-Control: max-age=3600 は「このコピーは1時間再利用してよい」という意味です。
最近のビルドツールは、静的ファイルについて最も難しい部分をキャッシュバスティングで解決しています。ファイルが変わるたびに、app.3f9a2c.js のように、内容に基づく指紋付きの新しい名前が付けられます。新しいバージョンは別の名前を持つので、ブラウザーは古い名前のファイルを長期間キャッシュしておいても問題ありません。
具体例:商品カタログ
小さなオンラインショップを運営しているとします。ホームページには、データベースから取得した50商品の価格と在庫数が表示されます。さらに、すべての注文を集計する必要がある遅い計算による「人気商品」のリストもあります。
- 画像とスクリプトは、ブラウザーとCDNによって長期間キャッシュされます。ビルドのたびに変更されたファイルには新しい名前が付くので、更新は確実に反映されます。
- 人気商品のリストは10分ごとに一度計算され、アプリケーションキャッシュに保存されます。その10分間にアクセスしたすべての訪問者は、保存された結果をすぐに受け取ります。
- 価格は短い時間だけキャッシュされ、商品を編集するたびにキャッシュを消去するので、お客さまが古い価格を長く見ることはありません。
- 購入時の在庫は決してキャッシュしません。「購入する」をクリックすると、アプリが実際のデータベースを確認するので、売り切れた商品を販売してしまうことはありません。
- カートとアカウントのページは個人的な情報なので、共有キャッシュには決して保存しません。
その結果、ホームページは速く表示され、データベースの負荷も大きく減り、お金やプライバシーに関わるものが古くなることは決してありません。
主な用語
| 用語 | 意味 |
|---|---|
| キャッシュヒット/ミス | データがキャッシュに見つかった場合/元のデータから取得し直す必要があった場合。 |
| TTL(有効期間) | キャッシュされたコピーが新鮮とみなされる期間。 |
| 古いデータ | 元のデータから見て、古くなってしまったキャッシュされたコピー。 |
| 無効化 | 元のデータが変わったので、キャッシュされたコピーを意図的に削除すること。 |
| キャッシュバスティング | ファイルが変わったときに名前やURLを変え、キャッシュが新しいバージョンを取得するようにすること。 |
| Cache-Control | ブラウザーやCDNに、応答をどのようにキャッシュするかを伝えるHTTPヘッダー。 |
| 強制再読み込み | キャッシュを無視するようブラウザーに指示して、ページを再読み込みすること。 |
| Redis | メモリー上で動く、人気のあるデータストア。アプリケーションキャッシュとしてよく使われます。 |
よくある誤解
- 「キャッシュは常に良いこと」。 間違ったものをキャッシュすると、古い価格、新しい投稿が表示されない、あるいは最悪の場合、ある利用者の個人ページが別の利用者に表示されるといった、実際のバグにつながります。キャッシュは意図を持って設計してください。
- 「古いバージョンが見えるのは、更新に失敗したから」。 たいていは失敗していません。何かが壊れていると判断する前に、強制再読み込み(Windowsは Ctrl+Shift+R、MacはCmd+Shift+R)やプライベートウィンドウを試してください。
- 「キャッシュすれば遅いアプリが直る」。 キャッシュは、繰り返されるリクエストの遅さを隠すだけです。最初のリクエストは依然として遅く、根本的な原因がデータベースのインデックス不足であれば、そちらも直す必要があります。
- 「できるだけ長くすべてをキャッシュすべき」。 長いキャッシュ期間は、変更されると新しい名前が付くファイルに向いています。HTMLページやデータについては、短い期間の方が安全です。
- 「キャッシュを消せば、全員の表示が直る」。 消せるのはあなたのブラウザーのキャッシュだけです。訪問者やCDNのキャッシュには、それぞれ独自のコピーが残っています。
AIビルダーに頼むときのポイント
- 「このアプリのどの部分が遅くて、どの部分を安全にキャッシュできる?」
- 「[人気リスト/APIの結果]を[N]分間キャッシュして、元のデータが変わったらそのキャッシュを消去して。」
- 「個人情報やアカウント情報を含むページが、CDNや共有キャッシュに保存されないようにして。」
- 「指紋付きの静的ファイルには長いキャッシュ期間を、HTMLには短い期間を設定して。」
- 「[外部API]の応答をキャッシュして、ページを開くたびに呼び出さないようにして。そのデータがどれくらい古くなる可能性があるかも教えて。」
- 「公開後に古いバージョンが表示される。ブラウザーのキャッシュが原因?それとも、何かがデプロイされていないの?」
Mythexでのキャッシュ
Mythexのアプリを更新して公開すると、CDNのキャッシュの反映が一時的に遅れることがあります。公開URLを強制再読み込みすると、新しいバージョンが表示されます。詳しくは公開方法をご覧ください。また、ホスティングの上限のページでは、静的アセットのキャッシュを推奨しています。ホスティング、データベースの処理時間、通信量は、クレジット残高から支払われるからです。それ以上のもの、たとえばクエリの結果やAPIの応答のキャッシュは、エージェントにアプリへ組み込むよう頼んでください。
関連する記事として、CDNとは、ウェブサイトを速くする方法、レート制限とはもあわせてご覧ください。
よくある質問
キャッシュとは簡単に言うと何ですか?
キャッシュとは、取得に時間がかかったり、コストがかかったりするものの写しを保存しておき、次に必要になったときに保存した写しから素早く返す仕組みです。ブラウザー、CDN、サーバー、データベースは、アプリを速く、安く動かすためにキャッシュを使っています。
ウェブサイトを更新したのに、まだ古いバージョンが表示されるのはなぜですか?
ブラウザーやCDNが、古いファイルの保存済みのコピーを表示している可能性が高いです。強制再読み込み(Windowsは Ctrl+Shift+R、MacはCmd+Shift+R)を行うと、多くの場合解決します。訪問者に対しては、適切に作られたサイトは更新されたファイルに新しい名前を付けるので、キャッシュが自動的に新しいバージョンを取得します。
ブラウザーのキャッシュを削除すると、何が起こりますか?
ブラウザーのキャッシュを削除すると、ブラウザーが保存していたファイルやページのコピーが消えるので、次回はすべてを新しく取得します。表示が崩れていたり、古い内容のままだったりするページを直せることがあります。ただし、その後の最初の表示は少し遅くなります。
キャッシュが問題を起こすことはありますか?
はい。主なリスクは、古いデータを表示してしまうことです。たとえば、古い価格や古い在庫数です。さらに深刻なのは、ある利用者の個人ページをキャッシュしてしまい、別の人に見せてしまうことです。適切なキャッシュのルールでは、何をどれくらいの期間キャッシュするかを決め、個人データを共有キャッシュに残さないようにします。