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

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

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

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

この Flask チュートリアルの完成したコードプロジェクトは、GitHub で確認できます: python-sample-vscode-flask-tutorial。

問題が発生した場合は、Python 拡張機能のディスカッション 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 上で brew install python3 を使用し、Homebrew を通じてインストールします。
   • (すべてのオペレーティングシステム) Anaconda からのダウンロード（データサイエンス目的）。

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

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

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

Python Environments拡張機能は、venv、conda、poetryなど、複数の環境タイプをサポートしています。このチュートリアルでは、Pythonに組み込まれており、追加のツールを必要としないvenvを使用します。他の環境タイプのステップは似ています。詳細は環境の作成を参照してください。

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

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

3. Python: Create Environment コマンドを使用して仮想環境を作成します。

   1. コマンドパレットを開きます (⇧⌘P (Windows, Linux Ctrl+Shift+P))
   2. Python: 環境の作成を検索して選択します。
   3. venv環境を作成するためにVenvを選択します。
   4. 環境に使用するPythonインタープリターを選択します。

   VS Codeは、ワークスペースに.venvフォルダを作成し、自動的に新しい環境を選択します。

   ヒント

   Python サイドバーを使用して環境を作成することもできます。Environment Managers を展開し、Quick Create 用の + ボタンを選択します。これにより、適切なデフォルト設定が使用されます。

   

4. 以下のいずれかの方法で、仮想環境に Flask をインストールします。

   パッケージ管理UIを使用する

   1. Pythonサイドバーで環境マネージャーを展開します。
   2. .venv環境を右クリックし、パッケージの管理を選択します。
   3. flask を検索し、Install を選択します。

   ターミナルを使用する

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

   python -m pip install flask
   

これで、Flask コードを記述するための自己完結型の環境が整いました。新しいターミナルを開くと、VS Code は自動的にその環境を有効化します。VS Code の外で別のコマンドプロンプトやターミナルを開く場合は、source .venv/bin/activate（Linux/macOS）または .venv\Scripts\Activate.ps1（Windows）を実行して環境を有効化してください。コマンドプロンプトの先頭に (.venv) と表示されていれば、環境は有効化されています。

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

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

   

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+click します。

   

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

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

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

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

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

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

始める前に: 前のセクションの最後で、ターミナルで 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 を押すか、
   • カーソルをその行に置き、**実行** > **ブレークポイントの切り替え**メニューコマンドを選択するか、
   • 行番号の左側の余白を直接クリックします（マウスオーバーすると薄い赤の点が表示されます）。

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

   

3. VS Code の Run and Debug ビューに切り替えます（左側の活動バーを使用するか、⇧⌘D（Windows, Linux では Ctrl+Shift+D） を使用）。「To customize Run and Debug create a launch.json file」というメッセージが表示される場合があります。これは、まだデバッグ構成を含む launch.json ファイルがないことを意味します。create a launch.json file リンクをクリックすると、VS Code がファイルを作成してくれます。

   

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

5. 下にスクロールして、「Python: Flask」という名前の構成を確認します。この構成には "module": "flask", が含まれており、デバッガー起動時に -m flask を付けて Python を実行するよう VS Code に指示しています。また、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 が作成されると、エディターに Add Configuration ボタンが表示されます。そのボタンには、構成リストの先頭に追加する追加構成のリストが表示されます。（Run > Add Configuration メニューコマンドも同じ操作を行います。）

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

   

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

   

   ステータスバーの色が変わり、デバッグ中であることを示すことに注目してください。

   

   VS Code にデバッグツールバー（以下に表示）も表示され、次の順序でコマンドが含まれています: 一時停止（または続行、F5）、ステップオーバー (F10)、ステップイン (F11)、ステップアウト (⇧F11 (Windows, Linux Shift+F11))、再起動 (⇧⌘F5 (Windows, Linux Ctrl+Shift+F5))、および停止 (⇧F5 (Windows, Linux Shift+F5))。各コマンドの説明については、VS Code のデバッグを参照してください。

   

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

   

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

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

    

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

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

    ヒント: **デバッグコンソール**には、アプリ内から発生した例外も表示されます。これらの例外はターミナルには表示されない場合があります。たとえば、**実行とデバッグ**ビューの**コールスタック**領域で「例外で一時停止」というメッセージが表示された場合は、**デバッグコンソール**に切り替えて例外メッセージを確認してください。

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) を選択してプログラムを実行させます。ブラウザウィンドウに結果が表示されます。

    

14. コード内の行を別の日時形式（例：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+click でブラウザーを開くことができます。

定義へ移動と定義のプレビュー コマンドの使用

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

• Go to Definition は、コードからオブジェクトを定義しているコードへジャンプします。たとえば、app.py で Flask クラス（app = Flask(__name__) の行）を右クリックし、Go to Definition を選択する（または F12 を使用する）と、Flask ライブラリ内のクラス定義へ移動します。

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

  

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

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

はるかに良い方法は、**テンプレート**を使用して 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」値はブラウザーで HTML 要素としてレンダリングされるのではなく、プレーンテキストとして表示されます。

静的ファイルの提供

静的ファイルには 2 つのタイプがあります。1 つ目は、ページテンプレートが直接参照できるスタイルシートのようなファイルです。このようなファイルはアプリ内のどのフォルダーに置いてもかまいませんが、通常は static フォルダー内に配置されます。

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

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

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

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

2. static フォルダー内に、以下の内容で site.css という名前のファイルを作成します。このコードを入力した後、カラープレビューを含む、CSS ファイル向けに VS Code が提供する構文の強調表示にも注目してください。

   .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 タグも定義します。ブロックタグは、ベーステンプレートと拡張テンプレートの両方で {% block <name> %} と {% endblock %} で囲まれます。

次の手順では、基本テンプレートの作成について説明します。

1. templates フォルダー内に、以下の内容で layout.html という名前のファイルを作成します。これには "title" と "content" という名前のブロックが含まれています。ご覧のとおり、このマークアップは、後のセクションで作成する Home、About、Contact ページへのリンクを持つ単純なナビゲーションバー構造を定義しています。各リンクは再び 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. static/site.css に、既存の "message" スタイルの下に次のスタイルを追加して保存します。このチュートリアルではレスポンシブデザインのデモンストレーションは行わないことに注意してください。これらのスタイルは単に、そこそこ興味深い結果を生成するためのものです。

   .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 で、File > Preferences > Configure Snippets を選択します。

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

3. VS Code で html.json を開いた後、既存の中括弧内に次のエントリを追加します（ここに示されていない説明コメントには、$0 行がスニペット挿入後にカーソルを配置する場所を示すといった詳細が記述されています）。

   "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 がオートコンプリートのオプションとしてスニペットを提供します。Insert Snippet コマンドを使用してメニューからスニペットを選択することもできます。

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

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

コードスニペットを設定したので、ホーム、アバウト、コンタクトページのテンプレートをすばやく作成できます。

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

   

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

   

2. "title" ブロックの挿入ポイントに Home と書き、"content" ブロックに <p>Home page for the Visual Studio Code Flask tutorial.</p> と書いて、ファイルを保存します。これらの行が、拡張ページテンプレートの唯一の固有部分です。

3. templates フォルダー内に about.html を作成し、スニペットを使用してボイラープレートのマークアップを挿入し、"title" ブロックと "content" ブロックにそれぞれ About us と <p>About page for the Visual Studio Code Flask tutorial.</p> を挿入して、ファイルを保存します。

4. 前の手順を繰り返して、2 つのコンテンツブロックに Contact us と <p>Contact page for the Visual Studio Code Flask tutorial.</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 を保存し、アプリを実行してブラウザーで結果を確認します。ページ間を移動して、ページテンプレートがベーステンプレートを正しく拡張していることを確認します。

注意: 最新の変更が表示されない場合は、キャッシュされたファイルが表示されないようにページをハードリフレッシュする必要があるかもしれません。

オプションのアクティビティ

次のセクションでは、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. プロジェクトの構造は以下のようになっているはずです。

   

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

   1. FLASK_APP の環境変数を設定します。Linux および macOS では export 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 in a container チュートリアルを確認してください。以下を行う手順が説明されています。

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

問題が発生した場合は、Python 拡張機能のディスカッション Q&Aで回答を検索したり、質問したりできます。

次のステップ

Visual Studio Code で Flask を扱うこのウォークスルーを完了しました。おめでとうございます！

このチュートリアルの完成したコードプロジェクトは、GitHub で確認できます: python-sample-vscode-flask-tutorial。

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

アプリを本番環境の Web サイトで試すには、チュートリアル「Docker コンテナーを使用して Python アプリを Azure App Service にデプロイする」を参照してください。Azure には、VS Code 内から Web アプリをデプロイする標準コンテナーである Linux 上の App Service も用意されています。

また、Python に関連する VS Code ドキュメントの次の記事を確認することもできます

• Pythonコードの編集
• Linting
• Python環境の管理
• Pythonのデバッグ
• テスト