VS Codeのエージェントモードを拡張するには、を試してください！

Visual Studio Code での Flask チュートリアル

Flask は、URLルーティングとページレンダリングの基本機能を提供する、Webアプリケーション向けの軽量Pythonフレームワークです。

Flask は、フォーム検証、データベース抽象化、認証などの機能を直接提供しないため、「マイクロ」フレームワークと呼ばれています。これらの機能は、代わりに Flask 拡張機能と呼ばれる特別な Python パッケージによって提供されます。これらの拡張機能は Flask とシームレスに統合され、まるで Flask 自体の一部であるかのように機能します。例えば、Flask はページテンプレートエンジンを提供しませんが、Flask のインストールには Jinja テンプレートエンジンがデフォルトで含まれています。便宜上、これらのデフォルト機能を Flask の一部として扱うことが一般的です。

この Flask チュートリアルでは、共通のベーステンプレートを使用する3つのページを持つシンプルな Flask アプリを作成します。その過程で、ターミナル、エディター、デバッガー、コードスニペットなど、Visual Studio Code のいくつかの機能を体験します。

この Flask チュートリアルの完成したコードプロジェクトは GitHub で見つけることができます: python-sample-vscode-flask-tutorial。

問題が発生した場合は、Python 拡張機能 Discussions Q&A で回答を検索したり、質問したりできます。

前提条件

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

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

  2. Python 3 のバージョン (このチュートリアルは Python 3 用に書かれています) をインストールします。オプションは次のとおりです。

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

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

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

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

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

  2. VS Code でこのフォルダーを開くには、ターミナルでそのフォルダーに移動して code . を実行するか、VS Code を起動して ファイル > フォルダーを開く コマンドを使用します。

  3. VS Code で、コマンドパレットを開きます (表示 > コマンドパレット または (⇧⌘P (Windows, Linux Ctrl+Shift+P)))。次に、Python: 環境の作成 コマンドを選択して、ワークスペースに仮想環境を作成します。venv と、作成に使用したい Python 環境を選択します。

    注: 環境を手動で作成したい場合、または環境作成プロセスでエラーが発生した場合は、環境のページを参照してください。

    Flask tutorial: opening the Command Palette in VS Code

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

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

  5. VS Code のターミナルで次のコマンドを実行して、仮想環境に Flask をインストールします。

    python -m pip install flask

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

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

  1. VS Code で、メニューから ファイル > 新しいファイル を使用するか、Ctrl+N を押すか、エクスプローラービューの新しいファイルアイコン (下記参照) を使用して、プロジェクトフォルダーに app.py という名前の新しいファイルを作成します。

    Flask tutorial: new file icon in Explorer View

  2. app.py で、Flask をインポートし、Flask オブジェクトのインスタンスを作成するコードを追加します。以下のコードを (コピー＆ペーストではなく) 入力すると、VS Code の IntelliSense とオートコンプリート を確認できます。

    from flask import Flask
app = Flask(__name__)

  3. app.py で、コンテンツ (この場合は単純な文字列) を返す関数を追加し、Flask の app.route デコレーターを使用して URL ルート / をその関数にマッピングします。

    @app.route("/")
def home():
    return "Hello, Flask!"

    ヒント: 同じ関数にマッピングしたいルートの数に応じて、複数のデコレーターを1行に1つずつ使用できます。

  4. app.py ファイルを保存します (⌘S (Windows, Linux Ctrl+S))。

  5. 統合ターミナルで python -m flask run と入力してアプリを実行します。これにより Flask 開発サーバーが起動します。開発サーバーはデフォルトで app.py を探します。Flask を実行すると、次のような出力が表示されるはずです。

    (.venv) D:\py\\hello_flask>python -m flask run
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

    Flask モジュールが見つからないというエラーが表示された場合は、前のセクションの最後に説明したように、仮想環境で python -m pip install flask を実行したことを確認してください。

    また、開発サーバーを別の IP アドレスまたはポートで実行したい場合は、--host=0.0.0.0 --port=80 のようにホストとポートのコマンドライン引数を使用します。

  6. レンダリングされたページを既定のブラウザーで開くには、ターミナルで http://127.0.0.1:5000/ の URL を Ctrl+クリックします。

    Flask tutorial: the running app in a browser

  7. / のような URL にアクセスすると、デバッグターミナルに HTTP リクエストを示すメッセージが表示されることを確認してください。

    127.0.0.1 - - [11/Jul/2018 08:40:15] "GET / HTTP/1.1" 200 -

  8. ターミナルで Ctrl+C を使用してアプリを停止します。

ヒント: app.py 以外のファイル名 (例: webapp.py) を使用する場合は、FLASK_APP という環境変数を定義し、その値を希望するファイルに設定する必要があります。これにより、Flask の開発サーバーは、デフォルトの app.py ファイルではなく、FLASK_APP の値を使用します。詳細については、Flask コマンドラインインターフェイスを参照してください。

デバッガーでアプリを実行する

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

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

  1. app.py の内容を次のコードに置き換えます。これにより、デバッガーでステップ実行できる2番目のルートと関数が追加されます。

    import re
from datetime import datetime

from flask import Flask

app = Flask(__name__)


@app.route("/")
def home():
    return "Hello, Flask!"


@app.route("/hello/<name>")
def hello_there(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 content

    新しい URL ルート /hello/<name> に使用されるデコレーターは、追加の任意の値を受け入れることができるエンドポイント /hello/ を定義します。ルート内の < と > の中の識別子は、関数に渡され、コードで使用できる変数を定義します。

    URL ルートは大文字と小文字を区別します。たとえば、ルート /hello/<name> は /Hello/<name> とは異なります。同じ関数で両方を処理したい場合は、各バリアントにデコレーターを使用します。

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

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

    • その行にカーソルを置いて F9 を押すか、
    • その行にカーソルを置いて、メニューから 実行 > ブレークポイントの切り替え コマンドを選択するか、
    • 行番号の左側の余白を直接クリックします (そこにカーソルを合わせると、薄い赤い点が表示されます)。

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

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

  3. VS Code の 実行とデバッグ ビューに切り替えます (左側のアクティビティバーまたは ⇧⌘D (Windows, Linux Ctrl+Shift+D) を使用)。"実行とデバッグをカスタマイズするには launch.json ファイルを作成してください" というメッセージが表示される場合があります。これは、まだデバッグ設定を含む launch.json ファイルがないことを意味します。launch.json ファイルを作成 リンクをクリックすると、VS Code がファイルを作成できます。

    Flask tutorial: initial view of the debug panel

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

  5. 「Python: Flask」という名前の設定までスクロールして確認します。この設定には "module": "flask", が含まれており、これによりデバッガーが起動するときに VS Code に -m flask を使用して Python を実行するように指示します。また、env プロパティで FLASK_APP 環境変数を定義し、デフォルトで app.py である起動ファイルを識別しますが、別のファイルを簡単に指定することもできます。ホストやポートを変更したい場合は、args 配列を使用できます。

    {
    "name": "Python Debugger: Flask",
    "type": "debugpy",
    "request": "launch",
    "module": "flask",
    "env": {
        "FLASK_APP": "app.py",
        "FLASK_DEBUG": "1"
    },
    "args": [
        "run",
        "--no-debugger",
        "--no-reload"
    ],
    "jinja": true,
    "justMyCode": true
},

    注: 設定の env エントリに "FLASK_APP": "${workspaceFolder}/app.py" が含まれている場合は、上記のように "FLASK_APP": "app.py" に変更してください。そうしないと、「Cannot import module C」(C はプロジェクトフォルダーがあるドライブ文字) のようなエラーメッセージが表示される場合があります。

    注: launch.json が作成されると、エディターに 構成の追加 ボタンが表示されます。このボタンは、構成リストの先頭に追加する追加の構成のリストを表示します。(実行 > 構成の追加 メニューコマンドも同じアクションを実行します。)

  6. launch.json を保存します (⌘S (Windows, Linux Ctrl+S))。デバッグ構成のドロップダウンリストで Python: Flask 構成を選択します。

    Flask tutorial: selecting the Flask debugging configuration

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

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

    ステータスバーの色がデバッグ中を示すように変わることを確認してください。

    Flask 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 のデバッグ を参照してください。

    Flask tutorial: the VS Code debug toolbar

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

    Flask tutorial: VS Code paused at a breakpoint

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

  10. VS Code ウィンドウの左側には、now などのローカル変数や name などの引数を表示する 変数 ペインがあります。その下には、ウォッチ、呼び出し履歴、ブレークポイント のペインがあります (VS Code のデバッグ で詳細を参照)。ローカル セクションで、異なる値を展開してみてください。値をダブルクリック (または Enter (Windows, Linux F2) を使用) して変更することもできます。ただし、now のような変数を変更すると、プログラムが壊れる可能性があります。開発者は通常、コードが最初から正しい値を生成しなかった場合にのみ、値を修正するために変更を行います。

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

  11. プログラムが一時停止しているとき、デバッグコンソール パネル (ターミナルパネルの「Python デバッグコンソール」とは異なります) を使用すると、現在のプログラムの状態を使用して式を試したり、コードの一部をテストしたりできます。例えば、now = datetime.now() の行をステップオーバーした後、異なる日付/時刻形式を試すことができます。エディターで、now.strftime("%A, %d %B, %Y at %X") を読み取るコードを選択し、右クリックして デバッグコンソールで評価 を選択すると、そのコードがデバッグコンソールに送られ、そこで実行されます。

    now.strftime("%A, %d %B, %Y at %X")
'Wednesday, 31 October, 2018 at 18:13:39'

    ヒント: デバッグコンソール には、ターミナルに表示されないアプリ内からの例外も表示されます。たとえば、実行とデバッグ ビューの 呼び出し履歴 エリアに「Paused on exception」メッセージが表示された場合、デバッグコンソール に切り替えて例外メッセージを確認してください。

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

    now.strftime("%a, %d %B, %Y at %X")
'Wed, 31 October, 2018 at 18:13:39'
now.strftime("%a, %d %b, %Y at %X")
'Wed, 31 Oct, 2018 at 18:13:39'
now.strftime("%a, %d %b, %y at %X")
'Wed, 31 Oct, 18 at 18:13:39'

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

    Flask tutorial: result of the modified program

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

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

ヒント: http://127.0.0.1:5000/hello/VSCode のような特定の URL に繰り返し移動しやすくするには、print ステートメントを使用してその URL を出力します。URL はターミナルに表示され、Ctrl+クリック でブラウザーで開くことができます。

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

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

  • 定義へ移動 は、あなたのコードからオブジェクトを定義するコードにジャンプします。例えば、app.py で Flask クラス (app = Flask(__name__) の行) を右クリックし、定義へ移動 を選択すると (F12 を使用することもできます)、Flask ライブラリ内のクラス定義に移動します。

  • 定義をピーク (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)、右クリックのコンテキストメニューにもあります) は類似していますが、クラス定義をエディター内に直接表示します (コードを隠さないようにエディターウィンドウにスペースを作成します)。ピークウィンドウを閉じるには Escape を押すか、右上隅の x を使用します。

    Flask tutorial: peek definition showing the Flask class inline

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

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

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

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

このセクションでは、テンプレートを使用して単一のページを作成します。続くセクションでは、静的ファイルを配信するようにアプリを設定し、その後、それぞれがベーステンプレートからのナビゲーションバーを含む複数のページをアプリに追加します。

  1. hello_flask フォルダー内に、templates という名前のフォルダーを作成します。これは、Flask がデフォルトでテンプレートを探す場所です。

  2. templates フォルダー内に、以下の内容で hello_there.html という名前のファイルを作成します。このテンプレートには、「name」と「date」という2つのプレースホルダーが含まれており、これらは波括弧のペア {{ と }} で区切られています。ご覧のとおり、書式設定コードもテンプレートに直接含めることができます。

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello, Flask</title>
    </head>
    <body>
        {%if name %}
            <strong>Hello there, {{ name }}!</strong> It's {{ date.strftime("%A, %d %B, %Y at %X") }}.
        {% else %}
            What's your name? Provide it after /hello/ in the URL.
        {% endif %}
    </body>
</html>

    ヒント: Flask 開発者は、strftime の代わりに flask-babel 拡張機能を使用して日付の書式設定を行うことがよくあります。これは flask-babel がロケールとタイムゾーンを考慮に入れるためです。

  3. app.py のファイル上部に、Flask の render_template 関数をインポートします。

    from flask import render_template

  4. app.py でも、hello_there 関数を修正して render_template を使用し、テンプレートをロードして名前付きの値を適用します (また、名前がない場合を認識するルートも追加します)。render_template は、最初の引数が templates フォルダーに対する相対パスであると仮定します。通常、開発者はテンプレートをそれを使用する関数と同じ名前にしますが、コード内で常に正確なファイル名を参照するため、名前を一致させる必要はありません。

    @app.route("/hello/")
@app.route("/hello/<name>")
def hello_there(name = None):
    return render_template(
        "hello_there.html",
        name=name,
        date=datetime.now()
    )

    これでコードがはるかにシンプルになり、マークアップと書式設定はすべてテンプレートに含まれているため、データ値のみに関心を持つようになっていることがわかります。

  5. プログラムを起動し (デバッガー内または外部で、⌃F5 (Windows, Linux Ctrl+F5) を使用)、/hello/name URL に移動して結果を確認します。

  6. また、<a%20value%20that%20could%20be%20HTML> のような名前を使用して /hello/name URL に移動し、Flask の自動エスケープがどのように機能するかを確認してください。「name」の値は、実際の要素としてレンダリングされるのではなく、ブラウザーにプレーンテキストとして表示されます。

静的ファイルを配信する

静的ファイルには2種類あります。1つ目は、ページテンプレートが直接参照できるスタイルシートのようなファイルです。これらのファイルはアプリ内の任意のフォルダーに配置できますが、一般的には static フォルダー内に置かれます。

2つ目は、コードで処理したいファイル、たとえば静的ファイルを返す API エンドポイントを実装する場合などです。この目的のために、Flask オブジェクトには組み込みメソッド send_static_file が含まれており、これによりアプリの static フォルダー内に含まれる静的ファイルを含むレスポンスが生成されます。

以下のセクションでは、両方の種類の静的ファイルについて説明します。

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

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

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

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

  3. templates/hello_there.html 内で、</head> タグの前に以下の行を追加します。これはスタイルシートへの参照を作成します。

    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='site.css')}}" />

    ここで使用されている Flask の url_for タグは、ファイルへの適切なパスを作成します。引数として変数を取ることができるため、url_for は、必要に応じて生成されるパスをプログラムで制御することを可能にします。

  4. また、templates/hello_there.html で、<body> 要素の内容を以下のマークアップに置き換えます。これは <strong> タグの代わりに message スタイルを使用します (そして、名前なしで hello/ URL を使用した場合にもメッセージを表示します)。

    {%if name %}
    <span class="message">Hello there, {{ name }}!</span> It's {{ date.strftime("%A, %d %B, %Y at %X") }}.
{% else %}
    <span class="message">What's your name? Provide it after /hello/ in the URL.</span>
{% endif %}

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

コードから静的ファイルを配信する

  1. static フォルダー内に、以下の内容 (意味のないサンプルデータです) で data.json という名前の JSON データファイルを作成します。

    {
  "01": {
    "note": "This data is very simple because we're demonstrating only the mechanism."
  }
}

  2. app.py で、send_static_file メソッドを使用して静的データファイルを返すルート /api/data を持つ関数を追加します。

    @app.route("/api/data")
def get_data():
    return app.send_static_file("data.json")

  3. アプリを実行し、/api/data エンドポイントに移動して、静的ファイルが返されることを確認します。完了したらアプリを停止します。

ベーステンプレートを拡張する複数のテンプレートを作成する

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

また、同じテンプレートを拡張する多くのページを作成することになるため、VS Code で新しいページテンプレートを素早く初期化できるコードスニペットを作成しておくと便利です。スニペットは、面倒でエラーが発生しやすいコピー＆ペースト操作を避けるのに役立ちます。

以下のセクションでは、このプロセスの様々な部分について説明します。

ベースページテンプレートとスタイルを作成する

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

以下の手順でベーステンプレートの作成方法を説明します。

  1. templates フォルダー内に、以下の内容で layout.html という名前のファイルを作成します。このファイルには「title」と「content」という名前のブロックが含まれています。ご覧のとおり、マークアップはホーム、アバウト、連絡先ページへのリンクを含むシンプルなナビゲーションバー構造を定義しており、これらは後のセクションで作成します。各リンクは、一致するルートのリンクをランタイムで生成するために、再び Flask の url_for タグを使用しています。

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='site.css')}}" />
    </head>

    <body>
        <div class="navbar">
            <a href="{{ url_for('home') }}" class="navbar-brand">Home</a>
            <a href="{{ url_for('about') }}" class="navbar-item">About</a>
            <a href="{{ url_for('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/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 で、ファイル > 基本設定 > ユーザー スニペットの構成 を選択します。

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

  3. VS Code が html.json を開いたら、既存の波括弧内に以下のエントリを追加します (ここには示されていない説明コメントには、$0 行がスニペット挿入後に VS Code がカーソルを配置する場所を示す方法などの詳細が記載されています)。

    "Flask Tutorial: template extending layout.html": {
    "prefix": "flextlayout",
    "body": [
        "{% extends \"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. これで、flext のようなスニペットのプレフィックスを入力し始めると、次のセクションで示すように、VS Code がオートコンプリートオプションとしてスニペットを提供します。また、スニペットの挿入 コマンドを使用して、メニューからスニペットを選択することもできます。

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

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

コードスニペットが配置されたので、ホーム、アバウト、連絡先の各ページのテンプレートを素早く作成できます。

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

    Flask tutorial: autocompletion for the flextlayout code snippet

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

    Flask tutorial: insertion of the flextlayout code snippet

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

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

  4. 前の手順を繰り返し、2つのコンテンツブロックに Contact us と <p>Visual Studio Code Flask チュートリアルの連絡先ページです。</p> を使用して templates/contact.html を作成します。

  5. app.py に、/about/ および /contact/ ルート用の関数を追加し、それぞれのページテンプレートを参照させます。また、home 関数を修正して home.html テンプレートを使用するようにします。

    # Replace the existing home function with the one below
@app.route("/")
def home():
    return render_template("home.html")

# New functions
@app.route("/about/")
def about():
    return render_template("about.html")

@app.route("/contact/")
def contact():
    return render_template("contact.html")

アプリを実行する

すべてのページテンプレートが整ったら、app.py を保存し、アプリを実行して、ブラウザーを開いて結果を確認します。ページ間を移動して、ページテンプレートがベーステンプレートを適切に拡張していることを確認します。

Flask tutorial: app rendering a common nav bar from the base template

注: 最新の変更が表示されない場合は、キャッシュされたファイルが表示されるのを避けるために、ページのハードリフレッシュが必要になる場合があります。

任意のアクティビティ

以下のセクションでは、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 コマンドのドキュメントにある 要件ファイル を参照してください。

今後の開発をサポートするためにプロジェクトをリファクタリングする

この Flask チュートリアル全体を通して、アプリのコードはすべて単一の app.py ファイルに含まれています。さらなる開発を可能にし、関心事を分離するために、app.py の各部分を個別のファイルにリファクタリングすると便利です。

  1. プロジェクトフォルダー内に、アプリ用のフォルダー (例: hello_app) を作成し、そのファイルを requirements.txt や VS Code が設定やデバッグ構成ファイルを保存する .vscode フォルダーなどの他のプロジェクトレベルのファイルから分離します。

  2. static および templates フォルダーを hello_app に移動します。これらのフォルダーには確実にアプリのコードが含まれているためです。

  3. hello_app フォルダーに、ルーティングとビュー関数を含む views.py という名前のファイルを作成します。

    from flask import Flask
from flask import render_template
from datetime import datetime
from . import app

@app.route("/")
def home():
    return render_template("home.html")

@app.route("/about/")
def about():
    return render_template("about.html")

@app.route("/contact/")
def contact():
    return render_template("contact.html")

@app.route("/hello/")
@app.route("/hello/<name>")
def hello_there(name = None):
    return render_template(
        "hello_there.html",
        name=name,
        date=datetime.now()
    )

@app.route("/api/data")
def get_data():
    return app.send_static_file("data.json")

  4. hello_app フォルダーに、以下の内容で __init__.py というファイルを作成します。

    import flask
app = flask.Flask(__name__)

  5. hello_app フォルダーに、以下の内容で webapp.py というファイルを作成します。

    # Entry point for the application.
from . import app    # For application discovery by the 'flask' command.
from . import views  # For import side-effects of setting up routes.

  6. デバッグ構成ファイル launch.json を開き、起動オブジェクトを指すように env プロパティを次のように更新します。

    "env": {
    "FLASK_APP": "hello_app.webapp"
},

  7. 元の app.py ファイルは、その内容が他のアプリファイルに移動されたため、プロジェクトルートから削除します。

  8. これで、プロジェクトの構造は次のようになります。

    Flask tutorial: modified project structure with separate files and folders for parts of the app

  9. すべてが機能することを確認するために、デバッガーでアプリを再度実行します。VS Code のデバッガーの外部でアプリを実行するには、ターミナルから以下の手順を使用します。

    1. FLASK_APP の環境変数を設定します。Linux および macOS では export set FLASK_APP=webapp を使用し、Windows では PowerShell を使用している場合は $env:FLASK_APP=webapp、コマンドプロンプトを使用している場合は set FLASK_APP=webapp を使用します。
    2. hello_app フォルダーに移動し、python -m flask run を使用してプログラムを起動します。

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

Container Tools 拡張機能を使用すると、Visual Studio Code からコンテナー化されたアプリケーションを簡単にビルド、管理、デプロイできます。このチュートリアルで開発された Flask アプリケーション用の Python コンテナーを作成する方法に興味がある場合は、コンテナー内の Python チュートリアルを参照してください。このチュートリアルでは、以下の方法を説明します。

  • シンプルな Python コンテナーを記述する Dockerfile ファイルを作成する。
  • Flask アプリケーションのビルド、実行、機能の検証。
  • コンテナーで実行されているアプリをデバッグする。

問題が発生した場合は、Python 拡張機能 Discussions Q&A で回答を検索したり、質問したりできます。

次のステップ

Visual Studio Code で Flask を使用するこのチュートリアルを完了おめでとうございます！

このチュートリアルで完成したコードプロジェクトは GitHub で見つけることができます: python-sample-vscode-flask-tutorial。

このチュートリアルではページテンプレートの表面をなぞったにすぎないため、テンプレートの詳細については Jinja2 ドキュメント を参照してください。Template Designer Documentation にはテンプレート言語に関するすべての詳細が含まれています。また、公式 Flask チュートリアル および Flask の 拡張機能 のドキュメントも確認するとよいでしょう。

本番ウェブサイトでアプリを試すには、チュートリアル Docker コンテナーを使用して Python アプリを Azure App Service にデプロイする を参照してください。Azure はまた、標準コンテナーである Linux 上の App Service も提供しており、VS Code 内からウェブアプリをデプロイできます。

Python に関連する VS Code ドキュメントの以下の記事も確認するとよいでしょう。

07/09/2025