【豆知識+Error】コードがあっていても少し位置が違うだけでエラーになってしまうrenderのお話

はじめに

今日は短めですが、自分でコードを入力していく中で位置が違っただけでうまく表示されない、ローカルにアクセスしたときエラーの画面になってしまったので、同じようなミスをしない為にも記事にすることでアウトプット＆記憶にとどめやすいようにしたいと思います。

環境

• Windows, WSL
• Docker
• Ruby 3.2.3
• Rails 7.1.3

どんな状況だったのか

<div class="w-5/6 mx-auto max-w-screen-xl">
  <div class="my-10">
    <h1 class="text-4xl md:text-5xl font-bold mb-10 pb-4 border-b-4 border-dashed border-stone-400 text-center">
      パスワード再設定
    </h1>

    <div class="w-full md:w-2/3 lg:w-1/2 mx-auto">
      <%# バリデーションエラーメッセージ表示 %>
      <%= render 'shared/error_messages', object: f.object %>
    </div>

    <%= form_with model: @user, url: password_reset_path(@token) do |f| %>

さぁ、皆さんはこんなコードを書いたときどんなエラーが起こると思いますか？

シンキングタイム

と書きつつ答えはすぐ出す

Error内容はこんなでした

NameError in PasswordResets#edit Showing /myapp/app/views/password_resets/edit.html.erb where line #9 raised:

undefined local variable or method `f' for #ActionView::Base:0x000000000237d0

<%= render 'shared/error_messages', object: f.object %>

エラー内容の意味と原因

• fが定義されていないためにエラーが発生している
• fはform_withブロック内で定義されるローカル変数だから、form_withのブロックの中で使わないといけない

修正

<div class="w-5/6 mx-auto max-w-screen-xl">
  <div class="my-10">
    <h1 class="text-4xl md:text-5xl font-bold mb-10 pb-4 border-b-4 border-dashed border-stone-400 text-center">
      パスワード再設定
    </h1>

    <div class="w-full md:w-2/3 lg:w-1/2 mx-auto">
      <%= form_with model: @user, url: password_reset_path(@token) do |f| %>
        <%# バリデーションエラーメッセージ表示 %>
        <%= render 'shared/error_messages', object: f.object %>

このようにちょっと位置を変えただけ、ちゃんとform_withのブロックの中で使ってあげることでエラーが消えました！！

さいごに

通常のフラッシュmessageはコントローラーの中で定義することで、ファイルを見た時にすぐに「このエラーはこういうアクションをとった時にこんな内容でフラッシュmessageを表示することができるのか」とわかりやすいのですが、バリデーションmessageはちゃんとした場所に置かないと表示するされない以前にエラーでサイト自体表示されない！！という事がよくわかりました。GPTへの質問の仕方も考えさせられました💦
今回の記事が何か参考になれば幸いです