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

# 初めに
　みなさんこんにちは！本日は題名にもある通り、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を開き、実行してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3067701/4bbc2dc1-4f3e-1769-f4f6-faa1432fdc3d.png)

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

# STEP1 デバッグをF5キーで可能にする
　しかしこれ、結構面倒くさいです。停止し、再起動するためにはcmdにコマンドを打ち込まなくてはなりません。というか普段、PyThonのファイル実行ではF5キーで行っていますよね？同じようにできないのか、ということになります。
　結論、できます。しかも設定超簡単です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3067701/95425ea8-ca01-5d18-3236-d346d28472ff.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3067701/167abc88-5c58-57c7-ff36-21c7eb39f66f.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3067701/5ea473ba-04a1-7bde-1b90-341b31127d38.png)

　ここはとりあえず「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を押したからですね。こちらを修正していきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3067701/8022492a-affe-7842-9efe-3a05c6a37f44.png)
.vscode以下にあるlaunch.jsonをクリックしましょう。

　launch.jsonにはデバッグの設定が記載されています。そこで、
　`FLASK_APP`を`app.py`から`hello.py`に変更してみてください。(この作業をしてもらいたいので、先ほどわざと間違えました)
　下の画像の赤色の箇所です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3067701/b6175fa8-40dc-c75c-c901-f7c64555cc27.png)

　さて、修正が完了しましたら`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画面を更新してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3067701/c7bbefe0-8349-649b-a7cb-57eb292a2cf3.png)

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

launch.jsonの初期設定をするだけで、
- F5のみでデバッグ起動
- 保存＆更新のみでコードを変更

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

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

# 参考
　いまにゅさんの動画でいつも勉強させてもらっています。本当にわかりやすいです。
- [【完全版】この動画1本でFlaskの基礎を習得！忙しい人のための速習コース（Flask超入門)](https://www.youtube.com/watch?v=VtJ-fGm4gNg&t=926s&ab_channel=%E3%81%84%E3%81%BE%E3%81%AB%E3%82%85%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%A1%BE)
- [Flask公式ドキュメント](flask-docs-ja.readthedocs.io/ja/latest/quickstart.html)
- [VS CodeとFlaskによるWebアプリ開発「最初の一歩」](https://atmarkit.itmedia.co.jp/ait/articles/1807/24/news024_2.html)