STATICFILESとstaticタグ
アセットを整理して参照します
「STATICFILESとstaticタグ」はCoddyKit上の無料Django Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはDjango Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Django Academyコースには全4レッスンが含まれています。
静的ファイルとは
CSS、JavaScript、デザイン用の画像は、リクエストごとには変化しません。Djangoではこれらを静的ファイルと呼び、Pythonのビューとは別に配信します。🎨
staticアプリ
Djangoでは、デフォルトでdjango.contrib.staticfilesがINSTALLED_APPSに含まれています。これにより、アセットの検索、収集、配信が行われるため、手動で設定する必要はありません。
INSTALLED_APPS = [
'django.contrib.staticfiles',
]ファイルの保存場所
一般的には、アプリのアセットを、ビューやテンプレートのすぐ近くにあるstaticという名前のフォルダーに保存します。Djangoはすべてのアプリでこのフォルダーを探します。
blog/
static/
blog/
style.cssフォルダーを名前空間化する
アセットは、static/blog/のようにアプリ名と同じ名前のフォルダーの下に置きます。この名前空間化により、2つのアプリが互いのstyle.cssを上書きするのを防げます。
STATIC_URL設定
STATIC_URL設定は、ブラウザがアセットを取得するときに使う公開パスのプレフィックスです。このプレフィックスで始まるリクエストは、静的ファイルに振り分けられます。
STATIC_URL = '/static/'staticタグを読み込む
テンプレートでアセットを参照するには、まずファイルの先頭でload staticを使ってタグライブラリを読み込みます。
{% load static %}staticタグを使う
staticタグは、相対的なアセットパスを正しい完全なURLに変換します。そのため、HTMLにSTATIC_URLを直接書く必要はありません。
<link rel="stylesheet" href="{% static 'blog/style.css' %}">直接書かない理由
/static/blog/style.cssを手書きすると、後からSTATIC_URLを変更したときにすべてのページが壊れてしまいます。staticタグを使えば、リンクを柔軟に保てます。✅
JavaScriptをリンクする
同じstaticタグを、あらゆる種類のアセットに使用できます。scriptタグでJSファイルを指定すれば、Djangoがパスを解決します。
<script src="{% static 'blog/app.js' %}"></script>STATICFILES_DIRS
特定のアプリに属さないプロジェクト全体のアセットは、そのフォルダーをSTATICFILES_DIRSに追加します。Djangoはそこも検索するようになります。
STATICFILES_DIRS = [BASE_DIR / 'assets']検索機能に任せる
内部では、静的ファイル検索機能が各アプリのstaticフォルダーとSTATICFILES_DIRSを調べ、テンプレートが要求したファイルを見つけます。
簡単な確認
テンプレートで静的ファイルを参照する方法を確認しましょう。
まとめ
静的ファイルはCSSやJSであり、名前空間化されたstaticフォルダーに保存すること、そしてstaticタグによってURLをきれいに組み立てられることを学びました。🎉
AI チューターと学ぶ Python — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「STATICFILESとstaticタグ」レッスンは無料ですか？
はい。「STATICFILESとstaticタグ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Django Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Django Academyコースには全4レッスンが含まれています。
「STATICFILESとstaticタグ」で何を学びますか？
アセットを整理して参照します ブラウザで直接実行するハンズオンコードでDjango Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Django Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのDjango Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「STATICFILESとstaticタグ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このDjango Academyレッスンでコードを書いて実行できますか？
はい。すべてのDjango Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- STATICFILESとstaticタグ
- Production向けのcollectstatic
- MEDIA_ROOTとファイルアップロード
- ImageFieldとアップロードの配信