API通信とデータベース操作の概要

はじめに

これまでReactの核心概念を学び、フロントエンド開発の基礎を習得されてきたことと思います。コンポーネント設計、State管理、イベント処理など、クライアントサイドの重要な概念を理解した今、次のステップとして「バックエンド連携」の学習に進みましょう。

現代のWebアプリケーションは、フロントエンドだけでは完結しません。データの永続化や複雑な処理を行うために、バックエンドとの連携が不可欠です。この記事では、ReactアプリケーションからAPIを介してバックエンドと通信し、データベースを操作する方法の概要を解説します。

バックエンド連携の基本概念

これまで学んだReactの知識は、バックエンド連携においても重要な基盤となります。

• コンポーネントとState: APIから取得したデータを表示・管理するために使用
• useEffect: コンポーネントのマウント時にAPIリクエストを実行するために使用
• イベント処理: ユーザー操作に応じてAPIにデータを送信するために使用
• フォーム処理: ユーザー入力データをバックエンドに送信するために使用

これらの概念を応用しながら、フルスタック開発の世界に足を踏み入れましょう。

クライアント・サーバー・モデル

ブラウザ（クライアント）がサーバーにリクエストを送信し、サーバーが処理結果をレスポンスとして返すというモデルです。Reactアプリケーションはクライアント側で実行され、バックエンドAPIと通信します。

[図解: クライアント・サーバー・モデル] Reactアプリケーション（クライアント） → HTTPリクエスト → バックエンドサーバー（API） Reactアプリケーション（クライアント） ← HTTPレスポンス ← バックエンドサーバー（API）

API（Application Programming Interface）

APIは、ソフトウェアコンポーネント同士が相互に通信するためのインターフェースです。Web開発では特に、Web API（HTTPを介してデータ交換を行うAPI）が重要です。

REST API

RESTはWeb APIの設計原則の一つで、以下の特徴があります。

• 統一インターフェース
• ステートレス性
• キャッシュ可能性
• 階層化システム

RESTful APIでは、HTTPメソッド（GET, POST, PUT, DELETE）を使用してリソース操作を行います。以下では、それぞれの技術要素について、初学者でもイメージしやすいように具体的に補足しながら解説します。

バックエンド連携の技術スタック

1. バックエンドフレームワーク（Express.js）

Express.jsは、JavaScriptでサーバー側の処理を書くためのシンプルなフレームワークです。通常、ブラウザでページを表示するだけではなく、「ログイン」「データ保存」「API提供」などの処理はサーバーで行いますが、その仕組みを簡単に作れるのがExpressです。

たとえば「/users にアクセスされたらユーザー一覧を返す」といったルール（ルーティング）を簡単に定義できます。また、リクエストの前後に処理を挟む「ミドルウェア」という仕組みにより、ログ出力や認証チェックなども共通化できます。Node.js上で動くため、フロントエンドと同じJavaScriptで開発できる点も大きなメリットです。小規模から中規模のAPI開発に広く使われています。

2. データベース（MySQL）

MySQLは、データを表（テーブル）形式で管理するリレーショナルデータベースです。ユーザー情報や商品情報など、構造化されたデータを安全に保存できます。

例えば「usersテーブル」に「id・name・email」といった列を定義し、1行ごとにユーザー情報を保存します。SQLという専用の言語を使って「データを取得する」「追加する」「更新する」などの操作を行います。

特徴として、データの整合性（矛盾がない状態）を保つ仕組みが強く、業務システムなどでも多く採用されています。また、複数のテーブルを関連付けて扱えるため、「ユーザーと注文情報を紐づける」といった複雑なデータ管理にも対応できます。

3. ORM（Prisma）

Prismaは、データベース操作をJavaScriptのコードで直感的に書けるようにするツール（ORM）です。本来、MySQLなどのデータベースを操作するにはSQLを書く必要がありますが、Prismaを使うと「オブジェクト操作」の感覚でデータを扱えます。

例えば、SQLでは複雑なSELECT文を書く必要がある処理も、Prismaでは user.findMany() のようにシンプルに書けます。また、スキーマ（データ構造）を定義すると、自動で型安全なコードが生成されるため、ミスを減らすことができます。

さらに、データベースの変更（マイグレーション）も管理できるため、開発チームでの作業効率が大きく向上します。初心者にとっても「SQLを覚えながら安全に使える」橋渡し的な存在です。

4. データ取得ライブラリ（Fetch API / Axios）

フロントエンドからバックエンドにデータを取りに行くときに使うのが、Fetch APIやAxiosです。これらはHTTPリクエストを送信するための仕組みです。

例えば「ユーザー一覧を取得する」場合、ブラウザから /api/users にリクエストを送り、そのレスポンスを受け取って画面に表示します。この通信処理を簡単に書けるのがこれらのツールです。

Fetch APIはブラウザ標準で使えるのに対し、AxiosはエラーハンドリングやJSON変換が簡単に書けるという特徴があります。実務ではAxiosが好まれることも多いです。ReactなどのフロントエンドとAPIサーバーをつなぐ「橋」の役割を担う重要な技術です。

5. 認証機構（JSON Web Token）

JWT（JSON Web Token）は、ユーザーがログインしている状態を安全に管理するための仕組みです。ログイン成功時にサーバーがトークン（文字列）を発行し、それをクライアント側が保持します。

その後のリクエストでは、このトークンを送ることで「このユーザーは認証済みである」とサーバーが判断できます。サーバー側でセッションを持たないため、スケーラブル（拡張しやすい）な設計が可能です。

例えば「マイページの表示」など、ログインしているユーザーだけに許可したい処理で使われます。ただし、トークンの管理（保存場所や有効期限）を適切に行わないとセキュリティリスクがあるため、設計には注意が必要です。

6. 接続設定（CORS）

CORSは、異なるドメイン間での通信を制御する仕組みです。通常、ブラウザはセキュリティのため、異なるオリジン（ドメイン・ポート・プロトコルの組み合わせ）へのリクエストを制限します。

例えば、フロントエンドが localhost:3000、バックエンドが localhost:5000 の場合、そのままでは通信できません。この制限を適切に緩和するのがCORS設定です。

サーバー側で「どのオリジンからのアクセスを許可するか」を明示的に指定することで、安全に通信を可能にします。ただし、全てのアクセスを許可する設定にするとセキュリティリスクが高まるため、必要な範囲に限定することが重要です。バックエンド連携では必ず理解しておくべき基礎概念の一つです。

なぜバックエンド連携が必要か？

Reactのみで構築したアプリケーションは、ページをリロードすると状態が失われます。データを永続化し、複数ユーザーで共有するためには、バックエンドサーバーとデータベースが必要です。

例えば、これまで作成したToDoアプリを回想してみてください。

• タスクデータをローカルではなくデータベースに保存
• ユーザーごとに異なるタスクリストを表示
• 複数デバイス間でタスクを同期

これらの機能を実現するには、バックエンド連携が不可欠です。
６つの技術を利用すると以下のような使用例を考えることができます。

1. バックエンド（Express.js）

Express.jsは「ToDoを操作するためのAPI」を作る役割です。
例えば以下のようなエンドポイントを用意します。

• /todos（GET）→ 一覧取得
• /todos（POST）→ 新規作成
• /todos/:id（DELETE）→ 削除

ユーザーがフロントから操作すると、そのリクエストを受け取り、データベースとやり取りして結果を返します。つまり「処理の中心（司令塔）」です。

2. データベース（MySQL）

MySQLは「ToDoデータの保存場所」です。

例えば以下のようなテーブルを作ります：

• id
• title（タスク内容）
• completed（完了フラグ）

ユーザーがタスクを追加するとデータが保存され、一覧取得時にはここからデータが読み込まれます。アプリの「記憶装置」の役割です。

3. ORM（Prisma）

Prismaは「データベース操作を簡単にするための仲介役」です。

本来SQLを書く必要がありますが、Prismaを使うと例えば：

• タスク取得 → findMany()
• タスク追加 → create()

のように書けます。Express.jsの中でPrismaを使って、MySQLとやり取りします。開発者にとって「扱いやすいインターフェース」を提供する存在です。

4. データ取得（Fetch / Axios）

フロントエンド（Reactなど）からバックエンドAPIを呼び出すときに使います。

例えば：

• 画面表示時 → ToDo一覧を取得
• 追加ボタン → 新しいToDoをPOST送信
• 削除ボタン → DELETEリクエスト

ユーザーの操作を「HTTPリクエスト」に変換してサーバーに送る役割です。UIとバックエンドをつなぐ橋です。

5. 認証（JSON Web Token）

JWTは「ユーザーごとのToDo管理」に使います。

例えば：

• ログインするとトークン発行
• ToDo取得時にトークンを送信
• サーバー側でユーザーを特定

これにより「自分のToDoだけ表示する」ことができます。ログイン機能があるToDoアプリでは必須の仕組みです。

6. 接続設定（CORS）

CORSは「フロントとバックエンドをつなぐための許可設定」です。

例えば：

• フロント → localhost:3000
• バックエンド → localhost:5000

このままだと通信がブロックされるため、Express.js側で「このフロントからのアクセスは許可する」と設定します。

まとめ

バックエンド連携は、Reactアプリケーションを「本物の」アプリケーションに変える重要なステップです。これまで学んだReactの知識を土台に、サーバーサイドの技術を習得することで、フルスタック開発者を実践していきます。