🚀 VS Code で で入手しましょう!

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 からのダウンロード。通常は、ページに最初に表示される Download 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 の設定を開き、「環境」を検索して、アカウントの環境変数を編集 を選択し、そのフォルダーを含めるように Path 変数を編集します。

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

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

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

  2. そのフォルダーで、次のコマンド (お使いのコンピューターに合わせて) を使用して、現在のインタープリターに基づいて .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 モジュールが利用できないためエラーが表示され、環境が未完了の状態になります。

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

  4. VS Code で、コマンドパレットを開きます (表示 > コマンドパレット または (⇧⌘P (Windows、Linux Ctrl+Shift+P)))。次に、Python: インタープリターを選択 コマンドを選択します

    Django tutorial: opening the Command Palette in VS Code

  5. コマンドは、VS Code が自動的に見つけることができる利用可能なインタープリターのリストを表示します (リストは異なります。目的のインタープリターが表示されない場合は、Python 環境の構成を参照してください)。リストから、./.venv または .\.venv で始まるプロジェクトフォルダー内の仮想環境を選択します

    Django tutorial: Selecting the virtual environment for Python

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

    注: Windows で、デフォルトのターミナルタイプが PowerShell の場合、システムでスクリプトの実行が無効になっているため、activate.ps1 を実行できないというエラーが表示される場合があります。エラーには、スクリプトを許可する方法に関する情報へのリンクが記載されています。それ以外の場合は、ターミナル: デフォルトプロファイルの選択 を使用して、代わりに "コマンドプロンプト" または "Git Bash" をデフォルトとして設定します。

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

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

  8. VS Code ターミナルで次のコマンドを実行して、仮想環境の pip を更新します

    python -m pip install --upgrade pip

  9. 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 つ以上の「アプリ」で構成されています。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

    サーバーを最初に実行すると、開発目的で意図された db.sqlite3 ファイルにデフォルトの SQLite データベースが作成されますが、低ボリュームの 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. ターミナル出力ウィンドウで http://127.0.0.1:8000/ URL を Ctrl+クリックして、デフォルトのブラウザーでそのアドレスを開きます。Django が正しくインストールされ、プロジェクトが有効な場合は、以下に示すデフォルトページが表示されます。VS Code ターミナル出力ウィンドウには、サーバーログも表示されます。

    Django tutorial: default view of empty Django project

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

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
    }
  ]
}

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

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

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

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

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

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

デバッガーの調査

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

開始する前に: ターミナルで 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. デバッガーでステップ実行できる 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 関数への引数として渡されます。コードコメントで説明されているように、アプリへのさまざまな攻撃を回避するために、ユーザーが提供する任意の情報を常にフィルター処理してください。この場合、コードは 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 に繰り返し移動しやすくするには、views.py などのファイルのどこかに print ステートメントを使用してその URL を出力します。URL は VS Code ターミナルに表示され、Ctrl+クリックしてブラウザーで開くことができます。

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

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

  • 定義へ移動 は、コードからオブジェクトを定義するコードにジャンプします。たとえば、views.py で、home 関数の HttpResponse を右クリックし、定義へ移動 (または F12 を使用) を選択します。これにより、Django ライブラリのクラス定義に移動します。

  • 定義をピーク (⌥F12 (Windows Alt+F12、Linux Ctrl+Shift+F10)、右クリックコンテキストメニューにもあります) も同様ですが、クラス定義をエディターに直接表示します (コードを不明瞭にしないようにエディターウィンドウにスペースを作ります)。Peek ウィンドウを閉じるには Escape キーを押すか、右上隅の 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 コードを含む) を URL に配置できます。これは clean_name で終わり、ブラウザーで実行されることになります。

より良いプラクティスは、テンプレート を使用して 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 の先頭に、次のインポートステートメントを追加します

    from django.shortcuts import render

  5. また、views.py で、django.shortcuts.render メソッドを使用してテンプレートをロードし、テンプレートコンテキスト を提供するように hello_there 関数を変更します。コンテキストは、テンプレート内で使用する変数のセットです。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. プログラムを起動し (デバッガーの内外で、Ctrl+F5 を使用)、/hello/name URL に移動して、結果を確認します。

  7. Django の自動エスケープが機能していることを確認するには、<a%20value%20that%20could%20be%20HTML> のような名前を使用して /hello/name URL に移動してみてください。"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 が manage.py と並んでトップレベルの static_collected フォルダーにコピーされることを確認します。

  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」ブロックと「content」ブロックにそれぞれ About us と <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.html テンプレートを使用するように home 関数を変更します。

    # 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では、モデルはPythonクラスであり、django.db.models.Model から派生し、特定のデータベースオブジェクト（通常はテーブル）を表します。これらのクラスをアプリの 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 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 が生成するスクリプトを確認します。データベース自体を見て、スキーマが更新されていることを確認することもできます。

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

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

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

  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 という名前の変数が与えられていることを前提としています。次に、「ログ」というラベルの付いた送信ボタンを追加します。

    {% 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 Browserのようなツールを使用してデータベースを覗いて、レコードが作成されていることを確認してください。データベースを読み取り専用として開くか、アプリを使用する前にデータベースを閉じることを忘れないでください。そうしないと、データベースがロックされているため、アプリが失敗します。

  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コマンドドキュメントのRequirements Filesを参照してください。

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

デフォルトでは、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 管理サイトドキュメントを参照してください。

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

Docker拡張機能を使用すると、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は、標準コンテナであるApp Service on Linuxも提供しており、VS Code内からWebアプリをデプロイできます。

Pythonに関連するVS Codeドキュメントの次の記事も確認することをお勧めします。

04/03/2025