HTMLでキャッシュを無効にする方法を解説！

HTMLのキャッシュとは一度読み込んだWEBページ（htmlファイル）をPCやスマホの端末内部に保存し、同じWEBページのリクエストの2回目移行は、新規のリクエストはせず、端末内部のキャッシュからWEBページを表示する仕組みです。

キャッシュを上手く使うことで、ユーザー側からするとリクエストの手間がなくなりWEBページを高速に表示できるメリットがあり、サービス提供側からすると新規のリクエストによるサーバーへの負荷が減るメリットがあります。

一方でキャッシュにより、WEBページを更新してもユーザー側で古いページが表示され続けるというデメリット面もあり、時にキャッシュを無効にしたいという場合もあります。

今回はHTMLのキャッシュを無効にする方法について解説します。

WEBページのキャッシュの制御はHTTPのレスポンスヘッダで制御する方法もありますが、ここではHTMLのソースコード内で制御する方法をご紹介します。

ただし今回解説するやり方はHTML5以前のやり方で、HTML5の場合はHTTPのレスポンスヘッダでキャッシュ管理をしましょう。

HTMLでキャッシュを無効にする、つまりキャッシュさせないようにするには下記のタグをheadタグ内部に記述します。

下記はキャッシュを無効化したHTMLのサンプルコードです。

逆にキャッシュを有効化する方法を見ていきましょう。下記のように記述することでキャッシュの有効期限を設定でき、有効期限内にはキャッシュを使うように指定することが出来ます。

今回HTMLファイル内のキャッシュの無効化について解説しましたが、キャッシュはHTTPのレスポンスヘッダで制御している場合もあり、その場合はHTMLファイル内のキャッシュの記述は意味がなくなる可能性があります。

HTTPのレスポンスヘッダでキャッシュを制御するのか、HTMLファイル内の記述で制御するのかしっかりと管理してキャッシュを制御していきましょう。