【ソフトウェアエンジニア向け】FastAPIとReactを即座に動かす魔法のテンプレート

fastapi/full-stack-fastapi-template

先輩
おい、新人！新しいプロジェクト、明日から始めろってさ。

新人
え、明日からですか！？

先輩
そう。フロントエンドはReact、バックエンドはFastAPI、データベースはPostgreSQLだって。Dockerコンテナで動かして、GitHub Actionsで自動デプロイも組んどけ。しかも本番環境はSSL証明書がいるからLet's Encryptで自動化しろってさ。

新人
えーっ！そんなにたくさん！？環境構築だけで何日かかりますか…。設定ファイル書いたり、繋ぎ込みしたり、もう頭がパンクしそうです…。

先輩
…おい、落ち着け。全部一からやる必要はないんだ。いいか、これを使えばいい。fastapi/full-stack-fastapi-template っていうのがあってな。

新人
テンプレート？

先輩
そうだ。お前が今言ったことを全部、あらかじめ設定しておいてくれる、完璧なプロジェクトのひな形だ。これを使えば、環境構築の苦労がほぼゼロになる。

新人
え、うそでしょ！？だって、ReactとFastAPIを連携させるだけでも結構大変なのに…。

先輩
それを全部やってくれてるんだ。ReactのフロントエンドとFastAPIのバックエンドがすでに繋がっていて、すぐに開発を始められる状態になってる。データベースもPostgreSQLがDockerで動くようになってるし、SSL証明書も自動で取ってきてくれる設定も入ってる。

新人
なんだってー！じゃあ、僕がやるのは、このテンプレートをベースに、自分の作りたい機能だけを書いていけばいいってことですか？

先輩そういうことだ！つまり、環境構築という「面倒な下準備」をスキップして、「楽しい開発」からいきなり始められるんだ。

新人
な、なんだー！そうだったのかー！すごい！

このテンプレートは、特にモダンなウェブアプリケーション開発において、以下のような点で絶大な威力を発揮します。

新しいプロジェクトを始める際、各技術スタック（React、FastAPI、PostgreSQLなど）の連携や、開発・本番環境のDocker設定、CI/CDパイプライン（GitHub Actions）の構築は、非常に時間と労力がかかります。

しかし、このテンプレートを使えば、これらのインフラ部分が最初から完璧に整っているため、すぐにアプリケーションのビジネスロジック開発に集中できます。まさに「車輪の再発明」を避けることができるんです。

このテンプレートは、FastAPIやReactを使った開発における業界のベストプラクティスが詰まっています。例えば、以下のようなものが含まれています。

FastAPI
認証、SQLModelを使ったORM（データベース操作）、依存性の注入など

React
コンポーネントの構造化、API通信、状態管理など

DevOps
Dockerによるコンテナ化、GitHub Actionsによる自動テスト・デプロイ

これらを自分で一から学ぶのは大変ですが、このテンプレートのコードを読むことで、自然とモダンな開発手法を身につけることができます。

DockerとGitHub Actionsが組み込まれているため、開発からテスト、本番環境へのデプロイまでを一貫したプロセスで進められます。これにより、チーム開発での環境差異によるトラブルを防ぎ、アプリケーションを安定して運用できる基盤が手に入ります。

では、実際にどうやって始めるのか見てみましょう。とてもシンプルですよ！

Gitを使ってテンプレートをクローンします。

git clone https://github.com/fastapi/full-stack-fastapi-template.git my-new-app

my-new-app の部分は、好きなプロジェクト名に変えてください。

プロジェクトディレクトリに移動して、.env ファイルを設定します。

cd my-new-app
cp .env.example .env

.env ファイルには、データベースの接続情報やシークレットキーなどを設定します。

Dockerコンテナを起動します。

docker-compose up -d

これで、フロントエンド、バックエンド、データベースがすべて起動します。

ブラウザでアクセスしてみましょう。

http://localhost にアクセスすると、Reactのフロントエンド画面が表示されます。これで準備完了です！

このテンプレートには、すでにユーザー認証やアイテム作成・取得の機能が実装されています。

バックエンド（FastAPI）の例

app/app/api/endpoints/items.py にあるAPIエンドポイントの例です。

from typing import List
from fastapi import APIRouter, Depends, HTTPException
from sqlmodel import Session, select
from app.db import get_session
from app.models import Item, ItemCreate, ItemPublic

router = APIRouter()

@router.post("/", response_model=ItemPublic)
def create_item(*, session: Session = Depends(get_session), item_in: ItemCreate):
    """
    アイテムを作成します。
    """
    db_item = Item.model_validate(item_in)
    session.add(db_item)
    session.commit()
    session.refresh(db_item)
    return db_item

@router.get("/", response_model=List[ItemPublic])
def read_items(session: Session = Depends(get_session)):
    """
    全てのアイテムを取得します。
    """
    items = session.exec(select(Item)).all()
    return items

フロントエンド（React）の例

このテンプレートでは、バックエンドのAPIを呼び出すためのフック（Hooks）が用意されています。

// src/services/api/items.ts (API通信を行う部分)
import { api } from "./api";
import { Item, ItemCreate } from "../schemas";

export const createItem = async (item: ItemCreate): Promise<Item> => {
  const response = await api.post<Item>("/api/v1/items/", item);
  return response.data;
};

// src/components/Items.tsx (コンポーネントでAPIを呼び出す部分)
import React, { useState, useEffect } from "react";
import { createItem, getItems } from "../services/api/items";

const Items = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const fetchItems = async () => {
      const allItems = await getItems();
      setItems(allItems);
    };
    fetchItems();
  }, []);

  const handleCreateItem = async () => {
    const newItem = await createItem({ title: "New Item", description: "A test item" });
    setItems((prevItems) => [...prevItems, newItem]);
  };

  return (
    <div>
      <button onClick={handleCreateItem}>新しいアイテムを作成</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
};

このように、APIの定義からデータベースの操作、そしてそれを呼び出すフロントエンドのコードまで、一連の流れがすでに完成しています。あとは、このコードを参考にしながら、自分の作りたい機能を追加していくだけでいいんです。

このテンプレートを使えば、まるで魔法のように開発がスムーズに進みますよ！