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 拡張機能ディスカッション Q&A で回答を検索するか、質問をすることができます。

前提条件

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

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

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

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

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

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

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

1. ファイルシステムで、このチュートリアルのフォルダー (hello_flask など) を作成します。

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

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

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

   

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 という名前の新しいファイルを作成します。

   

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 のように、host および port コマンドライン引数を使用します。

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

   

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

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

   

3. VS Code の 実行とデバッグ ビューに切り替えます (左側の活動バーまたは ⇧⌘D (Windows、Linux Ctrl+Shift+D) を使用)。「実行とデバッグをカスタマイズするには、launch.json ファイルを作成してください」というメッセージが表示される場合があります。これは、デバッグ構成を含む launch.json ファイルがまだないことを意味します。launch.json ファイルを作成する リンクをクリックすると、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" に変更します。そうしないと、「モジュール C をインポートできません」のようなエラーメッセージが表示されることがあります。ここで、C はプロジェクトフォルダーが存在するドライブ文字です。

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

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 デバッグコンソール" ターミナルに表示されます。そのターミナルで http://127.0.0.1:5000/ リンクを Ctrl+クリック して、その 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. プログラムが一時停止している場合、[デバッグコンソール] パネル ([ターミナル] パネルの "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'
    

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

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. コード内の行を変更して別の 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 を使用します。

  

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

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

はるかに良いプラクティスは、テンプレート を使用して 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 開発者は、flask-babel 拡張機能を日付の書式設定に使用することがよくあります。flask-babel はロケールとタイムゾーンを考慮に入れるため、strftime よりも優れています。

3. app.py で、ファイルの先頭付近に Flask の render_template 関数をインポートします

   from flask import render_template
   

4. また、app.py で、render_template を使用してテンプレートをロードし、名前付きの値を適用するように hello_there 関数を変更します (また、名前のないケースを認識するためのルートを追加します)。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. また、Flask の自動エスケープの動作を確認するために、<a%20value%20that%20could%20be%20HTML> のような名前を使用して /hello/name URL に移動してみてください。「name」の値は、実際の要素としてレンダリングされるのではなく、ブラウザーにプレーンテキストとして表示されます。

静的ファイルを提供する

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

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

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

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

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 <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 の入力を開始して、スニペットが補完として表示されることを確認します。

   

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

   

2. 「title」ブロックの挿入ポイントに Home と書き込み、「content」ブロックに <p>Visual Studio Code Flask チュートリアルのホームページ。</p> と書き込み、ファイルを保存します。これらの行は、拡張されたページテンプレートの一意の部分のみです。

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

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

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

   # 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 コマンドドキュメントの Requirements Files を参照してください。

さらなる開発をサポートするためにプロジェクトをリファクタリングする

この 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 set FLASK_APP=webapp を使用します。Windows では、PowerShell を使用している場合は $env:FLASK_APP=webapp を使用し、コマンドプロンプトを使用している場合は set FLASK_APP=webapp を使用します。
   2. hello_app フォルダーに移動し、python -m flask run を使用してプログラムを起動します。

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

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

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

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

次のステップ

Visual Studio Code での Flask の操作に関するこのチュートリアルの完了おめでとうございます！

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

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

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

Python に関連する VS Code ドキュメントの次の記事も確認することをお勧めします。

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