チュートリアル: Visual Studio での Django Web フレームワークの概要

適用対象:yesVisual Studio noVisual Studio for Mac noVisual Studio Code

Django は、高速、安全、スケーラブルな Web 開発用に設計されたハイレベルの Python フレームワークです。 このチュートリアルでは、プロジェクト テンプレートのコンテキストでの Django フレームワークについて説明します。 Visual Studio には、Django ベースの Web アプリの作成を効率化するためのプロジェクト テンプレートが用意されています。

このチュートリアルでは、次の作業を行う方法について説明します。

  • "空の Django Web プロジェクト" テンプレートを使用して Git リポジトリに基本的な Django プロジェクトを作成する (手順 1)。
  • テンプレートを使用して、1 つのページがある Django アプリを作成し、そのページをレンダリングする (手順 2)。
  • 静的ファイルを提供し、ページを追加し、テンプレート継承を使用する (手順 3)。
  • Django Web プロジェクト テンプレートを使用して、複数のページがあり、応答性に優れたデザインのアプリを作成する (手順 4)。
  • ユーザーを認証する (手順 5)。

前提条件

  • Windows 用の Visual Studio 2017 以降は次のオプションを備えています。
    • Python 開発ワークロード (インストーラーの [ワークロード] タブ)。 手順については、Visual Studio での Python サポートのインストールに関するページをご覧ください。
    • Windows 向け GitVisual Studio 向け GitHub 拡張 ( [個別のコンポーネント] タブの [コード ツール] )。
  • Windows 上の Visual Studio 2022 と以下のオプション:
    • Python 開発ワークロード (インストーラーの [ワークロード] タブ)。 手順の詳細については、Visual Studio での Python サポートのインストールに関するページをご覧ください。
    • [個別のコンポーネント] タブの [コード ツール] 以下にある [Git for Windows]

Django プロジェクト テンプレートは、Python Tools for Visual Studio の以前のバージョンにも含まれていますが、 その詳細は、このチュートリアルの説明と異なる場合があります (特に、以前のバージョンの Django フレームワークとは異なります)。

現在、Visual Studio for Mac では Python 開発はサポートされていません。 Mac および Linux では、Visual Studio Code で Python 拡張を使用します。

"Visual Studio プロジェクト" と "Django プロジェクト"

Django の用語では、"Django プロジェクト" は、複数のサイト レベル構成ファイルと、1 つ以上の "アプリ" で構成されます。完全な Web アプリケーションを作成するために、これらのアプリを Web ホストにデプロイすることができます。 Django プロジェクトには複数のアプリを含めることができ、同じアプリを複数の Django プロジェクトに含めることができます。

Visual Studio プロジェクトには、Django プロジェクトと複数のアプリを含めることができます。 このチュートリアルで単に "プロジェクト" と言う場合は、Visual Studio プロジェクトを指します。 Web アプリケーションの "Django プロジェクト" 部分を指す場合は、明示的に "Django プロジェクト" と呼びます。

この一連のチュートリアルでは、3 つの独立した Django プロジェクトを含む単一の Visual Studio ソリューションを作成します。 各プロジェクトには、単一の Django アプリが含まれます。 同じソリューション内にプロジェクトを保持することで、異なるファイル間を簡単に切り替えて比較できます。

手順 1-1: Visual Studio プロジェクトとソリューションを作成する

コマンド ラインから Django を使用する場合、通常は django-admin startproject <project_name> コマンドを実行してプロジェクトを開始します。 Visual Studio では、"空の Django Web プロジェクト" テンプレートを使用することにより、Visual Studio プロジェクトおよびソリューション内に同じ構造が提供されます。

  1. Visual Studio で、 [ファイル]>[新規]>[プロジェクト] の順に選択し、"Django" を検索して、"空の Django Web プロジェクト" テンプレートを選択します (左側の一覧の [Python]>[Web] 以下にもテンプレートがあります)。

    Visual Studio での空の Django Web プロジェクト用の [新しいプロジェクト] ダイアログ ボックス

  2. ダイアログの下部にあるフィールドで、(前の図に示したように) 次の情報を入力し、 [OK] を選択します。

    • 名前: Visual Studio プロジェクトの名前を「BasicProject」に設定します。 この名前は Django プロジェクトにも使用されます。
    • 場所: Visual Studio ソリューションとプロジェクトを作成する場所を指定します。
    • ソリューション: このコントロールは既定の [新しいソリューションの作成] オプションに設定したままにします。
    • ソリューション名: このチュートリアルでは複数プロジェクトのコンテナーとしてのソリューションに適した LearningDjango に設定します。
    • ソリューションのディレクトリを作成: オンのままにします (既定)。
    • 新しい Git リポジトリの作成: ソリューションの作成時に Visual Studio でローカルの Git リポジトリが作成されるように、このオプション (既定ではオフ) をオンにします。 このオプションが表示されない場合は、Visual Studio インストーラーを実行し、[コード ツール][個別のコンポーネント] タブで Windows 用 Git および Visual Studio 用 GitHub 拡張機能を追加します。
  3. しばらくすると、Visual Studio に (次に示すように) "このプロジェクトには外部パッケージが必要です" というダイアログが表示されます。 テンプレートには、最新の Django 1.x パッケージを参照する requirements.txt ファイルが含まれているため、このダイアログが表示されます (正確な依存関係を確認するには [必要なパッケージを表示] を選択します)。

    プロジェクトに外部パッケージが必要であることを示すプロンプト

  4. オプション [I will install them myself](自分でインストールする) を選択します。 仮想環境を簡単に作成し、ソース管理から除外されていることを確認します (常に requirements.txt から環境を作成することができます)。

  1. Visual Studio で、[ファイル]>[新規]>[プロジェクト] を選び、"Django" を検索し、"空の Django Web プロジェクト" テンプレートを選んで、[次へ] を選びます。

  2. 次の情報を入力し、 [作成] を選択します。

    • プロジェクト名: Visual Studio プロジェクトの名前を「BasicProject」に設定します。 この名前は Django プロジェクトにも使用されます。
    • 場所: Visual Studio のソリューションとプロジェクトを作成する場所を指定します。
    • ソリューション: このコントロールは既定の [新しいソリューションの作成] オプションに設定したままにします。
    • ソリューション名: このチュートリアルでは、複数プロジェクトのコンテナーとしてのソリューションに適した LearningDjango に設定します。

手順 1-2: Git コントロールを確認し、リモート リポジトリに発行する

[新しいプロジェクト] ダイアログで [新しい Git リポジトリの作成] を選択したため、作成プロセスが完了すると、プロジェクトは既にローカル ソース管理にコミットされています。 この手順では、Visual Studio の Git コントロールと、ソース管理を操作する [チーム エクスプローラー] ウィンドウについて理解します。

  1. Visual Studio のメイン ウィンドウの下隅にある Git コントロールを確認します。 これらのコントロールは、左から右の順に、確定されていないコミット、確定されていない変更、リポジトリの名前、現在のブランチを示します。

    Visual Studio ウィンドウの Git コントロール

    注意

    [新しいプロジェクト] ダイアログで [新しい Git リポジトリの作成] を選択しない場合、Git コントロールには、ローカル リポジトリを作成する [Add to source control](ソース管理に追加) コマンドのみが表示されます。

    リポジトリを作成していない場合、Visual Studio には [Add to source control]\(ソース管理に追加\) が表示される

  2. 変更ボタンをクリックすると、Visual Studio の [変更] ページに [チーム エクスプローラー] ウィンドウが開きます。 新しく作成されたプロジェクトは既にソース管理に自動的にコミットされているので、保留中の変更は表示されません。

    [変更] ページの [チーム エクスプローラー] ウィンドウ

  3. Visual Studio のステータス バーで、確定されていないコミット ボタン (2 と表示された上向きの矢印) をクリックして、[チーム エクスプローラー][同期] ページを開きます。 ローカル リポジトリのみがあるため、ページには、リポジトリを別のリモート リポジトリに発行する簡単なオプションがあります。

    ソース管理に使用できる Git リポジトリ オプションを表示している [チーム エクスプローラー] ウィンドウ

    自身のプロジェクトにどちらのサービスでも選択できます。 このチュートリアルでは、GitHub の使用方法を示します。GitHub では、チュートリアルの完全なサンプル コードが Microsoft/python-sample-vs-learning-django リポジトリに保持されます。

  4. いずれかの [発行] コントロールを選択すると、 [チーム エクスプローラー] から詳細情報を要求されます。 たとえば、このチュートリアルのサンプルを発行する場合は、リポジトリ自体を最初に作成する必要があります。その場合、 [リモート リポジトリにプッシュ] オプションがリポジトリの URL と共に使用されました。

    既存のリモート リポジトリにプッシュする [チーム エクスプローラー] ウィンドウ

    既存のリポジトリがない場合は、 [Publish to GitHub](GitHub に発行) オプションと [Azure DevOps へプッシュ] オプションを使用して、Visual Studio から直接作成できます。

  5. このチュートリアルを進めるときに、Visual Studio のコントロールを定期的に使用して変更をコミットおよびプッシュする習慣を付けてください。 このチュートリアルでは、適切な時点で通知します。

ヒント

[チーム エクスプローラー] 内をすばやく移動するには、ヘッダー (上の図では "変更" または "プッシュ" と表示されています) を選択して、使用可能なページのポップアップ メニューを表示します。

この手順では、Visual Studio の Git コントロールと、 [チーム エクスプローラー] について理解します。 [チーム エクスプローラー] ウィンドウでは、ソース管理を操作します。

  1. プロジェクトをローカルのソース管理にコミットするには、次の手順を行います。

    1. Visual Studio メイン ウィンドウの下部にある [ソース管理に追加] コマンドを選択します。
    2. 次に、 [Git] オプションを選択します。
    3. これにより、 [Git リポジトリの作成] ウィンドウが表示されます。ここで新しいリポジトリを作成してプッシュすることができます。

    Git リポジトリを作成する。

  2. リポジトリを作成すると、下部に新しい Git コントロールのセットが表示されます。 これらのコントロールは、左から右の順に、プッシュされていないコミット数、コミットされていない変更の数、現在のブランチ、リポジトリの名前を示します。

    Visual Studio ウィンドウの Git コントロール。

  3. [Git 変更] ボタンを選択します。 Visual Studio で、 [チーム エクスプローラー][Git 変更] ページが開きます。 新しく作成されたプロジェクトは既にソース管理に自動的にコミットされているので、保留中の変更は表示されません。

    [Git 変更] ページの [チーム エクスプローラー] ウィンドウ。

  4. Visual Studio のステータス バーで、確定されていないコミット ボタン (2 と表示された上向きの矢印) をクリックして、[チーム エクスプローラー][同期] ページを開きます。 [同期] ページには、ローカル リポジトリを別のリモート リポジトリに簡単に発行できるオプションが用意されています。

    ソース管理に使用できる Git リポジトリ オプションを表示している [チーム エクスプローラー] ウィンドウ。

    自身のプロジェクトに必要な任意のサービスを選択できます。 このチュートリアルでは、GitHub の使用方法を示します。GitHub では、チュートリアルの完全なサンプル コードが Microsoft/python-sample-vs-learning-django リポジトリに保持されます。

  5. いずれかの [発行] コントロールを選択すると、 [チーム エクスプローラー] から詳細情報を要求されます。 たとえば、このチュートリアルのサンプルを発行する場合は、最初にリポジトリ自体を作成する必要があります。その場合、 [リモート リポジトリにプッシュ] オプションがリポジトリの URL と共に使用されました。

    既存のリモート リポジトリにプッシュするための [チーム エクスプローラー] ウィンドウ。

    既存のリポジトリがない場合は、 [Publish to GitHub](GitHub に発行) オプションと [Azure DevOps へプッシュ] オプションを使用して、Visual Studio から直接作成できます。

  6. このチュートリアルを進めるときに、Visual Studio のコントロールを定期的に使用して変更をコミットおよびプッシュする習慣を付けてください。 このチュートリアルでは、適切な時点で通知します。

ヒント

[チーム エクスプローラー] 内をすばやく移動するには、ヘッダー (上の図では "変更" または "プッシュ" と表示されています) を選択して、使用可能なページのポップアップ メニューを表示します。

質問: プロジェクトの最初からソース管理を使用する利点は何ですか?

回答: ソース管理を最初から使用すると、リモート リポジトリも使用する場合は特に、プロジェクトの定期的なオフサイト バックアップが提供されます。 ローカル ファイル システムでプロジェクトを保持する場合とは異なり、ソース管理では完全な変更履歴が提供されるので、1 つのファイルまたはプロジェクト全体を以前の状態に簡単に戻すことができます。 変更履歴は、回帰 (テストの失敗) の原因を特定するのに役立ちます。 複数の人がプロジェクトで作業している場合、ソース管理によって、上書きを管理し、競合を解決することができます。

最後に、ソース管理は、基本的にオートメーションの 1 つの形式であり、ビルド、テスト、リリース管理の自動化も可能にします。 これは、プロジェクトに DevOps を使うための最初の手順です。 使用を開始するための障壁が非常に低いため、実際、最初からソース管理を使用しない理由はありません。

オートメーションとしてのソース管理の詳細については、MSDN マガジンの記事「The Source of Truth: The Role of Repositories in DevOps」 (信頼できる情報源: DevOps でのリポジトリの役割) をご覧ください。この記事はモバイル アプリ用に書かれたものですが、Web アプリにも応用できます。

質問: Visual Studio が新しいプロジェクトを自動コミットしないようにすることはできますか?

回答: はい。 自動コミットを無効にするには、 [チーム エクスプローラー][設定] ページに移動し、 [Git]>[グローバル設定] の順に選択し、 [既定でマージ後に変更内容をコミット] というラベルの付いたオプションをオフにして、 [更新] を選択します。

手順 1-3: 仮想環境を作成し、ソース管理から除外する

プロジェクトのソース管理を構成したら、プロジェクトに必要な Django パッケージを含む仮想環境を作成できることに注意してください。 その後、 [チーム エクスプローラー] を使用して、環境のフォルダーをソース管理から除外できます。

  1. ソリューション エクスプローラー[Python 環境] ノードを右クリックし、 [仮想環境を追加] を選択します。

    ソリューション エクスプローラーの [仮想環境の追加] コマンド

  2. [仮想環境の追加] ダイアログが開き、"We found a requirements.txt file (requirements.txt ファイルが見つかりました)" というメッセージが表示されます。このメッセージは、Visual Studio がそのファイルを使用して仮想環境を構成することを示します。

    requirements.txt メッセージが表示された [仮想環境の追加] ダイアログ

  3. [作成] を選択して既定値を受け入れます (必要に応じて仮想環境の名前を変更できます (サブフォルダーの名前を変更するだけです) が、env が標準規則です)。

  4. プロンプトが表示されたら管理者特権に同意します。Visual Studio がパッケージをダウンロードし、インストールするまで数分かかります。Django の場合、任意の数のサブフォルダーに数千のファイルが展開されます。 Visual Studio の [出力] ウィンドウで進行状況を確認できます。 待っている間、次の質問のセクションについて熟考してください。

  5. (ステータス バーの) Visual Studio Git コントロールで、変更インジケーター (99* と表示されます) を選択します。これにより、[チーム エクスプローラー][変更] ページが開きます。

    仮想環境の作成によって何千もの変更が生じましたが、あなた (またはプロジェクトを複製している他のすべてのユーザー) は requirements.txt からいつでも環境を再作成できるので、そのいずれもソース管理に含める必要はありません。

    仮想環境を除外するには、env フォルダーを右クリックし、 [これらのローカル項目を無視] を選択します。

    ソース管理の変更で仮想環境を無視する

  6. 仮想環境を除外した後、残りの変更はプロジェクト ファイルと .gitignore に対するものだけです。 .gitignore ファイルには、仮想環境フォルダーの追加エントリが含まれています。 ファイルをダブルクリックして差分を確認できます。

  7. コミット メッセージを入力し、 [すべてコミット] を選択してから、コミットをリモート リポジトリにプッシュします。

  1. ソリューション エクスプローラー[Python 環境] ノードを右クリックし、 [仮想環境を追加] を選択します。

    ソリューション エクスプローラーの [仮想環境の追加] コマンド。

  2. [仮想環境の追加] ダイアログで [作成] を選んで既定値を受け入れます。 (必要に応じて仮想環境の名前を変更できます (サブフォルダーの名前を変更するだけです) が、env が標準規則です)。

    requirements.txt メッセージが表示された [仮想環境の追加] ダイアログ。

  3. プロンプトが表示されたら、管理者特権に同意し、パッケージが Visual Studio によってダウンロードされ、インストールされるまで数分間待ちます。 この間、数千個のファイルが多数のサブフォルダーに転送されます。 Visual Studio の [出力] ウィンドウで進行状況を確認できます。 待っている間、次の質問のセクションについて熟考してください。

  4. (ステータス バーの) Visual Studio Git コントロールで、変更インジケーター (99* と表示されます) を選択します。これにより、[チーム エクスプローラー][変更] ページが開きます。

    仮想環境の作成によって何千もの変更が生じましたが、ユーザー (またはプロジェクトを複製している他のすべてのユーザー) は requirements.txt からいつでも環境を再作成できるので、これらのいずれもソース管理に含める必要はありません。

  5. 仮想環境を除外するには、env フォルダーを右クリックし、 [これらのローカル項目を無視] を選択します。

    ソース管理の変更で仮想環境を無視する。

  6. 仮想環境を除外した後、残るの変更は、プロジェクト ファイルと .gitignore に対するものだけになります。 .gitignore ファイルには、仮想環境フォルダーの追加エントリが含まれています。 ファイルをダブルクリックして差分を確認できます。

  7. コミット メッセージを入力し、 [すべてコミット] を選択してから、コミットをリモート リポジトリにプッシュします。

質問: 仮想環境を作成する理由は何ですか?

回答: 仮想環境は、アプリの正確な依存関係を特定する優れた方法です。 このような特定により、グローバル Python 環境内での競合が回避され、テストとコラボレーションの両方が支援されます。 長い時間をかけて、アプリを開発するときに、多くの役立つ Python パッケージを必ず取り込むことになります。 プロジェクトに固有の仮想環境にパッケージを保持することで、プロジェクトの requirements.txt ファイルを簡単に更新できます。 requirements.txt ファイルでは、ソース管理に含まれる環境が説明されています。 プロジェクトがビルド サーバー、展開サーバー、その他の開発用コンピューターなどの他のコンピューターにコピーされると、requirements.txt だけを使用して環境を簡単に作成し直すことができます (そのため、環境をソース管理する必要はありません)。 詳細については、「仮想環境を使用する」を参照してください。

質問: ソース管理に既にコミットされている仮想環境を削除するにはどうすればよいですか?

回答: 最初に、 .gitignore ファイルを編集してフォルダーを除外します。 末尾にコメント # Python Tools for Visual Studio (PTVS) があるセクションを見つけて、/BasicProject/env などの仮想環境のフォルダーを示す新しい行を追加します (Visual Studio では、ソリューション エクスプローラーにファイルが表示されません。ファイルを直接開くには、[ファイル]>[開く]>[ファイル] に移動します。[チーム エクスプローラー] からファイルを開くこともできます。[設定] ページに移動し、[リポジトリ設定] を選びます。次に、[無視および属性ファイル] セクションに移動し、[.gitignore] の横にある [編集] リンクを選びます)。

次に、コマンド ウィンドウを開き、BasicProject などのフォルダーに移動します。 BasicProject フォルダーには、envなどの仮想環境フォルダーが含まれています。git rm -r env を実行します。 さらに、コマンドラインからこれらの変更をコミットするか (git commit -m 'Remove venv')、[チーム エクスプローラー][変更] ページからコミットします。

手順 1-4: 定型コードを確認する

プロジェクトの作成が完了したら、定型 Django プロジェクト コードを確認します (これは CLI コマンド django-admin startproject <project_name> によって生成されるコードと同じです)。

  1. プロジェクトのルートには manage.py があります。これは Django コマンドライン管理ユーティリティで、Visual Studio により、プロジェクトのスタートアップ ファイルとして自動的に設定されます。 コマンドラインで python manage.py <command> [options] を使用してユーティリティを実行します。 Django の一般的なタスクの場合、Visual Studio は便利なメニュー コマンドを提供します。 ソリューション エクスプローラーでプロジェクトを右クリックし、[Python] を選択して一覧を表示します。 これらのコマンドの一部は、このチュートリアルの中で確認できます。

    Python プロジェクトのコンテキスト メニューの Django コマンド。

  2. プロジェクトには、プロジェクトと同じ名前を持つフォルダーがあります。 これには基本的な Django プロジェクト ファイルが含まれています。

    • _init.py: このフォルダーが Python パッケージであることを Python に通知する空のファイルです。
    • settings.py: Django プロジェクトの設定が含まれており、Web アプリの開発の過程でこれらを変更します。
    • urls.py: Django プロジェクトの目次が含まれています。これらも同様に開発の過程で変更します。
    • wsgi.py: プロジェクトを処理する WSGI 互換 Web サーバーのエントリ ポイントです。 通常、このファイルは実稼働 Web サーバーのフックを提供するため、現状のままにします。

    ソリューション エクスプローラーでの Django プロジェクト ファイル。

  3. 前に示したように、Visual Studio テンプレートは Django パッケージの依存関係を指定する requirements.txt ファイルもプロジェクトに追加します。 このファイルの存在は、プロジェクトを最初に作成するときに仮想環境の作成を求めるものです。

質問: Visual Studio では、他のパッケージをインストールした後に仮想環境から requirements.txt ファイルを生成できますか?

回答: はい。 [Python 環境] ノードを展開し、仮想環境を右クリックして、 [requirements.txt を生成] を選択します。 環境を変更するときにこのコマンドを定期的に使用し、その環境に依存するその他のコード変更と共に requirements.txt に対する変更をソース管理にコミットすることをお勧めします。 ビルド サーバーに継続的インテグレーションを設定する場合は、環境を変更するたびに、ファイルを生成し、変更をコミットする必要があります。

手順 1-5: 空の Django プロジェクトを実行する

  1. Visual Studio で、 [デバッグ]>[デバッグの開始] (F5 キー) を選択するか、ツール バーの [Web サーバー] ボタンを使用します (表示されるブラウザーは異なる場合があります)。

    Visual Studio の [Web サーバー] ツールバー ボタンを実行する。

  2. サーバーの実行は、Django の組み込み開発サーバーを起動するコマンドmanage.py runserver <port> の実行を意味します。 Visual Studio に、スタートアップ ファイルがないことに関するメッセージと共に "デバッガーを開始できませんでした" と表示される場合は、ソリューション エクスプローラーmanage.py を右クリックし、[スタートアップ ファイルとして設定] を選択します。

  3. サーバーを起動すると、コンソール ウィンドウが開き、サーバー ログも表示されます。 Visual Studio では、ブラウザーで自動的に http://localhost:<port> が開きます。 ただし、Django プロジェクトにはアプリがないため、Django には、これまで正常に動作していることを確認する既定のページのみが表示されます。

    Django プロジェクトの既定のビュー。

  4. 完了したら、コンソール ウィンドウを閉じるか Visual Studio の [デバッグ]>[デバッグの停止] を使用してサーバーを停止します。

質問: Django は Web サーバーおよびフレームワークですか?

回答: はい、そしていいえです。 Django には、開発目的で使用される組み込みの Web サーバーがあります。 この Web サーバーは、Visual Studio でデバッグする場合など、Web アプリをローカルで実行するときに使用されます。 ただし、Web ホストに配置する場合、Django はホストの Web サーバーを代わりに使用します。 Django プロジェクトの wsgi.py モジュールは、実稼働サーバーへのフックに対処します。

質問: [デバッグ] メニュー コマンドとプロジェクトの Python サブメニュー上のサーバー コマンドの使用にはどのような違いがありますか?

回答: [デバッグ] メニュー コマンドとツール バー ボタンに加えて、プロジェクトのコンテキスト メニューの [Python]>[Run server](サーバーの実行) または [Python]>[Run debug server](デバッグ サーバーの実行) を使用してサーバーを起動することもできます。 どちらのコマンドも、実行中のサーバーのローカル URL (localhost:port) を表示するコンソール ウィンドウを開きます。 ただし、その URL を使用してブラウザーを手動で開く必要があり、デバッグ サーバーを実行しても、Visual Studio デバッガーは自動的に起動しません。 必要に応じて、 [デバッグ]>[プロセスにアタッチ] コマンドを使用して、実行中のプロセスにデバッガーをアタッチできます。

次のステップ

現時点では、基本的な Django プロジェクトにはアプリが含まれていません。 次の手順では、アプリを作成します。 Django プロジェクトよりも Django アプリを使用することが多いため、現時点では定型ファイルについて詳しく知る必要はありません。

詳しい説明