HTMLでCache-Controlを使用する方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLでCache-Controlを使用する方法について解説しています。最初にWebサイトを閲覧したときに発生するキャッシュについて解説します。次にCache-Controlの使い方をサンプルで確認しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

HTMLでCache-Controlを使用する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

Cache-Controlを使用する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

キャッシュとは

キャッシュとは、サーバーから配信されているデータを一度でも受信したブラウザが再利用可能なデータとして一時的に保存されるものを意味します。

HTML5からは、サーバーの設定から「キャッシュマニフェスト」による制御が可能になりました。

その旧来の手法として、HTMLの設定からこのキャッシュの機能を制御する方法をみていきましょう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

キャッシュ関連のメタタグ設定方法

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では初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。