【Django】{% load static %} ←何が便利なの? 【超初心者向け】
{% load static %}は何?
{% load static %}はDjangoのテンプレートタグで
{% load static %} # 最初に機能を読み込む
<link href="{% static 'css/style.css' %}" rel="stylesheet"> # 使用例
<img src="{% static 'images/logo.png' %}" alt="Logo"> # 使用例
のように
{% load static %}をhtmlに記載することで、
- 静的ファイル(CSS, JavaScript, 画像など)を扱うための機能を読み込む
- {% static 'path/to/file' %}という形で静的ファイルへのURLを生成できるようにする
という役割があります。
{% load static %}は、静的ファイルを扱うための「道具箱」を持ってくるイメージです。
{% load static %}を使うメリット
{% load static %}を使わなくても
htmlで静的ファイルにアクセスできますが、
なぜ{% load static %}を使うのでしょうか?
そのメリットをまとめました。
- 開発環境と本番環境での柔軟な切り替え
# 通常のHTML
<link href="/static/css/style.css" rel="stylesheet">
# Djangoテンプレート
<link href="{% static 'css/style.css' %}" rel="stylesheet">
- 開発サーバーでは/static/から
- 本番環境では別のドメインから
といった具合に、設定ファイル1つで静的ファイルの配信元を切り替えられる。
- セキュリティ
- 静的ファイルの実際の保存場所を隠蔽できる
- URLインジェクションなどの攻撃からの保護
- 保守性
STATIC_URL = 'https://cdn.example.com/static/'
このように設定を一元管理できるため、URLの変更が必要な場合でもテンプレート側の修正が不要です。
つまり、単純なHTMLでも静的ファイルにアクセスすることは確かにできますが、{% load static %}
を使うことで、より柔軟で安全、そして保守しやすいアプリケーションを作ることができます。
- バージョン管理とキャッシュバスティング
Djangoが自動的にファイルのハッシュ値を付加するなどして、
ブラウザのキャッシュを制御できます。
通常のブラウザのキャッシュ
ブラウザは一度読み込んだCSS/JSファイルを保存(キャッシュ)します。
これにより2回目以降のページ読み込みが速くなります
しかし、これには問題があります
<link href="/static/css/style.css" rel="stylesheet">
となっていた場合、
CSSファイルを更新しても、ブラウザは古いキャッシュを使い続け、
ユーザーに変更が反映されな可能性があります。
キャッシュバスティングを使うと?
<!-- 通常の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 %}を使うと、
<link href="{% static 'css/style.css' %}" rel="stylesheet">
- ファイルが変更されると自動的にハッシュ値(例:style.css?v=a1b2c3)を生成
- 手動でバージョン番号を管理する必要がない
- ファイルが更新されたときだけ、自動的に新しいURLになる
という仕組みにすることができるのです。
具体例
実際にブラウザで見るとき、{% static %}
は以下のように変換されます。
- 最初にCSSファイルを作成したとき
<!-- テンプレートの記述 -->
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<!-- ブラウザでの実際の出力 -->
<link href="/static/css/style.css?v=hash123" rel="stylesheet">
- 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