LaravelのAPI開発（JSONレスポンスとフロントエンド連携の基本） – 10/12

前回は FormとValidation を解説しました。

これで

フォーム入力
バリデーション
データ保存

ができるようになりました。

今回は

フロントエンドと連携するAPI

を作る方法を解説します。

現在のWeb開発では

Laravel（バックエンド）
React / Vue（フロントエンド）

という構成が主流です。

この記事では次の内容を解説します。

APIとは
LaravelでAPIを作る方法
JSONレスポンス
api.phpの使い方
フロントエンドとの連携

APIとは

データをやり取りするための仕組み

です。

例

フロントエンド → API → データ取得

WebとAPIの違い

通常のWeb

HTMLを返す

API

JSONを返す

JSONとは

JSONはデータ形式です。

例

{
  "name": "Taro",
  "age": 20
}

Laravelではこの形式でデータを返します。

api.php

API用のルーティングはここに書きます。

routes/api.php

APIルート

例

use App\Http\Controllers\UserController;

Route::get('/users', [UserController::class, 'index']);

URL

http://127.0.0.1:8000/api/users

ControllerでJSONを返す

public function index()
{
    return response()->json([
        'message' => 'Hello API'
    ]);
}

EloquentとAPI

public function index()
{
    return response()->json(User::all());
}

これでDBのデータを返せます。

POST API

Route::post('/users', [UserController::class, 'store']);

Controller

public function store(Request $request)
{
    $user = User::create([
        'name' => $request->name
    ]);

    return response()->json($user);
}

ステータスコード

return response()->json($data, 200);

例

200 OK
201 Created
404 Not Found

エラーレスポンス

return response()->json([
    'error' => 'User not found'
], 404);

APIリソース（Resource）

php artisan make:resource UserResource

Resource例

public function toArray($request)
{
    return [
        'id' => $this->id,
        'name' => $this->name
    ];
}

フロントエンド連携

React / Vueでは

fetch('/api/users')

または

axios.get('/api/users')

でデータを取得します。

CORS

フロントと別ドメインの場合

CORS設定

が必要です。

Laravelでは

config/cors.php

で設定します。

API開発の流れ

ルーティング
↓
Controller
↓
Model
↓
JSONレスポンス

実務での構成

Laravel → API
React/Vue → UI

よくあるミス

/api忘れ

/api/users

JSONで返していない

view() を使っている

CORSエラー

Access-Control-Allow-Origin

まとめ

この記事では LaravelのAPI開発 を解説しました。

重要なポイント

APIはJSONを返す
api.phpを使う
response()->json() を使う
フロントと連携する

LaravelのAPIを使うことで

React / Vueと連携

できるようになります。

次回は

Laravel認証（ログイン機能）

を解説します。

ログイン
ユーザー登録
認証

などを説明します。