Day10 — React / Next.js から API にリクエストを送る：fetch / axios 入門

はじめに

Day9 では、Laravel で 実際に動く Web API を実装しました。
今日はついにその API を フロントエンド（React / Next.js）から叩く側 をやっていきます。

今日やることはこれです。

✅ GET で一覧データを取得する
✅ POST でデータを送信する
✅ レスポンスを画面に反映する
✅ API通信で初心者が100%つまずくポイントをすべて潰す

今日のゴール

・fetch の基本構文を理解する

・Laravel API（Day9）に React からアクセスできる

・取得したデータを画面に表示できる

・POST通信でデータ送信ができる

前提：今回の構成

・フロント：React（Next.js でも同じ）

・バックエンド：Laravel（Day9 の API）

・API エンドポイント：

GET  http://localhost:8000/api/posts
POST http://localhost:8000/api/posts

React 側に最小コンポーネントを作成

まずは最低限の構成です。

import { useEffect, useState } from 'react';

function App() {
  const [posts, setPosts] = useState([]);

  return (
    <div>
      <h1>投稿一覧</h1>

      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

今はまだ API通信はしていません。

fetch を使って GET リクエストを送る

useEffect の中で API を叩ます。

useEffect(() => {
  fetch('http://localhost:8000/api/posts')
    .then((response) => response.json())
    .then((data) => {
      setPosts(data.data);
    });
}, []);

ここで起きている流れ

① fetch() → リクエスト送信
② response.json() → JSON変換
③ setPosts() → state更新
④ 画面再描画

ブラウザで動作確認

画面にこう表示されれば成功です。

・最初の投稿
・2つ目の投稿

✅ Laravel → React のデータ連携が完成しました

POST通信で投稿を作成する

次はフォームから投稿を作成します。

入力フォームを追加

const [title, setTitle] = useState('');

<input
  type="text"
  value={title}
  onChange={(e) => setTitle(e.target.value)}
/>

<button onClick={handleSubmit}>投稿</button>

POST通信処理を追加

const handleSubmit = () => {
  fetch('http://localhost:8000/api/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      title: title,
    }),
  })
    .then((response) => response.json())
    .then((data) => {
      alert(data.message);
    });
};

これで、

✅ フォーム入力
✅ ボタン押下
✅ Laravel API に POST
✅ JSON レスポンス受信

という一連の流れが完成です。

React × API通信でハマりやすいポイント

CORS エラー

blocked by CORS policy

→ ✅ Day7 で設定した config/cors.php を再確認しましょう。

JSON が undefined になる

setPosts(data.data);

Laravel 側のレスポンスが：

{
  "status": "success",
  "data": []
}

になっていないと data.data は undefined になります。

POST で 419 エラーが出る

原因はこれです。

・web.php にルーティングしている

・CSRF が効いている

✅ API は必ず api.php に定義しましょう。

axios を使う場合（現場でよく使う）

fetch よりもシンプルに書けます。

import axios from 'axios';

axios.get('http://localhost:8000/api/posts')
  .then((res) => {
    setPosts(res.data.data);
  });

POST も：

axios.post('http://localhost:8000/api/posts', {
  title: title
});

現場では axios のほうが使われることが多い です。

今日のまとめ

・React から API へは fetch or axios を使う

・GET → データ取得 → 画面反映ができた

・POST → データ送信 → レスポンス取得ができた

・Laravel と React が繋がった

・CORS / JSON構造 / api.php に注意

次回 Day11 は…

　「HTTPステータスコードを正しく返す Laravel API 実装」

「とりあえず 200 を返す」から
“意味のある HTTP レスポンス設計” にレベルアップします。