1.はじめに

Reactで開発をしている中で、独自APIを開発して叩いてみたいな〜と思ったので早速やってみることに。自分が想像している以上にサクッと実装できたので備忘録も兼ねて書いていきます。

1-1.開発環境

フロントエンド
React.js ver18.2.0
バックエンド
Laravel ver8

2.LaravelのAPI開発

2-1.Laravelの環境構築

プロジェクトのディレクトリ直下で以下のコマンドを叩きます。

$ composer create-project laravel/laravel=8 backend

するとLaravelがインストールされます。
インストール後にローカルサーバーが起動するか確認をしてみましょう。

$ cd backend
$ php artisan serve
Starting Laravel development server: http://127.0.0.1:8000

http://localhost:8000/ にアクセスしてWelcomeページが表示されればインストール完了。

2-2.Controllerを作成

backendディレクトリで以下のコマンドを叩きます。

php artisan make:controller ListController

すると app/Http/ControllersにListController.phpが作成されます。
次に作成されたListController.phpの内容を変更していきます。

app/Http/Controllers/ListController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ListController extends Controller
{
 public function index(){
  return response()->json(
   [
    "post" => [
         [
	  "id" => 1,
          "title" => "タイトルです",
          "content" => "投稿内容です投稿内容です投稿内容です投稿内容です投稿内容です。"
         ],
         [
	  "id" => 2,
          "title" => "タイトルです",
          "content" => "投稿内容です投稿内容です投稿内容です投稿内容です投稿内容です。"
         ],
         [
	  "id" => 3,
          "title" => "タイトルです",
          "content" => "投稿内容です投稿内容です投稿内容です投稿内容です投稿内容です。"
         ],
       ]
    ],
    200,[],
    JSON_UNESCAPED_UNICODE //文字化け対策
   );
  }
 }

以上でControllerの作成は完了です。

3-2.api.phpの内容を変更

routesのapi.phpに以下のコードを書く。

routes/api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ListController;

Route::get('list',[ListController::class, 'index']);

これでルーティングの設定が完了しました。

さっそく、ブラウザで http://localhost:8000/api/list にアクセスしてみましょう!
以下のようなJSONデータが返ってくればAPIの開発は完了です。

{"post":{"title":"タイトルです","content":"投稿内容です投稿内容です投稿内容です投稿内容です投稿内容です。"},"0":{"title":"タイトルです","content":"投稿内容です投稿内容です投稿内容です投稿内容です投稿内容です。"},"1":{"title":"タイトルです","content":"投稿内容です投稿内容です投稿内容です投稿内容です投稿内容です。"}}

3.Reactの情報受け取り

3-1.Reactの環境構築

プロジェクトのディレクトリ直下で以下のコマンドを叩きます。

$ npx create-react-app frontend

するとReactがインストールされます。
インストール後にローカルサーバーが起動するか確認をしてみましょう。

$ cd frontend
$ npm start
Compiled successfully!

You can now view frontend in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://xxx.xxx.xxx.xx:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

http://localhost:3000 にアクセスしてWelcomeページが表示されればインストール完了。

3-2.axiosを使ってAPIを叩く準備をする

そもそもaxiosとはHTTP通信を簡単に行えるJavaScriptのライブラリのことです。今回は深堀りはしませんが、めっちゃ簡単にAPIを叩けるライブラリって感じです。
frontendディレクトリで以下のコマンドを叩きます。

$ npm install axios

するとaxiosがインストールされます。
App.jsの内容すべて削除し以下の内容に変更していきましょう。

src/App.js

import React, { useEffect } from "react";
import axios from "axios";

const App = () => {
　　　　// 先ほど作成したLaravelのAPIのURL
  const url = "http://localhost:8000/api/list";

  useEffect(()=>{
    (async ()=>{
      try{
        const res = await axios.get(url);
	console.log(res);
        return;
      }catch (e){
        return e;
      }
    })();
  },[]);
  
  return (
    <div className="App"></div>
  );
}

export default App;

ポイントが3つほどあります。
1.useEffect内でasync/awaitを使用する場合は即時関数をかます
useEffectの第1引数の関数の戻り値にはクリーンアップ関数を設定する必要があるため、即時関数を使用して非同期関数を実行する必要がある。

2.useEffectの第2引数は空配列にする
第2引数を空にすると、stateやpropsが更新されるたびにuseEffectの第１引数の関数が実行されるため危険です。そのため、第2引数を空配列してはじめのrender時（ページが更新された時）のみ第１引数の関数を実行するようにします。

3.意図しないエラーが起きたときのために例外処理をする
try~catch文を使うと例外処理ができます。APIを叩いて予期せぬエラーが発生した場合でもプログラムを止めることなく別の処理を実行できます。

3-3.更新してAPIの内容が受け取れているかを確認する

デベロッパーツールのコンソールでresの内容を確認してみましょう。
データが上手く取得できていれば以下のようなレスポンスが返って来ているはずです。

{data: {…}, status: 200, statusText: 'OK', headers: AxiosHeaders, config: {…}, …}

後はuseStateで値を管理して、mapなどで表示してみましょう！

src/App.js

import React, { useEffect, useState } from "react";
import axios from "axios";

const App = () => {

  const [value,setValue] = useState([]);

  // 先ほど作成したLaravelのAPIのURL
  const url = "http://localhost:8000/api/list";

  useEffect(()=>{
    (async ()=>{
      try{
        const res = await axios.get(url);
        setValue(res.data.post);
        return;
      }catch (e){
        return e;
      }
    })();
  },[]);

  return (
    <div className="App">
      {value.map((article)=>{
        return (
          <div key={article.id}>
            <h1>{article.title}</h1>
            <p>{article.content}</p>
          </div>
        );
      })}
    </div>
  );
}

export default App;

以下のように表示されれば完了です。

4.さいごに

はじめてLaravelのAPIを作成してフロントをReactで構築してみましたが良い勉強になりました。
今後もアウトプットを続けていこうと思います〜！

Githubのリポジトリも載せときます。

Discussion