🔰

【Django】{% load static %} ←何が便利なの? 【超初心者向け】

2025/01/27に公開

{% load static %}は何?

{% load static %}はDjangoのテンプレートタグで

html
{% load static %}  # 最初に機能を読み込む
<link href="{% static 'css/style.css' %}" rel="stylesheet">  # 使用例
<img src="{% static 'images/logo.png' %}" alt="Logo">       # 使用例

のように
{% load static %}をhtmlに記載することで、

  1. 静的ファイル(CSS, JavaScript, 画像など)を扱うための機能を読み込む
  2. {% static 'path/to/file' %}という形で静的ファイルへのURLを生成できるようにする

という役割があります。
{% load static %}は、静的ファイルを扱うための「道具箱」を持ってくるイメージです。

{% load static %}を使うメリット

{% load static %}を使わなくても
htmlで静的ファイルにアクセスできますが、
なぜ{% load static %}を使うのでしょうか?
そのメリットをまとめました。

  1. 開発環境と本番環境での柔軟な切り替え
html
# 通常のHTML
<link href="/static/css/style.css" rel="stylesheet">

# Djangoテンプレート
<link href="{% static 'css/style.css' %}" rel="stylesheet">
  • 開発サーバーでは/static/から
  • 本番環境では別のドメインから
    といった具合に、設定ファイル1つで静的ファイルの配信元を切り替えられる。
  1. セキュリティ
  • 静的ファイルの実際の保存場所を隠蔽できる
  • URLインジェクションなどの攻撃からの保護
  1. 保守性
# settings.py
STATIC_URL = 'https://cdn.example.com/static/'

このように設定を一元管理できるため、URLの変更が必要な場合でもテンプレート側の修正が不要です。
つまり、単純なHTMLでも静的ファイルにアクセスすることは確かにできますが、{% load static %}を使うことで、より柔軟で安全、そして保守しやすいアプリケーションを作ることができます。

  1. バージョン管理とキャッシュバスティング

Djangoが自動的にファイルのハッシュ値を付加するなどして、
ブラウザのキャッシュを制御できます。

通常のブラウザのキャッシュ

ブラウザは一度読み込んだCSS/JSファイルを保存(キャッシュ)します。
これにより2回目以降のページ読み込みが速くなります

しかし、これには問題があります

html
<link href="/static/css/style.css" rel="stylesheet">

となっていた場合、
CSSファイルを更新しても、ブラウザは古いキャッシュを使い続け、
ユーザーに変更が反映されな可能性があります。

キャッシュバスティングを使うと?

html
<!-- 通常のHTML -->
<link href="/static/css/style.css?v=1.0" rel="stylesheet">
<!-- CSSを更新したら -->
<link href="/static/css/style.css?v=1.1" rel="stylesheet">

URLの末尾にバージョン番号やパラメータを付けることで
ブラウザに「これは新しいファイルだよ」と伝えます。

ここで、Djangoの{% static %}を使うと、

html
<link href="{% static 'css/style.css' %}" rel="stylesheet">
  • ファイルが変更されると自動的にハッシュ値(例:style.css?v=a1b2c3)を生成
  • 手動でバージョン番号を管理する必要がない
  • ファイルが更新されたときだけ、自動的に新しいURLになる

という仕組みにすることができるのです。

具体例

実際にブラウザで見るとき、{% static %}は以下のように変換されます。

  1. 最初にCSSファイルを作成したとき
<!-- テンプレートの記述 -->
<link href="{% static 'css/style.css' %}" rel="stylesheet">

<!-- ブラウザでの実際の出力 -->
<link href="/static/css/style.css?v=hash123" rel="stylesheet">
  1. CSSファイルを修正して保存したとき
<!-- テンプレートの記述(変更なし) -->
<link href="{% static 'css/style.css' %}" rel="stylesheet">

<!-- ブラウザでの実際の出力(ハッシュ値が変化) -->
<link href="/static/css/style.css?v=hash456" rel="stylesheet">

この動作を有効にするには、Django側で設定が必要です

# settings.py
STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.ManifestStaticFilesStorage'

これにより

  • Djangoがファイルの内容を監視
  • ファイルが変更されると新しいハッシュ値を生成
  • {% static %}を使用している箇所で、自動的に新しいハッシュ値付きのURLを出力

という流れで、開発者が特に意識することなく
キャッシュ制御ができるようになります。

Discussion