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

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】Webサーバー「Unicorn」の基本情報と実装方法
# はじめに Railsアプリを本番環境で稼働させるには、クライアントからのリクエストを捌くWebサーバーを導入する必要があります。WebサーバーはクライアントからのリクエストをRailsアプリに伝達し、Railsアプリで処理されたレスポンスをク [...]
2021年4月15日 12:17
【Rails】デプロイツール「Capistrano」の基本情報と実装方法
# はじめに アプリを本番環境にアップロードして誰でもアクセスできる状態にすることをデプロイと言います。デプロイで行うべきことは多岐にわたります。Railsアプリの場合で言えば、本番環境にアップロードすることはもちろんですが、Gemのインストール [...]
2021年4月14日 9:56
【Rails】Webpackerの基本情報と実装方法
# はじめに Rails 6からWebpackerが正式採用されました。Rails 5ではオプションで追加することができたWebpackerですが、Rails 6からは普通にアプリを作成するだけでWebpackerがインストールされ、必要な設定も [...]
2021年4月12日 14:36
【Rails】アセットパイプライン(Sprockets)の基本情報と実装方法
# はじめに Ruby on Railsにはアセットパイプラインという機能があります。アセットパイプラインは画像、CSS、JavaScriptといったアセットファイルを連結/圧縮することでRailsアプリを高速化します。また、より高級な言語で書か [...]
2021年4月11日 14:08
【Rails】Turbolinksの基本情報と実装方法
# はじめに Ruby on Railsにはページの遷移を高速化するTurbolinksという機能があります。Turbolinksは優れたJavaScriptライブラリですが、Rails 5からは標準で有効化されているため、Turbolinksを [...]
2021年4月10日 17:59