Visual Studio Code での Django チュートリアル

Django は、迅速かつ安全でスケーラブルな Web 開発のために設計された高レベルの Python フレームワークです。Django は、URL ルーティング、ページテンプレート、およびデータ操作を豊富にサポートしています。

この Django チュートリアルでは、共通のベーステンプレートを使用する 3 つのページを持つシンプルな Django アプリを作成します。このアプリは、Visual Studio Code のコンテキストで作成され、VS Code ターミナル、エディター、およびデバッガーで Django を操作する方法を理解します。このチュートリアルでは、データモデルの操作や管理インターフェイスの作成など、Django 自体の詳細については説明しません。これらの側面に関するガイダンスについては、このチュートリアルの最後にある Django ドキュメントのリンクを参照してください。

この Django チュートリアルで完成したコードプロジェクトは、GitHub で見つけることができます: python-sample-vscode-django-tutorial。

問題が発生した場合は、Python 拡張機能 Discussions Q&A で回答を検索したり、質問したりできます。

前提条件

この Django チュートリアルを正常に完了するには、以下を実行する必要があります (これらは一般的な Python チュートリアルと同じ手順です)。

Python 拡張機能をインストールする。
Python 3 のバージョンをインストールする (このチュートリアルはこのバージョン向けに書かれています)。オプションは次のとおりです。
- (すべてのオペレーティングシステム) python.org からダウンロードします。通常は、ページに最初に表示される Download Python 3.9.1 ボタン (または最新バージョン) を使用します。
- (Linux) 組み込みの Python 3 インストールで問題ありませんが、他の Python パッケージをインストールするには、ターミナルで sudo apt install python3-pip を実行する必要があります。
- (macOS) macOS で Homebrew を使用して brew install python3 を通じてインストールします (macOS のシステムインストール Python はサポートされていません)。
- (すべてのオペレーティングシステム) Anaconda からダウンロードします (データサイエンス目的の場合)。
Windows では、Python インタープリターの場所が PATH 環境変数に含まれていることを確認してください。コマンドプロンプトで path を実行すると、場所を確認できます。Python インタープリターのフォルダーが含まれていない場合は、Windows の設定を開き、「環境」を検索し、アカウントの環境変数を編集を選択し、Path 変数を編集してそのフォルダーを含めます。

Django チュートリアルのプロジェクト環境を作成する

このセクションでは、Django がインストールされる仮想環境を作成します。仮想環境を使用することで、Django がグローバル Python 環境にインストールされるのを避け、アプリケーションで使用されるライブラリを正確に制御できます。仮想環境を使用すると、環境用の requirements.txt ファイルを作成することも容易になります。

ファイルシステムに、このチュートリアル用のプロジェクトフォルダー (例: hello_django) を作成します。
そのフォルダー内で、現在のインタープリターに基づいて .venv という名前の仮想環境を作成するために、以下のコマンドを (コンピューターに応じて) 使用します。
```
# Linux
sudo apt-get install python3-venv    # If needed
python3 -m venv .venv
source .venv/bin/activate

# macOS
python3 -m venv .venv
source .venv/bin/activate

# Windows
py -3 -m venv .venv
.venv\scripts\activate
```
注: 上記のコマンドを実行するときは、ストックの Python インストールを使用してください。Anaconda インストールからの python.exe を使用すると、ensurepip モジュールが利用できないためエラーが発生し、環境が未完成の状態になります。
code . を実行するか、VS Code を起動して ファイル > フォルダーを開く コマンドを使用して、VS Code でプロジェクトフォルダーを開きます。
VS Code で、コマンドパレットを開きます (表示 > コマンドパレット または (⇧⌘P (Windows, Linux Ctrl+Shift+P)))。次に、Python: インタープリターの選択 コマンドを選択します。
このコマンドは、VS Code が自動的に見つけることができる利用可能なインタープリターのリストを表示します (リストは異なります。目的のインタープリターが表示されない場合は、Python 環境の構成を参照してください)。リストから、プロジェクトフォルダー内の ./.venv または .\.venv で始まる仮想環境を選択します。
コマンドパレットから ターミナル: 新しいターミナルを作成 (⌃⇧` (Windows, Linux Ctrl+Shift+`)) を実行します。これによりターミナルが作成され、アクティベーションスクリプトが実行されて仮想環境が自動的にアクティブ化されます。

注: Windows で、既定のターミナルタイプが PowerShell の場合、システムでスクリプトの実行が無効になっているため activate.ps1 を実行できないというエラーが表示されることがあります。このエラーには、スクリプトを許可する方法に関する情報へのリンクが提供されます。それ以外の場合は、ターミナル: 既定のプロファイルを選択 を使用して、「コマンドプロンプト」または「Git Bash」を既定として設定してください。
選択された環境は、VS Code ステータスバーの右側に表示され、('.venv': venv) インジケーターは仮想環境を使用していることを示します。
VS Code ターミナルで次のコマンドを実行して、仮想環境の pip を更新します。
```
python -m pip install --upgrade pip
```
VS Code ターミナルで次のコマンドを実行して、仮想環境に Django をインストールします。
```
python -m pip install django
```

これで、Django コードを記述する準備ができた自己完結型環境ができました。VS Code は、ターミナル: 新しいターミナルを作成 (⌃⇧` (Windows, Linux Ctrl+Shift+`)) を使用すると、環境を自動的にアクティブ化します。個別のコマンドプロンプトまたはターミナルを開く場合は、source .venv/bin/activate (Linux/macOS) または .venv\Scripts\Activate.ps1 (Windows) を実行して環境をアクティブ化します。コマンドプロンプトの先頭に (.venv) と表示されていれば、環境がアクティブ化されています。

最小限の Django アプリを作成して実行する

Django の用語では、「Django プロジェクト」は複数のサイトレベルの構成ファイルと、Web ホストにデプロイして完全な Web アプリケーションを作成する 1 つ以上の「アプリ」で構成されます。Django プロジェクトには複数のアプリを含めることができ、各アプリは通常、プロジェクト内で独立した機能を持ち、同じアプリを複数の Django プロジェクトに含めることもできます。アプリ自体は、Django が期待する特定の規則に従う Python パッケージにすぎません。

したがって、最小限の Django アプリを作成するには、まずアプリのコンテナとして機能する Django プロジェクトを作成し、次にアプリ自体を作成する必要があります。どちらの目的にも、Django パッケージのインストール時にインストールされる Django 管理ユーティリティ django-admin を使用します。

Django プロジェクトを作成する

仮想環境がアクティブ化されている VS Code ターミナルで、次のコマンドを実行します。
```
django-admin startproject web_project .
```
この startproject コマンドは (末尾の . の使用により)、現在のフォルダーがプロジェクトフォルダーであることを前提とし、その中に次を作成します。
- manage.py: プロジェクトの Django コマンドライン管理ユーティリティ。python manage.py <command> [options] を使用して、プロジェクトの管理コマンドを実行します。
- 次のファイルを含む web_project という名前のサブフォルダー
  - __init__.py: このフォルダーが Python パッケージであることを Python に伝える空のファイル。
  - asgi.py: ASGI 互換の Web サーバーがプロジェクトを配信するためのエントリポイント。通常、本番 Web サーバーのフックを提供するため、このファイルはそのままにしておきます。
  - settings.py: Django プロジェクトの設定が含まれており、Web アプリの開発中にこれを変更します。
  - urls.py: Django プロジェクトの目次が含まれており、これも開発中に変更します。
  - wsgi.py: WSGI 互換の Web サーバーがプロジェクトを配信するためのエントリポイント。通常、本番 Web サーバーのフックを提供するため、このファイルはそのままにしておきます。
次のコマンドを実行して、空の開発データベースを作成します。
```
python manage.py migrate
```
サーバーを初めて実行すると、開発目的のデフォルトの SQLite データベースが db.sqlite3 ファイルに作成されますが、小規模な Web アプリケーションでは本番環境でも使用できます。データベースに関する追加情報については、「データベースの種類」セクションを参照してください。
Django プロジェクトを検証するには、仮想環境がアクティブ化されていることを確認し、コマンド python manage.py runserver を使用して Django の開発サーバーを起動します。サーバーはデフォルトポート 8000 で実行され、ターミナルウィンドウに次のような出力が表示されます。
```
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
June 13, 2023 - 18:38:07
Django version 4.2.2, using settings 'web_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
```
Django の組み込み Web サーバーは、ローカル開発目的でのみ使用されます。ただし、Web ホストにデプロイする場合、Django はホストの Web サーバーを使用します。Django プロジェクトの wsgi.py および asgi.py モジュールは、本番サーバーへのフックを処理します。

デフォルトの 8000 以外のポートを使用したい場合は、python manage.py runserver 5000 のようにコマンドラインでポート番号を指定します。
ターミナル出力ウィンドウの http://127.0.0.1:8000/ URL を Ctrl+クリックすると、そのアドレスにデフォルトブラウザーが開きます。Django が正しくインストールされ、プロジェクトが有効な場合は、下に示すデフォルトのページが表示されます。VS Code のターミナル出力ウィンドウには、サーバーログも表示されます。
完了したら、ブラウザーウィンドウを閉じ、ターミナル出力ウィンドウに示されているように、Ctrl+C を使用して VS Code でサーバーを停止します。

Django アプリを作成する

仮想環境がアクティブ化されている VS Code ターミナルで、プロジェクトフォルダー (manage.py が存在する場所) で管理ユーティリティの startapp コマンドを実行します。
```
python manage.py startapp hello
```
このコマンドにより、hello というフォルダーが作成され、いくつかのコードファイルと 1 つのサブフォルダーが含まれます。このうち、views.py (Web アプリのページを定義する関数が含まれます) と models.py (データオブジェクトを定義するクラスが含まれます) は頻繁に操作します。migrations フォルダーは、このチュートリアルの後半で説明するように、Django の管理ユーティリティによってデータベースバージョンを管理するために使用されます。他に、apps.py (アプリの構成)、admin.py (管理インターフェイスを作成用)、tests.py (テスト作成用) のファイルがありますが、ここでは説明しません。
アプリのホームページの単一のビューを作成する、次のコードと一致するように hello/views.py を変更します。
```
from django.http import HttpResponse

def home(request):
    return HttpResponse("Hello, Django!")
```
次の内容で hello/urls.py ファイルを作成します。urls.py ファイルは、異なる URL を適切なビューにルーティングするためのパターンを指定する場所です。以下のコードには、アプリのルート URL ("") を、hello/views.py に追加したばかりの views.home 関数にマッピングする 1 つのルートが含まれています。
```
from django.urls import path
from hello import views

urlpatterns = [
    path("", views.home, name="home"),
]
```
web_project フォルダーにも urls.py ファイルがあり、ここで URL ルーティングが実際に処理されます。web_project/urls.py を開き、次のコードと一致するように変更します (必要であれば、説明コメントは残しておいてください)。このコードは、django.urls.include を使用してアプリの hello/urls.py を取り込み、アプリのルートをアプリ内に保持します。この分離は、プロジェクトに複数のアプリが含まれている場合に役立ちます。
```
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path("", include("hello.urls")),
    path('admin/', admin.site.urls)
]
```
変更したすべてのファイルを保存します。
VS Code ターミナルで、仮想環境を再度アクティブ化して、python manage.py runserver で開発サーバーを実行し、ブラウザーで http://127.0.0.1:8000/ を開いて、「Hello, Django」がレンダリングされるページを確認します。

デバッガー起動プロファイルを作成する

毎回 python manage.py runserver を入力することなく、サーバーを実行してアプリをテストする簡単な方法はないかと、もう疑問に思っているかもしれません。幸いにも、それはあります！VS Code でカスタマイズされた起動プロファイルを作成できます。これは、避けられないデバッグ作業にも使用されます。

VS Code の実行ビューに切り替えます (左側のアクティビティバーまたは F5 を使用)。「実行とデバッグをカスタマイズするには、launch.json ファイルを作成してください」というメッセージが表示される場合があります。これは、デバッグ構成を含む launch.json ファイルがまだないことを意味します。launch.json ファイルを作成 リンクをクリックすると、VS Code がファイルを作成してくれます。
リンクを選択すると、VS Code からデバッグ構成のプロンプトが表示されます。ドロップダウンから Django を選択すると、VS Code は新しい launch.json ファイルに Django 実行構成を入力します。launch.json ファイルには多数のデバッグ構成が含まれており、それぞれが configuration 配列内の個別の JSON オブジェクトです。
「Python: Django」という名前の構成までスクロールして確認します。
```
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python Debugger: Django",
      "type": "debugpy",
      "request": "launch",
      "program": "${workspaceFolder}\\manage.py",
      "args": ["runserver"],
      "django": true,
      "justMyCode": true
    }
  ]
}
```
この構成は、選択した Python インタープリターと args リスト内の引数を使用して、VS Code が "${workspaceFolder}/manage.py" を実行するように指示します。この構成で VS Code デバッガーを起動することは、アクティブ化された仮想環境で VS Code ターミナルで python manage.py runserver を実行することと同じです。(必要に応じて、ポート番号 "5000" を args に追加できます)。"django": true エントリは、Django ページテンプレートのデバッグを有効にするように VS Code に指示します。これは、このチュートリアルで後ほど確認します。
実行 > デバッグの開始 メニューコマンドを選択するか、リストの横にある緑色の デバッグの開始 矢印 (F5) を選択して、構成をテストします。
ターミナル出力ウィンドウの http://127.0.0.1:8000/ URL を Ctrl+クリックしてブラウザーを開き、アプリが正しく実行されていることを確認します。
完了したら、ブラウザーを閉じ、デバッガーを停止します。デバッガーを停止するには、停止ツールバーボタン (赤い四角) または実行 > デバッグの停止 コマンド (⇧F5 (Windows, Linux Shift+F5)) を使用します。
これでいつでも実行 > デバッグの開始 を使用してアプリをテストできます。このコマンドは、変更されたすべてのファイルを自動的に保存するという利点もあります。

デバッガーを探索する

デバッグは、実行中のプログラムを特定のコード行で一時停止する機会を提供します。プログラムが一時停止している間は、変数を調べたり、デバッグコンソールパネルでコードを実行したり、デバッグで説明されている機能を活用したりできます。デバッガーを実行すると、デバッグセッションが開始される前に、変更されたファイルが自動的に保存されます。

始める前に: 前のセクションの最後に、ターミナルで Ctrl+C を使用して実行中のアプリを停止したことを確認してください。1 つのターミナルでアプリを実行したままにすると、そのポートは引き続き占有されます。その結果、同じポートを使用してデバッガーでアプリを実行すると、最初に実行中のアプリがすべての要求を処理するため、デバッグ中のアプリでアクティビティが表示されず、プログラムがブレークポイントで停止しません。つまり、デバッガーが機能していないように見える場合は、アプリの他のインスタンスがまだ実行されていないことを確認してください。

hello/urls.py で、urlpatterns リストにルートを追加します。
```
path("hello/<name>", views.hello_there, name="hello_there"),
```
path の最初の引数は、変数文字列 name を受け入れるルート "hello/" を定義します。この文字列は、path の 2 番目の引数で指定された views.hello_there 関数に渡されます。

URL ルートは大文字と小文字を区別します。たとえば、ルート /hello/<name> は /Hello/<name> とは異なります。同じビュー関数で両方を処理したい場合は、各バリアントのパスを定義します。
デバッガーでステップ実行できる hello_there 関数を定義するために、views.py の内容を次のコードに置き換えます。
```
import re
from django.utils.timezone import datetime
from django.http import HttpResponse

def home(request):
    return HttpResponse("Hello, Django!")

def hello_there(request, name):
    now = datetime.now()
    formatted_now = now.strftime("%A, %d %B, %Y at %X")

    # Filter the name argument to letters only using regular expressions. URL arguments
    # can contain arbitrary text, so we restrict to safe characters only.
    match_object = re.match("[a-zA-Z]+", name)

    if match_object:
        clean_name = match_object.group(0)
    else:
        clean_name = "Friend"

    content = "Hello there, " + clean_name + "! It's " + formatted_now
    return HttpResponse(content)
```
URL ルートで定義された name 変数は、hello_there 関数の引数として与えられます。コードコメントで説明されているように、アプリへのさまざまな攻撃を避けるために、常にユーザーから提供された任意の情報をフィルター処理してください。この場合、コードは名前引数を文字のみを含むようにフィルター処理し、制御文字、HTML などの挿入を避けます。(次のセクションでテンプレートを使用すると、Django は自動的にフィルター処理を行うため、このコードは不要になります)。
hello_there 関数の最初のコード行 (now = datetime.now()) にブレークポイントを設定するには、次のいずれかの操作を行います。
- その行にカーソルを置き、F9 を押すか、
- その行にカーソルを置き、実行 > ブレークポイントの切り替え メニューコマンドを選択するか、
- 行番号の左側の余白を直接クリックします (そこにカーソルを合わせると薄い赤い点が表示されます)。
ブレークポイントは左余白に赤い点で表示されます。
実行 > デバッグの開始 メニューコマンドを選択するか、リストの横にある緑色の デバッグの開始 矢印 (F5) を選択してデバッガーを開始します。

ステータスバーの色がデバッグを示すように変化することを確認します。

デバッグツールバー (以下に示す) も VS Code に表示され、次の順序でコマンドが含まれています: 一時停止 (または続行、F5)、ステップオーバー (F10)、ステップイン (F11)、ステップアウト (⇧F11 (Windows, Linux Shift+F11))、再起動 (⇧⌘F5 (Windows, Linux Ctrl+Shift+F5))、停止 (⇧F5 (Windows, Linux Shift+F5))。各コマンドの説明については、VS Code デバッグを参照してください。
「Python デバッグコンソール」ターミナルに出力が表示されます。ブラウザーを開き、http://127.0.0.1:8000/hello/VSCode に移動します。ページがレンダリングされる前に、VS Code は設定したブレークポイントでプログラムを一時停止します。ブレークポイントの小さな黄色い矢印は、次に実行されるコード行であることを示します。
ステップオーバーを使用して now = datetime.now() ステートメントを実行します。
VS Code ウィンドウの左側には、now などのローカル変数と、name などの引数を表示する変数ペインが表示されます。その下には、監視、呼び出し履歴、および ブレークポイント の各ペインがあります (詳細については、VS Code デバッグを参照してください)。ローカル セクションで、さまざまな値を展開してみてください。値をダブルクリック (または Enter (Windows, Linux F2) を使用) して変更することもできます。ただし、now などの変数を変更すると、プログラムが破損する可能性があります。開発者は通常、コードが最初に正しい値を生成しなかった場合にのみ、値を修正するために変更を加えます。
プログラムが一時停止している間、デバッグコンソール パネル (ターミナルパネルの「Python デバッグコンソール」とは異なります) を使用すると、現在のプログラムの状態を使用して式を試したり、コードの断片を試したりできます。たとえば、now = datetime.now() の行をステップオーバーした後、さまざまな日付/時刻形式を試すことができます。エディターで、now.strftime("%A, %d %B, %Y at %X") を読み取るコードを選択し、右クリックして デバッグ: 評価 を選択して、そのコードをデバッグコンソールに送信し、そこで実行します。
```
now.strftime("%A, %d %B, %Y at %X")
'Friday, 07 September, 2018 at 07:46:32'
```
ヒント: デバッグコンソール には、ターミナルには表示されない可能性のあるアプリ内の例外も表示されます。たとえば、実行とデバッグ ビューの 呼び出し履歴 エリアに「例外で一時停止」というメッセージが表示された場合は、デバッグコンソール に切り替えて例外メッセージを確認してください。

その行をデバッグコンソール下部の「>」プロンプトにコピーし、書式設定を変更してみてください。

now.strftime("%A, %d %B, %Y at %X")
'Tuesday, 13 June, 2023 at 18:03:19'
now.strftime("%a, %d %b, %Y at %X")
'Tue, 13 Jun, 2023 at 18:03:19'
now.strftime("%a, %d %b, %y at %X")
'Tue, 13 Jun, 23 at 18:03:19'

必要に応じて、さらに数行のコードをステップ実行してから、続行 (F5) を選択してプログラムを実行させます。ブラウザーウィンドウに結果が表示されます。
コードの行を別の datetime 形式 (例: now.strftime("%a, %d %b, %y at %X")) を使用するように変更し、ファイルを保存します。Django サーバーは自動的に再ロードされるため、デバッガーを再起動することなく変更が適用されます。ブラウザーでページを更新して、更新を確認します。
完了したら、ブラウザーを閉じ、デバッガーを停止します。デバッガーを停止するには、停止ツールバーボタン (赤い四角) または実行 > デバッグの停止 コマンド (⇧F5 (Windows, Linux Shift+F5)) を使用します。

ヒント: http://127.0.0.1:8000/hello/VSCode のような特定の URL に繰り返し移動しやすくするには、その URL を views.py のようなファイルのどこかに print ステートメントを使用して出力します。URL は VS Code ターミナルに表示され、Ctrl+クリックを使用してブラウザーで開くことができます。

定義へ移動と定義をピークコマンド

Django またはその他のライブラリを操作しているときに、それらのライブラリ自体のコードを調べたい場合があります。VS Code には、任意のコード内のクラスやその他のオブジェクトの定義に直接移動する 2 つの便利なコマンドがあります。

定義へ移動 は、コードからオブジェクトを定義するコードにジャンプします。たとえば、views.py で、home 関数内の HttpResponse を右クリックし、定義へ移動 (または F12) を選択すると、Django ライブラリ内のクラス定義に移動します。
定義をピーク (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)、右クリックコンテキストメニューにもあります) は類似していますが、クラス定義をエディターに直接表示します (コードを隠さないようにエディターウィンドウにスペースを作成します)。Escape を押してピークウィンドウを閉じるか、右上隅の x を使用します。

テンプレートを使用してページをレンダリングする

これまでにこのチュートリアルで作成したアプリは、Python コードからプレーンテキストの Web ページのみを生成します。コードで直接 HTML を生成することは可能ですが、開発者は、アプリをクロスサイトスクリプティング (XSS) 攻撃にさらすため、そのような方法は避けます。たとえば、このチュートリアルの hello_there 関数では、content = "<h1>Hello there, " + clean_name + "!</h1>" のようにコードで出力をフォーマットすることを考えるかもしれませんが、ここで content の結果はブラウザーに直接与えられます。この開口部により、攻撃者は悪意のある HTML (JavaScript コードを含む) を URL に配置し、それが clean_name に到達し、ブラウザーで実行される可能性があります。

はるかに良い方法は、テンプレート を使用して HTML をコードから完全に排除することです。これにより、コードはデータ値のみに関心を持ち、レンダリングには関心を持たなくなります。

Django では、テンプレートは、実行時にコードが提供する値のプレースホルダーを含む HTML ファイルです。Django テンプレートエンジンは、ページをレンダリングするときに置換を行い、XSS 攻撃を防ぐための自動エスケープを提供します (つまり、データ値に HTML を使用しようとすると、HTML はプレーンテキストとしてのみレンダリングされます)。したがって、コードはデータ値のみに関心を持ち、テンプレートはマークアップのみに関心を持ちます。Django テンプレートは、テンプレート継承などの柔軟なオプションを提供します。これにより、共通のマークアップを持つベースページを定義し、そのベースにページ固有の追加機能を追加できます。

このセクションでは、テンプレートを使用して単一ページを作成することから始めます。次のセクションでは、静的ファイルを配信するようにアプリを構成し、共通のベーステンプレートからナビゲーションバーを含む複数のページをアプリに追加します。Django テンプレートは、このチュートリアルの後半でテンプレートのデバッグのコンテキストで確認するように、制御フローと反復もサポートしています。

web_project/settings.py ファイルで、INSTALLED_APPS リストを見つけて、次のエントリを追加します。これにより、プロジェクトがアプリについて認識し、テンプレート処理を処理できるようになります。
```
'hello',
```
hello フォルダー内に templates という名前のフォルダーを作成し、次にアプリ名と一致するように hello という別のサブフォルダーを作成します (この 2 層のフォルダー構造は一般的な Django の慣習です)。
templates/hello フォルダーに、以下の内容で hello_there.html という名前のファイルを作成します。このテンプレートには、「name」と「date」という名前のデータ値の 2 つのプレースホルダーが含まれており、これらは波括弧 {{ と }} のペアで区切られています。その他の不変のテキストは、フォーマットマークアップ (<strong> など) とともにテンプレートの一部です。ご覧のとおり、テンプレートのプレースホルダーにはフォーマットも含まれており、パイプ | 記号の後の式は、この場合、Django の組み込みの日付フィルターと時間フィルターを使用しています。したがって、コードは、事前フォーマットされた文字列ではなく、datetime 値を渡すだけで済みます。
```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello, Django</title>
    </head>
    <body>
        <strong>Hello there, {{ name }}!</strong> It's {{ date | date:"l, d F, Y" }} at {{ date | time:"H:i:s" }}
    </body>
</html>
```
views.py の上部に、次の import ステートメントを追加します。
```
from django.shortcuts import render
```
また、views.py で、hello_there 関数を修正して django.shortcuts.render メソッドを使用してテンプレートをロードし、テンプレートコンテキスト を提供するようにします。コンテキストは、テンプレート内で使用するための変数セットです。render 関数は、要求オブジェクト、次に templates フォルダーからの相対パスでテンプレートへのパス、次にコンテキストオブジェクトを受け取ります。(開発者は通常、テンプレートにそれらを使用する関数と同じ名前を付けますが、コード内で常に正確なファイル名を参照するため、名前の一致は必須ではありません)。
```
def hello_there(request, name):
    print(request.build_absolute_uri()) #optional
    return render(
        request,
        'hello/hello_there.html',
        {
            'name': name,
            'date': datetime.now()
        }
    )
```
ご覧のとおり、マークアップと書式設定がすべてテンプレートに含まれているため、コードははるかにシンプルになり、データ値のみに関心を持つようになりました。
プログラムを実行し (デバッガー内または外部で、⌃F5 (Windows, Linux Ctrl+F5) を使用)、/hello/name URL に移動して結果を確認します。
また、<a%20value%20that%20could%20be%20HTML> のような名前を使用して /hello/name URL に移動し、Django の自動エスケープが機能していることを確認します。「name」の値は、実際の要素としてレンダリングされるのではなく、ブラウザーでプレーンテキストとして表示されます。

静的ファイルを配信する

静的ファイルとは、CSS ファイルなど、特定の要求に対して Web アプリケーションがそのまま返すコンテンツのことです。静的ファイルを配信するには、settings.py の INSTALLED_APPS リストに django.contrib.staticfiles が含まれている必要があります。これは既定で含まれています。

Django で静的ファイルを配信するのは、特に本番環境にデプロイする場合、一種の芸術です。ここで示されているのは、Django 開発サーバーと Gunicorn のような本番サーバーで動作するシンプルなアプローチです。ただし、静的ファイルの完全な扱いはこのチュートリアルの範囲外であるため、詳細については、Django ドキュメントの「静的ファイルの管理」を参照してください。

本番環境に切り替える際は、settings.py に移動し、DEBUG=False を設定し、ALLOWED_HOSTs = ['*'] を変更して特定のホストを許可してください。これにより、コンテナーを使用する場合に追加の作業が必要になる場合があります。詳細については、Issue 13 を参照してください。

静的ファイル用にアプリを準備する

プロジェクトの web_project/urls.py に、次の import ステートメントを追加します。
```
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
```
同じファイルに、プロジェクトが認識するリストに標準の静的ファイル URL を含める以下の行を末尾に追加します。
```
urlpatterns += staticfiles_urlpatterns()
```

テンプレートで静的ファイルを参照する

hello フォルダー内に static という名前のフォルダーを作成します。
static フォルダー内に、アプリ名と一致する hello というサブフォルダーを作成します。

この余分なサブフォルダーがある理由は、Django プロジェクトを本番サーバーにデプロイするときに、すべての静的ファイルを 1 つのフォルダーに収集し、それを専用の静的ファイルサーバーによって提供するためです。static/hello サブフォルダーは、アプリの静的ファイルが収集されるときに、アプリ固有のサブフォルダーに配置され、同じプロジェクト内の他のアプリのファイルと衝突しないようにします。
static/hello フォルダーに、次の内容で site.css という名前のファイルを作成します。このコードを入力したら、VS Code が提供する CSS ファイルの構文強調表示 (カラープレビューを含む) も確認します。
```
.message {
    font-weight: 600;
    color: blue;
}
```
templates/hello/hello_there.html に、<title> 要素の後に以下の行を追加します。{% load static %} タグはカスタムの Django テンプレートタグセットであり、これを使用すると {% static %} を使用してスタイルシートのようなファイルを参照できます。
```
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'hello/site.css' %}" />
```
また、templates/hello/hello_there.html で、<body> 要素の内容を、<strong> タグではなく message スタイルを使用する次のマークアップに置き換えます。
```
<span class="message">Hello, there {{ name }}!</span> It's {{ date | date:'l, d F, Y' }} at {{ date | time:'H:i:s' }}.
```
アプリを実行し、/hello/name URL に移動して、メッセージが青色でレンダリングされることを確認します。完了したらアプリを停止します。

collectstatic コマンドを使用する

本番環境にデプロイする場合、通常は python manage.py collectstatic コマンドを使用して、アプリのすべての静的ファイルを単一のフォルダーに収集します。その後、専用の静的ファイルサーバーを使用してそれらのファイルを配信できます。これにより、通常、全体的なパフォーマンスが向上します。次の手順は、この収集がどのように行われるかを示していますが、Django 開発サーバーで実行するときは収集を使用しません。

web_project/settings.py に、collectstatic コマンドを使用するときに静的ファイルが収集される場所を定義する次の行を追加します。
```
STATIC_ROOT = BASE_DIR / 'static_collected'
```
ターミナルで、python manage.py collectstatic コマンドを実行し、hello/site.css が manage.py と並んで最上位の static_collected フォルダーにコピーされることを確認します。
実際には、静的ファイルを変更するたびに、また本番環境にデプロイする前に collectstatic を実行してください。

ベーステンプレートを拡張する複数のテンプレートを作成する

ほとんどの Web アプリケーションには複数のページがあり、これらのページは通常、多くの共通要素を共有しているため、開発者はそれらの共通要素をベースページテンプレートに分離し、他のページテンプレートがそれを拡張するようにします。(これはテンプレート継承とも呼ばれ、拡張されたページがベースページから要素を継承することを意味します)。

また、同じテンプレートを拡張する多くのページを作成する可能性があるため、VS Code でコードスニペットを作成し、新しいページテンプレートをすばやく初期化できるようにすると便利です。スニペットは、退屈でエラーが発生しやすいコピー & ペースト操作を回避するのに役立ちます。

次のセクションでは、このプロセスのさまざまな部分について説明します。

ベースページテンプレートとスタイルを作成する

Django のベースページテンプレートには、CSS ファイル、スクリプトファイルなどへの参照を含む、一連のページ間で共有されるすべての部分が含まれています。ベーステンプレートは、拡張テンプレートがオーバーライドすることを期待する 1 つ以上の block タグも定義します。ブロックタグは、ベーステンプレートと拡張テンプレートの両方で {% block <name> %} と {% endblock %} で区切られます。

以下の手順で、ベーステンプレートの作成方法を説明します。

templates/hello フォルダーに、次の内容で layout.html という名前のファイルを作成します。これには「title」と「content」という名前のブロックが含まれています。ご覧のとおり、マークアップは、後続のセクションで作成するホーム、アバウト、連絡先ページへのリンクを含むシンプルなナビゲーションバー構造を定義します。Django の {% url %} タグを使用して、相対パスではなく、対応する URL パターンの名前で他のページを参照している点に注目してください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>{% block title %}{% endblock %}</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'hello/site.css' %}"/>
</head>

<body>
<div class="navbar">
    <a href="{% url 'home' %}" class="navbar-brand">Home</a>
    <a href="{% url 'about' %}" class="navbar-item">About</a>
    <a href="{% url 'contact' %}" class="navbar-item">Contact</a>
</div>

<div class="body-content">
    {% block content %}
    {% endblock %}
    <hr/>
    <footer>
        <p>&copy; 2018</p>
    </footer>
</div>
</body>
</html>

既存の「message」スタイルの下に次のスタイルを static/hello/site.css に追加し、ファイルを保存します。(このチュートリアルではレスポンシブデザインをデモンストレーションしようとはしません。これらのスタイルは、合理的に興味深い結果を生成するだけです)。

.navbar {
    background-color: lightslategray;
    font-size: 1em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    padding: 8px 5px 8px 5px;
}

.navbar a {
    text-decoration: none;
    color: inherit;
}

.navbar-brand {
    font-size: 1.2em;
    font-weight: 600;
}

.navbar-item {
    font-variant: small-caps;
    margin-left: 30px;
}

.body-content {
    padding: 5px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

この時点でアプリを実行できますが、ベーステンプレートをどこにも使用しておらず、コードファイルも変更していないため、結果は前の手順と同じになります。最終的な効果を確認するには、残りのセクションを完了してください。

コードスニペットを作成する

次のセクションで作成する 3 つのページが layout.html を拡張するため、ベーステンプレートへの適切な参照で新しいテンプレートファイルを初期化するためのコードスニペットを作成すると時間を節約できます。コードスニペットは、単一のソースから一貫性のあるコードを提供するため、既存のコードからコピーアンドペーストする際に忍び寄る可能性のあるエラーを回避します。

VS Code で、ファイル (Windows/Linux) または コード (macOS) メニューを選択し、次に 基本設定 > ユーザースニペット を選択します。
表示されるリストから html を選択します。(以前にスニペットを作成したことがある場合は、リストの 既存のスニペット セクションに「html.json」として表示される場合があります)。

VS code が html.json を開いたら、既存の波括弧内に以下のコードを追加します。(ここには示されていませんが、説明コメントには、$0 行がスニペットの挿入後に VS Code がカーソルを配置する場所を示す方法などの詳細が記述されています)。

"Django Tutorial: template extending layout.html": {
    "prefix": "djextlayout",
    "body": [
        "{% extends \"hello/layout.html\" %}",
        "{% block title %}",
        "$0",
        "{% endblock %}",
        "{% block content %}",
        "{% endblock %}"
    ],

    "description": "Boilerplate template that extends layout.html"
},

html.json ファイルを保存します (⌘S (Windows, Linux Ctrl+S))。
これで、スニペットのプレフィックス (例: djext) を入力し始めると、次のセクションに示すように、VS Code はスニペットを自動補完オプションとして提供します。また、スニペットの挿入 コマンドを使用して、メニューからスニペットを選択することもできます。

コードスニペット全般の詳細については、「スニペットの作成」を参照してください。

コードスニペットを使用してページを追加する

コードスニペットが配置されたら、Home、About、Contact ページのテンプレートをすばやく作成できます。

templates/hello フォルダーに、home.html という名前の新しいファイルを作成します。次に、djext と入力し始めると、スニペットが補完として表示されます。

補完を選択すると、スニペットのコードがスニペットの挿入ポイントにカーソルが置かれた状態で表示されます。
「title」ブロックの挿入ポイントに Home を記述し、「content」ブロックに <p>Home page for the Visual Studio Code Django tutorial.</p> を記述してファイルを保存します。これらの行は、拡張されたページテンプレートの唯一の固有の部分です。
templates/hello フォルダーに about.html を作成し、スニペットを使用してボイラープレートマークアップを挿入し、「title」と「content」ブロックにそれぞれ About us と <p>About page for the Visual Studio Code Django tutorial.</p> を挿入してからファイルを保存します。
前の手順を繰り返して、Contact us と <p>Contact page for the Visual Studio Code Django tutorial.</p> を使用して templates/hello/contact.html を作成します。
アプリの urls.py に、/about および /contact ページのルートを追加します。path 関数の name 引数は、テンプレートの {% url %} タグでページを参照する名前を定義することに注意してください。
```
path("about/", views.about, name="about"),
path("contact/", views.contact, name="contact"),
```

views.py に、それぞれのページテンプレートを参照する /about および /contact ルートの関数を追加します。また、home 関数を修正して home.html テンプレートを使用するようにします。

# Replace the existing home function with the one below
def home(request):
    return render(request, "hello/home.html")

def about(request):
    return render(request, "hello/about.html")

def contact(request):
    return render(request, "hello/contact.html")

アプリを実行する

すべてのページテンプレートが配置されたら、views.py を保存し、アプリを実行し、ブラウザーでホームページを開いて結果を確認します。ページ間を移動して、ページテンプレートがベーステンプレートを適切に拡張していることを確認します。

Django tutorial: app rendering a common nav bar from the base template

データ、データモデル、およびマイグレーションを使用する

多くの Web アプリはデータベースに格納された情報と連携しており、Django はそのデータベース内のオブジェクトをモデルを使用して簡単に表現できます。Django では、モデルは django.db.models.Model から派生した Python クラスであり、特定のデータベースオブジェクト (通常はテーブル) を表します。これらのクラスは、アプリの models.py ファイルに配置します。

Django では、定義したモデルを通じてのみデータベースと連携します。Django の「マイグレーション」は、時間の経過とともにモデルを進化させる際に、基になるデータベースのすべての詳細を自動的に処理します。一般的なワークフローは次のとおりです。

models.py ファイルのモデルに変更を加えます。
python manage.py makemigrations を実行して、データベースを現在の状態から新しい状態に移行するスクリプトを migrations フォルダーに生成します。
python manage.py migrate を実行して、スクリプトを実際のデータベースに適用します。

マイグレーションスクリプトは、データモデルに対して時間の経過とともに加えられたすべての増分変更を効果的に記録します。マイグレーションを適用することで、Django はデータベースをモデルと一致するように更新します。各増分変更には独自のスクリプトがあるため、Django はデータベースの任意の以前のバージョン (新しいデータベースを含む) を現在のバージョンに自動的に移行できます。結果として、models.py のモデルのみに関心を持ち、基になるデータベーススキーマやマイグレーションスクリプトに関心を持つ必要はありません。Django にその部分を任せるのです！

コードでも、データの保存と取得はモデルクラスのみで行います。Django が基になる詳細を処理します。唯一の例外は、Django 管理ユーティリティの loaddata コマンドを使用してデータベースにデータを書き込むことができることです。このユーティリティは、migrate コマンドがスキーマを初期化した後にデータセットを初期化するためによく使用されます。

db.sqlite3 ファイルを使用する場合、SQLite browser のようなツールを使用してデータベースを直接操作することもできます。そのようなツールを使用してテーブルにレコードを追加または削除するのは問題ありませんが、データベーススキーマを変更することは避けてください。そうしないと、データベースがアプリのモデルと同期しなくなります。代わりに、モデルを変更し、makemigrations を実行してから、migrate を実行してください。

データベースの種類

既定では、Django にはアプリのデータベース用の db.sqlite3 ファイルが含まれており、これは開発作業に適しています。SQLite を使用する時期 (sqlite.org) で説明されているように、SQLite は 1 日あたり 10 万ヒット未満の低～中トラフィックのサイトでは問題なく機能しますが、それ以上のボリュームには推奨されません。また、単一のコンピューターに限定されているため、ロードバランシングや地理的レプリケーションなどの複数サーバーシナリオでは使用できません。

これらの理由から、PostgreSQL、MySQL、SQL Server などの本番レベルのデータストアの使用を検討してください。他のデータベースに対する Django のサポートについては、「データベースのセットアップ」を参照してください。また、Azure SDK for Python を使用して、テーブルや BLOB などの Azure ストレージサービスを操作することもできます。

モデルを定義する

Django モデルは、django.db.model.Models から派生した Python クラスであり、アプリの models.py ファイルに配置します。データベースでは、各モデルには自動的に id という一意の ID フィールドが与えられます。他のすべてのフィールドは、CharField (制限付きテキスト)、TextField (無制限テキスト)、EmailField、URLField、IntegerField、DecimalField、BooleanField、DateTimeField、ForeignKey、ManyToMany など、django.db.models の型を使用してクラスのプロパティとして定義されます。(詳細については、Django ドキュメントの「モデルフィールドリファレンス」を参照してください)。

各フィールドには、max_length のような属性がいくつかあります。blank=True 属性は、フィールドがオプションであることを意味します。null=true は、値がオプションであることを意味します。また、値をデータ値/表示値のタプルの配列内の値に制限する choices 属性もあります。

たとえば、models.py に次のクラスを追加して、シンプルなメッセージログの日付付きエントリを表すデータモデルを定義します。

from django.db import models
from django.utils import timezone

class LogMessage(models.Model):
    message = models.CharField(max_length=300)
    log_date = models.DateTimeField("date logged")

    def __str__(self):
        """Returns a string representation of a message."""
        date = timezone.localtime(self.log_date)
        return f"'{self.message}' logged on {date.strftime('%A, %d %B, %Y at %X')}"

モデルクラスには、他のクラスプロパティから計算された値を返すメソッドを含めることができます。モデルには通常、インスタンスの文字列表現を返す __str__ メソッドが含まれます。

データベースを移行する

models.py を編集してデータモデルを変更したため、データベース自体を更新する必要があります。VS Code で、仮想環境がアクティブ化されたターミナルを開き (ターミナル: 新しいターミナルを作成 コマンド (⌃⇧` (Windows, Linux Ctrl+Shift+`))) を使用)、プロジェクトフォルダーに移動して、次のコマンドを実行します。

python manage.py makemigrations
python manage.py migrate

migrations フォルダーを調べて、makemigrations が生成するスクリプトを確認してください。データベース自体を見て、スキーマが更新されたことを確認することもできます。

コマンドの実行中にエラーが表示された場合は、以前の手順で残っているデバッグターミナルを使用していないことを確認してください。それらのターミナルでは仮想環境がアクティブ化されていない可能性があります。

モデルを介してデータベースを使用する

モデルが配置され、データベースが移行されたので、モデルのみを使用してデータを保存および取得できます。このセクションでは、メッセージをログに記録できるフォームページをアプリに追加します。次に、それらのメッセージを表示するようにホームページを変更します。ここで多くのコードファイルを変更するため、詳細に注意してください。

hello フォルダー (views.py がある場所) に、データモデル LogMessage から取得したフィールドを含む Django フォームを定義する次のコードを含む forms.py という名前の新しいファイルを作成します。

from django import forms
from hello.models import LogMessage

class LogMessageForm(forms.ModelForm):
    class Meta:
        model = LogMessage
        fields = ("message",)   # NOTE: the trailing comma is required

templates/hello フォルダーに、次の内容で log_message.html という名前の新しいテンプレートを作成します。これは、フォームの本体を定義するために form という名前の変数がテンプレートに与えられることを前提としています。次に、「Log」というラベルの送信ボタンを追加します。
```
{% extends "hello/layout.html" %}
{% block title %}
    Log a message
{% endblock %}
{% block content %}
    <form method="POST" class="log-form">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="save btn btn-default">Log</button>
    </form>
{% endblock %}
```
注: Django の {% csrf_token %} タグは、クロスサイトリクエストフォージェリからの保護を提供します。詳細については、Django ドキュメントの「クロスサイトリクエストフォージェリ保護」を参照してください。
アプリの static/hello/site.css ファイルに、入力フォームを広くするルールを追加します。
```
input[name=message] {
    width: 80%;
}
```
アプリの urls.py ファイルに、新しいページのルートを追加します。
```
path("log/", views.log_message, name="log"),
```

views.py で、log_message という名前のビューを定義します (URL ルートで参照されます)。このビューは、HTTP GET と POST の両方のケースを処理します。GET のケース (else: セクション) では、前の手順で定義したフォームを表示するだけです。POST のケースでは、フォームからデータ (message) をデータオブジェクトに取得し、タイムスタンプを設定してから、そのオブジェクトを保存し、その時点でデータベースに書き込まれます。

# Add these to existing imports at the top of the file:
from django.shortcuts import redirect
from hello.forms import LogMessageForm
from hello.models import LogMessage

# Add this code elsewhere in the file:
def log_message(request):
    form = LogMessageForm(request.POST or None)

    if request.method == "POST":
        if form.is_valid():
            message = form.save(commit=False)
            message.log_date = datetime.now()
            message.save()
            return redirect("home")
    else:
        return render(request, "hello/log_message.html", {"form": form})

すべてを試す準備が整う前に、もう 1 つの手順があります！templates/hello/layout.html で、「navbar」div にメッセージロギングページのリンクを追加します。
```

<a href="{% url 'log' %}" class="navbar-item">Log Message</a>
```
アプリを実行し、ブラウザーでホームページを開きます。ナビゲーションバーの Log Message リンクを選択すると、メッセージロギングページが表示されるはずです。
メッセージを入力し、ログを選択すると、ホームページに戻るはずです。ホームページにはまだログに記録されたメッセージは表示されません (これはすぐに修正します)。さらにメッセージをログに記録しても構いません。必要であれば、SQLite Browser のようなツールを使用してデータベースをのぞき見して、レコードが作成されたことを確認してください。データベースを読み取り専用で開くか、アプリを使用する前にデータベースを閉じることを忘れないでください。そうしないと、データベースがロックされているためアプリが失敗します。
完了したらアプリを停止します。

次に、ログに記録されたメッセージを表示するようにホームページを変更します。まず、アプリの templates/hello/home.html ファイルの内容を以下のマークアップに置き換えます。このテンプレートは、message_list という名前のコンテキスト変数を想定しています。もし変数を受け取った場合 ({% if message_list %} タグで確認)、そのリストを反復処理し ({% for message in message_list %} タグ)、各メッセージのテーブル行を生成します。それ以外の場合、ページはまだメッセージがログに記録されていないことを示します。

{% extends "hello/layout.html" %}
{% block title %}
    Home
{% endblock %}
{% block content %}
    <h2>Logged messages</h2>

    {% if message_list %}
        <table class="message_list">
            <thead>
            <tr>
                <th>Date</th>
                <th>Time</th>
                <th>Message</th>
            </tr>
            </thead>
            <tbody>
            {% for message in message_list %}
                <tr>
                    <td>{{ message.log_date | date:'d M Y' }}</td>
                    <td>{{ message.log_date | time:'H:i:s' }}</td>
                    <td>
                        {{ message.message }}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    {% else %}
        <p>No messages have been logged. Use the <a href="{% url 'log' %}">Log Message form</a>.</p>
    {% endif %}
{% endblock %}

static/hello/site.css に、テーブルを少しフォーマットするルールを追加します。
```
.message_list th,td {
    text-align: left;
    padding-right: 15px;
}
```
views.py で、Django の汎用 ListView クラスをインポートします。これをホームページの実装に使用します。
```
from django.views.generic import ListView
```

また、views.py で、home 関数を ListView から派生した HomeListView という名前のクラスに置き換え、LogMessage モデルに結合し、テンプレートのコンテキストを生成する get_context_data 関数を実装します。

# Remove the old home function if you want; it's no longer used

class HomeListView(ListView):
    """Renders the home page, with a list of all messages."""
    model = LogMessage

    def get_context_data(self, **kwargs):
        context = super(HomeListView, self).get_context_data(**kwargs)
        return context

アプリの urls.py で、データモデルをインポートします。
```
from hello.models import LogMessage
```
また、urls.py で、新しいビューの変数を作成します。これは、最新の LogMessage オブジェクトを降順で 5 つ取得し (つまり、データベースにクエリを実行し)、テンプレートコンテキストのデータに名前 (message_list) を提供し、使用するテンプレートを識別します。
```
home_list_view = views.HomeListView.as_view(
    queryset=LogMessage.objects.order_by("-log_date")[:5],  # :5 limits the results to the five most recent
    context_object_name="message_list",
    template_name="hello/home.html",
)
```
urls.py で、ホームページへのパスを home_list_view 変数を使用するように変更します。
```
    # Replace the existing path for ""
    path("", home_list_view, name="home"),
```
アプリを起動し、ブラウザーでホームページを開きます。メッセージが表示されるはずです。
完了したらアプリを停止します。

ページテンプレートでデバッガーを使用する

前のセクションで示したように、ページテンプレートには、{% url %} や {% block %} のような受動的で宣言的な要素だけでなく、{% for message in message_list %} や {% if message_list %} のような手続き型ディレクティブを含めることができます。その結果、他の手続き型コードと同様に、テンプレート内にプログラミングエラーが発生する可能性があります。

幸いなことに、VS Code 用の Python 拡張機能は、デバッグ構成に "django": true が含まれている場合 (すでにそのように設定されています)、テンプレートデバッグを提供します。次の手順は、この機能を示しています。

templates/hello/home.html で、下の画像で黄色い矢印で示されているように、{% if message_list %} と {% for message in message_list %} の両方の行にブレークポイントを設定します。
デバッガーでアプリを実行し、ブラウザーでホームページを開きます。(すでにデバッガーを実行している場合は、ブレークポイントを設定した後にアプリを再起動する必要はありません。ページを更新するだけです)。VS Code が {% if %} ステートメントのテンプレートでデバッガーにブレークし、変数ペインにすべてのコンテキスト変数を表示することを確認します。
ステップオーバー (F10) コマンドを使用してテンプレートコードをステップ実行します。デバッガーがすべての宣言型ステートメントをステップオーバーし、任意の手続き型コードで一時停止することを確認します。たとえば、{% for message in message_list %} ループをステップ実行すると、message の各値を調べたり、<td>{{ message.log_date | date:'d M Y' }}</td> のような行にステップ実行したりできます。
デバッグコンソール パネルで変数を操作することもできます。(ただし、date のような Django フィルターは、現在コンソールでは利用できません)。
準備ができたら、続行 (F5) を選択してアプリの実行を終了し、ブラウザーでレンダリングされたページを表示します。完了したらデバッガーを停止します。

オプションのアクティビティ

次のセクションでは、Python および Visual Studio Code での作業に役立つ可能性のある追加の手順について説明します。

環境用の requirements.txt ファイルを作成する

ソース管理やその他の手段でアプリのコードを共有する場合、仮想環境内のすべてのファイルをコピーしても意味がありません。なぜなら、受け取る側がいつでもその環境を自分で再作成できるからです。

したがって、開発者は通常、仮想環境フォルダーをソース管理から除外し、代わりに requirements.txt ファイルを使用してアプリの依存関係を記述します。

ファイルを手動で作成することもできますが、pip freeze コマンドを使用して、アクティブ化された環境にインストールされている正確なライブラリに基づいてファイルを生成することもできます。

Python: インタープリターの選択 コマンドを使用して選択した環境が選択されている状態で、ターミナル: 新しいターミナルを作成 コマンド (⌃⇧` (Windows, Linux Ctrl+Shift+`))) を実行して、その環境がアクティブ化されたターミナルを開きます。
ターミナルで pip freeze > requirements.txt を実行して、プロジェクトフォルダーに requirements.txt ファイルを作成します。

プロジェクトのコピーを受け取った人 (またはビルドサーバー) は、アクティブな環境内でアプリが依存するパッケージを再インストールするために、pip install -r requirements.txt コマンドを実行するだけで済みます。

注: pip freeze は、現在使用していないパッケージを含む、現在の環境にインストールされているすべての Python パッケージを一覧表示します。また、正確なバージョン番号を持つパッケージも一覧表示されます。これらは、将来の柔軟性を高めるために範囲に変換したい場合があります。詳細については、pip コマンドドキュメントの「Requirements Files」を参照してください。

スーパーユーザーを作成し、管理インターフェイスを有効にする

既定では、Django は認証で保護された Web アプリの管理インターフェイスを提供します。インターフェイスは、プロジェクトの INSTALLED_APPS リスト (settings.py) に既定で含まれている組み込みの django.contrib.admin アプリを通じて実装され、認証は、INSTALLED_APPS にも既定で含まれている組み込みの django.contrib.auth アプリで処理されます。

管理インターフェイスを有効にするには、次の手順を実行します。

仮想環境の VS Code でターミナルを開き、コマンド python manage.py createsuperuser --username=<username> --email=<email> を実行して、アプリにスーパーユーザーアカウントを作成します。もちろん、<username> と <email> を個人情報に置き換えます。コマンドを実行すると、Django はパスワードを入力して確認するように求めます。

ユーザー名とパスワードの組み合わせを忘れないようにしてください。これらはアプリで認証するために使用する資格情報です。
プロジェクトレベルの urls.py (このチュートリアルでは web_project/urls.py) に次の URL ルートを追加して、組み込みの管理インターフェイスを指すようにします。
```
# This path is included by default when creating the app
 path("admin/", admin.site.urls),
```
サーバーを実行し、アプリの /admin ページ (開発サーバーを使用している場合は http://127.0.0.1:8000/admin など) にブラウザーを開きます。
django.contrib.auth のおかげで、ログインページが表示されます。スーパーユーザーの資格情報を入力します。
認証されると、ユーザーとグループを管理できるデフォルトの管理ページが表示されます。

管理インターフェイスは、好みに合わせてカスタマイズできます。たとえば、データベース内のエントリを編集および削除する機能を提供できます。カスタマイズの詳細については、Django 管理サイトドキュメントを参照してください。

コンテナーツール拡張機能を使用して Django アプリケーションのコンテナーを作成する

コンテナーツール拡張機能を使用すると、Visual Studio Code からコンテナー化されたアプリケーションを簡単に構築、管理、デプロイできます。このチュートリアルで開発した Django アプリケーション用の Python コンテナーの作成方法に興味がある場合は、コンテナー内の Python チュートリアルを参照してください。このチュートリアルでは、次の方法を説明します。

シンプルな Python コンテナーを記述する Dockerfile ファイルを作成する。
Django アプリの機能を構築、実行、検証する。
コンテナーで実行されているアプリをデバッグする。

次のステップ

Visual Studio Code での Django の操作に関するこのチュートリアルを完了したことをお祝い申し上げます！

このチュートリアルで完成したコードプロジェクトは、GitHub で見つけることができます: python-sample-vscode-django-tutorial。

このチュートリアルでは、Django ができることのほんの一部しか紹介していません。ビュー、テンプレート、データモデル、URL ルーティング、管理インターフェイス、他の種類のデータベースの使用、本番環境へのデプロイなど、さらに多くの詳細については、必ずDjango ドキュメントと公式 Django チュートリアルにアクセスしてください。

本番環境の Web サイトでアプリを試すには、チュートリアル「Docker コンテナーを使用して Python アプリを Azure App Service にデプロイする」を参照してください。Azure では、VS Code 内から Web アプリをデプロイできる標準コンテナー「Linux の App Service」も提供しています。

Python に関連する VS Code ドキュメントの次の記事も確認するとよいでしょう。

07/09/2025