セレクトボックスにDBの値を反映させて、editとcreateで使い回したい。

はじめに

セレクトボックスを使用した入力項目を実装しました。
その際に、以下の２つの実装で詰まったため記録として残します。

1. 投稿したものを編集する際、DBの値がセレクトボックスに反映されない
2. editとcreateでbladeの使い回し

条件

・ mac OS 11.2.3 Big Sur
・ Laravel Framework 6.20.27
・ PHP 8.0.7
・ nginx 1.18
・ mysql 8.0

1. 投稿済みのものを編集する際、DBの値がセレクトボックスに反映されない

値はDBに保存できており、レシピの詳細ページに保存されているデータが渡ってきている。
→ セレクトボックスが初期値のまま

（form.blade.phpは、編集画面(edit)と新規作成画面(create)とで使い回しています。）

1.1 編集前

form.blade.php一部抜粋

<div class="form-group mt-3">
   <label for="meal_type_id">料理の種類</label>
   <select name="meal_type_id" class="custom-select form-control pl-4">
       @foreach($meal_types as $meal_type)
           <option value="{{ $meal_type->id }}" {{ old('meal_type') == $meal_type->id ? 'selected' : '' }}>
             {{ $meal_type->name }}
           </option>
       @endforeach
    </select>
</div>

1.2 編集後

form.blade.php一部抜粋

<div class="form-group mt-3">
   <label for="meal_type_id">料理の種類</label>
   <select name="meal_type_id" class="custom-select form-control pl-4">
       @foreach($meal_types as $meal_type)
          // ---- ここから ----
           <option value="{{ $meal_type->id }}" {{ old('meal_type', $recipe->meal_type_id) == $meal_type->id ? 'selected' : '' }}>
         // ---- ここまで ----
             {{ $meal_type->name }}
           </option>
       @endforeach
    </select>
</div>

$recipe->meal_type_idをold( )の第二引数に追加。
old( )は第二引数に指定したものをデフォルト値として設定できる。
これで、一度投稿したものを編集する時でも、セレクトボックスが選択されている状態になっている。

[Laravel 7.x old( ) について] (https://readouble.com/laravel/7.x/ja/helpers.html)

２. editとcreateでbladeの使い回し

値の反映は実装できたものの、レシピを新規作成しようとしたところ、以下のエラー。

$recipeが定義されてないと言われた。

$recipe->meal_type_idを追加したことで新たにエラーが出現...。
しばらく格闘した結果、以下の実装で丸く収まった。

2.1 編集後

form.blade.php一部抜粋

<div class="form-group mt-3">
   <label for="meal_type_id">料理の種類</label>
   <select name="meal_type_id" class="custom-select form-control pl-4">
       @foreach($meal_types as $meal_type)
          // ---- ここから ----
           <option value="{{ $meal_type->id }}" {{ old('meal_type', $recipe->meal_type_id ?? '') == $meal_type->id ? 'selected' : '' }}>
         // ---- ここまで ----
             {{ $meal_type->name }}
           </option>
       @endforeach
    </select>
</div>

2.2 変更点

<option>タグの以下の部分を編集。

{{ old('meal_type', $recipe->meal_type_id ?? '')

{{ old('meal_type', $recipe->meal_type_id)では、
・edit：第二引数の値を取得
・create：第二引数を取得しようとしてエラー($recipeが定義されていない)

{{ old('meal_type', $recipe->meal_type_id ?? '')では、
・edit：第二引数の$recipe->meal_type_idを取得
・create：第二引数のnull合体演算子で値が取れなかった場合、''を取得

null合体演算子：php.net

おわり

今回の実装で、
・ old( )の使い方
・ セレクトボックスの値の保持
・ blade内でeditとcreateの表示の分岐
など、多くのことを学ぶ事ができました！

引き続き実装頑張っていきます！

参考

以下のサイトも参考にさせていただきました。