チュートリアル: Visual Studio で Flask Web フレームワークを操作する

2025-08-08

この記事は、Visual Studio で Flask を操作する方法を示す 3 部構成のチュートリアルシリーズの最初の手順です。 Flask は、URL ルーティングとページレンダリングの基本を提供する、Web アプリケーション向けの軽量の Python フレームワークです。 Flask は、フォームの検証、データベースの抽象化、認証などの機能を直接提供しないため、"マイクロ" フレームワークと呼ばれます。これらの機能は、代わりに Flask 拡張機能と呼ばれる特別な Python パッケージによって提供されます。拡張機能は Flask とシームレスに統合されるため、Flask 自体の一部であるかのように見えます。たとえば、Flask 自体はページテンプレートエンジンを提供しません。テンプレートは、このチュートリアルで示すように、Jinja や Jade などの拡張機能によって提供されます。

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

Visual Studio ソリューションと Flask プロジェクトを作成する
プロジェクトの定型コードを調べてプロジェクトを実行する
Flask プロジェクトへの変更を維持するための Git リポジトリを作成する
Git ソースコードコントロールを操作する
Flask プロジェクトの仮想環境を作成する

このチュートリアルは、Flask クイックスタートとは異なります。 Flask の詳細と、Flask プロジェクトテンプレートを使用して、プロジェクトのより広範な開始点を提供する方法について説明します。プロジェクトを作成すると、テンプレートによって Flask パッケージが自動的にインストールされますが、クイックスタートではパッケージを手動でインストールする方法が示されています。

[前提条件]

Windows 上の Visual Studio 2022 以降。Visual Studio インストーラーで次のオプションが選択されています。
- [ワークロード] タブで、 Python 開発 オプションを選択します。詳細については、「Visual Studioでの Python サポートのインストール」を参照してください。
- [コードツール] の [個々のコンポーネント] タブで、[Git for Windows] オプションを選択します。

Visual Studio インストーラーで次のオプションが選択されている、Windows 上の Visual Studio 2017 または Visual Studio 2019。
- [ワークロード] タブで、 Python 開発 オプションを選択します。詳細については、「Visual Studioでの Python サポートのインストール」を参照してください。
- [コードツール] の [個々のコンポーネント] タブで、[Git for Windows] オプションと [GitHub Extension for Visual Studio] オプションを選択します。

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

Visual Studio for Mac はサポートされていません。詳細については、「 Visual Studio for Mac の概要」を参照してください。 Windows、Mac、Linux 上の Visual Studio Code は、使用可能な拡張機能を通じて Python と適切に連携します。

Visual Studio ソリューションと Flask プロジェクトを作成する

このチュートリアルの手順 1 では、2 つの別個の Flask プロジェクトを含む単一の Visual Studio ソリューションを作成します。 Visual Studio に含まれるさまざまな Flask プロジェクトテンプレートを使用して、プロジェクトを作成します。プロジェクトを同じソリューションに維持することで、比較のために異なるファイル間を簡単に切り替えることができます。

ソリューションと Flask Web プロジェクトを作成するには、次の手順に従います。

Visual Studio で[ファイル]>New>Project を選択し、"Flask" を検索します。次に、空の Flask Web プロジェクト テンプレートを選択し、[次へ] を選択します。
新しいプロジェクトとソリューションを構成します。
1. Visual Studio プロジェクトの名前を BasicProject に設定します。この名前は、Flask プロジェクトにも使用されます。
2. ソリューションとプロジェクトを保存する Visual Studio の場所を指定します。
3. [ ソリューションとプロジェクトを同じディレクトリに配置する] オプションを オフにします。
4. ソリューション名を LearningFlask に設定します。このソリューションは、このチュートリアルシリーズの複数のプロジェクトのコンテナーとして機能します。
を選択してを作成します。
しばらくすると、プロジェクト "BasicProject" で検出されたプロンプト Python パッケージ仕様ファイル "requirements.txt" が Visual Studio に表示されます。

ダイアログは、選択したテンプレートに、プロジェクトの仮想環境の作成に使用できる requirements.txt ファイルが含まれていることを示します。
右側にある X を選択してプロンプトを閉じます。このチュートリアルの後半では、仮想環境を作成し、ソース管理によって環境が除外されるようにします。 (環境は、 requirements.txtファイルから 後でいつでも作成できます)。

Visual Studio で[ファイル]>New>Project を選択し、"Flask" を検索します。次に、空の Flask Web プロジェクト テンプレートを選択します。 (テンプレートは、Python の下のダイアログにも表示されます>左側の一覧の Web。
ダイアログの下部で、新しいプロジェクトとソリューションを構成します。
1. Visual Studio プロジェクトの名前を BasicProject に設定します。この名前は、Flask プロジェクトにも使用されます。
2. ソリューションとプロジェクトを保存する Visual Studio の場所を指定します。
3. ソリューション名を LearningFlask に設定します。このソリューションは、このチュートリアルシリーズの複数のプロジェクトのコンテナーとして機能します。
4. [ ソリューションのディレクトリの作成 ] オプション (既定) を選択します。
5. [ 新しい Git リポジトリの作成 ] オプションを選択します。 Visual Studio では、ソリューションの作成時にローカル Git リポジトリが作成されます。
  
  このオプションが表示されない場合は、Visual Studio インストーラーを実行します。 [コードツール] の [個々のコンポーネント] タブで、Git for Windows と GitHub Extension for Visual Studio のオプションを追加します。
[OK] を選択.
しばらくすると、Visual Studio にプロンプトが表示されます 。このプロジェクトには外部パッケージが必要です。

ダイアログは、選択したテンプレートに最新の Flask 1.x パッケージを参照する requirements.txt ファイルが含まれていることを示します。 [ 必要なパッケージの表示 ] を選択すると、正確な依存関係を確認できます。
ダイアログを閉じる には、自分でインストール するオプションを選択します。このチュートリアルの後半では、仮想環境を作成し、ソース管理によって環境が除外されるようにします。 (環境は、 requirements.txtファイルから 後でいつでも作成できます)。

Git コントロールを調べる

次の手順では、Git ソース管理に対する Visual Studio のサポートについて理解します。

プロジェクトをローカルソース管理にコミットするには、Visual Studio メインウィンドウの右下にある [ ソース管理に追加 ] を選択し、 Git を選択します。

[ Git リポジトリの作成] ウィンドウが開き、新しいリポジトリを作成してプッシュできます。
リポジトリを作成すると、Visual Studio のメインウィンドウの右下に Git コントロールバーが表示されます。

Git コントロールバーには、左から右に、送信/受信コミットの数 (矢印 #/#)、コミットされていない変更の数 (鉛筆 #)、現在のブランチ名、および現在のリポジトリ名が表示されます。 Git コントロールは、メインツールバーの Git メニューでも使用できます。
Git コントロールバーで、変更 (鉛筆 #) を選択して [ Git の変更] ウィンドウを開きます。表示>Git の変更 (Ctrl+O、Ctrl+G) を選択可能です。

$Visual Studio の [Git Changes]$Git の変更$ ウィンドウのスクリーンショット。現在のコミット、変更、および隠し文字が表示されています。$

このウィンドウには、コミットされていない変更 (隠し変更を含む) に関する詳細が表示されます。新しく作成されたプロジェクトは既にソース管理に自動的にコミットされているため、保留中の変更は表示されません。
Git コントロールバーで、コミット (矢印 #/#) を選択し、[ すべてのコミットの表示] を選択します。

Git リポジトリウィンドウが開きます。表示>Git リポジトリ (Ctrl+O、Ctrl+R) を選択することもできます。

このウィンドウには、左側のウィンドウに現在のリポジトリの詳細が表示され、右側のウィンドウに送信/受信コミットがある現在のブランチが表示されます。

ファイルの相違点ビューを表示するには、中央のウィンドウでコミットを選択します。前のバージョンが左側に表示され、変更後のバージョンが右側に表示されます。詳細には、変更作成者、変更コミッター、コミットメッセージも含まれます。

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

Visual Studio メインウィンドウの下部隅にある Git コントロールを確認します。左から右に、これらのコントロールには、未プッシュのコミット (矢印 #)、未コミットの変更、リポジトリの名前、および現在のブランチが表示されます。

注

[新しいプロジェクト] ダイアログで [新しい Git リポジトリの作成] を選択しない場合、Git コントロールには、ローカルリポジトリを作成する [ソース管理に追加] コマンドのみが表示されます。
変更 (鉛筆 #) を選択すると、Visual Studio の [変更] ページでチームエクスプローラー ウィンドウが開きます。新しく作成されたプロジェクトは既にソース管理に自動的にコミットされているため、保留中の変更は表示されません。
Visual Studio のステータスバーでコミット (矢印 #) を選択し、チームエクスプローラーで [同期] ページを開きます。ローカルリポジトリしかないため、このページには、リポジトリを別のリモートリポジトリに発行するための簡単なオプションが用意されています。

独自のプロジェクトに必要なサービスを選択できます。このチュートリアルでは、GitHub の使用方法を示します。このチュートリアルの完成したサンプルコードは、Microsoft/python-sample-vs-learning-flask リポジトリに保持されています。
いずれかの発行コントロールを選択すると、チームエクスプローラーに詳細を求めるメッセージが表示されます。たとえば、このチュートリアルのサンプルを発行すると、リポジトリ自体が最初に作成され、リポジトリの URL で [ リモートリポジトリにプッシュ ] オプションが使用されます。

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

ヒント

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

このチュートリアルを進める際に、Visual Studio で Git コントロールを定期的に使用して変更をコミットしてプッシュする習慣を身に付けます。このチュートリアルでは、適切なポイントを思い出させます。

最初からソース管理を使用する

プロジェクトの先頭からソース管理を使用するには、いくつかの利点があります。プロジェクトの開始時からソース管理を使用する場合、特にリモートリポジトリも使用する場合は、プロジェクトの定期的なオフサイトバックアップを取得します。ローカルファイルシステム上でのプロジェクトの保守とは異なり、ソース管理では、完全な変更履歴と、1 つのファイルまたはプロジェクト全体を以前の状態に簡単に戻す機能も提供されます。変更履歴は、回帰 (テストエラー) の原因を特定するのに役立ちます。

ソース管理は、1 つのプロジェクトで複数のユーザーが作業している場合に不可欠です。これは、上書きを管理し、競合の解決を提供するためです。ソース管理は基本的に自動化の一種であり、ビルド、テスト、リリース管理の自動化に適しています。これはプロジェクトに Azure DevOps を使用する最初の手順であり、エントリの障壁が非常に低いため、最初からソース管理を使用しない理由はありません。

自動化としてのソース管理の詳細については、「 The Source of Truth: The Role of Repositories in DevOps」(DevOps におけるリポジトリの役割) を参照してください。これは、Web アプリにも適用されるモバイルアプリ向けに作成された MSDN Magazine の記事です。

Visual Studio によるプロジェクトの自動コミットを禁止する

Visual Studio で新しいプロジェクトが自動コミットされないようにするには、次の手順に従います。

ツール>Options>Source コントロール>Git グローバル設定を選択します。
既定では、[マージ後に変更をコミットする] オプションをオフにして、[OK] を選択します。

チームエクスプローラーで [設定] ページを開き、Git>Global 設定を選択します。
既定では、[マージ後に変更をコミットする] オプションをオフにして、[更新] を選択します。

仮想環境を作成し、ソース管理を除外する

プロジェクトのソース管理を構成したら、プロジェクトに必要な Flask パッケージを使用して仮想環境を作成できます。その後、[ Git の変更] ウィンドウを使用して、ソース管理から環境のフォルダーを除外できます。

ソリューションエクスプローラーで、[Python 環境] ノードを右クリックし、[環境の追加] を選択します。
[ 環境の追加 ] ダイアログで、[ 作成 ] を選択して既定値をそのまま使用します。 (必要に応じて仮想環境の名前を変更できます。サブフォルダーの名前は変更されますが、 env は標準的な規則です)。
Visual Studio で管理者特権の入力を求めるメッセージが表示された場合は、同意を入力します。 Visual Studio がパッケージをダウンロードしてインストールするまで数分待ちます。 Flask とその依存関係の場合、このプロセスでは、100 を超えるサブフォルダーに 1,000 個近くのファイルを展開する必要があります。進行状況は、Visual Studio の [出力] ウィンドウで確認できます。
Git コントロールバーで、コミットされていない変更 (現在 は 99 以上) を選択して、 Git の [変更] ウィンドウを開きます。

$[Git Changes]$Git の変更$ ウィンドウで仮想環境の作成に関するコミットされていない変更を表示する方法を示すスクリーンショット。$

仮想環境を作成すると、何千もの変更が加えられますが、ソース管理に含める必要はありません。プロジェクトを複製するユーザーまたは他のユーザーは、 requirements.txt ファイルを使用していつでも環境を再作成できます。
ソース管理から仮想環境を除外するには、[ Git の変更] ウィンドウで env フォルダーを右クリックし、[ 次のローカル項目を無視する] を選択します。

仮想環境を除外した後、残りの変更はプロジェクトファイル (.py) と .gitignore ファイルのみです。これには、仮想環境フォルダーの追加エントリが含まれます。

.gitignore ファイルの相違点ビューを表示するには、[Git の変更] ウィンドウでファイルをダブルクリックします。
[Git Changes]$ Git の変更$ ウィンドウで、"初期プロジェクトの変更" などのコミットメッセージを入力します。
[ コミット ] ドロップダウンメニューで、[ Commit Staged and Push]$ステージングおよびプッシュのコミット$ を選択します。

Git リポジトリ ウィンドウを開き、ステージングされたコミットが現在のブランチのローカル履歴に表示されたことを確認できます。

プロジェクトのソース管理を構成したら、プロジェクトに必要な Flask パッケージを使用して仮想環境を作成できます。その後、 チームエクスプローラー を使用して、ソース管理から環境のフォルダーを除外できます。

ソリューションエクスプローラーで、[Python 環境] ノードを右クリックし、[仮想環境の追加] を選択します。
[ 仮想環境の追加] ダイアログが開き、メッセージが表示されます。 requirements.txt ファイルが見つかりました。 このメッセージは、Visual Studio がファイルを使用して仮想環境を構成することを示しています。
既定値をそのまま使用するには、[ 作成 ] を選択します。 (必要に応じて仮想環境の名前を変更できます。サブフォルダーの名前は変更されますが、 env は標準的な規則です)。
Visual Studio で管理者特権の入力を求めるメッセージが表示された場合は、同意を入力します。 Visual Studio がパッケージをダウンロードしてインストールするまで数分待ちます。 Flask とその依存関係の場合、このプロセスでは、100 を超えるサブフォルダーに 1,000 個近くのファイルを展開する必要があります。進行状況は、Visual Studio の [出力] ウィンドウで確認できます。
Git コントロールバーで、コミットされていない変更 (現在は 99 以上) を選択して、チームエクスプローラーで [Git の変更] ページを開きます。

仮想環境を作成すると、何千もの変更が加えられますが、ソース管理に含める必要はありません。プロジェクトを複製するユーザーまたは他のユーザーは、 requirements.txt ファイルを使用していつでも環境を再作成できます。
ソース管理から仮想環境を除外するには、[ 変更 ] ページで env フォルダーを右クリックし、[ 次のローカル項目を無視する] を選択します。

仮想環境を除外した後、残りの変更はプロジェクトファイル (.py) と .gitignore ファイルのみです。これには、仮想環境フォルダーの追加エントリが含まれます。

.gitignore ファイルの相違点ビューを表示するには、ファイルをダブルクリックします。
コミットメッセージを入力し、[ すべてコミット] を選択し、必要に応じてコミットをリモートリポジトリにプッシュします。

仮想環境の目的を理解する

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

ソース管理下の仮想環境を削除する

仮想環境は、ソース管理下にある後で削除できます。次の手順に従います。

.gitignore ファイルを編集してフォルダーを除外します。
1. ファイル>開く>File を選択してファイルを開きます。
  
  チームエクスプローラーからファイルを開くこともできます。 [ 設定] ページで、[ リポジトリの設定] を選択します。 [無視] および [属性ファイル] セクションに移動し、[.gitignore] の横にある [編集] リンクを選択します。
2. コメントが # Python Tools for Visual Studio (PTVS)されているセクションを最後に見つけます。
3. そのセクションの後に、仮想環境フォルダーの新しい行 (/BasicProject/env など) を追加します。
コマンドウィンドウを開き、仮想環境フォルダー (env など) を含むフォルダー (BasicProject など) に移動します。
git rm -r env コマンドを実行して、現在ソース管理下にある仮想環境を削除します。
git commit -m 'Remove venv' コマンドを使用して変更をコミットするか、チームエクスプローラーの [変更] ページから変更をコミットします。

定型コードを調べる

このセクションでは、テンプレートの選択に基づいて Visual Studio によって作成されるプロジェクトファイル (.py) の定型コードを調べます。

ソリューションエクスプローラーを開き、ソリューションとプロジェクトファイルを表示します。最初のプロジェクトには、 app.py とrequirements.txt の 2 つのファイルのみが含 まれています 。

requirements.txt ファイルは、Flask パッケージの依存関係を指定します。このファイルが存在すると、最初にプロジェクトを作成するときに仮想環境を作成するよう招待されます。

1 つの app.py ファイルには、空の Flask Web プロジェクトの定型コードが含まれています。
エディターで app.py ファイルを開き、Flask の import ステートメントである最初のセクションを調べます。

このステートメントは、変数appに割り当てられるFlask クラスのインスタンスを作成します。このセクションでは、 wsgi_app 変数も割り当てます (これは Web ホストにデプロイするときに便利ですが、現時点では使用されません)。
```
from flask import Flask
app = Flask(__name__)

# Make the WSGI interface available at the top level so wfastcgi can get it.
wsgi_app = app.wsgi_app
```
確認する 2 番目のセクションは、ファイルの末尾に表示されます。このセクションには、Flask 開発サーバーの起動に使用できるオプションのコードが含まれています。

環境変数から取得した特定のホストとポートの値を使用するようにコードを定義するか、既定のホストとポートの値 localhost:55551使用できます。
```
if __name__ == '__main__':
    import os
    HOST = os.environ.get('SERVER_HOST', 'localhost')
    try:
        PORT = int(os.environ.get('SERVER_PORT', '5555'))
    except ValueError:
        PORT = 5555
    app.run(HOST, PORT)
```
調べるコードの 3 番目のセクションでは、URL ルートに関数を割り当てます。つまり、関数は URL で識別されるリソースを提供します。

ルートを定義するには、Flask の @app.route デコレーターを使用し、サイトルートからの相対 URL である引数を指定します。コードでわかるように、この関数はテキスト文字列のみを返します。これはブラウザーがレンダリングするのに十分です。このチュートリアルシリーズの以降の手順では、HTML を使用してより豊富なページをレンダリングするようにコードを更新します。
```
@app.route('/')
def hello():
    """Renders a sample page."""
    return "Hello World!"
```

Flask クラスの name 引数について

Flask クラスの name 引数は、アプリケーションのモジュールまたはパッケージの名前です。 Flask では、名前を使用して、テンプレート、静的ファイル、アプリに属するその他のリソースを検索する場所を決定します。 1 つのモジュールに含まれるアプリの場合、 __name__ は常に適切な値です。この名前は、デバッグ情報が必要な拡張機能でも重要です。詳細およびその他の引数については、 Flask クラスのドキュメント (flask.pocoo.org) を参照してください。

複数のルートデコレータを使用する

関数には、複数のルートデコレーターを含めることができます。同じ関数が複数のルートを処理する場合は、必要な数のデコレーターを使用できます。たとえば、/ ルートと /hello ルートの両方に対して hello 関数を使用するには、次のコードを使用します。

@app.route('/')
@app.route('/hello')
def hello():
    """Renders a sample page."""
    return "Hello World!"

変数 URL ルートとクエリパラメーターを使用する

Flask では、変数 URL ルートとクエリパラメーターを操作できます。ルートでは、任意の変数に <variable_name> 属性を付けます。 Flask は、URL パスの名前付き引数を使用して関数に変数を渡します。たとえば、 /hello/<name> の形式のルートでは、関数に name と呼ばれる文字列引数が生成されます。クエリパラメーターは、特にrequest.args.get メソッドを介して、request.args プロパティから利用できます。コードの例は次のとおりです。

# URL: /hello/<name>?message=Have%20a%20nice%20day
@app.route('/hello/<name>')
def hello(name):
    msg = request.args.get('message','')
    return "Hello " + name + "! "+ msg + "."

型を変更するには、変数の先頭に int、 float、 path (フォルダー名を区切るスラッシュを受け入れる)、および uuidします。詳細については、Flask ドキュメントの変数ルールを参照してください。

パッケージのインストール後に要件を生成する

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

ソリューションエクスプローラーで、[Python 環境] ノードを展開し、仮想環境を右クリックし、[requirements.txtの生成] を選択します。

環境を変更するときは、このコマンドを定期的に使用することをお勧めします。 requirements.txt ファイルの変更を、その環境に依存するその他のコード変更と共にソース管理にコミットします。ビルドサーバーで継続的インテグレーションを設定する場合は、環境を変更するたびにファイルを生成して変更をコミットする必要があります。

プロジェクトを実行する

これで、次の手順に従って Visual Studio でプロジェクトを実行する準備ができました。

Visual Studio で、 デバッグ>デバッグの開始 (F5) を選択するか、メインツールバーの Web サーバー を選択します (表示されるブラウザーは異なる場合があります)。
どちらのコマンドでも、ポート環境変数にランダムなポート番号が割り当てられ、Python app.py ファイルが実行されます。

コードは、Flask 開発サーバー内でそのポートを使用してアプリケーションを起動します。

Visual Studio がデバッガーの起動に失敗したというメッセージを投稿し、スタートアップファイルが見つからない場合は、ソリューションエクスプローラーで app.py ファイルを右クリックし、[スタートアップファイルとして設定] を選択します。
サーバーが起動すると、コンソールウィンドウが開き、サーバーログが表示されます。 Visual Studio によってブラウザーが自動的に開かれ、http://localhost:<port>に移動すると、hello 関数によってレンダリングされたメッセージが表示されます。
完了したら、コンソールウィンドウを閉じて、Flask 開発サーバーを停止します。 [デバッグ]>[デバッグの停止]を選択することもできます。

デバッグコマンドとプロジェクト Python コマンドの比較

[デバッグ] メニューコマンドと、プロジェクトの Python サブメニューに一覧表示されているサーバーコマンドの使用には違いがあります。

[デバッグ] メニューコマンドとツールバーボタンに加えて、プロジェクトのコンテキストメニューで Python>Start サーバーまたは Python>Start デバッグサーバー コマンドを使用してサーバーを起動することもできます。

[デバッグ] メニューコマンドとツールバーボタンに加えて、プロジェクトのコンテキストメニューで Python>Run サーバーまたは Python>Run デバッグサーバー コマンドを使用してサーバーを起動することもできます。

どちらのコマンドでもコンソールウィンドウが開き、実行中のサーバーのローカル URL (localhost:port) が表示されます。ただし、その URL を使用してブラウザーを手動で開く必要があり、デバッグサーバーを実行しても Visual Studio デバッガーは自動的に起動されません。 Debug>Attach to Process コマンドを使用して、後で実行中のプロセスにデバッガーをアタッチできます。

次のステップ

手順 2: ビューとページテンプレートを含む Flask アプリを作成する