初めに

　みなさんこんにちは！本日は題名にもある通り、PythonのWeb開発フレームワークであるflaskとVSCodeを使用した環境構築を行っていきたいと思います。
　※初投稿であるため、間違い・ご指摘当ございましたらコメントお願いします。

ツールの説明

VSCode: 説明不要
Python: 3系以上
flask: こちらもおそらくなんでもよい。2.2.2を使用しています。
flaskのインストールはpip環境下なら
pip install flask
でオッケーです。

flask動作確認

　とりあえずflaskの動作確認をしましょう。
公式ドキュメントにのっているQuick Startを使用します。
また、ファイル名はhello.pyとしています。

hello.py


from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<p>Hello, World!</p>"

　さて、これをコマンドプロンプトでも何でもよいので、

flask --app hello run

としてみてください。以下の画像ではVSCode内でcmdを開き、実行してみます。

　Running on *URL (私の環境ではhttp://127.0.0.1:5000/)にアクセスし、Hello, Worldと出力されればflaskの環境としては問題ありません。

STEP1 デバッグをF5キーで可能にする

　しかしこれ、結構面倒くさいです。停止し、再起動するためにはcmdにコマンドを打ち込まなくてはなりません。というか普段、PyThonのファイル実行ではF5キーで行っていますよね？同じようにできないのか、ということになります。
　結論、できます。しかも設定超簡単です。

　Ctrl + Shift + Dまたは上記画像の左側の虫と実行マークをクリック。
　その後、「launch.jsonファイルを作成します」をクリック

「デバッグ構成を選択する」にて「Flask」を選択してください。

　ここはとりあえず「app.py」でokです。(本当はhello.pyとすればエラーなしでいけます)

　続いてlaunch.jsonを閉じ、F5を押してみましょう。そうすると以下のようなエラーが出るはずです。

Usage: python -m flask run [OPTIONS]
Try 'python -m flask run --help' for help.

Error: Could not import 'app'.

これは先ほど、app.pyのままokを押したからですね。こちらを修正していきましょう。

.vscode以下にあるlaunch.jsonをクリックしましょう。

　launch.jsonにはデバッグの設定が記載されています。そこで、
　FLASK_APPをapp.pyからhello.pyに変更してみてください。(この作業をしてもらいたいので、先ほどわざと間違えました)
　下の画像の赤色の箇所です。

　さて、修正が完了しましたらhello.pyにタブを移し、F5キーを押しましょう。
　※launch.jsonをデバッグしないでくださいね…

　以下のように出力され、URLをクリックしウェブページが表示されれば成功です。

PS C:\Users\scarl\OneDrive\デスクトップ\test>  c:; cd 'c:\Users\scarl\OneDrive\デスクトップ\test'; & 'C:\pg\Python38\python.exe' 'c:\Users\scarl\.vscode\extensions\ms-python.python-2022.20.1\pythonFiles\lib\python\debugpy\adapter/../..\debugpy\launcher' '49464' '--' '-m' 'flask' 'run' '--no-debugger' '--no-reload' 
 * Serving Flask app 'hello.py'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit

STEP2 F5キーのみでデバッグモードを有効にする。

　しかし、怠惰なプログラマー諸君にはまだ不満があるでしょう。
「これコード変更しても反映されねえじゃん。いちいちサーバーを停止して再起動するのめんどくさいなあ」
　なるほど、わかりました。その悩みをぶっ壊す機能、デバッグモードがflaskには搭載されています。

再びlaunch.jsonを開いて、argsの欄を以下のように変更してください。先頭のno-を取り除いただけです。

launch.json

            "args": [
                "run",
                "--debugger",
                "--reload"
            ]

　修正後、再度hello.pyをF5キーで実行してみてください。Web画面にはHello, World!といままで通り表示されていると思います。
今度はサーバーを落とさずに、hello.pyを編集してみましょう。Web画面も閉じないでOKです。

hello.py

from flask import Flask

app = Flask(__name__)


@app.route("/")
def hello_world():
    return "<p>こんにちは</p>"

　pタグの中身を日本語にしてみました。hello.pyを保存してみてください。

 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 126-900-156

のような出力がされていれば成功です。次にWeb画面を更新してみましょう。

なんとコードを停止せずに更新結果を反映することができました。

launch.jsonの初期設定をするだけで、

F5のみでデバッグ起動
保存＆更新のみでコードを変更

という最強の環境が構築できました。

最後に

　いままで、Debugモードについて記述してある記事や、VSCodeでのデバッグ方法について記述してある記事はありましたが、両方が記述されている記事については見当たらなかったので、この度は一筆書かせていただきました。
　ご愛読のほう、ありがとうございました。

参考

　いまにゅさんの動画でいつも勉強させてもらっています。本当にわかりやすいです。

【環境構築】flask + VSCode で最強最速のデバッグ環境を構築

初めに

ツールの説明

flask動作確認

STEP1 デバッグをF5キーで可能にする

STEP2 F5キーのみでデバッグモードを有効にする。

最後に

参考