フロントエンドからバックエンドへの通信は、ユーザーの操作に応じてデータを送受信し、アプリケーションの状態を更新するための重要な仕組みで、ユーザー体験を支える重要な要素です。
VueやReactでは、axios や fetch を使って通信し、状態管理ライブラリ（Pinia, Reduxなど）と組み合わせてアプリ全体の状態を制御します。
フロントエンドからバックエンドまでの通信フロー
どのタイミングで、どういうフローでバックエンドにデータを送るのかの設計で、責務分離と再利用性を意識した以下の様なパターンが一般的かと思います。
コンポーネント※ → Store → カスタムフック → APIクライアント → API
※ APIを呼べるコンポーネントはPageなどの高階層のコンポーネントに限定する事が多い
主な通信手段
-
HTTP通信（REST API）
一般的な通信方式。GET, POST, PUT, DELETE などのメソッドを使う。
Axiosを使うのがほぼ標準。 - GraphQL
クライアントが必要なデータだけを取得できる柔軟なAPI設計。 - WebSocket
双方向通信が可能。チャットやリアルタイム通知に使われる。
通信パターン
通信も下記のように様々なパターンがあります。
| パターン | 例 |
|---|---|
| リクエスト投げて、終わり | ログ送信、通知既読処理など。レスポンスを使わない。 |
| リクエスト後に再フェッチ | データ更新後に一覧を再取得して最新状態に反映。 |
| レスポンスを描画に使う | 詳細画面の表示、検索結果の表示など。 |
| レスポンスを次のリクエストに使う | 注文作成 → 決済処理 |
| 並列リクエスト | 複数のAPIを同時に呼び出し、すべての結果を待って処理。Promise.all([fetchA(), fetchB()]) |
| 連続リクエスト（チェーン） | 1つのリクエストが成功したら次のリクエストを実行。例：ユーザー作成 → プロフィール作成 |
| ポーリング | 一定間隔で同じAPIを呼び出して最新状態を取得。例：チャット、通知、進捗バーなど |
通信の設計ポイント
-
API設計の整合性
・REST or GraphQL の選定
・エンドポイントの命名規則（例：/api/users/:id） -
エラーハンドリング
・通信失敗時のUI表示（例：トースト通知）
・ステータスコードに応じた処理分岐（401, 403, 500など）
・リトライ戦略（自動再試行、ユーザー操作による再送） -
ローディング状態の管理
・通信中のスピナー表示
・状態管理ライブラリ（Pinia, Reduxなど）で一元管理 -
キャッシュ戦略
・SWR / React Query / Vue Query の導入
・キャッシュの有効期限、再フェッチ条件の設計
・ローカルストレージやIndexedDBとの連携 -
認証・認可
・トークン（JWTなど）の管理と更新
・認証ヘッダーの自動付与（axios interceptorなど） -
型安全とデータ構造
・TypeScriptによるリクエスト・レスポンスの型定義
・バリデーション（Zod, Yupなど） -
通信の抽象化
・APIクライアントの共通化（apiClient.tsなど）
・エンドポイントごとのサービス層（UserService, CommentService）
・リクエストとレスポンスの整形処理の分離 -
セキュリティ
・HTTPS通信の強制
・CORS設定の適切な管理
・CSRF対策（トークン、SameSite属性） -
テストとモック
・通信部分のユニットテスト（axios-mock-adapterなど）
・E2Eテストで通信の動作確認（Playwright, Cypress）
・モックサーバー（MSWなど）による開発効率向上
リクエストの分割
POSTリクエストなどで、バックエンド側が1回のリクエストで処理できるデータ量に制限がある場合、フロントエンド側でリクエストを分割する必要がある。
データ量が少ないなら全件取得して、フロントで検索とかしたほうが早いケースもある。
通信の監視
通信監視は、開発・運用・UXのすべてに関わる重要な設計要素です。
フロントエンドとバックエンド間のリクエスト・レスポンスの状況をリアルタイムで把握し、問題の早期発見やパフォーマンス改善につなげるために重要です。
手段：
- フロントエンド側の監視
- axios interceptor でリクエスト・レスポンスをフック
- 通信ログを console.log や Logger に記録
- 通信失敗時にトースト通知やエラーダイアログ表示
- 外部サービスによる監視
- Sentryなどの外部ツールを導入し、Slackなどに通知が飛ぶ様にする
まとめ
以下、ChatGPTがとてもわかりやすい例をくれました。
「通信」は水道管のようなものです。水（データ）を送るだけですが、以下のような設計が必要です。
- 水の量（データサイズ）
- 水の質（データ構造・型）
- 水漏れ防止（セキュリティ）
- 水の流れ方（同期・非同期・リアルタイム）
- 水道管の設計（APIクライアント、エラーハンドリング）