🥏

🚀 FastAPI 実践入門：第三歩目で学ぶテンプレートとセッション管理

2025/08/10に公開

📝 はじめに

第二歩目では、ルーティング、フォーム処理、バリデーション、エラーハンドリングといったWeb APIの土台を固める要素を扱いました。今回はその続きとして、FastAPIを使ったテンプレートエンジンの利用方法と、セッション管理の基本的な手法を紹介します。これにより、Webアプリとしてのフロントエンド要素とユーザー状態の管理を取り入れた構成が可能になります。テンプレートによって見た目の整ったWebページを提供し、セッションによってログイン状態やユーザーの識別を可能にすることで、より実践的なWebアプリケーションに近づくことができます。

🖼️ テンプレートエンジン Jinja2 の導入

FastAPIでは、Jinja2を使ってHTMLテンプレートを表示することができます。これにより、動的にHTMLを生成できるようになり、ユーザーごとのページや条件分岐を伴う表示が可能になります。

📦 インストール

Jinja2と非同期ファイル操作用のaiofilesをインストールします：

pip install jinja2 aiofiles

🔧 設定とテンプレートの表示

以下のようにテンプレートのディレクトリを指定し、TemplateResponseを使ってHTMLを返します。

from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates
from fastapi.responses import HTMLResponse
import uvicorn

app = FastAPI()
templates = Jinja2Templates(directory="templates")

@app.get("/", response_class=HTMLResponse)
def read_root(request: Request):
    return templates.TemplateResponse("index.html", {"request": request, "title": "ようこそ"})

templatesディレクトリを作成し、その中にindex.htmlを保存してください。
テンプレート内では{{ title }}などの形でPythonから渡された値を使ってHTMLを生成できます。

テンプレートは、例えば次のように記述します：

<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ title }}</h1>
    <p>FastAPIとJinja2の統合サンプルです。</p>
</body>
</html>

📁 静的ファイルの配信

HTMLだけでなく、スタイルシートやJavaScript、画像などの静的ファイルを提供するには、FastAPIのStaticFiles機能を使います。

🧱 設定方法

from fastapi.staticfiles import StaticFiles

app.mount("/static", StaticFiles(directory="static"), name="static")

static/フォルダをプロジェクト内に作成し、その中にstyle.cssや画像ファイルを置いてください。
HTMLテンプレートからは次のように使用します：

<link rel="stylesheet" href="/static/style.css">

これにより、ユーザーに見た目の整ったページを提供できるようになります。JavaScriptを組み合わせることで、より動的なページも構築可能です。

🔐 セッション管理の基本

FastAPIにはFlaskのようなセッション管理機能は標準搭載されていませんが、Cookieを使って状態を保持することで、簡易的なセッション機構を実現できます。

from fastapi.responses import Response
from fastapi import Cookie

@app.post("/set-cookie")
def set_cookie(response: Response):
    response.set_cookie(key="session_id", value="abc123", httponly=True)
    return {"message": "Cookieが設定されました。"}

@app.get("/get-cookie")
def get_cookie(session_id: str = Cookie(None)):
    return {"session_id": session_id}

set_cookieでサーバー側からCookieを発行し、get_cookieでクライアントの送ったCookieを取得します。これにより、簡易的にログイン状態などの情報をやり取りできます。ただし、セキュリティ上の懸念から、個人情報やパスワードを直接Cookieに保存することは避けましょう。

📋 セッションの実用パターン：認証との連携

Cookieを用いてログイン状態を管理することで、実際のアプリケーションで使える認証処理の簡易版が作れます。

👤 ログイン状態の保持

from fastapi import Form, Response, Request

@app.post("/login")
def login(username: str = Form(...), password: str = Form(...), response: Response):
    if username == "admin" and password == "password":
        response.set_cookie(key="user", value=username)
        return {"message": "ログイン成功"}
    return {"message": "認証失敗"}

@app.get("/mypage")
def mypage(request: Request):
    user = request.cookies.get("user")
    if user:
        return {"message": f"{user}さん、ようこそ！"}
    return {"message": "ログインしてください。"}

この例では、フォームでログイン情報を受け取り、正しければCookieにユーザー名を記録しています。その後、特定のページにアクセスした際に、Cookieからユーザー名を取得し、ログインしているかどうかを判断します。
このような仕組みをベースに、データベースと連携した本格的なログインシステムへ発展させることも可能です。

🎯 まとめ

Jinja2テンプレートを使って動的なHTMLを生成し、より視覚的なWebアプリを構築
CSSやJSファイルなど静的リソースの配信でユーザー体験を強化
Cookieを用いて簡易的なセッション管理を実装し、ユーザーの状態を保持
認証処理とCookieの組み合わせでログイン機能の基礎を実現

FastAPIは、API開発だけでなくWebアプリケーションの構築にも適しており、柔軟に機能を追加して拡張していくことができます。

株式会社ONE WEDGE

【Serverlessで世の中をもっと楽しく】 ONE WEDGEはServerlessシステム開発を中核技術としてWeb系システム開発、AWS/GCPを利用した業務システム・サービス開発、PWAを用いたモバイル開発、Alexaスキル開発など、元気と技術力を武器にお客様に真摯に向き合う価値創造企業です。
https://onewedge.co.jp/