今回はフロントエンドとバックエンドを結合する方法について記事にしたいと思います。
API（RESTまたはGraphQL）の使用
フロントエンドとバックエンドを結合する最も一般的な方法は、バックエンドでAPI（通常はRESTまたはGraphQL）を提供し、フロントエンドがそれを呼び出してデータをやり取りするという方法です。
HTTPリクエスト（Ajax、fetch、axios）
フロントエンドは、HTTPリクエスト（GET、POST、PUT、DELETEなど）を使用して、バックエンドAPIに対してデータを取得したり送信したりします。これにはfetch APIやaxiosライブラリを使用することが一般的です。
基本的なステップ：フロントエンドとバックエンドの結合
- バックエンドAPIの構築
まず、バックエンドでAPIを構築します。ここでは、Node.js と Express を使用した簡単な例を紹介しますが、他の言語やフレームワークでも同様です。
// server.js (Node.js with Express)
const express = require('express');
const app = express();
const PORT = 3000;
app.use(express.json());
// サンプルAPIエンドポイント
app.get('/api/users', (req, res) => {
res.json([
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' }
]);
});
app.listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);
});
ここでは、/api/users エンドポイントを提供し、ユーザー情報のリストをJSON形式で返しています。
- フロントエンドからバックエンドAPIを呼び出す
次に、フロントエンド（例えばReactを使用）でバックエンドAPIを呼び出します。
// App.js (React example)
import React, { useState, useEffect } from 'react';
function App() {
const [users, setUsers] = useState([]);
// コンポーネントの初回レンダリング時にAPIを呼び出す
useEffect(() => {
fetch('http://localhost:3000/api/users') // バックエンドAPIのURLを指定
.then(response => response.json())
.then(data => setUsers(data));
}, []);
return (
<div>
<h1>User List</h1>
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
}
export default App;
fetch() メソッドを使用して、バックエンドのAPIからデータを取得しています。
データは useState で管理され、useEffect を使ってコンポーネントが最初にレンダリングされたときにAPI呼び出しが行われます。
- CORSの設定
デフォルトでは、フロントエンドとバックエンドが異なるドメインやポートで動作していると、CORS（Cross-Origin Resource Sharing） の問題が発生します。これを解決するためには、バックエンド側でCORSを許可する設定を行います。
Node.jsのExpressを使った場合のCORS設定例:
const cors = require('cors');
app.use(cors()); // CORSを許可する
これにより、異なるドメインからのリクエストを許可することができます。
- データの送信（POSTリクエスト）
次に、フロントエンドからデータをバックエンドに送信する例を見てみましょう。fetch APIを使って、ユーザー情報をサーバーにPOSTリクエストで送信します。
// データの送信 (POSTリクエスト)
function handleSubmit() {
const newUser = { name: 'Charlie' };
fetch('http://localhost:3000/api/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(newUser)
})
.then(response => response.json())
.then(data => {
console.log('User added:', data);
});
}
バックエンド側ではPOSTリクエストを受け取るために、次のように処理します。
// POSTリクエストの処理
app.post('/api/users', (req, res) => {
const newUser = req.body;
// データベースに保存するロジック（今回は簡略化）
console.log('New user:', newUser);
res.status(201).json(newUser);
});
まとめ
フロントエンドとバックエンドを結合するプロセスは、以下のステップで行います：
バックエンドでAPIを構築: データを取得したり送信したりするエンドポイントを提供します。
フロントエンドからAPIを呼び出す: fetch や axios を使って、バックエンドと通信します。
CORSの問題に対処: 異なるドメイン間で通信を許可するため、CORS設定を行います。
POSTリクエストでデータを送信: フォームデータなどをバックエンドに送信し、データベースに保存したり、処理したりします。
今回はフロントエンドとバックエンドを結合する方法について記事にしました。
初心者のころどのようになっているのかよくわからなく、同じような気持ちの人や復習したい方たちに読んでいただけたら嬉しいです。