初めに
みなさんこんにちは！本日は題名にもある通り、PythonのWeb開発フレームワークであるflaskとVSCodeを使用した環境構築を行っていきたいと思います。
※初投稿であるため、間違い・ご指摘当ございましたらコメントお願いします。
ツールの説明
- VSCode: 説明不要
- Python: 3系以上
- flask: こちらもおそらくなんでもよい。2.2.2を使用しています。
flaskのインストールはpip環境下なら
pip install flask
でオッケーです。
flask動作確認
とりあえずflaskの動作確認をしましょう。
公式ドキュメントにのっているQuick Startを使用します。
また、ファイル名は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-を取り除いただけです。
"args": [
"run",
"--debugger",
"--reload"
]
修正後、再度hello.pyをF5キーで実行してみてください。Web画面にはHello, World!といままで通り表示されていると思います。
今度はサーバーを落とさずに、hello.pyを編集してみましょう。Web画面も閉じないでOKです。
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でのデバッグ方法について記述してある記事はありましたが、両方が記述されている記事については見当たらなかったので、この度は一筆書かせていただきました。
ご愛読のほう、ありがとうございました。
参考
いまにゅさんの動画でいつも勉強させてもらっています。本当にわかりやすいです。