環境

Laravel: 8.6.2
Vue.js: 2.6.12
PHP: 8.0.8
Composer: 2.5.1
Node.js: 19.3.0

// envのDB接続部を書き換えておく
php artisan migrate:fresh
composer require laravel/ui
php artisan ui vue --auth
npm install
npm install resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps
npm install vue-loader@^15.9.8 --save-dev --legacy-peer-deps
composer require laravel/pint --dev
npm run dev
php artisan serve

概要

ユーザーが「興味のあるカテゴリを選択して登録する」画面を考えます
カテゴリは任意の数選択できますが、最低一つは選択しなければなりません
この時のバリデーション・エラーデザイン・データ登録の方法を以下に書いていきます

1. テーブルを作成する

users・user_category・categories の 3 テーブルを使用します
- Users テーブルは既存のものを使用します
- user_category, categories を以下で追加します

php artisan make:migration create_categories_table
php artisan make:migration create_user_category_table

categories_table.php

    public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->id();
            $table->string('name')->unique();
            $table->timestamps();
        });
    }

user_category_table.php

    public function up()
    {
        Schema::create('user_category', function (Blueprint $table) {
            $table->unsignedBigInteger('user_id');
            $table->unsignedBigInteger('category_id');
            $table->timestamps();

            $table->foreign('user_id')
                ->references('id')
                ->on('users')
                ->onDelete('cascade');

            $table->foreign('category_id')
                ->references('id')
                ->on('categories')
                ->onDelete('cascade');
        });
    }

php artisan migrateできたら OK です

最後にcategoriesのサンプルデータだけseederで投入します

php artisan make:seeder CategorySeeder

Seederを書いていきます

CategorySeeder.php

<?php

namespace Database\Seeders;

use App\Models\Category;
use Illuminate\Database\Seeder;

class CategorySeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $categories = [
            [
                'name' => 'Frontend',
                'created_at' => now(),
                'updated_at' => now(),
            ],
            [
                'name' => 'Backend',
                'created_at' => now(),
                'updated_at' => now(),
            ],
            [
                'name' => 'Infra',
                'created_at' => now(),
                'updated_at' => now(),
            ]
        ];
            Category::insert($categories);
        
    }
}

DatabaseSeeder.php

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        if (config('app.env') === 'production') {
            Log::error('本番環境でSeederの一括実行はできません。処理を終了します。');

            return;
        }
        $this->call([
            CategorySeeder::class,
        ]);
    }
}

php artisan db:seedをして成功したら完了です！

2. モデルにリレーションを追記する

まず category のモデルを作成します

php artisan make:model Category

User モデルと Category モデルにリレーションを定義します

User.php

// ...
    public function categories() // <- 新しく追加
    {
        return $this->belongsToMany(Category::class, 'user_category')->withTimeStamps();
    }

Category.php

class Category extends Model
{
    use HasFactory;

    protected $fillable = [
        'name'
    ];

    public function users()
    {
        return $this->belongsToMany(User::class, 'user_category')->withTimestamps();
    }
}

3. 表示画面を作成する

既存の home.blade.php を編集する形で画面を作成します

home.blade.php

// ...
<div class="card-header">ユーザーにカテゴリを設定します</div>

<div class="card-body">
    @if (session('status'))
        <div class="alert alert-success" role="alert">
            {{ session('status') }}
        </div>
    @endif
    @if (session('categories'))
        <div class="alert alert-success" role="alert">
            登録されているカテゴリー↓
            <ul>
                @foreach (session('categories') as $row)
                    <li>{{ $row->name }}</li>
                @endforeach
            </ul>
        </div>
    @endif

<h3>{{ Auth::user()->name }}さん　興味のあるカテゴリを以下から選択してください</h3>

<form method="POST" action="{{ route('store') }}">
    @csrf
    <fieldset class="row mb-3">
        <legend class="col-md-4 col-form-label text-md-end">カテゴリー</legend>
        <div class="col-sm-5 col-form-label">
            <div class="form-check form-check-inline">
                <input class="form-check-input @error('categories') is-invalid @enderror"
                    type="checkbox" name="categories[]" id="frontend" value=1>
                <label class="form-check-label" for="frontend">
                    フロントエンド
                </label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input @error('categories') is-invalid @enderror"
                    type="checkbox" name="categories[]" id="backend" value=2>
                <label class="form-check-label" for="backend">
                    バックエンド
                </label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input @error('categories') is-invalid @enderror"
                    type="checkbox" name="categories[]" id="infra" value=3>
                <label class="form-check-label" for="infra">
                    インフラ
                </label>
            </div>
        </div>
    </fieldset>

    <div class="row mb-2">
        <div class="col-md-3 offset-md-1">
            <button type="submit" class="btn btn-outline-primary">登録
            </button>
        </div>
    </div>
</form>
// ...

次に Routing を追加します

web.php

// ...
Route::post('/store', [App\Http\Controllers\HomeController::class, 'store'])->name('store');

4. 登録処理を作成する

HomeController.php

    public function store(Request $request)
    {
        if (is_array($request->categories)) {
            User::find(Auth::user()->id)->categories()->sync($request->categories);
        }

        $categories = Auth::user()->categories;
        $status = 'カテゴリーを登録しました！';

        return redirect()->route('home')->with(compact('status', 'categories'));
    }

5. バリデーションを作成する

最低1つは選択してもらうようにします

php artisan make:request Home/StoreRequestで作成したファイルに記述します

StoreRequest.php

<?php

namespace App\Http\Requests\Home;

use Illuminate\Foundation\Http\FormRequest;

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

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'categories' => ['required']
        ];
    }
}

作成したバリデーションをコントローラーで呼び出します

- use Illuminate\Support\Request
+ use App\Http\Requests\Home\StoreRequest; 

// ...

- public function store(Request $request)
+ public function store(StoreRequest $request)

エラーメッセージが表示されるようにViewも変更します

home.blade.php

// ...
<div class="card-body">
    @if ($errors->any())
        <div class="alert alert-danger mt-3">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

6. バリデーションエラーデザインを記述する

例えば他にも入力を受け付ける必須項目「一番興味のあるカテゴリ」があったとします
この項目がエラーとなって返ってきた時に、以前チェックを入れた項目が保存されません
通常のinputであればoldメソッドを使うことでこの問題は解決するのですが、チェックボックスでは他の方法を探す必要があります...

バリデーションエラーだけであれば、Requestファイルに項目を追加するだけで発生させることができるので、実際に試してみましょう

StoreRequest.php

return [
    'categories' => ['required'],
    'name' => ['required']
];

次に3つのチェックボックスそれぞれのinputタグの中に、条件によってcheckedを付与する記述を追加します

home.blade.php

<div class="form-check form-check-inline">
    <input class="form-check-input @error('categories') is-invalid @enderror"
        type="checkbox" name="categories[]" id="frontend" value=1 @if (is_array(old('categories')) && in_array('1', old('categories'))) checked @endif>
    <label class="form-check-label" for="frontend">
        フロントエンド
    </label>
</div>

上記はvalue=1のフロントエンドに追記する例です
他2つはそれぞれのvalueに合わせてin_arrayメソッドの第一引数を2,3と変更してください

end.Githubのリポジトリ

今回作成したアプリケーションは以下に公開しています↓