【HTML】常に最新の情報を表示するためにもキャッシュを無効にしよう※デメリットも解説

2024.01.06
常に最新の情報を表示するためにもキャッシュを無効にしよう

キャッシュとは

WEBブラウザの情報を一時保管しておき、次にアクセスするときに、1から読み込む必要が無いようにしておくキャッシュという機能について解説します。

同じような一時保管としてCookieがありますが、こちらはユーザーのユニークデータを保存するものなので、キャッシュとは異なります。混同しやすいのでご注意ください。


キャッシュとは、低速な記憶装置や伝送路から読み出したデータのうち、直近に読み込んだものや使用頻度が高いものを高速な記憶装置に複製しておくこと。また、その際に使われる高速な記憶装置や、複製されたデータそのもののこと。データの読み込みを高速化したり、伝送量を削減することができる。

IT用語辞典

WEBサイトを冷蔵庫、キャッシュを中身のメモ帳として考えてみましょう。

スーパーに買い出しに行っているときに、冷蔵庫(WEBサイト)の中身を確認する手段としてメモ帳(キャッシュ)があれば便利ですよね。

しかし、メモ帳がないと、一旦家に戻り、冷蔵庫の中身を確認しないといけません。

その手間を省くものがメモ帳(キャッシュ)だと考えてください。

ただ、このメモ帳には更新機能が無いという欠点があります。

キャッシュのメリット

上記で説明したように、Webサイトを読み込む時間を短縮できることです。

Webサイトを読み込むためには、インターネット上の「Webサーバー」から、Webサイトの画像やHTMLなどのデータを取得する必要があり、読み込み時間がかかります。

キャッシュのデメリット

Webサイトの内容が更新されて、デザインや情報が新しくなっていても、キャッシュを利用しているためにブラウザ上では古い状態のまま表示されることがあります。

されることがるというのは、ブラウザがWEBサイトを構成する静的要素であるCSSや画像ファイルの更新情報をもとに、キャッシュを利用するかどうか判断しているためです。

このようにユーザーにとっては最新情報が見られず、運営者側としては修正内容が正しく反映されていない状態になるので、デメリットといえます。

※動的コンテンツであるasp,jsp,php等は毎回変化が起きるため、元々キャッシュされないように設定されています。

キャッシュを制御する方法

キャッシュを制御することで、修正内容を適切な形でユーザーに届けることができるようになります。

<meta>タグを使用するので、HTMLファイルの<head>タグ内に記載してください

キャッシュ無効

クライアントのリクエストおよびサーバーのレスポンスについて、キャッシュに何も保存しないようにします。

リクエストはサーバーに送信されて、リクエストごとに毎回完全なレスポンスをダウンロードします。

<meta http-equiv="Cache-Control" content="no-store">
  • メモ帳を使わずに毎回冷蔵庫を確認する方法:手間だが確実

キャッシュ検証

キャッシュした複製を渡す前に検証をさせるために、生成元のサーバーにリクエストを送信します。

<meta http-equiv="Cache-Control" content="no-cache">
  • メモ帳の内容を家族に確認する方法

キャッシュ期限設定

この要素で指定した日時、または秒数後に、ブラウザのキャッシュから文書の情報が消去されます。

秒数で指定する場合は、content内に何秒後にキャッシュを削除するか指定します。

<meta http-equiv="Expires" content="86400">

上記の場合、86400秒÷60秒/分÷60分/時=24時間語にキャッシュを削除します。

日付で指定する場合はGMT(グリニッジ標準時)で指定します。

<meta http-equiv="Expires" content="Tue, 4 Oct 2022 10:00:00 GMT">

上記の場合、2022年10月4日(火)午前10時00分00秒を指定しています。


グリニッジ標準時とは、イギリスにあるグリニッジ天文台での平均太陽時のことである。
グリニッジ天文台は経度0度にあり、ここを基準として世界各国の標準時(タイムゾーン)を決めている。日本は、経度135度となるため、グリニッジ標準時から9時間の差がある。グリニッジ標準時での日本時間の表現は、「GMT+09:00」となる。

weblio辞書

  • メモ帳の使用期限を決める方法

まとめ

最初はとっつきにくキャッシュという仕組みですが、WEBサイト構築するためには必須知識ですので、この機会に覚えておくとよいでしょう。

当初から変更していないのに毎回サーバーを読みに行くのは非効率です。

キャッシュ有効/無効によって、画像や文章といった静的コンテンツがどのように変化するのか確認してみましょう。


プログラミングやパソコンを使って働きたい!

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください!

\プログラミングを学んで/
人生を変えた3名

インタビュー記事一覧 >

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5