今回はフォームで使用される old() メソッドについて解説していきます。
前章でバリデーションについて触れましたが、フォーム送信時にバリデーションに引っかかると、入力画面に戻されますよね。
そのとき「えっ、入力した内容が全部消えてる…！」と焦った経験、あなたにもあるかもしれません。
「もう一回全部打ち直すなんて面倒！」というユーザーの体験を、ちょっとしたコードで大幅に改善できるんです。
old() とは何か？
バリデーションエラーが起きると、通常は入力された値がすべて消えてしまい、ユーザーはまた一から入力し直す必要があります。
これは非常に煩わしく、離脱の原因にもなり得るUXの欠点です。
今回学習するold() メソッドは、前回送信されたフォームの入力値をセッションから取得して表示してくれる Laravel のヘルパー関数です。
主に value="{{ old('項目名') }}" のように記述して使います。
この仕組みのおかげで、フォーム送信時にバリデーションエラーが発生しても、入力済みの値が消えることなく残るため、ユーザーが再度入力する手間が大きく減ります。
名前やメッセージ、選択した項目などをユーザーの手間なく復元できるため、エラーメッセージとともに「どこを直せばいいか」に集中できるようになります。
間違えて「Enterキー」を押してしまった場合などにも対応できるので、ユーザーの利便性が格段に向上します。
それではとっても便利な old() メソッドを実装していきましょう。
1. pullとブランチの作成
まずは、毎回恒例のやーつ。作業に入る前に前回mergeしたメインブランチを更新しておきましょう。
# ブランチをpullする
git pull origin main以上で完了です。mainブランチが前章で作成されたブランチと同じになれば、次に進みます。
git switch -C make-old今回はバリデーションを作成するので、安直ですがmake-oldと言う名前のブランチを作成しました。ブランチ名は任意となりますので、お好きなブランチ名を付けて構いません。
2.Contact.blade.phpの実装
old()メソッドの実装は非常に簡単で、ユーザーに入力してもらうべきフォームに value="{{ old('項目名') }}" をつけるだけです。
@extends('layouts.app')
@section('title', 'お問い合わせフォーム')
@section('content')
<h2>お問い合わせフォーム</h2>
<form action="/contact/store" method="POST">
@csrf
<!-- 名前 -->
<div>
<label for="name">お名前：</label><br>
<input type="text" id="name" name="name" value="{{ old('name') }}">
@error('name')
<div style="color: red;">{{ $message }}</div>
@enderror
</div><br>
<!-- メールアドレス -->
<div>
<label for="email">メールアドレス：</label><br>
<input type="email" id="email" name="email" value="{{ old('email') }}">
@error('email')
<div style="color: red;">{{ $message }}</div>
@enderror
</div><br>
<!-- 年齢（セレクトボックス） -->
<div>
<label for="age">年齢：</label><br>
<select name="age" id="age">
<option value="">選択してください</option>
@for ($i = 18; $i <= 65; $i++)
<option value="{{ $i }}" {{ old('age') == $i ? 'selected' : '' }}>{{ $i }}歳</option>
@endfor
</select>
@error('age')
<div style="color: red;">{{ $message }}</div>
@enderror
</div><br>
<!-- 性別（ラジオボタン） -->
<div>
<label>性別：</label><br>
<label><input type="radio" name="gender" value="男性" {{ old('gender') == '男性' ? 'checked' : '' }}> 男性</label>
<label><input type="radio" name="gender" value="女性" {{ old('gender') == '女性' ? 'checked' : '' }}> 女性</label>
<label><input type="radio" name="gender" value="その他" {{ old('gender') == 'その他' ? 'checked' : '' }}> その他</label>
@error('gender')
<div style="color: red;">{{ $message }}</div>
@enderror
</div><br>
<!-- 興味のあるサービス領域（チェックボックス） -->
<div>
<label>興味のある分野：</label><br>
@php
$oldInterests = old('interests', []);
@endphp
<label><input type="checkbox" name="interests[]" value="Webサイト制作" {{ in_array('Webサイト制作', $oldInterests) ? 'checked' : '' }}> Webサイト制作</label><br>
<label><input type="checkbox" name="interests[]" value="システム開発" {{ in_array('システム開発', $oldInterests) ? 'checked' : '' }}> システム開発</label><br>
<label><input type="checkbox" name="interests[]" value="WordPress運用" {{ in_array('WordPress運用', $oldInterests) ? 'checked' : '' }}> WordPress運用</label><br>
<label><input type="checkbox" name="interests[]" value="Laravel構築" {{ in_array('Laravel構築', $oldInterests) ? 'checked' : '' }}> Laravel構築</label><br>
<label><input type="checkbox" name="interests[]" value="SEO相談" {{ in_array('SEO相談', $oldInterests) ? 'checked' : '' }}> SEO相談</label>
@error('interests')
<div style="color: red;">{{ $message }}</div>
@enderror
</div><br>
<!-- 本文 -->
<div>
<label for="message">お問い合わせ内容：</label><br>
<textarea name="message" id="message" rows="5">{{ old('message') }}</textarea>
@error('message')
<div style="color: red;">{{ $message }}</div>
@enderror
</div><br>
<!-- 送信ボタン -->
<button type="submit">内容を確認する</button>
</form>
@endsection
コードの解説
<option value="{{ $i }}" {{ old('age') == $i ? 'selected' : '' }}>{{ $i }}歳</option>このコードは、$i に年齢の数字（例：20, 21, 22 …）が入っている前提で、年齢選択の <option> 要素を生成しています。
動きとしては、
- データがバリデーションエラーによりフォームの戻る。
- Laravelのセッションが直前の入力値（age）を保持
- old(‘age’) を使って、その値と $i を比較。
- 一致すれば selected が付与され、該当の年齢が選択された状態になる。
という順番で実行され、結果として選択したデータがそのまま表示されます。
性別や興味分野の old() についても同様で、選択されたデータと一致している場合に checked をつけることで、データを保存しています。
3.Git push
以上が完了したら、ここでGitを共有しておきましょう。
git add -A
git commit -m "コメントを入力する"
git push origin make-oldgit pushが無事完了したら、GitHub上で操作を行います。
pull requestが来ているので、mergeしましょう。