ポートフォリオを作ろう

これまで学んだことをすべて使い、ReactとLaravelを使ったポートフォリオを作製していきます。 ここでは（例年同じなのですが）本の貸し出しシステムというサンプルアプリを作る過程で、必要な技術を紹介していきます。

ReactとLaravelの接続について

ReactとLaravelはそれぞれ別のリポジトリで作成し、それらの通信はWebAPIによって行います。 このようは構成をフロントエンド・バックエンド分離とよび、近年広く利用されるアーキテクチャ（構造）です。

一方でこれまで学んだLaravelだけで完結するような構成はモノリス（１枚の岩）アーキテクチャの呼ばれます。 モノリスの場合は１つのリポジトリだけで構成されるので当初の開発が簡単ですが、規模が大きくなると変更や追加に不便が生じるようになります。

フロントエンド・バックエンドを別のリポジトリにおいて分離することでサイズが小さくなるので、管理が容易になります。

それでもバックエンドが大きくなった場合は、バックエンドの一部の機能（ユーザー認証や支払いなど）を分離していくマイクロサービスというアーキテクチャが利用されるようになります。

Laravel準備

まずはサンプルを動かすだけなので、いつものようにLaravelのプロジェクトを作ります。

プロジェクト名はBookManage_Laravelとしました。

 composer create-project laravel/laravel BookManage_laravel  --prefer-dist "10.*"

BookControllerを作ります。

php artisan make:controller BookController

本当はモデルとDBの設定が必要ですが、簡易化のためにダミーデータをコントローラ内に設定します。

BookController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class BookController extends Controller
{
    public function index(){
        $books = [
            [
                "title" => "吾輩は猫である",
                "author" => "夏目漱石",
                "publisher" => "岩波書店",
                "year" => 1905,
                "genre" => "小説"
            ],
            [
                "title" => "雪国",
                "author" => "川端康成",
                "publisher" => "新潮社",
                "year" => 1947,
                "genre" => "小説"
            ],
            [
                "title" => "ノルウェイの森",
                "author" => "村上春樹",
                "publisher" => "講談社",
                "year" => 1987,
                "genre" => "小説"
            ],
            [
                "title" => "こころ",
                "author" => "夏目漱石",
                "publisher" => "岩波書店",
                "year" => 1914,
                "genre" => "小説"
            ],
            [
                "title" => "人間失格",
                "author" => "太宰治",
                "publisher" => "新潮社",
                "year" => 1948,
                "genre" => "小説"
            ]
        ];
    
    return $books;
  }
}

Web APIを利用するときは、web.phpの代わりにapi.phpにルーティングを書きます。

routes/api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

use App\Http\Controllers\BookController;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "api" middleware group. Make something great!
|
*/


Route::get('/books',[BookController::class,'index']);

サーバーを起動したら api/books にアクセスしてくて動作を確認しましょう。

Reactの準備

Reactでもこれまでのようにプロジェクトを作ります。

プロジェクト名はBookManage_Reactとしましょう。

import { useEffect, useState } from 'react'
import axios from 'axios';


export const App = () => {
  const url = 'http://127.0.0.1:8000/api/books'

  const [books, setBooks] = useState([])

  useEffect(() => {
    getBooks();
  }, [])

  const getBooks = async () => {
    const response = await axios.get(url)
    const result = response.data
    console.log(result)

    setBooks(result)
    return result
  }

  return (
    <>
      {books.map(book => (
        <div>
          <h3>{book.title}</h3>
          <div>{book.author}</div>
          <div>{book.publisher}</div>
          <div>{book.year}</div>
          <div>{book.genre}</div>
        </div>
      )
      )}
    </>
  )

}