はじめに
以前、記載したこちらの記事が結構評判良かったので
バックエンドとフロントエンドがつながっている箇所
今回はその続編となります。
具体的に言うと
「取得したデータが、なぜ {employee.カラム名} のように画面に表示されるのか？」
をより実践的に分解して解説します。
対象者
上記の記事を見て
「参考になった方」または「より実践的なことを学びたい方」
前提
今回は以下の構成をもとに説明したいと思います。
DB構成(例)
employeesテーブル
| カラム名 | 型 | 説明 |
|---|---|---|
| id | bigint | 主キー |
| name | varchar | 氏名 |
| department | varchar | 部署 |
| position | varchar | 役職 |
| hire_date | date | 入社日 |
| created_at | timestamp | 作成日時 |
| updated_at | timestamp | 更新日時 |
モデル
use Illuminate\Database\Eloquent\Model;
class Employee extends Model
{
// 一括代入を許可するカラム
protected $fillable = [
'name',
'department',
'position',
'hire_date',
];
}
Seeder
use App\Models\Employee;
public function run(): void
{
// テスト用データを1件作成
$employee = Employee::create([
'name' => '山田 太郎',
'department' => '開発部',
'position' => 'エンジニア',
'hire_date' => '2022-04-01',
]);
}
1. データの流れを整理する
全体の処理フローとしては以下のようになります。
URL (/employees/1)
↓
Next.js page.tsx
↓
fetchでLaravel APIを呼び出す
↓
JSONレスポンスを受け取る
↓
employeeオブジェクトに格納
↓
JSX内で {employee.カラム名} を表示
2. URLパラメータからデータ取得まで
① URLからIDを取得
export default async function EmployeeDetail({
params,
}: {
// URLパラメータの型定義
params: { id: string };
}) {
// /employees/1 にアクセスすると id = "1" が入る
const { id } = params;
/employees/1 にアクセスすると、id = "1" が取得されます。
② Laravel APIを呼び出す
// 社員データを取得する関数
async function getEmployee(id: string): Promise<Employee> {
const res = await fetch(
// Laravel APIへHTTPリクエストを送信
`${process.env.NEXT_PUBLIC_API_BASE_URL}/employees/${id}`,
{
// 常に最新データを取得（キャッシュを無効化）
cache: "no-store"
}
);
// ステータスコードが200番台でない場合はエラー
if (!res.ok) {
throw new Error("Failed to fetch employee");
}
// JSONレスポンスをJavaScriptオブジェクトに変換
return res.json();
}
ここで実際にバックエンドと通信しています。
③ Laravel側（Controller）
public function show(string $id)
{
// idを元にemployeesテーブルから1件取得
$employee = Employee::findOrFail($id);
// 取得したデータをJSON形式で返す
return response()->json($employee);
}
ここがフロントとバックエンドの接続ポイントです。
3. なぜ {employee.カラム名} で値が表示されるのか？
// employeesテーブルのnameカラムを表示
<span>{employee.name}</span>
これは単純に
{
"id": 1,
"name": "山田 太郎",
"department": "開発部",
"position": "エンジニア",
"hire_date": "2022-04-01"
}
という JavaScriptオブジェクトのプロパティを参照しているだけです。
※ fetchで取得したJSONは、res.json()によってJavaScriptオブジェクトに変換されます。
⚠️ 重要
ReactはDBを直接参照しているわけではありません。
Laravelが返したJSONがJavaScriptオブジェクトになっているだけです。
4. つながりの正体
処理フローをより正確に書くと、実際の流れはこうなります。
URL (/employees/1)
↓
Next.jsルーティング
↓
page.tsx実行
↓
fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/employees/1`)
↓
Laravel Route
↓
EmployeeController@show
↓
EmployeeモデルでDB取得
↓
JSONレスポンス
↓
JavaScriptオブジェクト化
↓
JSXで描画
フロントエンドとバックエンドがつながっているのは、
👉 API（HTTP通信）
です。
5.TypeScriptの型の役割について
export type Employee = {
id: number;
name: string;
department: string;
position: string;
hire_date: string;
};
これにより：
- どんなデータが返ってくるのか明確になる
- 存在しないプロパティを参照するとエラーになる
- 保守性が向上する
というメリットがあります。
6. 今回学んだこと
- URLパラメータの取得
- fetchによるAPI通信
- LaravelのJSONレスポンス
- JSON → JavaScriptオブジェクト変換
- JSXでのプロパティ参照
- TypeScriptによる型安全
まとめ
前回の記事で 「どこでつながっているのか」 を理解しました。
今回はさらに一歩進み
「つながったデータがなぜ {employee.カラム名} として表示されるのか」
まで理解しました。
フロントエンドとバックエンドのつながりは、
- API通信
- JSON変換
- オブジェクト参照
- JSX描画
という一連の流れで成り立っています。
💡 ポイント
「ただ動いているコード」から「構造を理解したコード」へと変わります。
つまり {employee.カラム名} は「特別な構文」ではなく、
APIから取得したオブジェクトのプロパティを参照しているだけです。
この記事を見て少しでも参考になった方がいらっしゃれば幸いです。