初めに
webアプリの開発ができたので、開発中に考えたことを書いていきます。
今回はユーザー新規登録についてです。
開発環境
macOS Sonoma 14.4.1
PHP 8.3.3
Laravel Installer 5.2.0
Laravel Framework 11.0.5
ソースコード
考えたこと
ユーザー新規登録編
ビュー
ビューで意識したことは
新規登録フォームのコンポーネント化です。
フォームの外枠の設定をする
panel.blade.php
フォーム欄の名前をつける
label.blade.php
バリデーションエラーを出す
error.blade.php
フォームでよく使われるものはコンポーネント化をすることで機能修正する際に該当箇所を見つけやすくしました。
ルート
次にルートは
Route::get('register', [RegisterController::class, 'create'])->middleware('guest')->name('user.register.view');
Route::post('register', [RegisterController::class, 'store'])->middleware('guest')->name('user.register.store');
新規登録はゲストユーザーの時に表示したかったのでget、post両方にmiddlewareをつけました。
get、postの両方に名前をつけることでviewのrootを変更する手間を省きました。
コントローラー
<?php
namespace App\Http\Controllers;
use App\Models\User;
class RegisterController extends Controller
{
public function create()
{
return view('auth.register');
}
public function store()
{
$attributes = request()->validate([
'username' => 'required|unique:users,username|min:3|max:20',
'email' => 'required|email|unique:users,email',
'password' => 'required|min:7|max:255',
]);
auth()->login(User::create($attributes));
return redirect('/')->with('success', '新規登録が完了しました。');
}
}
createメソッドでユーザー新規登録画面表示します
storeメソッドは新規登録処理でバリデーションをして
Userモデルにattributesの情報を渡して登録後にホーム画面へリダイレクトしてログインします
usernameのバリデーションは権限の設定で名前を使っているのでuniqueを使用しています
emailのバリデーションはパスワードリマインダーのメール送信が重複しないようにuniqueを使用しています
モデル
モデルのcreateメソッドを使ってデータを保存しました
saveメソッドを使うことも考えましたが保存処理が複数行になるので今回はcreateメソッドを使いました
レスポンシブ対応
使われるスマホがiPhone8以上の画面サイズなのでiPhone8に対応させました。
今後改善していきたいこと
ビューのコード改善、バリデーションの強化、登録確認画面、ルートの共通化です
ビューのコード改善は
<h1 class="text-center font-bold text-xl">ユーザー登録</h1>
ユーザー新規登録フォームの名前を決める部分をコンポーネント化するべきだと思います
どのフォームでもこの欄があるので改善したいです。
もしテキストの大きさの関係で出来なそうなら、別でフォームの名前をつけるコンポーネントファイルを作ろうと思います。
<input class="border border-gray-200 p-2 w-full rounded"
name="password"
id="password"
type="password"
>
ここはフォームの項目で共通部分があるので項目ごとに変数を渡して変更できるようなコンポーネントファイルを作成していきたいと思います。
バリデーションの強化は
<?php
public function store(Request $request)
{
$attributes = request()->validate([
'username' => 'required|unique:users,username|min:3|max:20',
'email' => 'required|email|unique:users,email',
'password' => 'required|min:7|max:255',
]);
}
}
emailのバリデーションがemailだけだと日本語でメールアドレスを作れる可能性があるのでバリデーションを強化したいと思います。
ルートの共通化は
Route::get('register', [RegisterController::class, 'create'])->middleware('guest')->name('user.register.view');
Route::post('register', [RegisterController::class, 'store'])->middleware('guest')->name('user.register.store');
Route::get('login', [SessionsController::class, 'create'])->middleware('guest')->name('login.view');
Route::post('login', [SessionsController::class, 'store'])->middleware('guest')->name('login.store');
middlewareでguestを新規登録、ログイン両方で使って使っているので共通化したいと思います。
新規登録の確認画面がないので入力内容を確認できたり、戻って再入力できるようにしたいと思います。
最後に
モデルのcreateメソッドやsaveメソッドなど同じ保存でもやり方が違う場合があるので状況に合わせて使う技術を変えられるようにしたいなと思います。