FastAPI

ファースト・エー・ピー・アイ

ファースト・エー・ピー・アイを分かりやすく

FastAPI（ファースト・エー・ピー・アイ）は、Python で高速で使いやすい API を構築するためのモダンなフレームワークです。データバリデーション、シリアライゼーション、ドキュメント生成などの機能が含まれており、開発者の効率を高めます。

Next.js と TypeScript を使った FastAPI プロジェクトのセットアップ

FastAPI プロジェクトの作成

まず、FastAPI のプロジェクトを作成しましょう。

pip install fastapi
pip install uvicorn

プロジェクトルートに main.py ファイルを作成し、以下のコードを追加します。

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"Hello": "World"}

@app.get("/items/{item_id}")
def read_item(item_id: int, q: str = None):
    return {"item_id": item_id, "q": q}

Next.js と TypeScript のプロジェクト作成

次に、Next.js と TypeScript のプロジェクトを作成します。

npx create-next-app my-next-app --typescript
cd my-next-app

FastAPI と Next.js の連携

FastAPI サーバーの起動

FastAPI サーバーを起動し、Next.js アプリケーションから API にアクセスできるようにしましょう。

uvicorn main:app --host 0.0.0.0 --port 8000

API クライアントの作成

my-next-app ディレクトリに apiClient.ts ファイルを作成し、以下のコードを追加します。

import axios from 'axios'

const apiClient = axios.create({
  baseURL: 'http://localhost:8000',
})

export default apiClient

FastAPI と TypeScript を使った Next.js アプリケーションの開発

データの型定義

types ディレクトリに fastapi.ts ファイルを作成し、以下のコードを追加します。

export interface Item {
  item_id: number
  q: string | null
}

API からデータを取得するコンポーネントの作成

components ディレクトリに FetchItem.tsx ファイルを作成し、以下のコードを追加します。

import React, { useState, useEffect } from 'react'
import apiClient from '../apiClient'
import { Item } from '../types/fastapi'

interface Props {
  itemId: number
}

const FetchItem = ({ itemId }: Props) => {
  const [item, setItem] = useState<Item | null>(null)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await apiClient.get<Item>(`/items/${itemId}`)
        setItem(response.data)
      } catch (err) {
        setError('データの取得に失敗しました。')
      }
    }

    fetchData()
  }, [itemId])

  if (error) {
    return <p>{error}</p>
  }

  if (!item) {
    return <p>Loading...</p>
  }

  return (
    <div>
      <h2>アイテムID: {item.item_id}</h2>
      <p>クエリ: {item.q || 'なし'}</p>
    </div>
  )
}

export default FetchItem

インデックスページの編集

pages ディレクトリにある index.tsx ファイルを開き、FetchItem コンポーネントをインポートして使用します。

import type { NextPage } from 'next'
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import FetchItem from 'components/FetchItem'

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>FastAPI + Next.js + TypeScript</title>
        <meta name="description" content="FastAPI + Next.js + TypeScript のデモアプリケーション" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>FastAPI + Next.js + TypeScript</h1>

        <FetchItem itemId={1} />
      </main>

      <footer className={styles.footer}>
        <span>Powered by FastAPI, Next.js, and TypeScript</span>
      </footer>
    </div>
  )
}

export default Home

アプリケーションの実行

開発環境でアプリケーションを実行するには、以下のコマンドを実行します。

npm run dev

これで、Next.js と TypeScript を使用したウェブアプリケーションが表示されます。FastAPI の API エンドポイントから取得したデータが表示されることが確認できます。

Next.js を学ぶ一覧へ