第1部：Web開発の基礎知識 Step 6 / 20

FastAPI基礎

FastAPIは、Pythonで高速なAPIを作るためのフレームワークです。シンプルな記述で、フロントエンドと連携するバックエンドを構築できます。

FastAPIとは

⚡

高速

Node.jsと同等の高速性能

📝

シンプル

少ないコードで書ける

📚

自動ドキュメント

APIドキュメントが自動生成

最小限のFastAPIアプリ

from fastapi import FastAPI

# アプリケーションを作成
app = FastAPI()

# GETリクエストを受け取るエンドポイント
@app.get("/")
def read_root():
    return {"message": "Hello, World!"}

これだけで、http://localhost:8000/にアクセスすると{"message": "Hello, World!"}が返ってきます。

HTTPメソッド（GET/POST/PUT/DELETE）

APIには4つの基本的な操作があります。これをCRUD（Create, Read, Update, Delete）と呼びます。

メソッド 用途 例
GET データを取得 Todoの一覧を取得
POST 新規作成 新しいTodoを追加
PUT 更新 Todoを完了にする
DELETE 削除 Todoを削除 
from fastapi import FastAPI

app = FastAPI()

# 仮のデータベース
todos = [
    {"id": 1, "title": "買い物", "completed": False},
    {"id": 2, "title": "掃除", "completed": True},
]

# GET: 一覧を取得
@app.get("/todos")
def get_todos():
    return todos

# GET: 1件を取得
@app.get("/todos/{todo_id}")
def get_todo(todo_id: int):
    for todo in todos:
        if todo["id"] == todo_id:
            return todo
    return {"error": "Not found"}

# POST: 新規作成
@app.post("/todos")
def create_todo(title: str):
    new_todo = {"id": len(todos) + 1, "title": title, "completed": False}
    todos.append(new_todo)
    return new_todo

# DELETE: 削除
@app.delete("/todos/{todo_id}")
def delete_todo(todo_id: int):
    for i, todo in enumerate(todos):
        if todo["id"] == todo_id:
            todos.pop(i)
            return {"message": "Deleted"}
    return {"error": "Not found"}

パラメータの受け取り方

パスパラメータ

URL内の{変数名}で受け取る

@app.get("/todos/{todo_id}")
def get_todo(todo_id: int):
    return {"id": todo_id}

# /todos/123 → todo_id = 123

クエリパラメータ

URL末尾の?key=valueで受け取る

@app.get("/todos")
def get_todos(completed: bool = None):
    if completed is not None:
        return [t for t in todos if t["completed"] == completed]
    return todos

# /todos?completed=true → 完了済みのみ

リクエストボディ（Pydanticモデル）

JSONデータを受け取る（POST/PUTで使用）

from pydantic import BaseModel

class TodoCreate(BaseModel):
    title: str
    completed: bool = False

@app.post("/todos")
def create_todo(todo: TodoCreate):
    return {"title": todo.title, "completed": todo.completed}

# リクエスト: {"title": "買い物", "completed": false}

自動生成されるドキュメント

FastAPIの大きな特徴は、APIドキュメントが自動で生成されることです。

アクセス方法

  • http://localhost:8000/docs - Swagger UI（インタラクティブ）
  • http://localhost:8000/redoc - ReDoc（読みやすい形式）

便利！/docsページでは、ブラウザからAPIを実際にテストできます。フロントエンドを作る前にAPIの動作確認ができて便利です。

CORS設定（フロントエンドと連携するために）

Next.js（フロントエンド）からFastAPI（バックエンド）にアクセスするには、CORS設定が必要です。

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# CORSの設定
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],  # Next.jsのURL
    allow_credentials=True,
    allow_methods=["*"],  # すべてのHTTPメソッドを許可
    allow_headers=["*"],  # すべてのヘッダーを許可
)

エラーが出たら：「CORS error」が出たら、この設定が抜けていないか確認しましょう。

コードの読み方のコツ

1. デコレータ（@app.xxx）を見る

@app.get("/todos")なら「/todosへのGETリクエスト」を処理する関数だとわかる。

2. 関数の引数を見る

引数はリクエストから受け取るデータ。型ヒントでどんなデータかわかる。

3. returnを見る

returnで返しているものが、APIのレスポンス（JSON）になる。

練習問題

Q1. 新しいデータを作成するときに使うHTTPメソッドは？

Q2. 次のエンドポイントにアクセスするURLは？

@app.get("/users/{user_id}")
def get_user(user_id: int):
    ...

Q3. FastAPIのドキュメントを見るURLは？

まとめ

  • ✓ FastAPIは@app.getなどのデコレータでエンドポイントを定義
  • ✓ CRUD操作：GET（取得）、POST（作成）、PUT（更新）、DELETE（削除）
  • ✓ パスパラメータ{id}とクエリパラメータ?key=valueでデータを受け取る
  • ✓ /docsで自動生成されたAPIドキュメントを確認できる
  • ✓ フロントエンドと連携するにはCORS設定が必要

第1部完了！

基礎知識の学習が完了しました。次は開発環境を準備して、実際にコードを書いていきましょう。

前へ：React/Next.js基礎 次へ：開発環境の準備