はじめに

こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して6ヶ月目に入りました。PHP,Laravelを学習しポートフォリオを作成中です。ポートフォリオ作成手順及び、エラー内容を中心に記録していこうと思います。今回はユーザー登録画面の編集を行いました。本投稿は流れのメモが重点になっておりますので、削除した部分や追加した部分の詳細は割愛致します。

デフォルトの状態

Breezeインストール後のデフォルトの状態

編集後の画面

エラーが発生

添付のエラーが発生
エラー内容から原因を推測
推測原因①：genderの値が正しくサーバー側に渡されていない？
⇨性別を登録する部分を追加していたが、どこかのディレクトリで記述が漏れていた可能性あり
推測原因②：ジェンダーフィールドの値が適切にバリデーションや保存処理がされていない

調査内容

コントローラーでgenderフィールドがリクエストに含まれているか確認。

RegisteredUserController.phpのstoreメソッドで以下のコードを追加

dd($request->all());

登録フォームを送信して、genderが正しい値を持っているか確認

調査結果

添付からgenderフィールドには値が渡されている
それにも関わらず下記のサーバーエラーが発生している
Internet Server Error 500

調査内容2

モデルでジェンダーがfillableプロパティに含まれているか確認
⇨User.phpを確認したところ、含まれていなかった
下記にて修正したところ解決。

protected $fillable = [
    'name',
    'email',
    'password',
    'account_name',
    'instagram',
    'gender',
    'location',
    'profile_photo',
];

補足情報

fillable の役割
fillable プロパティは、Eloquent の「一括代入 (Mass Assignment)」を使用する際に、どのフィールドを許可するかを指定します。このプロパティに指定していないフィールドは、自動的に無視されるため、データベースに保存されません。

今回のケースでは gender が fillable に追加されていなかったため、データベースに挿入されず、NOT NULL 制約によってエラーが発生していました。

変更した部分

app/Http/Controllers/Auth/RegisteredUserController.php

  // リクエスト内容を確認
        // dd($request->all());

        // バリデーション
        $request->validate([
            'account_name' => 'required|string|max:255',
            'email' => 'required|string|email|max:255|unique:users',
            'password' => 'required|string|min:8|confirmed',
            'instagram' => 'nullable|string|max:255',
            // 'gender' => 'required|string',
            'gender' => 'required|in:male,female',
            'location' => 'nullable|string|max:255',
            'profile_photo' => 'nullable|image|mimes:jpg,jpeg,png|max:2048',
        ]);

        // プロフィール写真の保存処理
        $profilePhotoPath = null;
        if ($request->hasFile('profile_photo')) {
            $profilePhotoPath = $request->file('profile_photo')->store('profile_photos', 'public');
        }

        // ユーザー作成
        $user = User::create([
            'account_name' => $request->account_name,
            'name' => $request->account_name, // ここで `name` を設定
            'email' => $request->email,
            'password' => Hash::make($request->password),
            'instagram' => $request->instagram,
            'gender' => $request->gender, //この部分は正しい。
            'location' => $request->location,
            'profile_photo' => $profilePhotoPath,
        ]);

        // 登録イベント発火
        event(new Registered($user));

        // ログイン処理
        Auth::login($user);

        // ダッシュボードへのリダイレクト
        return redirect()->route('dashboard');
    }
}

app/Models/User.php

protected $fillable = [
        'name',
        'email',
        'password',
        'account_name',
        'instagram',
        'gender',
        'location',
        'profile_photo',
    ];

database/migrations/2024_11_17_205314_add_fields_to_users_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->string('account_name')->nullable()->after('id'); // NULLを許容する
            $table->string('instagram')->nullable()->after('email');
            $table->string('gender')->after('instagram');
            $table->string('location')->nullable()->after('gender'); // locationカラムを追加
            $table->string('profile_photo')->nullable()->after('location');
        });
    }

    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->dropColumn(['account_name', 'instagram', 'gender', 'location', 'profile_photo']); // locationを含むすべてのカラムを削除
        });
    }
};

resources/views/auth/register.blade.php

<x-guest-layout>
    <div class="flex justify-center items-center min-h-screen bg-gray-100">
        <div class="w-full max-w-md bg-white p-6 rounded-lg shadow-md">
            <h2 class="text-center text-2xl font-bold mb-6">ユーザー登録</h2>

            <form method="POST" action="{{ route('register') }}" enctype="multipart/form-data" class="space-y-6">
                @csrf

                <!-- アカウント名 -->
                <div>
                    <x-input-label for="account_name" :value="__('アカウント名')" />
                    <x-text-input id="account_name" class="block mt-1 w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500" type="text" name="account_name" required autofocus />
                    <x-input-error :messages="$errors->get('account_name')" class="mt-2" />
                </div>

                <!-- メールアドレス -->
                <div>
                    <x-input-label for="email" :value="__('メールアドレス')" />
                    <x-text-input id="email" class="block mt-1 w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500" type="email" name="email" required />
                    <x-input-error :messages="$errors->get('email')" class="mt-2" />
                </div>

                <!-- パスワード -->
                <div>
                    <x-input-label for="password" :value="__('パスワード')" />
                    <x-text-input id="password" class="block mt-1 w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500" type="password" name="password" required />
                    <x-input-error :messages="$errors->get('password')" class="mt-2" />
                </div>

                <!-- パスワード（確認用） -->
                <div>
                    <x-input-label for="password_confirmation" :value="__('パスワード（確認用）')" />
                    <x-text-input id="password_confirmation" class="block mt-1 w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500"
                        type="password"
                        name="password_confirmation"
                        required autocomplete="new-password" />
                    <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
                </div>


                <!-- Instagram URL -->
                <div>
                    <x-input-label for="instagram" :value="__('Instagram URL')" />
                    <x-text-input id="instagram" class="block mt-1 w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500" type="text" name="instagram" />
                    <x-input-error :messages="$errors->get('instagram')" class="mt-2" />
                </div>

                <!-- 性別 -->
                <div>
                    <x-input-label for="gender" :value="__('性別')" />
                    <select id="gender" name="gender" class="block mt-1 w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500">
                        <option value="male">男</option>
                        <option value="female">女</option>
                    </select>
                    <x-input-error :messages="$errors->get('gender')" class="mt-2" />
                </div>

                <!-- 写真 -->
                <div>
                    <x-input-label for="profile_photo" :value="__('写真を選択')" />
                    <input id="profile_photo" class="block mt-1 w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500" type="file" name="profile_photo" accept="image/*">
                    <x-input-error :messages="$errors->get('profile_photo')" class="mt-2" />
                </div>

                <!-- 登録ボタン -->
                <div class="flex justify-center">
                    <x-primary-button class="w-full text-center">
                        {{ __('登録') }}
                    </x-primary-button>
                </div>
            </form>
        </div>
    </div>
</x-guest-layout>

次回実施内容

投稿画面の作成

最後までご覧いただき本当にありがとうございました！！