サイトアイコン IT & ライフハックブログ|学びと実践のためのアイデア集

FastAPIとフロントエンドを連携する方法:Djangoとの違いと設計手順

green snake

Photo by Pixabay on Pexels.com

FastAPIでフロントエンドとバックエンドを分けると、画面とデータ処理を独立して開発しやすくなります。
その接点になるのが、リクエストとレスポンスの形式を定めるAPIです。

FastAPIは、Pythonの型定義からデータ検証とOpenAPI形式の仕様を組み立てられるため、APIを中心にした構成と相性のよいフレームワークです。
ただし、FastAPIを導入するだけで両者の認識がそろうわけではありません。
入力項目、返却項目、エラー形式、変更手順まで合意して初めて、仕様の食い違いを減らせます。

FastAPIとフロントエンドをつなぐ三つの仕組み

Pydanticによる入出力の検証

Pydanticは、型と制約を記述したモデルを使い、受け取ったデータを検証する仕組みです。
FastAPIでは、リクエスト本文やレスポンスの構造をPydanticモデルで表せます。

たとえば、商品データに整数のIDと文字列の名前が必要だと定義すれば、形式に合わない入力を処理の入口で見つけやすくなります。
一方、型が正しくても、名前の内容や業務上の条件まで自動で正しいとは限りません。
リクエストとレスポンスの定義方法を決める際は、型と業務ルールを分けて整理すると設計しやすくなります。

OpenAPIによる仕様の共有

OpenAPIは、APIのパス、操作、入出力などを機械が読める形で表す仕様です。
FastAPIは、ルートとデータモデルからOpenAPI文書を生成し、その内容をSwagger UIやReDocで確認できるようにします。

フロントエンド開発者は、実装コードを読み解かなくても、利用できるエンドポイントとデータ形式を確認できます。
ただし、生成されるのは定義した内容です。
項目の説明、エラー例、認証条件などが不足していれば、画面上のドキュメントも十分な仕様書にはなりません。

TypeScriptの型とクライアント生成

OpenAPI文書からTypeScriptの型やAPIクライアントを生成すると、バックエンドの定義をフロントエンドで再利用できます。
手作業で同じ型を二重管理する範囲を減らせる点が利点です。

ただし、生成物を更新しなければ古い型が残ります。
APIを変更したらOpenAPI文書を更新し、型を再生成して、フロントエンドのビルドと連携テストで差異を確認する流れまで決めます。
具体的な運用は、OpenAPIからのクライアント生成と契約テストも参考になります。

非同期処理を正しく使う

待ち時間のある処理に向く仕組み

非同期処理とは、外部APIやデータベースなどの応答を待つ間に、別の処理を進められるようにする実行方法です。
FastAPIでは、処理内容に応じて通常のdefとasync defを使い分けられます。

非同期に対応したライブラリを正しく使えば、待ち時間の多い処理で同時接続を扱いやすくなります。
しかし、asyncと書くだけで計算量の多い処理が速くなるわけではありません。
実際の応答性能は、データベース、外部サービス、実装、サーバー構成にも左右されるため、負荷試験と計測で確認します。

WebSocketが必要な場面

WebSocketは、ブラウザーとサーバーが接続を保ち、双方向にデータを送受信する仕組みです。
チャットや更新頻度の高いダッシュボードなど、サーバーから継続的に情報を届けたい場面で候補になります。

一度の要求に一度の応答を返せば足りる機能では、通常のHTTP APIのほうが構成を理解しやすい場合があります。
リアルタイム性が必要かを先に判断し、必要な箇所だけに採用します。
実装上の論点は、FastAPIとWebSocketの入門ガイドで確認できます。

DjangoとFastAPIの違い

DjangoとFastAPIの違いは、単純な速度や学習難度だけでは判断できません。
Pythonフレームワークの比較でも確認できるように、両者は最初から用意する機能の範囲が異なります。

FastAPIとDjangoを選ぶ際の比較
比較項目 Django FastAPI
中心となる用途 Webアプリケーション全体の構築 APIの設計と実装
標準で扱える範囲 認証、管理画面など、一般的なWeb開発機能を広く備える ルーティング、データ検証、依存関係、API文書などを中心に備える
フロントエンド構成 テンプレートによる画面生成とAPI分離のどちらも選べる 独立したフロントエンドとAPIで連携する構成を採りやすい
非同期処理 ASGI環境で非同期ビューなどを利用できるが、同期処理との境界に注意が要る defとasync defを処理内容に応じて組み合わせる
API文書 採用するAPI向けツールに応じて設定する OpenAPI文書と確認用UIを生成する
選びやすい状況 管理画面や認証を含む一体的な構成を早く整えたい APIを中心に必要な構成要素を選びたい

Djangoでもフロントエンドとバックエンドを分離でき、FastAPIでもテンプレートを扱えます。
したがって、「一体型か分離型か」だけで決めるのではなく、既存資産、必要な標準機能、運用体制を比べます。

フロントエンド連携の設計手順

  1. API契約を決める:画面実装より先に、パス、操作、入出力、エラー形式を合意します。
  2. モデルと処理を実装する:Pydanticモデルとルートを対応させ、成功時と失敗時の応答を定義します。
  3. OpenAPI文書を共有する:Swagger UIやReDocで確認し、必要ならTypeScriptの型やクライアントを生成します。
  4. 連携テストを行う:通常の入力だけでなく、項目不足や不正な型を送った場合の画面表示も確かめます。

最初に合意したいAPI契約

フロントエンドとバックエンドで共有する項目
項目 確認内容
パスと操作 どのURLへ、どの操作を送るか
リクエスト 必須項目、任意項目、型、制約は何か
レスポンス 成功時に返る項目と型は何か
エラー 状態ごとの応答と、画面に表示する情報は何か
変更手順 仕様変更を誰が伝え、型とテストをいつ更新するか

たとえば、バックエンドが項目名を変更しても、フロントエンドの型を更新しなければ連携は崩れます。
API契約、生成物、テストを一つの変更作業として扱うと、差異を公開前に見つけやすくなります。

プロジェクトに合う選び方

FastAPIが向くのは、独立したフロントエンドへAPIを提供したい場合や、入出力の型とOpenAPI文書を開発の中心に置きたい場合です。
非同期I/OやWebSocketを使う要件が明確なら、その実装方法も検討材料になります。

Djangoが向くのは、管理画面や認証を含むWebアプリケーション全体を、まとまりのある仕組みで構築したい場合です。
すでにDjangoのモデルや運用基盤があるなら、APIのためだけに別のフレームワークを増やす費用も比較する必要があります。

選定前には、次の問いをチームで確認します。

FastAPI連携で保守性を高める条件

FastAPIの利点は、型、データ検証、OpenAPI文書を同じ定義から扱えることです。
その利点を保守性につなげるには、API契約を先に決め、変更時の型生成と連携テストまで継続する必要があります。

Djangoとの選択では、片方を一律に優れているとみなさず、必要な標準機能とチームの運用方法を基準にします。
API中心の構成が目的に合うならFastAPIを、Webアプリケーション全体の機能を一体的にそろえたいならDjangoを軸に検討すると、選定理由を説明しやすくなります。

この記事に関連する株式会社greedenの取り組み

APIとフロントエンドを分ける設計では、仕様の共有と運用まで見通した技術選定が欠かせません。株式会社greedenは、要件整理からAPI設計、実装、テスト、保守まで一貫したWebシステム開発を支援しています。

モバイルバージョンを終了