HTMLでCache-Controlを使用する方法を現役エンジニアが解説【初心者向け】
初心者向けにHTMLでCache-Controlを使用する方法について解説しています。最初にWebサイトを閲覧したときに発生するキャッシュについて解説します。次にCache-Controlの使い方をサンプルで確認しましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLでCache-Controlを使用する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
Cache-Controlを使用する方法について詳しく説明していくね！
お願いします！
目次
キャッシュとは
キャッシュとは、サーバーから配信されているデータを一度でも受信したブラウザが再利用可能なデータとして一時的に保存されるものを意味します。
HTML5からは、サーバーの設定から「キャッシュマニフェスト」による制御が可能になりました。
その旧来の手法として、HTMLの設定からこのキャッシュの機能を制御する方法をみていきましょう。
キャッシュ関連のメタタグ設定方法
headタグのメタタグとして、以下の記述を追記します。
HTML4.01のドックタイプ宣言にて有効になるため、htmlファイルの冒頭の宣言文も旧来の記述にしなければなりません。
古いブラウザ向け
<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache">
旧来のHTMLでのキャッシュの無効化
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> </head>
キャッシュ制御をしてみよう
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> </head> <body> </body> </html>
この旧来の手法では、ユーザーのブラウザの設定やデバイスの種類などによっては、キャッシュの無効化が有効にならない場合があります。
HTML5からは、サーバーの設定も含めて「キャッシュマニフェスト」での手法も実現してみましょう。
執筆してくれたメンター
| 井内洋平
TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。 |
HTMLでCache-Controlを使用する方法がよく分かったので良かったです！
ゆかりちゃん、これからも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
