【Python】FastAPIでインメモリTODO Webアプリを作ってみた

PythonのWebフレームワークFastAPIを使って、ブラウザから操作できるTODOアプリを1ファイルで作ってみました。データベースもテンプレートエンジンも使わず、タスクは辞書に保存するインメモリ構成です。追加・完了・削除の3操作はフォームとリダイレクトだけで実現し、リロードしても二重送信されないPRGパターンも取り入れました。

FastAPIの基本だけでWebアプリがちゃんと動くところまでを、コードを断片ごとに分解しながら初心者向けに解説します。

FastAPIの基本概念、要件定義、実装、動作確認までを順番に学べます。動画は目次から確認したい場面へ移動でき、本文だけでも手順と考え方が完結します。

FastAPIはPythonでAPIやWebアプリのバックエンドを構築するためのWebフレームワークです。型ヒントを利用した入力検証と自動ドキュメントを備え、関数単位でルートを定義できます。

まず全体像を理解し、その後で今回のTODOアプリにどう関係するかを確認します。

• ASGIに対応し、非同期処理を扱える
• Pythonの型ヒントから入力を検証できる
• OpenAPIに基づくAPIドキュメントを自動生成できる
• デコレーターでURLと処理関数を結び付ける

FastAPIが担当する役割

ブラウザから届いたHTTPリクエストを受け取り、URLとメソッドに対応するPython関数を呼び出し、その戻り値をHTTPレスポンスとして返します。

画面の見た目を作るHTMLやCSSとは役割が異なり、FastAPIは主にリクエストを処理するバックエンドを担当します。

• リクエストを受け取る
• 対応する処理関数を選ぶ
• 処理結果をレスポンスとして返す

型ヒントと入力検証

FastAPIは関数の引数に付けた型ヒントを読み取り、入力値の変換や検証に利用します。型が合わない場合は、処理関数へ渡す前にエラーとして扱えます。

今回のアプリではフォーム値を文字列として受け取り、TODO IDは整数として扱うことで、どの値を期待しているかをコード上で明確にします。

• 引数の型がAPIの入力仕様になる
• 不正な値を処理関数へ渡しにくくなる
• エディターの補完や静的解析にも役立つ

自動ドキュメントとASGI

定義したルートと型情報からOpenAPI形式の仕様が作られ、/docsで操作可能なAPIドキュメントを確認できます。

FastAPIはASGIに対応しており、UvicornなどのASGIサーバー上で動作します。

• /docsでルートと入力仕様を確認できる
• UvicornがHTTP通信を受け持つ
• 必要に応じて非同期処理へ拡張できる

目的は、FastAPIのルーティングとフォーム処理を使い、ブラウザで操作できるTODOアプリを1ファイルで完成させることです。

対象者はPythonの関数・辞書・条件分岐を学び、次にWebアプリ開発を体験したい初学者で、完成物はTODOの一覧表示、追加、完了切り替え、削除ができるインメモリWebアプリです。

実装へ入る前に、機能・品質・受け入れ条件を分けて確認します。

機能要件

• ルートURLでTODO一覧と未完了件数を表示する
• フォームへ入力したTODOを追加する
• TODOの完了・未完了を切り替える
• 指定したTODOを削除する
• 各POST処理後は303リダイレクトで一覧へ戻る

非機能要件

• 利用者が入力したタイトルをHTMLエスケープして表示する
• 存在しないTODO IDを指定してもKeyErrorで停止しない
• 学習用として外部データベースを使わず1ファイルで動かす
• サーバー再起動時にデータが消える制約を明示する

実装方針

今回はFastAPIの基本動作を追いやすくするため、アプリ本体、HTML生成、ルーティングを1つのPythonファイルへまとめます。

TODOはIDをキーにした辞書へ保存します。外部データベースを使わないため、サーバーを再起動すると追加したデータが消える学習用の構成です。

• 一覧表示はGET、追加・完了切り替え・削除はPOSTで処理する
• 処理後は303リダイレクトで一覧へ戻し、フォームの再送信を防ぐ
• HTML生成は専用関数へまとめ、ルート処理を短く保つ
• 入力値は空白を除去し、HTMLエスケープしてから表示する

完成と判断する条件

1. 起動直後に初期TODOが3件表示される
2. 未完了件数が2件と表示される
3. 新しいTODOを追加すると一覧と件数へ反映される
4. 追加したTODOを完了にすると取り消し線が付き件数が減る
5. 削除操作後に対象TODOが一覧から消える

WebアプリではURLとHTTPメソッド、入力値、レスポンス、状態管理を分けて考えることが重要です。今回のTODOアプリで各要素を最小構成から確認します。

まず全体像を理解し、その後で今回のTODOアプリにどう関係するかを確認します。

• GETは画面表示、POSTはデータ変更に使い分ける
• FormでHTMLフォームの入力値を受け取る
• HTMLResponseとRedirectResponseを用途別に返す
• 入力値はstripとhtml.escapeで整える
• インメモリ保存は再起動で消えるため学習用途に限定する

URLとHTTPメソッドを分けて考える

URLは操作対象を表し、HTTPメソッドはその対象へ何をするかを表します。今回のアプリでは一覧表示をGET、状態を変更する操作をPOSTへ分けます。

表示と更新を分けると、ブラウザの再読み込みやフォーム再送信による意図しない二重登録を防ぎやすくなります。

• GET /はTODO一覧を表示する
• POST /addは新しいTODOを追加する
• POST /toggle/{todo_id}と/delete/{todo_id}は指定IDを操作する

入力とレスポンスの役割

HTMLフォームの値はFormで受け取り、画面表示にはHTMLResponse、操作後の画面遷移にはRedirectResponseを使います。

受け取った文字列はstrip()で前後の空白を除去し、表示時にはhtml.escape()でHTMLとして解釈されないようにします。

• 入力値が空ならTODOを追加しない
• 画面表示とリダイレクトを用途別に使う
• 利用者の入力をそのままHTMLへ埋め込まない

状態をどこへ保存するか

Webアプリはリクエストをまたいでデータを保持する場所が必要です。今回は仕組みを追いやすくするため、Pythonの辞書を保存領域として使います。

辞書は高速で分かりやすい一方、プロセスを終了すると内容が消えます。永続化が必要なアプリではデータベースへ置き換えます。

• TODO IDを辞書のキーにする
• タイトルと完了状態を値として保持する
• 本番運用ではデータベースや認証も検討する

ルーティングはブラウザの操作をPython関数へ届ける仕組みです。TODOの状態はIDをキーにした辞書へ保存し、追加・更新・削除を各ルートから行います。

まず全体像を理解し、その後で今回のTODOアプリにどう関係するかを確認します。

• URLパスのtodo_idで操作対象を特定する
• 共通の追加関数でID発行と保存をまとめる
• 辞書のgetとpopの既定値で存在しないIDを安全に扱う
• POST後にGETへ戻してフォーム再送信を防ぐ

デコレーターでルートを登録する

@app.get()や@app.post()を関数の直前へ書くと、URLとHTTPメソッドに対応する処理関数としてFastAPIへ登録されます。

/toggle/{todo_id}のような波括弧部分はパスパラメーターで、URLに含まれるIDを関数の引数として受け取れます。

• デコレーターの直下へ処理関数を書く
• 同じURLでもHTTPメソッドが違えば別処理にできる
• パスパラメーターで操作対象を指定する

辞書でTODOの状態を管理する

各TODOはID、タイトル、完了状態を持つ辞書として保存します。IDをキーにすると、一覧表示・更新・削除で同じTODOを特定できます。

存在しないIDが指定された場合に備え、get()や既定値付きのpop()を使って例外を避けます。

• 追加時に重複しないIDを発行する
• 完了切り替えではdoneを反転する
• 削除では対象IDの要素を辞書から取り除く

POST・Redirect・GETの流れ

フォーム操作をPOSTで受け付けた後、そのままHTMLを返すのではなく303リダイレクトで一覧へ戻します。ブラウザは続けてGETを行い、更新後の状態を表示します。

この流れはPRGパターンと呼ばれ、再読み込み時に同じPOSTが再送信される問題を防ぎます。

• POSTで状態を変更する
• 303レスポンスで一覧URLを返す
• GETで更新後の画面を表示する

この記事のセットアップ手順と掲載コードは、Windows 11 Pro、PowerShell 5.1、Python 3.13.3で動作確認しています。仮想環境を有効化せず、その中のPythonを直接指定するため、以下のコマンドはPowerShellとコマンドプロンプト（cmd）の両方で使えます。

python -m venv .venv
.\.venv\Scripts\python.exe -m pip install fastapi uvicorn python-multipart

macOS・Linuxでは仮想環境内のPythonパスが異なります。今回の動作確認環境とは異なるため、以下は環境差分を補う参考手順です。

python3 -m venv .venv
./.venv/bin/python -m pip install fastapi uvicorn python-multipart

• FastAPIのFormでフォーム値を受け取るにはpython-multipartが必須。入れ忘れるとサーバ起動時にエラーになる
• 起動は .\.venv\Scripts\python.exe -m uvicorn todo_app:app --reloadで、ブラウザからhttp://127.0.0.1:8000を開く
• データはメモリ上の辞書に保存するため、サーバを再起動(--reloadの自動再起動を含む)するとタスクは初期状態に戻る

最初から全機能を一度に書くのではなく、役割ごとに小さく組み立てます。

各段階で確認する内容を決めておくと、問題が起きた場所を特定しやすくなります。

実装する順序

1. 必要なモジュールを読み込み、FastAPIアプリとTODO保存用の辞書を用意する
2. TODOを1件追加する共通関数と、初期表示用のデータを作る
3. TODO一覧を安全なHTMLへ変換する関数を作る
4. 一覧表示、追加、完了切り替え、削除のルートを定義する
5. ブラウザから一連の操作を行い、表示と件数の変化を確認する

各段階で確認すること

次の確認を順番に行い、完成状態まで機能を積み上げます。

1. 依存関係を読み込めるか確認：FastAPI、Form、2種類のレスポンス型を実際にimportします。
2. 最小のTODOを1件保存：_add_todo()を呼び、連番IDと辞書への保存を確認します。
3. 初期データの件数を確認：起動時に3件が登録され、そのうち未完了が2件であることを確認します。
4. HTMLを最後まで生成できるか確認：_render_page()を実行し、HTML文字列とTODO行が生成されることを確認します。
5. 一覧表示ルートを確認：FastAPIへGET /が登録され、HTML画面を返す準備ができたか確認します。
6. 追加処理と303遷移を確認：add()を直接呼び、TODOが増えて303レスポンスになることを確認します。
7. 完了状態の反転を確認：toggle()で未完了のタスクが完了へ切り替わることを確認します。
8. 削除処理を確認：delete()で指定IDが辞書から消え、303で一覧へ戻ることを確認します。
9. 完成した全ルートを確認：一覧・追加・完了切替・削除の4ルートが登録済みか最終確認します。

コード全体は大きく3つのブロックに分かれます。①アプリ本体とtodos辞書などの保存領域、②一覧HTMLを組み立てる_render_page関数、③追加・完了・削除を受け付けるルーティングです。

一覧表示はGET /がHTMLを返し、POST /add・/toggle/{todo_id}・/delete/{todo_id}の3つが操作を受け持ちます。3操作はいずれも処理後にstatus_code=303のRedirectResponseで一覧へ戻る作りです。

フォームの値はFastAPIのFormで受け取ります。全部で100行程度の見通しのよいコードなので、ここでは「押さえておけば全体が読める」重要な断片だけを順に見ていきましょう。

"""FastAPIで作るインメモリTODO Webアプリ。"""

import html
from itertools import count

from fastapi import FastAPI, Form
from fastapi.responses import HTMLResponse, RedirectResponse

# アプリ本体とインメモリの保存領域
app = FastAPI(title="インメモリTODOアプリ")
todos: dict[int, dict] = {}
_next_id = count(1)


def _add_todo(title: str, done: bool = False) -> None:
    todo_id = next(_next_id)
    todos[todo_id] = {"id": todo_id, "title": title, "done": done}


# 動作イメージが分かる初期タスク(サーバを再起動すると消えるインメモリデータ)
_add_todo("FastAPIでTODOアプリを作る", done=True)
_add_todo("タスクの追加と完了を試す")
_add_todo("いらないタスクを削除する")


# 一覧画面のHTML組み立て
def _render_page() -> str:
    rows = []
    for todo in todos.values():
        title_html = html.escape(todo["title"])
        state_class = "done" if todo["done"] else ""
        toggle_label = "戻す" if todo["done"] else "完了"
        todo_id = todo["id"]
        rows.append(
            f'<li class="item {state_class}">'
            f'<span class="title">{title_html}</span>'
            f'<span class="actions">'
            f'<form method="post" action="/toggle/{todo_id}">'
            f'<button class="btn">{toggle_label}</button></form>'
            f'<form method="post" action="/delete/{todo_id}">'
            f'<button class="btn danger">削除</button></form>'
            f"</span></li>"
        )
    remaining = sum(1 for t in todos.values() if not t["done"])
    items = "\n".join(rows) if rows else '<li class="empty">タスクはありません</li>'
    return f"""<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>インメモリTODOアプリ</title>
<style>
  body {{ font-family: sans-serif; background: #eef2f7; margin: 0; }}
  .wrap {{ max-width: 560px; margin: 40px auto; padding: 0 16px; }}
  h1 {{ font-size: 22px; color: #1f2a44; }}
  .card {{ background: #fff; border-radius: 12px; padding: 20px;
           box-shadow: 0 2px 10px rgba(31, 42, 68, .08); }}
  .addform {{ display: flex; gap: 8px; margin-bottom: 16px; }}
  .addform input {{ flex: 1; padding: 10px; border: 1px solid #c6cfdd;
                    border-radius: 8px; font-size: 15px; }}
  ul {{ list-style: none; margin: 0; padding: 0; }}
  .item {{ display: flex; justify-content: space-between; align-items: center;
           padding: 10px 4px; border-bottom: 1px solid #e6ebf2; gap: 8px; }}
  .item.done .title {{ text-decoration: line-through; color: #9aa5b5; }}
  .actions {{ display: flex; gap: 6px; }}
  .actions form {{ margin: 0; }}
  .btn {{ padding: 6px 12px; border: none; border-radius: 6px; cursor: pointer;
          background: #2f6fed; color: #fff; font-size: 13px; }}
  .btn.danger {{ background: #d64545; }}
  .addform .btn {{ font-size: 15px; }}
  .count {{ color: #5b6779; font-size: 14px; margin-top: 12px; }}
</style>
</head>
<body>
<div class="wrap">
  <h1>インメモリTODOアプリ</h1>
  <div class="card">
    <form class="addform" method="post" action="/add">
      <input name="title" placeholder="やることを入力" autocomplete="off" required>
      <button class="btn">追加</button>
    </form>
    <ul>
      {items}
    </ul>
    <p class="count">未完了のタスク: {remaining}件</p>
  </div>
</div>
</body>
</html>"""


# 一覧画面の表示
@app.get("/", response_class=HTMLResponse)
def index() -> str:
    return _render_page()


# タスクの追加(追加後は303リダイレクトで一覧へ戻す)
@app.post("/add")
def add(title: str = Form(...)) -> RedirectResponse:
    cleaned = title.strip()
    if cleaned:
        _add_todo(cleaned)
    return RedirectResponse("/", status_code=303)


# 完了と未完了の切り替え
@app.post("/toggle/{todo_id}")
def toggle(todo_id: int) -> RedirectResponse:
    todo = todos.get(todo_id)
    if todo is not None:
        todo["done"] = not todo["done"]
    return RedirectResponse("/", status_code=303)


# タスクの削除
@app.post("/delete/{todo_id}")
def delete(todo_id: int) -> RedirectResponse:
    todos.pop(todo_id, None)
    return RedirectResponse("/", status_code=303)


# 動作確認したい画面
ROUTES = ["/"]

コード全文は上の折り畳みに入れてあるので、全部を上から読む必要はありません。ここでは特に重要な部分だけを抜き出して、何をしているのか順番に見ていきます。

todos辞書とcountによるID採番

app = FastAPI(title="インメモリTODOアプリ")
todos: dict[int, dict] = {}
_next_id = count(1)

appがFastAPIアプリの本体で、ここにURLごとの処理を登録していきます。タスクの保存先はただのPython辞書todosで、count(1)は呼ぶたびに1、2、3…と番号を返すカウンタです。この2つがDBの代わりを務めます。

_add_todoでタスクを1件登録する

def _add_todo(title: str, done: bool = False) -> None:
    todo_id = next(_next_id)
    todos[todo_id] = {"id": todo_id, "title": title, "done": done}

next(_next_id)で新しいIDを1つ取り出し、それをキーにして辞書へタスクを追加します。タスク自体もtitleとdoneを持つ小さな辞書で、DBでいう1レコードに相当する形です。

起動時に入れる初期タスク

_add_todo("FastAPIでTODOアプリを作る", done=True)
_add_todo("タスクの追加と完了を試す")
_add_todo("いらないタスクを削除する")

動作イメージがすぐつかめるよう、起動時にサンプルを3件登録しています。インメモリなのでサーバを再起動するたびに、この初期状態へ戻る点も覚えておきましょう。

html.escapeでタスク名を無害化

title_html = html.escape(todo["title"])
state_class = "done" if todo["done"] else ""
toggle_label = "戻す" if todo["done"] else "完了"

ユーザー入力をそのままHTMLに埋め込むとスクリプトを仕込まれる恐れがあるため、html.escapeで<や>を安全な表記に変換します。あわせて完了状態に応じ、CSSクラスとボタンの文言も切り替えています。

f文字列で1件分のliタグを組み立てる

rows.append(
    f'<li class="item {state_class}">'
    f'<span class="title">{title_html}</span>'
    f'<span class="actions">'
    f'<form method="post" action="/toggle/{todo_id}">'
    f'<button class="btn">{toggle_label}</button></form>'

タスク1件を<li>タグの文字列として組み立て、完了・削除のボタンをそれぞれ独立した<form>にしています。ボタンを押すと/toggle/3のようにIDが入ったURLへPOSTされる仕組みです。

残り件数の集計と空メッセージ

remaining = sum(1 for t in todos.values() if not t["done"])
items = "\n".join(rows) if rows else '<li class="empty">タスクはありません</li>'

sumとジェネレータ式で未完了タスクの件数を数えています。タスクが1件もないときは、空のリストの代わりに「タスクはありません」という案内を表示する分岐です。

完成したコードを保存し、開発サーバを起動してブラウザでhttp://127.0.0.1:8000を開くと、一覧画面が表示されました。レスポンスはHTTP 200で、コード内で登録した初期タスク3件が並んだ状態から始まります。

実際に1種類の画面で、表示と絞り込みの動作を確認できました。追加フォームと完了・削除ボタンがすべて同じページに収まっているため、画面遷移で迷うことがありません。

操作の様子は、実セッションを記録したブラウザ録画としても残しています。どの操作も303リダイレクトで一覧へ戻る作りなので、リロード時にフォーム再送信の警告に悩まされない点もあわせて確認できます。

構成はシンプルですが、初めてFastAPIを触るときに引っかかりやすい定番のエラーがいくつかあります。メッセージの読み方さえ分かれば数分で解決できるものばかりなので、先回りして対処を押さえておきましょう。

特にpython-multipartまわりは、FastAPI本体を入れただけでは足りない点が見落とされがちです。フォームを使う場合の追加インストールは、公式ドキュメントにも次のように明記されています。

インメモリ構成でつまずきやすい点

エラーとまでは言えないものの、初心者の手が「あれ?」と止まりやすいポイントもあります。どれも今回の最小構成ならではの性質なので、理由とセットで覚えておくと応用が利きます。

参考：

©FastAPI公式ドキュメント

To use forms, first install python-multipart.

「再起動で消えるアプリに使い道はあるのか」と思うかもしれませんが、消えてよいデータや作り捨ての場面では、この身軽さこそが武器になります。

ポイントは、todos辞書のまわりだけを差し替えれば本格構成へ育てられることです。用途に応じて、次のような使い方が考えられます。

FastAPIと標準ライブラリだけで、追加・完了・削除ができるTODOアプリを1ファイルで動かすところまで確認できました。辞書とitertools.countという基本的な道具だけでも、Webアプリの骨格は十分に表現できます。

特に押さえてほしいのは、PRGパターンとhtml.escapeの2点です。アプリの規模が大きくなっても必ず必要になる考え方なので、この最小構成のうちに手を動かして体で覚えておくと後が楽になります。

次の一歩としては、todos辞書をSQLiteに置き換えて永続化したり、HTML組み立てをJinja2のようなテンプレートエンジンへ移行したりする拡張がおすすめです。今回のコードが小さい分、どこを差し替えればよいかも見通しやすいはずです。

参考にした一次情報

1. ^ FastAPI公式ドキュメント(日本語). https://fastapi.tiangolo.com/ja/, (参照26-07-18).
2. ^ FastAPI公式チュートリアル: フォームデータ. https://fastapi.tiangolo.com/ja/tutorial/request-forms/, (参照26-07-18).
3. ^ Uvicorn公式ドキュメント. https://www.uvicorn.org/, (参照26-07-18).
4. ^ MDN Web Docs: 303 See Other. https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Status/303, (参照26-07-18).

※内容は執筆時点のものです。ライブラリやサイトの仕様は変わる可能性があるため、公式ドキュメントもあわせてご確認ください。

ITやプログラミングに関するコラム

• 
  【CSS】notで複数の件を除外する方法
• 
  【Git】remote設定を変更する方法
• 
  【VBA】コメントアウトを設定する方法
• 
  x86とx64の違いを分かりやすく解説
• 
  マークダウンで改行する方法
• 
  CapsLockキーを解除する方法
• 
  GitLabとGitHubの違いを解説
• 
  Linuxで環境変数を確認する方法
• 
  UbuntuのIPアドレスを確認する方法
• 
  パソコンのメモリの目安を用途別に選ぶ方法

ITやプログラミングに関するニュース

• 
  VercelがAI GatewayにSeedream 5.0 Proを追加、AI SDKのモデル指定で画像生成と編集が可能に
• 
  AWSがAmazon LocationのPlaces APIを強化、住所表記の指定と移動手段別の検索が可能に
• 
  VercelがトレースにTree・Waterfallビューを追加、ログ画面で処理の階層と所要時間を確認可能に
• 
  Googleがエージェント評価の再考を提唱、難易度を情報量で測るDiscovery Benchを解説
• 
  Google CloudがCloud Runサンドボックスを公開プレビューで提供、サービスヘルスは一般提供に
• 
  Google Cloud EMEAが英国金融の重要第三者に指定、イングランド銀行・PRA・FCAの直接監督下に
• 
  AWS DMS Schema ConversionがSQL Serverのオフライン変換に対応、ソースDBへ接続せずスキーマを変換可能に
• 
  EC2 G7インスタンスが米国東部（バージニア北部）で利用可能に、G6比でAI推論性能が最大4.6倍
• 
  SageMaker HyperPodが継続プロビジョニングでのAMIベース構成に対応、S3のスクリプト管理なしでSlurmクラスターを作成可能に
• 
  AWSがEMR on EKSでSparkトラブルシューティングエージェントに対応、失敗ジョブの原因分析を自然言語で依頼可能に