1. 概要

Flaskは軽量なPython Webフレームワークであり、コア機能に加えて必要に応じて拡張機能を追加できる柔軟性を持っています。

2. インストール方法

以下のコマンドでインストールできます。

pip install flask

3. 基本的な使い方

Flaskではルーティングを@app.routeというデコレータで定義します。以下は基本的な例です。

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "ようこそFlaskへ！"

if __name__ == "__main__":
    app.run()

4. パラメータ付きルートの定義

URLにパラメータを指定して、整数値に応じた処理を行うことができます。

@app.route("/number/")
def number(id):
    if id == 1:
        return "最初のページ"
    elif id == 2:
        return "2番目のページ"
    else:
        return "その他のページ"

5. HTTPメソッドの制御

GET、POSTメソッドに対応する処理も簡単に実装できます。

from flask import request

@app.route("/login", methods=["GET", "POST"])
def login():
    if request.method == "POST":
        user = request.form.get("username")
        pwd = request.form.get("password")
        return f"ユーザー名: {user}, パスワード: {pwd}"
    return "ログインフォームを表示してください"

6. リダイレクトとURL生成

あるルートから別のルートにリダイレクトするにはredirectとurl_forを使用します。

from flask import redirect, url_for

@app.route("/home")
def go_home():
    return redirect(url_for("about"))

@app.route("/about")
def about():
    return "これは紹介ページです"

7. JSONデータの返却

フロントエンドにJSON形式でデータを返すにはjsonify関数を使います。

from flask import jsonify

@app.route("/api/data")
def get_data():
    data = {"name": "山田", "age": 25}
    return jsonify(data)

8. リクエストフックの使用

リクエストの前後に処理を挟むにはフック関数を使います。

@app.before_request
def before_processing():
    print("リクエスト開始前")

@app.after_request
def after_processing(response):
    print("リクエスト終了後")
    return response

9. Blueprintによるルーティング管理

複数のルートを整理するにはBlueprintが有効です。

from flask import Blueprint

api = Blueprint("api", __name__)

@api.route("/user")
def user_profile():
    return "ユーザー情報ページ"

app = Flask(__name__)
app.register_blueprint(api)

10. Ajaxリクエストの処理

jQueryからJSON形式でデータを送る場合の例です。

@app.route("/submit", methods=["POST"])
def submit():
    data = request.json.get("content")
    return jsonify({"received": data})

フロント側のjQueryコード：

$.ajax({
    url: "http://localhost:5000/submit",
    method: "POST",
    contentType: "application/json",
    data: JSON.stringify({ content: "テスト送信" }),
    success: function(res) {
        console.log("受信データ:", res);
    }
});