ページ最下部に設置したフォームでエラー処理を行う方法

2019年12月9日 23:03
当ポートフォリオサイトのコンタクトフォームはトップページの最下部に設置しています。
コンタクトフォームをページ最下部に設置することでひとつ問題点が出てきます。それは、エラー発生時(未入力項目がある等)にページ最下部にあるコンタクトフォームに遷移できないこと。
今回のケースにおけるrenderメソッドとredirect_toメソッドそれぞれの問題点と、最終的に行き着いた解決策を記載します。

renderの問題点

一般的にコンタクトフォームの送信処理は以下のように記述するかと思います。
  def sending
    @contact = Contact.new(contact_params)
    if @contact.valid?
      ContactMailer.send_mail(@contact).deliver_now
      redirect_to contact_done_path
    else
      render 'statics/index'
    end
  end
もしバリデーションに失敗した場合、renderメソッドを使って'statics/index'(トップページのこと)に遷移します。
バリデーション失敗時にrenderメソッドを使っている理由は、renderメソッドはコントローラーを介さずに直接ページを表示できるからです。コントローラーを介さずに直接ページを表示することで、遷移先のページで@contact変数が使えるようになります。
遷移先のページでは、以下のように@contact.errorsがあればエラーメッセージを表示するようになっています。
<% if @contact.errors.any? %>
  <ul class="text-danger">
    <% @contact.errors.full_messages do |message| %>
      <li><%= message %></li>
    <% end %>
  </ul>
<% end %>
では何が問題なのかというと、renderメソッドにはアンカー機能がないため、必ずページ最上部に遷移してしまうのです。コンタクトフォームはページ最下部に設置しているので、アンカーでページ最下部にあるコンタクトフォームを表示させたいのに…
ちなみに@contact変数はしっかり受け取っているので、ページ最下部までスクロールするとちゃんとエラーメッセージは表示されています。

redirect_toの問題点

「じゃあアンカー機能のあるredirect_toを使えばいいのでは?」と思うことでしょう。しかし、redirect_toには別の問題点があります。
redirect_toでアンカー機能を使うときは以下のように記述します。
redirect_to root_path(anchor: 'home')
さて、redirect_toの問題点とは、redirect_toはコントローラーを介すため@contact変数が遷移先のページで使えなくなるということです。
今回の場合、root_pathはStaticsコントローラーのindexメソッドを呼び出します。
class StaticsController < ApplicationController
  def index
    ...
    @contact = Contact.new
  end
end
indexメソッド内の処理でエラーメッセージを含んだ@contactが上書きされてしまうのではないかと思っています(間違ってたらご指摘ください)。

解決策

ではどうすればいいのか?
かなり強引な方法かと思いますが、一応思い通りの動きになったので良しとしています。

まず、Contactsコントローラーのsendingメソッドは以下のとおりです。
  def sending
    ...
    @contact = Contact.new(contact_params)
    if @contact.valid?
      ContactMailer.send_mail(@contact).deliver_now
      redirect_to contact_done_path
    else
      flash[:params] = @contact
      flash[:errors] = @contact.errors.full_messages
      redirect_to root_path(anchor: 'contact')
    end
  end
エラーを含んだ@contact変数をflash変数に入れ直しています。これによりredirect_toで呼び出されたコントローラーのメソッド内でエラーが取り出せるようになります。
※flash変数の本来の使い方ではないことはわかっています。

次に、Staticsコントローラーのindexメソッドです。
  def index
    ...
    @contact = Contact.new

    unless flash[:params].nil?
      @contact.name = flash[:params]["name"]
      @contact.email = flash[:params]["email"]
      @contact.content = flash[:params]["content"]
      @errors = flash[:errors]
    end
  end
flash変数がnilでなければその内容を@contact変数に入れ直しています。これによりエラーを含んだ@contact変数が再び使えるようになります。

一応思い通りの動きになりましたが、果たしてflash変数を使う必要性があるのかどうかとか、それぞれのコントローラーで異なる変数名にすればflash変数を使わずとも参照できるのではないかなど、もう少し検証する余地がありそうです。

関連記事

【Rails】M1チップ搭載MacでRuby on Railsの開発環境構築
# はじめに M1チップ搭載MacにRuby on Railsの開発環境を構築する手順を記載します。 - MacBook Air (M1, 2020) - macOS Monterey 12.3.1 # Homebrew ## [...]
2022年5月5日 11:56
【Rails】Rakeタスクの基本情報と作成・実行方法
# はじめに Railsには標準でRakeというGemが同梱されています。RakeはRubyで実装されたMake(UNIX系のOSで使用できるコマンド)のようなビルド作業を自動化するツールです。Ruby Make、略してRakeというわけですね。 [...]
2022年3月7日 22:12
【Rails】Capybaraのfill_inメソッドを実行すると「既存レコードの内容+指定した内容」がセットされる事象の原因と対処【RSpec】
# はじめに RSpec + Capybaraを使用して、Railsアプリの統合テストを実装しています。とあるモデルの編集画面において、入力フォームの内容を書き換えた上で送信し、レコードが更新されることを確認します。 入力フォームの内容を書 [...]
2022年1月27日 21:22
【Rails】GitHubのセキュリティアラートで発見された脆弱性を解消する方法
# はじめに GitHubにはセキュリティアラートという機能があります。セキュリティアラートはリポジトリに含まれるライブラリやパッケージの脆弱性を定期的にチェックし、脆弱性のあるライブラリやパッケージが発見されたらアラートで知らせてくれるという機 [...]
2022年1月16日 10:36
【Rails】devise-two-factorを使った2段階認証の実装方法【初学者】
# はじめに Railsアプリで2段階認証を実装するには、「rotp」というGemを使う方法の他に、「devise-two-factor」というGemを使う方法があります。「devise-two-factor」はその名の通り、IDとパスワードによ [...]
2021年12月12日 17:58
【Rails】rotpを使った2段階認証の実装方法【初学者】
# はじめに 昨今はIDとパスワードによる認証だけでなく、ワンタイムパスワードによる2段階認証を導入するWebアプリが増えてきました。Railsで作成したWebアプリでも、IDとパスワードによる認証に加えて2段階認証を導入するニーズが高まっていま [...]
2021年11月27日 13:02
【Rails】deviseを使った認証機能の実装【初学者】
# はじめに Railsアプリに認証機能を導入するには「devise」というGemを使う方法が最も簡単です。「devise」は認証に係る機能をほとんどコードを書くことなく実装できる反面、処理がブラックボックス化されており、全容が把握しづらいという [...]
2021年11月27日 13:01
【Rails】IDとパスワードによる認証機能の実装【初学者】
# はじめに 大抵のWebアプリでは、ユーザー登録/解除、ログイン/ログアウトといった認証機能を持っています。Railsには簡単に認証機能を導入できる「device」というGemが用意されています。「devise」は多くのRailsアプリで使われ [...]
2021年11月27日 13:00