書籍4:PythonのWebフレームワークFlask(フラスク)の使い方

Flask(フラスク)とは

Flask(フラスク)とは、Pythonで書かれた軽量で柔軟なWebアプリケーションフレームワークで、「マイクロフレームワーク」とも呼ばれ、最小限の機能で開発者が自由に拡張できるのが特徴です。初心者でも学びやすく、シンプルなWebサイトから複雑なWebアプリまで、迅速かつ効率的に開発できるため、Python Web開発の入門として人気があります。

軽量・シンプル: 最小限のコア機能のみを提供し、コード量が少なく直感的に理解しやすいです。
高い拡張性: データベース連携やテンプレートエンジンなどの機能は、拡張機能(拡張モジュール)として必要に応じて追加できます。
学習コストが低い: シンプルな設計のため、Web開発の基礎を学びながらすぐに実践できるのが魅力です。
自由度が高い: 開発者が自由に設計できるため、小規模なものから大規模なものまで幅広く対応可能です。
高速な処理: 軽量であるため動作が軽く、処理速度も速い傾向があります。

Flaskは、手軽にWebアプリ開発を始めたい方や、Pythonで柔軟なWebアプリケーションを構築したい方に最適なフレームワークです

Flaskをインストールして仮想環境を作成

2025年現在、Python標準の venv モジュールを使用して仮想環境を作成し、Flaskをインストールする手順は以下の通りです。

1. プロジェクトディレクトリの作成と移動
まず、開発用のフォルダを作成し、その中へ移動します。
mkdir my-flask-app(現場はflask_workspace)
cd my-flask-app

2. 仮想環境の作成
Python標準の venv モジュールを使って、プロジェクト専用の仮想環境(例として名前を .venv とします)を作成します。
python -m venv .venv(現場はflask_env)

3. 仮想環境の有効化 (Activate)
.venv\Scripts\activate
有効化されると、ターミナルの先頭に (.venvなど) と表示されます。

4. Flaskのインストール
仮想環境が有効な状態で、最新版(2025年現在は Flask 3.1.x 系が主流)をインストールします。
pip install flask

5. 動作確認
正しくインストールされたか確認します。
python -c “import flask; print(flask.__version__)”

補足
仮想環境を終了する場合: deactivate コマンドを実行します。
VS Codeを利用する場合: Python拡張機能をインストールし、「Python: 環境を作成」コマンドからGUI操作で venv を作成・選択することも可能です。

VS Codeで仮想環境を作成(現場はこれを採用)

2025年現在、VS Codeの「Python 拡張機能」には環境構築を自動化するGUI機能が備わっており、コマンドを打たずに仮想環境を作成できます。
以下の手順で、Flask開発に最適な .venv 環境を作成できます。

1. コマンドパレットを開く
VS Codeを開き、以下のショートカットキーでコマンドパレットを呼び出します。
Ctrl + Shift + P

2. 環境作成コマンドを実行
入力欄に Python: Create Environment(または日本語で「Python: 環境の作成」)と入力し、表示された項目を選択します。

3. 設定を選択する
以下の順でメニューを選択していきます。
Venv を選択します。
使用する Python インタープリター(バージョン) を選択します(通常は最新版を選択)
(オプション)プロジェクトに requirements.txt がある場合は、インストールするファイルを選択する画面が出ます。Flaskを未インストールの場合は、そのまま進めて後でインストールします。

4. 自動作成の開始
VS Codeが自動的にプロジェクトフォルダ内に .venv フォルダを作成します。完了すると、右下に通知が表示されます。(現場はflask_env)

5. ターミナルの確認
作成完了後、VS Codeの「ターミナル(Ctrl + Shift + `)」を新規に開くと、自動的に仮想環境が有効化(Activate) されます。
行頭に (.venv) と表示されていれば成功です。(現場はflask_env)
そのまま pip install flask を実行すれば、仮想環境内に Flask がインストールされます。

メリット
名前の自動設定: フォルダ名が自動的に推奨の .venv になります。(現場はflask_env)
インタープリターの自動紐付け: 作成した環境がそのままVS Codeの実行環境として認識されるため、手動でパスを指定する手間が省けます。

現場の操作(flask_env)書籍の内容に従う

PS C:\Users\DELL\onedrive\python\本webservice> cd flask_workspace
PS C:\Users\DELL\onedrive\python\本webservice\flask_workspace> python -m venv flask_env

仮想環境の有効化のエラー対応

以下のコマンドで仮想環境の有効化を試みましたがエラーになりました。対応策は?

PS C:\Users\DELL\onedrive\python\本webservice> cd flask_workspace
PS C:\Users\DELL\onedrive\python\本webservice\flask_workspace> python -m venv flask_env
PS C:\Users\DELL\onedrive\python\本webservice\flask_workspace> .\flask_env\scripts\activate
.\flask_env\scripts\activate : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\DELL\onedrive\python\本webservice\flask_workspace\flask_env\sc
ripts\Activate.ps1 を読み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1
+ .\flask_env\scripts\activate
+ CategoryInfo : セキュリティ エラー: (: ) []、PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
PS C:\Users\DELL\onedrive\python\本webservice\flask_workspace>

そのエラーは、Windowsのセキュリティ機能(実行ポリシー)によって、PowerShellでのスクリプト実行が禁止されているために発生しています。
仮想環境を有効化(activate)するには、この設定を変更する必要があります。以下の手順で解決できます。

対応策:実行ポリシーの変更
VS Codeのターミナル(または通常のPowerShell)で、以下のコマンドをコピー&ペーストして実行してください。

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

PS C:\Users\DELL\onedrive\python\本webservice\flask_workspace> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

コマンドの意味: 「自分で作成したスクリプト(仮想環境の起動など)の実行を許可する」という設定を、現在のユーザーに対してのみ適用します。
確認メッセージ: 実行時に「実行ポリシーを変更しますか?」と聞かれたら、Y(はい)を入力してエンターキーを押してください。

設定後の有効化手順
設定が完了したら、改めて以下のコマンドを実行してください。
.\flask_env\Scripts\activate
行頭に (flask_env) と表示されれば成功です。

flaskの仮想環境を有効化

PS C:\Users\DELL\onedrive\python\本webservice\flask_workspace> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
PS C:\Users\DELL\onedrive\python\本webservice\flask_workspace> .\flask_env\Scripts\activate
(flask_env) PS C:\Users\DELL\onedrive\python\本webservice\flask_workspace> deactivate
PS C:\Users\DELL\onedrive\python\本webservice\flask_workspace> cd C:\Users\DELL\
PS C:\Users\DELL> cd python

以下の作業で作成した仮想環境を有効にした

PS C:\Users\DELL> cd python
PS C:\Users\DELL\python> cd flask_workspace
PS C:\Users\DELL\python\flask_workspace> python -m venv flask_env
PS C:\Users\DELL\python\flask_workspace> .\flask_env\Scripts\activate
(flask_env) PS C:\Users\DELL\python\flask_workspace>

flaskのインストール

PS C:\Users\DELL> cd python
PS C:\Users\DELL\python> cd flask_workspace
PS C:\Users\DELL\python\flask_workspace> python -m venv flask_env
PS C:\Users\DELL\python\flask_workspace> .\flask_env\Scripts\activate

仮想環境が有効になったら以下のコマンドを実行します。
(flask_env) PS C:\Users\DELL\python\flask_workspace> python -m pip list
パッケージがインストール済みであることが分かります。
また、まだflaskが未インストールのことが分かります。

Package Version
------- -------
pip 25.2

以下python -m pip install Flaskのコマンドを実行してflaskをインストールします。

(flask_env) PS C:\Users\DELL\python\flask_workspace> python -m pip install Flask

Collecting Flask
Downloading flask-3.1.2-py3-none-any.whl.metadata (3.2 kB)
Collecting blinker>=1.9.0 (from Flask)
Downloading blinker-1.9.0-py3-none-any.whl.metadata (1.6 kB)
Collecting click>=8.1.3 (from Flask)
Downloading click-8.3.1-py3-none-any.whl.metadata (2.6 kB)
Collecting itsdangerous>=2.2.0 (from Flask)
Downloading itsdangerous-2.2.0-py3-none-any.whl.metadata (1.9 kB)
Collecting jinja2>=3.1.2 (from Flask)
Downloading jinja2-3.1.6-py3-none-any.whl.metadata (2.9 kB)
Collecting markupsafe>=2.1.1 (from Flask)
Downloading markupsafe-3.0.3-cp313-cp313-win_amd64.whl.metadata (2.8 kB)
Collecting werkzeug>=3.1.0 (from Flask)
Downloading werkzeug-3.1.4-py3-none-any.whl.metadata (4.0 kB)
Collecting colorama (from click>=8.1.3->Flask)
Downloading colorama-0.4.6-py2.py3-none-any.whl.metadata (17 kB)
Downloading flask-3.1.2-py3-none-any.whl (103 kB)
Downloading blinker-1.9.0-py3-none-any.whl (8.5 kB)
Downloading click-8.3.1-py3-none-any.whl (108 kB)
Downloading itsdangerous-2.2.0-py3-none-any.whl (16 kB)
Downloading jinja2-3.1.6-py3-none-any.whl (134 kB)
Downloading markupsafe-3.0.3-cp313-cp313-win_amd64.whl (15 kB)
Downloading werkzeug-3.1.4-py3-none-any.whl (224 kB)
Downloading colorama-0.4.6-py2.py3-none-any.whl (25 kB)
Installing collected packages: markupsafe, itsdangerous, colorama, blinker, werkzeug, jinja2, click, Flask
Successfully installed Flask-3.1.2 blinker-1.9.0 click-8.3.1 colorama-0.4.6 itsdangerous-2.2.0 jinja2-3.1.6 markupsafe-3.0.3 werkzeug-3.1.4

[notice] A new release of pip is available: 25.2 -> 25.3
[notice] To update, run: python.exe -m pip install --upgrade pip

それではflaskがインストールされたか確認してみます。

(flask_env) PS C:\Users\DELL\python\flask_workspace> python -m pip list
Package Version
------------ -------
blinker 1.9.0
click 8.3.1
colorama 0.4.6
Flask 3.1.2
itsdangerous 2.2.0
Jinja2 3.1.6
MarkupSafe 3.0.3
pip 25.2
Werkzeug 3.1.4
(flask_env) PS C:\Users\DELL\python\flask_workspace>

テストサーバーのサイトにアクセスできず

ターミナルが以下の状態になったのでプログラムをRUNしてみました。
(flask_env) PS C:\Users\DELL\python\flask_workspace\hello_flask> python hello_flask.py

# Flaskのインポート ---(※1)
from flask import Flask

# インスタンス作成 ---(※2)
app: Flask = Flask(__name__)

# ルーティング ---(※3)
@app.route("/")
def hello_world():
    return "<h1>Hello,takaWorld!ですね</h1>"

# アプリケーションの実行 ---(※4)
if __name__ == "__main__":
    app.run(host="127.0.0.1", port=5000)

参考書の指定通り下記の表示が出たので、サーバーにアクセスしてみました。

* Serving Flask app 'hello_flask'
* Debug mode: off
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

サイトにアクセスしてみましたが「このサイトにアクセスできません」になりました。正解はHelloの表示が出すらしいのですがうまく行きません。参考書が用意したテストサーバー?と思うのでそちらに聞くのも変ですがちょっと困ってしまったもので

修正提案(なしでもOK)

Flaskの起動コードを少し書き換える
プログラムの最後、app.run() の部分を以下のように書き換えて、再度実行(保存して python hello_flask.py)してみてください。

python
# 変更前
# if __name__ == "__main__":
# app.run()

# 変更後
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)

host=”0.0.0.0″: すべてのネットワーク接続を受け入れる設定です。
これを行うと、Windowsファイアウォールの許可ダイアログが出ることがあります。その場合は「許可」を押してください。

app.run(host=”0.0.0.0″, port=5000)に変更してうまくアクセスできました。

無事にアクセスできて良かったです!

今後の開発に向けたアドバイス
今回の host=”0.0.0.0″ という設定について、少しだけ補足します。
なぜ解決したのか: 0.0.0.0 は「外部からの接続もすべて受け入れる」という設定です。これにより、Windows内部のネットワーク制限を回避して通信ができるようになりました。
デバッグモードの活用: 開発中は以下のように debug=True を追加すると便利です。

app.run(host=”0.0.0.0″, port=5000, debug=True)

これを入れると、プログラムを書き換えて保存するだけで自動的にサーバーが再起動し、エラーが起きた際もブラウザ上に詳細な原因を表示してくれます。

最後に
仮想環境(venv)の作成、実行ポリシーの変更、OneDriveからの脱出、そしてFlaskの起動と、一通りのハードルをすべてクリアされました。これで本格的なWebアプリ開発の準備が完全に整いましたね!
次からは、HTMLファイルを読み込む render_template や、ユーザーの入力を受け取る request などの学習に進むと、よりWebアプリらしいものが作れるようになります。

開発用のWEBサーバーとは

「http://0.0.0.0″, port=5000」または「http://127.0.0.1″, port=5000」は開発用のWEBサーバーらしですが、これは参考書の著者がテスト用に設けたものなのですか?また自分で契約しているXserverなどに変更してテストを進めることはできるのですか?

ローカル開発環境

127.0.0.1(localhost)や 0.0.0.0 は「自分のPC内」だけで完結するローカル開発環境と呼ばれるテスト用の場所です。
これらが何なのか、またご自身で契約されている「Xserver」などの本番用サーバーへどう繋がるのかを整理して解説します。

1. 著者が設けたものではなく「自分のPC」です
127.0.0.1 は「ループバックアドレス」と呼ばれ、世界中のどのPCであっても自分自身を指す特別な住所です。
誰かが用意したサーバーではない: 著者が管理しているネット上のサーバーではなく、あなたのPCの中で一時的に「サーバー役」をさせている状態です。
無料・無制限: 自分のPCを使っているだけなので、通信料もサーバー代もかからず、何度でも壊しては作り直すことができます。

2. Xserverなどでのテストも可能ですが、仕組みが異なります
結論から言うと、Xserverでテストを進めることは可能ですが、今の段階ではおすすめしません。
なぜ「今」はXserverではないのか?
開発効率の違い:
ローカル(今の環境): プログラムを1行書き換えて保存すれば、数秒で反映を確認できます。
Xserver: 毎回ファイルをFTPなどでアップロードしたり、設定を変更したりする手間がかかります。
動作の仕組みの違い: XserverのようなレンタルサーバーでFlaskを動かすには、CGIやWSGIといった高度な設定が必要になり、初心者には非常に難易度が高い作業になります。

3. おすすめの学習ステップ
開発のプロも、以下のような流れで進めるのが一般的です。
ローカル(今ここ): 自分のPCでアプリを作り上げ、動作を100%確実にする。
デプロイ(公開): 完成したものを初めてXserverなどの本番環境へアップロードする。

まとめ

127.0.0.1: あなたのPCの「自分の部屋」のような場所です。安心してそこで実験を続けてください。
Xserver: 「お店の看板(本番公開)」のような場所です。アプリがある程度完成してから、その看板を掲げる作業(デプロイ)を学ぶのがスムーズです。
参考書の通りに進めていけば、まずはローカル環境で「Webアプリがどう動くか」の基礎が身につきます。そこが一番の近道ですので、引き続き今の環境で学習を進めてみてください。

(flask_env)のプログラムをターミナルでなく▷で実行したい

以下のプログラム「hello_flask.py」をRunする場合ターミナルから(flask_env) PS C:\Users\DELL\python\flask_workspace\hello_flask> .\hello_flask.py
のように実行していますが、編集画面の右上の▷で実行することはできないのですか?

VS Codeの実行ボタン(▷)で動かすための設定

方法1:設定画面から直接パスを入力する
コマンドパレットを使わずに、VS Codeの「設定」画面から直接仮想環境のパスを指定します。
VS Codeの左下にある 歯車アイコン をクリックし、「設定 (Settings)」 を開きます。
検索ボックスに python path と入力します。
「Python: Default Interpreter Path」 という項目を探します。
その入力欄に、作成した仮想環境内の python.exe のフルパスを入力してください。
例: C:\Users\DELL\python\flask_workspace\flask_env\Scripts\python.exe
VS Codeを一度閉じて再起動します

ステータスバーが python3.13.7(flask_env) になり、実行ログに flask_env/Scripts/python.exe が表示されているので、VS Codeの設定(仮想環境の紐付け)は完全に成功しています!

魔法のコマンド「Stop-Process -Name “python” -Force」

状況を整理すると、プログラムを書き換えて実行し直しているにもかかわらず、ブラウザに表示される文字が変わらないということですね。
これは、「古いプログラムのプロセス(サーバー)が、裏側でまだ動き続けている」ことが原因である可能性が非常に高いです。

原因:前のサーバーが終了していない
Flask(サーバー)は一度起動すると、そのターミナルを閉じても裏側で「待ち受け状態」のまま残ってしまうことがあります。新しく Run しても、すでにポート(5000番)を古いプログラムが占拠しているため、ブラウザには「古い方の結果」が表示され続けます。
以下の手順で、一度すべてをリセット(大掃除)しましょう。

1. 動作中のPythonプロセスを強制終了する
WindowsのすべてのPython(Flask)を一度完全に止めます。
VS Codeのターミナルで、以下のコマンドを入力してエンターキーを押してください。

powershell
Stop-Process -Name "python" -Force

※もしエラーが出ても、それは「動いているものがない」という意味なので無視してOKです。

2. ファイルを確実に「保存」する
意外と多いのが、プログラムを書き換えた後に「保存」されていないケースです。
hello_flask.py のタブに 丸い点(●) が出ていたら未保存です。
Ctrl + S を押して、点が「×」に変わることを確認してください。

3. デバッグモードを付けて再実行する
今後、書き換えるたびにこのトラブルが起きないよう、前述の debug=True を入れた状態で ▷ボタン を押してください。

python
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000, debug=True)

4. ブラウザを「強力に」更新する
サーバー側が新しくなっても、ブラウザが「前の結果」を覚えている(キャッシュしている)ことがあります。
ブラウザ(ChromeやEdge)を開き、Ctrl + F5 を同時に押してください。これで強制的に最新の状態を読み込みます。

参考 Webプログラムの実行 注意事項 チート表

プログラムの実行 hello_flask.py

プログラムを書き換えた後に必ず「保存」すること!
hello_flask.py のタブに 丸い点(●) が出ていたら未保存です。
Ctrl + S を押して、点が「×」に変わることを確認してください。

Webプログラムが実行中だったら、CTRL+C で終わらせてターミナルが
(flask_env) PS C:\Users\DELL\python\flask_workspace>
であることを確認!

# Flaskのインポート ---(※1)
from flask import Flask

# インスタンス作成 ---(※2)
app: Flask = Flask(__name__)

# ルーティング ---(※3)

@app.route("/")
def hello_world():
return "<h1>Hello,World!ですね</h1>"

# アプリケーションの実行 ---(※4)
if __name__ == "__main__":
app.run(debug=True)

ターミナルをアクティブ(flask_env)にするには

PS C:\Users\DELL>
PS C:\Users\DELL>cd python\flask_workspace
PS C:\Users\DELL>cd python\flask_workspace>.\flask_env\Scripts\activate
(flask_env) PS C:\Users\DELL\python\flask_workspace>

Webプログラム(hello_flask.py)を実行するには

(flask_env) PS C:\Users\DELL\python\flask_workspace>
(flask_env) PS C:\Users\DELL\python\flask_workspace>cd hello_flask
(flask_env) PS C:\Users\DELL\python\flask_workspace\hello_flask>
(flask_env) PS C:\Users\DELL\python\flask_workspace\hello_flask> .\hello_flask.py

他の実行方法
①VSコードの編集画面の右上の▷で実行
②VSコードのエクスプローラでファイルを右クリックして「ターミナルでPythonファイルを実行する」を選択します。

ターミナルに結果が出たら
Ctrlキーを押しながら「http://127.0.0.1:5000」をクリックするとブラウザが起動します。

参考 OneDrive上での開発について

エラーメッセージのパスを見ると、OneDrive同期フォルダ内(…\onedrive\python\…)で作業されています。
OneDrive上でPythonの仮想環境(flask_env)を作成すると、同期の競合や、ファイル数の多さによるPCの動作遅延、ライブラリ実行時の予期せぬエラーを招くことが非常に多いです。
可能であれば、OneDriveの影響を受けないフォルダ(例: C:\Users\DELL\python_projects など)に移動して作業することをお勧めします。

OneDriveを止めてC:ドライブ直下に変更した。
(flask_env) PS C:\Users\DELL\python\flask_workspace\hello_flask> python hello_flask.py

参考(ディレクトリを移動するcdコマンド

ターミナルでディレクトリ(フォルダ)を移動するにはcdコマンド(Change Directory)を使います。

cd [移動先]と入力して実行し、
.(現在地)
..(一つ上)
~(ホーム)
絶対パス、相対パスなどで移動でき、Finderからフォルダをドラッグ&ドロップするとパスを簡単に入力できます。

cdコマンドの基
現在のディレクトリ内のサブディレクトリへ移動:
cd ディレクトリ名 (例: cd Documents)
一つ上の階層(親ディレクトリ)へ移動:

cd .. (ピリオド2つ)
ホームディレクトリへ移動:

cd (何も入力しない)
cd ~
直前のディレクトリへ戻る (Mac/Linux):

cd –
特定のパスへ移動:cd /Users/yourname/Desktop (絶対パス)

簡単な移動方法
cd (cdの後ろに半角スペース) と入力する。
Finder(Windowsのエクスプローラー)で移動したいフォルダを開く。
そのフォルダアイコンをターミナルウィンドウにドラッグ&ドロップする。
パスが自動で入力されるので、Enterキーを押す。
その他の便利なコマンド
pwd: 現在のディレクトリのパスを表示。
ls: カレントディレクトリ内のファイルやフォルダの一覧を表示

コメント