Zenn
4️⃣

【Laravel10】 Inertia + React で「追加・変更・削除・閲覧」機能をつくる（その4）

2024/07/23に公開
Docker
Laravel
React
lamp
inertia
tech

概要

【Laravel10】 Inertia + React で「追加・変更・削除・閲覧」機能をつくる（その3）の続編です。
現在、indexとnew,storeアクションの実装が完了してる状態です。今回はcreateアクションを実装します。

バージョン情報

その1と同じなので、割愛

PostController::showを実装

コントローラ側

app/Http/Requests/Post/FindRequest.phpを作成

php artisan make:request Post/FindRequest
app/Http/Requests/Post/FindRequest.php
<?php

namespace App\Http\Requests\Post;

use App\Models\Post;
use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Contracts\Validation\Validator;

class FindRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     */
    public function authorize(): bool
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array<string, \Illuminate\Contracts\Validation\Rule|array|string>
     */
    public function rules(): array
    {
        return[
            'id' => ['required', 'exists:posts',],
        ];
    }

    /**
     * ルートIDをバリデーション対象にする。
     */
    protected function prepareForValidation()
    {
        $this->merge([
            'id' => $this->id
        ]);
    }

    /**
     * Returns validations errors.
     *
     * @throws HTTPException
     */
    protected function failedValidation(Validator $validator)
    {
        abort(404, $validator->errors());
    }

    /**
     * ルートIDから投稿データを取得
     */
    public function findPost(): Post
    {
        return Post::findOrFail($this->id);
    }
}

app/UseCases/Post/FindAction.phpを作成

app/UseCases/Post/FindAction.php
<?php

namespace App\UseCases\Post;

use App\Models\Post;
use App\Http\Requests\Post\FindRequest;

class FindAction
{
    public function __invoke(FindRequest $request): array
    {
        $post = $request->findPost();

        return [
            'post' => $post,
        ];
    }
}

app/Http/Controllers/PostController.phpを編集

app/Http/Controllers/PostController.phpを編集
<?php

namespace App\Http\Controllers;

use App\UseCases\Post\IndexAction;
use App\UseCases\Post\StoreAction;
use App\UseCases\Post\FindAction;
use App\Http\Requests\Post\StoreRequest;
use App\Http\Requests\Post\FindRequest;
use Illuminate\Http\Request;
use Illuminate\Http\RedirectResponse;
use Inertia\Inertia;
use Inertia\Response;

class PostController extends Controller
{
    public function index(IndexAction $action): Response
    {
        return Inertia::render('Post/Index', $action());
    }

    public function new(): Response
    {
        return Inertia::render('Post/Create');
    }

    public function store(StoreRequest $request, StoreAction $action): RedirectResponse
    {
        $action($request);

        return redirect()->route('posts.view.index')->with([
            'message' => '登録が完了しました',
        ]);
    }

    public function show(FindRequest $request, FindAction $action): Response
    {
        return Inertia::render('Post/Show', $action($request));
    }

    public function edit()
    {
    }

    public function update()
    {
    }

    public function destroy()
    {
    }
}

コンポーネント側

resources/js/Pages/Post/Show.jsxを作成

resources/js/Pages/Post/Show.jsx
import React from "react";
import { Link, Head } from '@inertiajs/react';

export default function Show(props) {

    const { title, body } = props.post;

    return (
        <div className="p-4">
            <h1 className="font-bold mb-3">{title}</h1>
            <div className="mb-3">{body}</div>
            <Link className="text-white bg-blue-700 rounded-lg text-sm px-4 py-2" href={route('posts.view.index')}>戻る</Link>
        </div>
    );
}

確認

npm run dev をして、http://localhost/posts にアクセスして、任意の投稿で「確認」をクリックしてみてください。http://localhost/posts/:id に遷移して、詳細画面が表示されることが確認できます。
また、存在しないidを打ち込むと、404が表示されることが確認できます。

残りは、投稿編集(PostController::edit, PostController::update)、投稿削除(PostController::destroy)のみです。
【Laravel10】 Inertia + React で「追加・変更・削除・閲覧」機能をつくる（その5）で、この部分を実装します。

関連記事

Discussion