1. 概要
本記事では Flask を使った最小のMVC構成を作成し、必要最小限のコードまで流し込みます。
アプリを開発するうえで必須となる「MVCアーキテクチャ」をまず理解し、その骨組みを作り上げます。
感情分析 / 画像分類 / レコメンドなどの「機能本体」は機能実装編で追加予定です。
MVCとは？
Webアプリは「MVC」という設計思想に従うと整理しやすくなります。
ブラウザ → [Routes(Controller)] → [Templates(View)]
↓
[Models(将来DBやML)]
-
Routes (Controller)
URLごとの入口。ユーザーがアクセスしたら、どの処理を実行するかを決める司令塔。 -
Templates (View)
HTMLを生成する場所。Flaskでは Jinja2 というテンプレートエンジンを使って、画面を描画します。 -
Models
データを扱う部分。今回はダミーを置くだけですが、将来的にDBや機械学習モデルを組み込むときに活躍します。
2. プロジェクト作成 & 仮想環境
Windows (PowerShell)
コマンドプロンプト
mkdir my_app
cd my_app
python -m venv .venv
.\.venv\Scripts\Activate.ps1
Mac / Linux (bash / zsh)
コマンドプロンプト
mkdir my_app
cd my_app
python3 -m venv .venv
source .venv/bin/activate
有効化できると (venv) がプロンプトに表示されます。
→ この仮想環境は「今回のプロジェクト専用のPython実行環境」です。
コードの解説
1. mkdir my_app
- 新しいフォルダを作成するコマンド。
- プロジェクト名は
my_appとしているが、好きな名前でOK。
2. cd my_app
- 作成したフォルダに移動。
- 以降の作業はこのディレクトリの中で行う。
3. python -m venv .venv / python3 -m venv .venv
- 仮想環境 (venv) を作成するコマンド。
-
.venvフォルダに「このプロジェクト専用のPython環境」が作られる。 - ライブラリを入れても、他のプロジェクトに影響しない。
4. .\.venv\Scripts\Activate.ps1 / source .venv/bin/activate
- 仮想環境を有効化するコマンド。
- 有効化すると、プロンプトに (venv) と表示される。
- 以降の pip install ... はこの仮想環境の中にインストールされる。
なぜ仮想環境が必要か？
- Pythonはプロジェクトごとに必要なライブラリが異なる。
- 仮想環境を使わないと、全プロジェクトでライブラリが混ざってしまい、エラーの原因になる。
- venvを使えば「そのプロジェクトだけの環境」を安全に管理できる。
3. 依存ライブラリを準備
コマンドプロンプト
# 必要ライブラリを requirements.txt に追加
echo Flask > requirements.txt
echo python-dotenv >> requirements.txt
echo black >> requirements.txt
# 一括インストール
pip install -r requirements.txt
ライブラリの説明
-
Flask：
Webアプリの本体フレームワーク。ルーティングやテンプレートを使ってWebページを作る。 -
python-dotenv
.envファイルに書いた環境変数を自動で読み込む。APIキーやDB接続文字列などをコードに直接書かずに済む。 -
black
Pythonの自動コード整形ツール。見た目を統一し、コードレビューで「スペースが足りない」といった指摘をなくす。
コマンドの解説
-
echo Flask > requirements.txt
→requirements.txtを新規作成し、中にFlaskを書き込む。 -
echo python-dotenv >> requirements.txt
→ 既存のrequirements.txtに追記でpython-dotenvを書き込む。 -
echo black >> requirements.txt
→ 同様にblackを追記する。
pip install -r requirements.txt
→ requirements.txt に書かれたライブラリを一括でインストールする。
Black の使い方（補足）
インストール後、以下のコマンドでプロジェクト全体を自動整形できる：
コマンドプロンプト
black .
-
.は「カレントディレクトリ以下すべての.pyファイル」を意味する。 - インデント、スペース、クォートなどを一発で直してくれる。
4. フォルダ & ファイルを一括生成
Windows (PowerShell)
コマンドプロンプト
# フォルダを作成
mkdir app, app\routes, app\services, app\models, app\templates, app\static, app\static\css
# ファイルを作成
ni run.py, README.md, .env, .gitignore, app\__init__.py, app\config.py, app\routes\web.py, app\routes\api.py, app\models\ml_registry.py, app\models\__init__.py, app\templates\base.html, app\templates\top.html, app\static\css\style.css | Out-Null
Mac / Linux (bash / zsh)
コマンドプロンプト
# フォルダ作成
mkdir -p app/routes app/services app/models app/templates app/static/css
#ファイルを作成
touch run.py README.md .env .gitignore app/__init__.py app/config.py app/routes/web.py app/routes/api.py app/models/ml_registry.py app/models/__init__.py app/templates/base.html app/templates/top.html app/static/css/style.css
5. ファイルの中身（コード・説明・解説）
.env
SECRET_KEY=devkey
ファイルの説明
アプリの「設定」をまとめる場所。パスワードやAPIキーなどを外に出して管理するために使う。
コードの解説
-
SECRET_KEY： Flaskのセッション管理などに使う秘密鍵。 - 開発中は
devkeyでよいが、本番はもっと複雑な文字列を設定する。
run.py
from app import create_app # appフォルダからFlaskアプリを作る関数を読み込む
app = create_app() # Flaskアプリを生成
if __name__ == "__main__":
app.run(debug=True) # python run.py でサーバーを起動
ファイルの説明
アプリの「起動スクリプト」。コマンド python run.py を叩くとFlaskが立ち上がる。
コードの解説
-
create_app()： Flaskアプリを作る工場関数。 -
if __name__ == "__main__":： このファイルを直接実行した時だけサーバーを起動する。 -
debug=True： ソースコードを修正すると自動でリロードされる。
app/__init__.py
from flask import Flask
from .config import Config
def create_app():
app = Flask(__name__) # Flaskアプリを作成
app.config.from_object(Config) # 設定を読み込む
# Blueprintでルートを分割
from .routes.web import web_bp
from .routes.api import api_bp
app.register_blueprint(web_bp) # 画面用ルート
app.register_blueprint(api_bp, url_prefix="/api") # API用ルート
return app
ファイルの説明
Flaskアプリ本体を生成する工場。Blueprintを使って「画面用」と「API用」のルートを登録する。
コードの解説
-
Flask(__name__)： Flaskアプリを作成。 -
app.config.from_object(Config)：config.pyの設定を読み込む。 -
Blueprint： ルートを分割して管理できる仕組み。-
/→ 画面用ルート（web.py） -
/api/...→ APIルート（api.py）
-
app/config.py
import os
from dotenv import load_dotenv
load_dotenv()
class Config:
SECRET_KEY = os.getenv("SECRET_KEY", "devkey")
ファイルの説明
アプリ全体の設定を管理するクラス。.env から値を読み込んでFlaskに渡す。
コードの解説
-
load_dotenv()：.envファイルを読み込む。 -
os.getenv("SECRET_KEY")： 環境変数SECRET_KEYを取得。なければ"devkey"を使う。
app/routes/web.py
from flask import Blueprint, render_template
web_bp = Blueprint("web", __name__)
@web_bp.get("/") # http://localhost:5000/
def top():
return render_template("top.html") # top.htmlを返す
ファイルの説明
Web画面用のルート。ブラウザでページを開くとHTMLを返す。
コードの解説
-
Blueprint("web", __name__)： 「webルート用の青写真」を定義。 -
@web_bp.get("/")：/にアクセスが来たらtop()を実行する。 -
render_template("top.html")：templates/top.htmlを表示。
app/routes/api.py
from flask import Blueprint, jsonify
api_bp = Blueprint("api", __name__)
@api_bp.get("/health") # http://localhost:5000/api/health
def health():
return jsonify({"status": "ok"})
ファイルの説明
API用のルート。JSONを返す。
コードの解説
-
Blueprint("api", __name__)： APIルート用の青写真を定義。 -
/api/healthにアクセスすると{"status": "ok"}を返す。 - 開発中に「アプリが動いているか」をチェックするために使う。
app/models/ml_registry.py
def get_model(name: str):
raise NotImplementedError(
f"Model \"{name}\" is not registered yet. "
"Add app/services/<feature>.py and put your model under /models."
)
ファイルの説明
機械学習モデルを管理するための入り口。準備編ではまだ未実装。
コードの解説
-
raise NotImplementedError： まだ実装されていないときに投げるエラー。 - 後で「感情分析」「レコメンド」などのモデルを登録する場所。
app/templates/base.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>{% block title %}Demo{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<main class="container">
{% block content %}{% endblock %}
</main>
</body>
</html>
ファイルの説明
全ページ共通のレイアウト。ヘッダーやCSS読み込みをまとめる。
コードの解説
-
{% block title %}： ページごとにタイトルを変えられる。 -
{% block content %}： ページごとの内容を差し込む場所。 -
url_for('static', filename='css/style.css')： 静的ファイルの読み込み。
app/templates/top.html
{% extends "base.html" %}
{% block title %}Flask Minimal{% endblock %}
{% block content %}
<h1>Flask 最小構成の土台</h1>
<p>トップページが表示され、<code>/api/health</code> が {"status":"ok"} を返せば成功です。</p>
{% endblock %}
ファイルの説明
トップページ。base.html を継承して本文を差し込む。
コードの解説
-
{% extends "base.html" %}： 共通レイアウトを使う。 -
{% block content %}： この部分が本文。 -
/api/healthで返るJSONのチェック方法も案内。
.gitignore
# Python
__pycache__/
*.pyc
*.pyo
# venv
.venv/
# dotenv
.env
# SQLite（機能実装編で使う場合）
*.db
instance/
# Flaskの移行用
migrations/
ファイルの説明
不要なファイルや公開してはいけないファイルをGitHubにアップしないようにします。
-
.env（APIキーや秘密情報が入る） -
.venv/（仮想環境） -
__pycache__/（Pythonのキャッシュ）
README.md
# Flask Minimal Scaffold
## Setup (Windows PowerShell)
python -m venv .venv
.\.venv\Scripts\Activate.ps1
pip install -r requirements.txt
python run.py
## Setup (Mac/Linux)
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
python run.py
ファイルの説明
環境構築の手順をまとめたメモ。
受講生はここを見れば同じ環境を再現できる。
6. フォルダ構成
my_app/
├─ app/
│ ├─ __init__.py # Flask本体
│ ├─ config.py # 設定
│ ├─ routes/ # 入り口
│ │ ├─ web.py # 画面ルート
│ │ └─ api.py # APIヘルス
│ ├─ services/ # 機能追加用（空）
│ ├─ models/ # モデル関連
│ │ ├─ __init__.py
│ │ └─ ml_registry.py
│ ├─ templates/ # HTMLテンプレート
│ │ ├─ base.html
│ │ └─ top.html
│ └─ static/ # 静的ファイル
│ └─ css/
│ └─ style.css
├─ .env
├─ run.py
├─ requirements.txt
└─ README.md
7. 動作確認
コマンドプロンプト
python run.py
- http://localhost:5000/ → トップページ表示
-
http://localhost:5000/api/health →
{"status":"ok"}