チュートリアル: Visual Studio で完全な Django Web プロジェクトテンプレートを使用する

2025-08-08

この記事では、 Visual Studio の Django Web フレームワークを操作するチュートリアルシリーズの手順 4 について説明します。

このチュートリアルシリーズの前の手順では、2 つのアプリケーション用に Visual Studio ソリューションと Django プロジェクトを作成します。 BasicProject は空の Django Web プロジェクトテンプレートに基づく最小限のアプリであり、 HelloDjangoApp は Django 1.9 アプリテンプレートを使用して、HTML テンプレートのページビューを含む静的ファイルを提供します。

手順 4 では、完全な Django Web プロジェクトテンプレートに基づいて、3 番目の Django アプリをソリューションに追加します。このテンプレートは、基本ページテンプレートから継承する 3 つのページを含む、より充実した Django アプリを作成するのに役立ちます。このアプリは、jQuery や Bootstrap などの静的 JavaScript ライブラリを使用します。テンプレートの認証機能については、チュートリアルシリーズの最後の手順で説明します。

チュートリアルの手順 4 では、次の方法を学習します。

Django Web プロジェクト テンプレートを使用して、より完全な Django Web アプリを作成する
テンプレートによって提供される Django プロジェクト構造を確認する
プロジェクトテンプレートによって作成されたビューとページテンプレートを調べる
テンプレートによって提供される URL ルーティングを調べる

[前提条件]

手順 1 で作成した Visual Studio ソリューション: 空の Django Web プロジェクトテンプレートを使用する Visual Studio プロジェクトとソリューションを作成します。
Django テンプレートのバージョン、Visual Studio プロジェクトと Django プロジェクト、Mac での Python 開発の詳細については、このチュートリアルシリーズの手順 1 の「前提条件の」セクションを参照してください。
(省略可能)Visual Studio のエンドツーエンドの Django ワークフローについては、前の手順の手順を確認します。
- 手順 2: ビューとページテンプレートを使用してアプリを作成する
- 手順 3: 静的ファイルを提供し、HTML テンプレートを使用する

テンプレートからプロジェクトを作成する

完全な Django Web プロジェクトテンプレートから Django Web アプリを作成するには、次の手順に従います。

Visual Studio で ソリューションエクスプローラーに移動し、 LearningDjango ソリューションを右クリックし、[ 追加>新しいプロジェクト] を選択します。

注

チュートリアルシリーズの手順 1 では、このシリーズで説明されているすべての Django プロジェクトを含む LearningDjango Visual Studio ソリューションを作成します。すべての Django プロジェクトを同じソリューションに保持することで、比較のために異なるファイル間を簡単に切り替えることができます。

このチュートリアルの手順で Django プロジェクトに別の Visual Studio ソリューションを使用する場合は、代わりに [ファイル>New>Project を選択します。
[ 新しいプロジェクトの追加 ] ダイアログで、"Django" を検索し、 Django Web プロジェクト テンプレートを選択して、[ 次へ] を選択します。
新しいプロジェクトを構成します。
1. プロジェクトの名前を DjangoWeb に設定します。
2. プロジェクトを保存する Visual Studio の場所を指定します。 (既定値は、ソリューションと既存の Django プロジェクトの現在の場所です)。
を選択してを作成します。

仮想環境を作成する

Visual Studio でプロジェクトの作成が開始されると、メッセージプロンプト の Python パッケージ仕様ファイル "requirements.txt" がプロジェクト "DjangoWeb" で検出されました。

このメッセージは、選択したテンプレートに、プロジェクトの仮想環境を作成するために使用できる requirements.txt ファイルが含まれていることを示します。

Von Bedeutung

メッセージプロンプトが表示されない場合は、次のセクションで Django スーパーユーザーを作成しようとしたときにエラーが発生する可能性があります。

Visual Studio でプロジェクトの requirements.txt ファイルが認識されたことを確認します。 ソリューションエクスプローラーで、DjangoWeb プロジェクトフォルダーを展開し、requirements.txt ファイルを開きます。 Visual Studio では、メッセージプロンプトが期待どおりに表示されます。

仮想環境を設定するには、次の手順に従います。

メッセージプロンプトで、インストール先のリンクを選択するか、 仮想環境を作成します。
[ 仮想環境の追加 ] ダイアログで、[ 作成 ] を選択して既定値をそのまま使用します。

Django スーパーユーザーの作成

Visual Studio で DjangoWeb プロジェクトが作成されると、プロジェクト readme.html ファイルが開きます。このファイルには、プロジェクトの Django スーパーユーザー (つまり管理者) を作成する手順が含まれています。

Django スーパーユーザーを作成するには、次の手順に従います。

ソリューションエクスプローラーで、DjangoWeb プロジェクトを右クリックし、[Python] を選択し、[Django スーパーユーザーの作成] を選択します。
プロンプトで、ユーザー名、パスワード、メールアドレスなど、プロジェクトのアカウントの詳細を入力します。

既存のアカウントにセキュリティ資格情報を使用する必要はありません。 Django Web アプリで特に使用する新しいユーザー名とパスワードを作成できます。
後で使用するために資格情報を記録します。 Web アプリの認証機能を実行するには、資格情報が必要です。

Django Web プロジェクトを実行する

これで、Django Web アプリケーションを実行し、テンプレートによって提供される機能を確認する準備ができました。

ソリューションエクスプローラーで、DjangoWeb プロジェクトを右クリックし、[スタートアッププロジェクトとして設定] を選択します。

このコマンドは、選択したプロジェクトを Visual Studio ソリューションの既定の スタートアッププロジェクト として設定します。 デバッガーを起動すると、Visual Studio によってスタートアッププロジェクトのコードが実行されます。 ソリューションエクスプローラーでは、ソリューションのスタートアッププロジェクトの名前が太字で表示されます。
[ デバッグ>デバッグの開始 (F5) を選択するか、ツールバーの [Web サーバー ] ボタンを使用してサーバーを実行します。

Web アプリページを探索する

テンプレートによって作成されたアプリには、"ホーム"、"バージョン情報"、"連絡先" の 3 つのページがあります。ナビゲーションバーには、各ページのリンクがあります。

ナビゲーションバーのオプションを使用して、ページ間を切り替えてみてください。
実行中のアプリのさまざまな部分 (ページコンテンツを含む) を調べます。現在のページに基づいて URL アドレスルートがどのように変化するかに注目してください。
ナビゲーションバーの [ログイン ] オプションを選択して、アプリで認証します。前のセクションで指定したスーパーユーザーの資格情報を入力します。
Django Web プロジェクト テンプレートによって作成されたアプリは、モバイルフォームファクターに対応するレスポンシブレイアウトに Bootstrap を使用します。この応答性を確認するには、ブラウザーのサイズを狭いビューに変更して、コンテンツが垂直方向にレンダリングされ、ナビゲーションバーがメニューアイコンに変わります。

次のセクションの演習では、アプリを実行したままにすることができます。

作業内容を保存する場合は、アプリを停止し、このチュートリアルシリーズの前の手順の手順に従います。

Web アプリプロジェクトの構造を調べる

Django Web プロジェクト テンプレートは、次の構造で Visual Studio で Web アプリプロジェクトを作成します。

DjangoWeb Visual Studio プロジェクトルート内のファイル:
- manage.py: Django 管理ユーティリティ。
- db.sqlite3: 既定の SQLite データベース。
- requirements.txt: Django 1.x に依存するプロジェクト内のパッケージを識別します。
- readme.html: 要件や重要な使用手順など、Web アプリに関する情報が含まれます。 Visual Studio では、プロジェクトの作成後にこのファイルが表示されます。前述のように、このファイルには、アプリのスーパーユーザー (管理者) アカウントを作成する手順が記載されています。
DjangoWeb/app フォルダー:

このフォルダーには、 ビュー、 モデル、 テスト、フォームなど、すべてのアプリファイル が含まれています。このフォルダーには、テンプレート、移行、静的など、ファイルを含むサブフォルダーもあります。通常、アプリフォルダーの名前を変更して、 アプリ 名自体のようなより特徴的な名前を使用します。
DjangoWeb/DjangoWeb フォルダー:

このフォルダーは Django プロジェクトフォルダーです。これには、一般的な Django プロジェクトファイル ( __init__.py、 settings.py、 urls.py、wsgi.py) が含 まれています。 settings.py ファイルは、プロジェクトテンプレートを使用してアプリとデータベースファイル用に既に構成されています。 urls.py ファイルは、ログインフォームを含むすべてのアプリページへのルートが既に設定されています。

Visual Studio プロジェクト間で仮想環境を共有できます。ただし、異なるプロジェクトが時間の経過と同時に異なるパッケージを使用する可能性があることに注意してください。共有仮想環境には、それを使用するすべてのプロジェクトのすべてのパッケージが含まれている必要があります。

既存の仮想環境を使用するには、次の手順に従います。

Visual Studio に依存関係をインストールするように求められたら、[ 自分でインストールする ] オプションを選択します。
ソリューションエクスプローラーで、[Python 環境] ノードを右クリックし、[既存の仮想環境の追加] を選択します。
仮想環境を含むフォルダーに移動して選択し、[ OK] を選択します。

ビューとページテンプレートを調べる

Django Web プロジェクトによって作成されたページビューのコードは、プロジェクトのアプリ/views.py ファイルにあります。各ビュー関数は、テンプレートへのパスと単純なディクショナリオブジェクトを使用して、 django.shortcuts.render ヘルパー関数を呼び出します。 about関数は、Web アプリの [About] ページのビューを作成します。

def about(request):
   """Renders the about page."""
   assert isinstance(request, HttpRequest)
   return render(
      request,
      'app/about.html',
      {
         'title':'About',
         'message':'Your application description page.',
         'year':datetime.now().year,
      }
   )

ビューの HTML ページテンプレートは、プロジェクトの app/templates/app フォルダー (通常は名前を変更) にあります。基本テンプレート (layout.html) が最も広範です。このファイルは、アプリビューに必要なすべての静的ファイル (JavaScript と CSS) を参照します。

このテンプレートでは、contentとscriptsの 2 つのblock セクションも定義します。他の Web アプリページは、layout.htmlファイルの {% block content %} セクションをオーバーライドします。 layout.htmlファイルの注釈付きバージョンでは、<body>要素内の 2 つのblock セクションを確認できます。

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8" />

   <!-- Define viewport for Bootstrap's responsive rendering -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ title }} - My Django Application</title>

   {% load staticfiles %}
   <link rel="stylesheet" type="text/css" href="{% static 'app/content/bootstrap.min.css' %}" />
   <link rel="stylesheet" type="text/css" href="{% static 'app/content/site.css' %}" />
   <script src="{% static 'app/scripts/modernizr-2.6.2.js' %}"></script>
</head>

<body>
   <!-- Navigation bar section omitted in this excerpt -->

   <div class="container body-content">

<!-- Content block - App pages override this block -->
{% block content %}
{% endblock %}

      <!-- App header and footer content -->
      <hr/>
      <footer>
         <p>&copy; {{ year }} - My Django Application</p>
      </footer>

   </div>

   <script src="{% static 'app/scripts/jquery-1.10.2.js' %}"></script>
   <script src="{% static 'app/scripts/bootstrap.js' %}"></script>
   <script src="{% static 'app/scripts/respond.js' %}"></script>

<!-- Scripts block - List page-specific scripts in this block -->
{% block scripts %}
{% endblock %}

</body>

</html>

個々の HTML ページテンプレート、 about.html、 contact.html、 およびindex.htmlは、基本テンプレート layout.htmlを拡張します。 about.html テンプレートファイルは最も簡単で、{% extends %} タグと {% block content %} セクションを示しています。

{% extends "app/layout.html" %}

<!-- Content block overrides "content" block in layout template -->
{% block content %}

<h2>{{ title }}.</h2>
<h3>{{ message }}</h3>

<p>Use this area to provide additional information.</p>

{% endblock %}

index.html と contact.html のテンプレートファイルは、同じ構造を使用し、content ブロックに詳しい手順を提供します。

app/templates/app フォルダーには、さらに 2 つの HTML ページテンプレートが含まれています。 login.html ファイルは、[ログイン アプリ] ページのページコンテンツを定義します。 loginpartial.html ファイルは、{% include %} ステートメントを使用してlayout.htmlファイルに取り込まれます。このチュートリアルシリーズの最後の手順 (ユーザーの認証) では、これら 2 つのテンプレートファイルについて詳しく説明します。

テンプレート内の {% ブロック %} タグと {% endblock %} タグをインデントする

HTML サンプルは、Visual Studio のページテンプレートで提供されるマークアップを示しています。 block タグがマークアップでインデントされていないことに注意してください。 block タグの場所を明確に表示するために、Visual Studio ページテンプレートはこれらのタグをインデントしません。

ただし、 block タグをインデントすると、Django ページテンプレートは正常に動作します。一部の開発者は、適切な親 HTML 要素内でタグを配置することを好みます。

URL ルートパターンを調べる

Django Web プロジェクト テンプレートによって作成された Django プロジェクトの URL ファイル (DjangoWeb/DjangoWeb/urls.py) には、次のコードが含まれています。

"""
Definition of urls for DjangoWeb
"""

from datetime import datetime
from django.urls import path
from django.contrib import admin
from django.contrib.auth.views import LoginView, LogoutView
from app import forms, views

urlpatterns = [
    path('', views.home, name='home'),
    path('contact/', views.contact, name='contact'),
    path('about/', views.about, name='about'),
    path('login/',
         LoginView.as_view
         (
             template_name='app/login.html',
             authentication_form=forms.BootstrapAuthenticationForm,
             extra_context=
             {
                 'title': 'Log in',
                 'year' : datetime.now().year,
             }
         ),
         name='login'),
    path('logout/', LogoutView.as_view(next_page='/'), name='logout'),
    path('admin/', admin.site.urls),
]

最初の 3 つの URL パターンは、プロジェクトのアプリ/views.py ファイルで定義されているhome、contact、aboutビュー関数に直接マップされます。 login/パターンとlogout/ パターンは、アプリの認証機能に対応します。

^login/$や^logout$などの特別な URL ルートパターンは、アプリ定義ビューではなく、組み込みの Django ビューにアクセスします。 url メソッドの呼び出しには、ビューをカスタマイズするための追加データも含まれます。このチュートリアルシリーズの最後の手順 (ユーザーの認証) では、URL 呼び出しを操作する方法について説明します。

URL パターンの違いを調べる

このチュートリアルシリーズの手順 3 (HTML テンプレートの継承) では、[バージョン情報] ページのパスで '^about$' パターンが使用されます。このパターンは、このチュートリアルの手順で示す URL ルートとは異なります。テンプレートのバージョンによっては、サンプルコードでは、^about$ではなく、"バージョン情報" ページの URL パターンがabout/または^aboutとして表示される場合があります。

正規表現の末尾にドル記号 $ がないため、プロジェクトテンプレートの多くのバージョンでは見落とされています。 URL パターンは、"about" または "About" という名前のページに対して完全に機能します。ただし、末尾の $ 文字がない場合、URL パターンは "about=django"、"about09876"、"about-face" などの URL にも一致します。末尾の $ 文字は、"about" という用語に対してのみ一致することを保証する URL パターンを作成します。

次のステップ

手順 5: Django でユーザーを認証する

次の方法で共有

チュートリアル: Visual Studio で完全な Django Web プロジェクト テンプレートを使用する

[前提条件]

テンプレートからプロジェクトを作成する

仮想環境を作成する

Django スーパー ユーザーの作成

Django Web プロジェクトを実行する

Web アプリ ページを探索する

Web アプリ プロジェクトの構造を調べる

Visual Studio プロジェクト間で仮想環境を共有する

ビューとページ テンプレートを調べる