💻 6月3日の MS Build で開催される VS Code Live に参加しましょう。

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 拡張機能のディスカッション Q&Aで回答を検索したり、質問したりできます。

前提条件

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

  1. Python 拡張機能をインストールします。

  2. Python 3 のバージョンをインストールします（このチュートリアルは Python 3 のために書かれています）。選択肢は次のとおりです。

    • (すべてのオペレーティングシステム) python.org からダウンロードします。通常、ページに最初に表示される Python 3.9.1 のダウンロード ボタンを使用します (または、最新バージョンであれば何でも構いません)。
    • (Linux) 組み込みの Python 3 のインストールで十分ですが、他の Python パッケージをインストールするには、ターミナルで sudo apt install python3-pip を実行する必要があります。
    • (macOS) macOS 上での Homebrew を使用したインストール (brew install python3)。(macOS のシステムにインストールされている Python はサポートされていません)。
    • (すべてのオペレーティングシステム) Anaconda からのダウンロード（データサイエンス目的）。

  3. Windows では、Python インタープリターの場所が PATH 環境変数に含まれていることを確認してください。コマンドプロンプトで path を実行して場所を確認できます。Python インタープリターのフォルダーが含まれていない場合は、Windows の設定を開き、「environment」を検索し、「アカウントの環境変数を編集」を選択して、「Path」変数を編集し、そのフォルダーを含めます。

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

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

Python Environments拡張機能は、venv、conda、poetryなど、複数の環境タイプをサポートしています。このチュートリアルでは、Pythonに組み込まれており、追加のツールを必要としないvenvを使用します。他の環境タイプのステップは似ています。詳細は環境の作成を参照してください。

  1. ファイルシステム上に、このチュートリアル用のプロジェクトフォルダー (例: hello_django) を作成します。

  2. VS Code でプロジェクトフォルダーを開くには、code . を実行するか、VS Code を起動して ファイル > フォルダーを開く コマンドを使用します。

  3. Python: 環境を作成 コマンドを使用して仮想環境を作成します。

    1. コマンドパレットを開きます (⇧⌘P (Windows, Linux Ctrl+Shift+P))
    2. Python: 環境の作成を検索して選択します。
    3. venv環境を作成するためにVenvを選択します。
    4. 環境に使用するPythonインタープリターを選択します。

    VS Codeは、ワークスペースに.venvフォルダを作成し、自動的に新しい環境を選択します。

    ヒント

    環境は Python サイドバーを使用しても作成できます。環境マネージャー を展開し、+ ボタンでクイック作成を選択します。これにより、適切なデフォルト値が使用されます。

    Django tutorial: opening the Command Palette in VS Code

  4. 選択された環境は VS Code のステータスバーの右側に表示され、('.venv': venv) インジケーターは仮想環境を使用していることを示しています。

    Django tutorial: selected environment showing in the VS Code status bar

  5. 以下のいずれかの方法で仮想環境に Django をインストールします。

    パッケージ管理UIを使用する

    1. Pythonサイドバーで環境マネージャーを展開します。
    2. .venv環境を右クリックし、パッケージの管理を選択します。
    3. django を検索し、インストール を選択します。

    ターミナルを使用する

    ターミナル: 新しいターミナルを作成 (⌃⇧` (Windows, Linux Ctrl+Shift+`)) をコマンドパレットから実行します。これにより、ターミナルが作成され、仮想環境が自動的にアクティブになります。次に、

    python -m pip install django

これで Django コードを記述するための自己完結型環境が整いました。新しいターミナルを開くと、VS Code は環境を自動的にアクティブ化します。VS Code の外部で別のコマンドプロンプトまたはターミナルを開く場合は、source .venv/bin/activate (Linux/macOS) または .venv\Scripts\Activate.ps1 (Windows) を実行して環境をアクティブ化します。コマンドプロンプトの先頭に (.venv) が表示されている場合、環境がアクティブ化されています。

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

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

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

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

  1. 仮想環境がアクティブ化されている 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 サーバーのフックを提供するため、通常はこのファイルをそのままにしておきます。

  2. 次のコマンドを実行して、空の開発データベースを作成します。

    python manage.py migrate

    サーバーを初めて実行すると、開発目的のデフォルトの SQLite データベースがファイル db.sqlite3 に作成されますが、トラフィックの少ない Web アプリケーションでは本番環境でも使用できます。データベースに関する追加情報については、「データベースの種類」セクションを参照してください。

  3. 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 のように指定します。

  4. Ctrl+クリック で http://127.0.0.1:8000/ の URL をターミナル出力ウィンドウから開くと、デフォルトのブラウザーでそのアドレスが表示されます。Django が正しくインストールされ、プロジェクトが有効であれば、以下に示すデフォルトページが表示されます。VS Code のターミナル出力ウィンドウにはサーバーログも表示されます。

    Django tutorial: default view of empty Django project

  5. 完了したら、ブラウザーウィンドウを閉じ、VS Code でサーバーを Ctrl+C を使用して停止します (ターミナル出力ウィンドウに示されているとおりです)。

Django アプリを作成する

  1. 仮想環境がアクティブ化された 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 (テストを作成する ため) もありますが、これらはここでは説明しません。

  2. hello/views.py を以下のコードと一致するように変更します。これはアプリのホームぺージ用に単一のビューを作成します。

    from django.http import HttpResponse

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

  3. 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"),
]

  4. 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)
]

  5. 変更したすべてのファイルを保存します。

  6. VS Code ターミナルで、再度仮想環境をアクティブ化した状態で、開発サーバーを python manage.py runserver を使用して実行し、ブラウザーで http://127.0.0.1:8000/ を開いて「Hello, Django」と表示されるページを確認します。

    Django tutorial: the basic Django app running in a browser

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

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

  1. VS Code で 実行 ビューに切り替えます (左側のアクティビティバーまたは F5 を使用)。「実行とデバッグをカスタマイズするには launch.json ファイルを作成します」というメッセージが表示される場合があります。これは、まだデバッグ構成を含む launch.json ファイルがないことを意味します。launch.json ファイルを作成 リンクをクリックすると、VS Code がファイルを作成できます。

    Django tutorial: initial view of the debug panel

  2. リンクを選択すると、VS Code がデバッグ構成を求めます。ドロップダウンから Django を選択すると、VS Code が新しい launch.json ファイルに Django 実行構成を入力します。launch.json ファイルには多数のデバッグ構成が含まれており、それぞれが configuration 配列内の個別の JSON オブジェクトです。

  3. 「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
    }
  ]
}

    この構成は、VS Code に選択された Python インタープリターと args リストの引数を使用して "${workspaceFolder}/manage.py" を実行するように指示します。この構成で VS Code デバッガーを起動することは、アクティブ化された仮想環境で VS Code ターミナルで python manage.py runserver を実行することと同じです。(必要であれば、"5000" のようなポート番号を args に追加できます。) "django": true エントリは、Django ページテンプレートのデバッグを有効にするように VS Code に指示します。これはこのチュートリアルの後半で説明します。

  4. 構成をテストするには、実行 > デバッグの開始 メニューコマンドを選択するか、リストの横にある緑色の デバッグの開始 矢印 (F5) を選択します。

    Django tutorial: start debugging/continue arrow on the debug toolbar

  5. Ctrl+クリック で http://127.0.0.1:8000/ の URL をターミナル出力ウィンドウから開くと、ブラウザーが開き、アプリが正常に実行されていることを確認できます。

  6. 終了したらブラウザを閉じ、デバッガーを停止します。デバッガーを停止するには、ツールバーの停止ボタン（赤い四角）または **実行** > **デバッグの停止**コマンド (⇧F5 (Windows、Linux Shift+F5)) を使用します。

  7. これでいつでも 実行 > デバッグの開始 を使用してアプリをテストできます。これは、変更されたすべてのファイルを自動的に保存する利点もあります。

デバッガーを探索する

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

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

  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> とは異なります。同じビュー関数で両方を処理したい場合は、各バリアントのパスを定義します。

  2. views.py の内容を以下のコードに置き換えて、デバッガーでステップ実行できる hello_there 関数を定義します。

    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 関数の引数として渡されます。コードコメントに記載されているように、アプリへの様々な攻撃を避けるために、常に任意のユーザー提供情報をフィルタリングしてください。この場合、コードは name 引数を文字のみを含むようにフィルタリングし、制御文字や HTML などの挿入を防ぎます。(次のセクションでテンプレートを使用する場合、Django は自動フィルタリングを行うため、このコードは不要です。)

  3. hello_there 関数の最初のコード行 (now = datetime.now()) にブレークポイントを設定するには、次のいずれかの操作を行います。

    • カーソルをその行に置き、F9 を押すか、
    • カーソルをその行に置き、**実行** > **ブレークポイントの切り替え**メニューコマンドを選択するか、
    • 行番号の左側の余白を直接クリックします（マウスオーバーすると薄い赤の点が表示されます）。

    ブレークポイントが左側の余白に赤い点として表示されます。

    Django tutorial: a breakpoint set on the first line of the hello_there function

  4. デバッガーを起動するには、**実行** > **デバッグの開始**メニューコマンドを選択するか、リストの横にある緑色の**デバッグの開始**矢印を選択します (F5)

    Django tutorial: start debugging/continue arrow on the debug toolbar

    ステータスバーの色が変わり、デバッグ中であることを示すことに注目してください。

    Django tutorial: appearance of the debugging status bar

    VS Code にデバッグツールバー（以下に表示）も表示され、次の順序でコマンドが含まれています: 一時停止（または続行、F5）、ステップオーバー (F10)、ステップイン (F11)、ステップアウト (⇧F11 (Windows, Linux Shift+F11))、再起動 (⇧⌘F5 (Windows, Linux Ctrl+Shift+F5))、および停止 (⇧F5 (Windows, Linux Shift+F5))。各コマンドの説明については、VS Code のデバッグを参照してください。

    Django tutorial: the VS Code debug toolbar

  5. 出力は「Python デバッグコンソール」ターミナルに表示されます。ブラウザーを開き、http://127.0.0.1:8000/hello/VSCode に移動します。ページがレンダリングされる前に、VS Code は設定したブレークポイントでプログラムを一時停止します。ブレークポイント上の小さな黄色い矢印は、次に実行されるコード行を示します。

    Django tutorial: VS Code paused at a breakpoint

  6. ステップ オーバーを使用して、now = datetime.now() ステートメントを実行します。

  7. VS Code ウィンドウの左側には、ローカル変数（now など）や引数（name など）を表示する**変数**ペインが表示されます。その下には、**ウォッチ**、**コールスタック**、**ブレークポイント**のペインがあります（詳細についてはVS Code のデバッグを参照）。**ローカル**セクションで、さまざまな値を展開してみてください。値をダブルクリックするか（または Enter (Windows、Linux F2) を使用して）、値を変更することもできます。ただし、now などの変数を変更すると、プログラムが破損する可能性があります。開発者は通常、コードが正しい値を生成しなかった場合にのみ値を修正するために変更を加えます。

    Django tutorial: local variables and arguments in VS Code during debugging

  8. プログラムが一時停止すると、デバッグコンソール パネル (ターミナルパネルの「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'

    ヒント: **デバッグコンソール**には、アプリ内から発生した例外も表示されます。これらの例外はターミナルには表示されない場合があります。たとえば、**実行とデバッグ**ビューの**コールスタック**領域で「例外で一時停止」というメッセージが表示された場合は、**デバッグコンソール**に切り替えて例外メッセージを確認してください。

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

    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'

  10. 必要に応じてさらに数行のコードをステップ実行し、続行 (F5) を選択してプログラムを実行させます。ブラウザウィンドウに結果が表示されます。

    Django tutorial: result of the modified program

  11. コードの行を別の datetime フォーマットを使用するように変更し、例えば now.strftime("%a, %d %b, %y at %X") のように変更し、ファイルを保存します。Django サーバーは自動的にリロードされるため、デバッガーを再起動することなく変更が適用されます。ブラウザーでページを更新して更新を確認します。

  12. 終了したらブラウザを閉じ、デバッガーを停止します。デバッガーを停止するには、ツールバーの停止ボタン（赤い四角）または **実行** > **デバッグの停止**コマンド (⇧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)、右クリックのコンテキストメニューにもあります）は似ていますが、クラス定義をエディターに直接表示します（コードを隠さないようにエディターウィンドウのスペースを確保します）。プレビューウィンドウを閉じるには、**Esc**キーを押すか、右上隅の**x**を使用します。

    Django tutorial: Peek Definition showing the Flask class inline

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

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

はるかに良い方法は、**テンプレート**を使用して HTML をコードから完全に分離することであり、コードはデータ値のみに関心を持ち、レンダリングには関与しないようにすることです。

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

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

  1. web_project/settings.py ファイルで、INSTALLED_APPS リストを見つけ、次のエントリを追加します。これにより、プロジェクトがアプリを認識し、テンプレート処理を扱えるようになります。

    'hello',

  2. hello フォルダー内に templates という名前のフォルダーを作成し、次にアプリ名と一致する hello という別のサブフォルダーを作成します (この2層のフォルダー構造は一般的な Django の慣習です)。

  3. 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>

  4. views.py の上部に、次の import ステートメントを追加します。

    from django.shortcuts import render

  5. 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()
        }
    )

    コードがはるかに単純になり、マークアップと書式設定がすべてテンプレートに含まれているため、データ値のみに関心があることがわかります。

  6. アプリを実行し（デバッガー内または外で、⌃F5 (Windows、Linux Ctrl+F5) を使用）、/hello/name URL に移動して結果を確認します。

  7. また、<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 を参照してください。

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

  1. プロジェクトの web_project/urls.py で、次の import ステートメントを追加します。

    from django.contrib.staticfiles.urls import staticfiles_urlpatterns

  2. 同じファイルに、末尾に次の行を追加します。これにより、標準の静的ファイルの URL がプロジェクトが認識するリストに含まれます。

    urlpatterns += staticfiles_urlpatterns()

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

  1. hello フォルダー内に static という名前のフォルダーを作成します。

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

    この余分なサブフォルダーを作成する理由は、Django プロジェクトを本番サーバーにデプロイする際に、すべての静的ファイルを単一のフォルダーに収集し、それを専用の静的ファイルサーバーで配信するためです。static/hello サブフォルダーは、アプリの静的ファイルが収集されるときに、アプリ固有のサブフォルダーに配置され、同じプロジェクト内の他のアプリのファイルと衝突しないようにします。

  3. static/hello フォルダー内に、以下の内容で site.css という名前のファイルを作成します。このコードを入力した後、VS Code が CSS ファイルに提供する構文ハイライト (色のプレビューを含む) も確認してください。

    .message {
    font-weight: 600;
    color: blue;
}

  4. templates/hello/hello_there.html で、<title> 要素の後に次の行を追加します。{% load static %} タグは、カスタムの Django テンプレートタグセットであり、{% static %} を使用してスタイルシートのようなファイルを参照できるようにします。

    {% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'hello/site.css' %}" />

  5. 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' }}.

  6. アプリを実行し、/hello/name URL に移動して、メッセージが青色でレンダリングされることを確認します。終了したらアプリを停止します。

collectstatic コマンドを使用する

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

  1. web_project/settings.py で、collectstatic コマンドを使用するときに静的ファイルが収集される場所を定義する次の行を追加します。

    STATIC_ROOT = BASE_DIR / 'static_collected'

  2. ターミナルで、コマンド python manage.py collectstatic を実行し、hello/site.css が最上位の static_collected フォルダーに manage.py とともにコピーされていることを確認します。

  3. 実際には、静的ファイルを変更したときや、本番環境にデプロイする前に、常に collectstatic を実行します。

基本テンプレートを継承する複数のテンプレートの作成

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

また、同じテンプレートを継承するページを多数作成することが予想されるため、新しいページテンプレートを初期化するためのコードスニペットを VS Code で作成しておくと便利です。コードスニペットは、既存のコードのコピー＆ペースト操作で生じる可能性のあるエラーを回避するために、単一のソースから一貫性のあるコード片を提供します。

次のセクションでは、このプロセスのさまざまな部分を順を追って説明します。

基本ページテンプレートとスタイルの作成

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

次の手順では、基本テンプレートの作成について説明します。

  1. 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>

  2. 既存の「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 を継承するため、適切な基本テンプレートへの参照を含む新しいテンプレートファイルを作成するために、**コードスニペット**を作成すると時間を節約できます。コードスニペットは、既存のコードからコピー＆ペーストを使用するときに発生する可能性のあるエラーを回避するために、一貫性のあるコード片を単一のソースから提供します。

  1. VS Code で、ファイル (Windows/Linux) または Code (macOS) メニューを選択し、次に 基本設定 > ユーザースニペット を選択します。

  2. 表示されるリストで html を選択します。(以前にスニペットを作成している場合、リストの 既存のスニペット セクションに「html.json」としてオプションが表示される場合があります。)

  3. 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"
},

  4. html.json ファイルを保存します (⌘S (Windows、Linux Ctrl+S))。

  5. これで、スニペットのプレフィックス (例: djext) を入力し始めると、次のセクションに示すように、VS Code がスニペットをオートコンプリートオプションとして提供します。また、スニペットの挿入 コマンドを使用して、メニューからスニペットを選択することもできます。

コードスニペットに関する詳細については、スニペットの作成を参照してください。

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

コードスニペットを設定したので、ホーム、アバウト、コンタクトページのテンプレートをすばやく作成できます。

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

    Django tutorial: autocompletion for the djextlayout code snippet

    補完を選択すると、スニペットのコードが表示され、カーソルがスニペットの挿入ポイントに配置されます。

    Django tutorial: insertion of the djextlayout code snippet

  2. 「title」ブロックの挿入位置に Home と書き込み、「content」ブロックに <p>Visual Studio Code Django チュートリアルのホームぺージです。</p> と書き込み、ファイルを保存します。これらの行は、拡張ページテンプレートの唯一のユニークな部分です。

  3. templates/hello フォルダー内に about.html を作成し、スニペットを使用してボイラープレートマークアップを挿入し、「title」ブロックに About us、「content」ブロックに <p>Visual Studio Code Django チュートリアルのアバウトページです。</p> をそれぞれ挿入し、ファイルを保存します。

  4. 前の手順を繰り返して、templates/hello/contact.html を Contact us と <p>Visual Studio Code Django チュートリアルの連絡先ページです。</p> を使用して作成します。

  5. アプリの urls.py で、/about および /contact ページ用のルートを追加します。path 関数の name 引数は、テンプレートの {% url %} タグでページを参照する名前を定義することに注意してください。

    path("about/", views.about, name="about"),
path("contact/", views.contact, name="contact"),

  6. 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 の「マイグレーション」は、時間の経過とともにモデルを進化させるにつれて、基盤となるデータベースのすべての詳細を自動的に処理します。一般的なワークフローは次のとおりです。

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

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

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

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

データベースの種類

デフォルトでは、Django は開発作業に適したアプリのデータベース用の db.sqlite3 ファイルを含んでいます。SQLite を使用する時期 (sqlite.org) に記載されているように、SQLite は1日あたり10万ヒット未満の低トラフィックから中トラフィックのサイトでは問題なく機能しますが、高トラフィックには推奨されません。また、単一のコンピューターに限定されているため、負荷分散や地理的レプリケーションのようなマルチサーバーシナリオでは使用できません。

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

モデルを定義する

Django モデルは、アプリの models.py ファイルに配置する django.db.model.Models から派生した Python クラスです。データベースでは、各モデルに自動的に id という名前の一意の ID フィールドが与えられます。他のすべてのフィールドは、django.db.models の型 (CharField (制限付きテキスト)、TextField (無制限テキスト)、EmailField、URLField、IntegerField、DecimalField、BooleanField、DateTimeField、ForeignKey、ManyToMany など) を使用してクラスのプロパティとして定義されます。(詳細については、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 が生成するスクリプトを確認します。データベース自体を見て、スキーマが更新されていることを確認することもできます。

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

モデルを通じてデータベースを使用する

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

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

    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

  2. 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 ドキュメントの「クロスサイトリクエストフォージェリ保護」を参照してください。

  3. アプリの static/hello/site.css ファイルに、入力フォームを広くするルールを追加します。

    input[name=message] {
    width: 80%;
}

  4. アプリの urls.py ファイルに、新しいページのルートを追加します。

    path("log/", views.log_message, name="log"),

  5. 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})

  6. すべてを試す前に、もう1つのステップ！templates/hello/layout.html で、「navbar」div にメッセージログページへのリンクを追加します。

    <!-- Insert below the link to Home -->
<a href="{% url 'log' %}" class="navbar-item">Log Message</a>

  7. アプリを実行し、ブラウザーでホームぺージを開きます。ナビゲーションバーの メッセージログ リンクを選択すると、メッセージログページが表示されます。

    Django tutorial: the message logging page added to the app

  8. メッセージを入力し、ログ を選択すると、ホームぺージに戻ります。ホームぺージにはまだログ記録されたメッセージは表示されていませんが (これはすぐに修正します)、いくつか追加のメッセージを自由にログ記録してください。必要であれば、SQLite ブラウザのようなツールを使用してデータベースを覗き見し、レコードが作成されていることを確認してください。データベースを読み取り専用で開くか、アプリを使用する前にデータベースを閉じることを忘れないでください。そうしないと、データベースがロックされているためアプリが失敗します。

  9. 完了したらアプリを停止します。

  10. 次に、ホームぺージを変更してログ記録されたメッセージを表示します。まず、アプリの 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 %}

  11. static/hello/site.css で、テーブルを少し整形するルールを追加します。

    .message_list th,td {
    text-align: left;
    padding-right: 15px;
}

  12. views.py で、Django の汎用 ListView クラスをインポートします。これはホームぺージを実装するために使用します。

    from django.views.generic import ListView

  13. 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

  14. アプリの urls.py で、データモデルをインポートします。

    from hello.models import LogMessage

  15. urls.py でも、新しいビューの変数を作成します。これは、最新の5つの LogMessage オブジェクトを降順で取得し (つまりデータベースをクエリし)、テンプレートコンテキスト内のデータの名前 (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",
)

  16. urls.py で、ホームぺージへのパスを修正して home_list_view 変数を使用するようにします。

        # Replace the existing path for ""
    path("", home_list_view, name="home"),

  17. アプリを起動し、ブラウザーでホームぺージを開くと、メッセージが表示されるはずです。

    Django tutorial: app home page displaying message from the database

  18. 完了したらアプリを停止します。

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

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

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

  1. templates/hello/home.html で、以下の画像で黄色い矢印で示されているように、{% if message_list %} と {% for message in message_list %} の両方の行にブレークポイントを設定します。

    Django tutorial: breakpoints set in a Django page template

  2. デバッガーでアプリを実行し、ブラウザーでホームぺージを開きます。(既にデバッガーを実行している場合は、ブレークポイントを設定した後にアプリを再起動する必要はありません。ページを更新するだけです。) VS Code がテンプレートの {% if %} ステートメントでデバッガーに入り、変数 ペインにすべてのコンテキスト変数を表示することを確認してください。

    Django tutorial: debugger stopped at breakpoints in the page template

  3. ステップオーバー (F10) コマンドを使用してテンプレートコードをステップ実行します。デバッガーがすべての宣言型ステートメントをスキップし、手続き型コードで一時停止することを確認してください。例えば、{% for message in message_list %} ループをステップ実行すると、message の各値を調べたり、<td>{{ message.log_date | date:'d M Y' }}</td> のような行にステップしたりできます。

  4. デバッグコンソール パネルで変数を操作することもできます。(ただし、date のような Django フィルターは現在コンソールでは利用できません。)

  5. 準備ができたら、続行 (F5) を選択してアプリの実行を完了し、ブラウザーでレンダリングされたページを表示します。完了したらデバッガーを停止します。

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

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

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

ソース管理またはその他の手段でアプリのコードを共有する場合、仮想環境内のすべてのファイルをコピーすることは意味がありません。受信者は常に自分でその環境を再作成できるためです。

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

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

  1. **Python: インタープリターの選択**コマンドを使用して選択した環境で、**ターミナル: 新しいターミナルを作成**コマンド (⌃⇧` (Windows、Linux Ctrl+Shift+`))) を実行して、その環境がアクティブ化されたターミナルを開きます。

  2. ターミナルで、pip freeze > requirements.txt を実行して、プロジェクトフォルダーに requirements.txt ファイルを作成します。

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

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

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

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

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

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

    ユーザー名とパスワードの組み合わせを覚えておいてください。これらはアプリで認証するために使用する資格情報です。

  2. プロジェクトレベルの urls.py (このチュートリアルでは web_project/urls.py) に次の URL ルートを追加して、組み込みの管理インターフェースを指すようにします。

    # This path is included by default when creating the app
 path("admin/", admin.site.urls),

  3. サーバーを実行し、アプリの /admin ページ (開発サーバーを使用している場合は http://127.0.0.1:8000/admin など) をブラウザーで開きます。

  4. ログインページが表示されます (django.contrib.auth のおかげです)。スーパーユーザーの資格情報を入力します。

    Django tutorial: default Django login prompt

  5. 認証が完了すると、ユーザーとグループを管理できるデフォルトの管理ページが表示されます。

    Django tutorial: the default Django administrative interface

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

Container Tools 拡張機能を使用して Django アプリのコンテナーを作成する

Container Tools 拡張機能 は、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 ドキュメントの次の記事を確認することもできます

02/04/2026
© . This site is unofficial and not affiliated with Microsoft.