Webアプリ開発マイページ編集編

Last updated at 2024-05-13Posted at 2024-05-08

初めに

webアプリの開発ができたので、どんな感じで作成したのかをまとめたいと思います。
今回はマイページ編集についてです。

開発環境

macOS Sonoma 14.4.1
PHP 8.3.3
Laravel Installer 5.2.0
Laravel Framework 11.0.5

ソースコード

考えたこと

マイページ編集

ビュー

マイページに移動する前に

自分の名前を押すとドロップダウンのメニューが出てくるようにして、「プロフィール」を押すとマイページ画面に飛べるようにしました。
マイページはLarave Breezeを参考にしました。

「アカウントを削除」ボタンを押すと

アカウントの削除を本当にしても良いかの確認が出てきます。

edit.blade.php

<x-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('プロフィール') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
            <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
                <div class="max-w-xl">
                    @include('profile.partials.update-profile-information-form')
                </div>
            </div>

            <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
                <div class="max-w-xl">
                    @include('profile.partials.update-password-form')
                </div>
            </div>

            <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
                <div class="max-w-xl">
                    @include('profile.partials.delete-user-form')
                </div>
            </div>
        </div>
    </div>
</x-layout>

このブレードファイルがマイページの編集画面の大枠を決めているのですが、@includeで項目ごとにファイルを読み込んで保守性を高めています。

項目ごとのファイルで意識したことはフォームのラベル、エラー、ボタンは共通化するようにしました。
共通化できる部分は共通化して保守性を高めるようにしました。

ルート

web.php

Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
Route::put('password', [PasswordController::class, 'update'])->name('password.update');

マイページ関連のルートは名前をつけることでビュー側でルートの変更処理をしなくてもいいようにしました。

コントローラ

どのコントローラでもバリデーションしてからカラムに登録するという流れです。

レスポンシブ対応

使われるスマホがiPhone8以上の画面サイズなのでiPhone8に対応させました。

改善していきたいこと

update-profile-information-form.blade.phpの編集

名前とメールアドレスを編集するファイルのupdate-profile-information-form.blade.phpにいらない物があった

update-profile-information-form.blade.php

            @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
                <div>
                
                    <p class="text-sm mt-2 text-gray-800">
                        {{ __('Your email address is unverified.') }}

                        <button form="send-verification" class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            {{ __('Click here to re-send the verification email.') }}
                        </button>
                    </p>

                    @if (session('status') === 'verification-link-sent')
                        <p class="mt-2 font-medium text-sm text-green-600">
                            {{ __('A new verification link has been sent to your email address.') }}
                        </p>
                    @endif
                </div>
            @endif

メールアドレスの確認の部分なのですが、このアプリでは実装していないので削除しておかないといけません。

ProfileControllerとPasswordControllerの統一

ProfileControllerはマイページのユーザーネームとメールアドレスの変更、アカウントの削除に使われます。PasswordControllerはマイページのパスワード変更に使われます。
2つともマイページ関連のコントローラなので一緒にした方が機能修正するときにわかりやすいなと考えました。

ProfileControllerの改善updateメソッドの改善点

ProfileController.php

    public function update(ProfileUpdateRequest $request): RedirectResponse
    {   

        $request->user()->fill($request->validated());

        if ($request->user()->isDirty('email')) {
            $request->user()->email_verified_at = null;
        }

        $request->user()->save();

        return redirect('profile')->with('success', 'プロフィールが更新されました。');
    }

ProfileControllerのfill()とsave()の処理は同じことをしているのでどちらか片方でいいと考えました。
項目が更新されたか確認するis_Dirty()はメール確認の処理なので削除した方がいいと考えました。

destoryメソッドの改善点