【Rails】レンダリング(renderメソッド)でアンカー指定を行う

2021年5月25日 12:26

はじめに

通常、Railsでアンカー付きのリクエストを発生させるにはredirect_toを使います。

redirect_to root_path(anchor: 'target')

では、renderでビューを表示させるときにアンカーを指定したいときはどうすればいいのでしょうか。renderredirect_toのような書き方はできません。

# 以下の書き方はできない
render :index(anchor: 'target')
render "index#target"

renderredirect_toの使い方やその違いについては以下の記事を参照してください。

アンカー指定が必要なケース

そもそも、renderでアンカー指定が必要なケースとはどのようなものでしょうか。よくあるのは、フォーム送信時にバリデーションエラーで元のページを再レンダリングするときです。

contact_controller.rb

class ContactsController < ApplicationController
  def sending
    @contact = Contact.new(contact_params)
    if @contact.valid?
      ContactMailer.send_mail(@contact).deliver_now
      redirect_to contact_done_path
    else
      render :index
    end
  end

  private
    def contact_params
      params.require(:contact).permit(:name, :email, :content, :confirm)
    end
end

renderの部分を抜き出すと以下になります。

contact_controller.rb (抜粋)

    if @contact.valid?
      ContactMailer.send_mail(@contact).deliver_now
      redirect_to contact_done_path
    else
      render :index
    end

バリデーションチェックの結果が真の場合はメールを送信し送信完了ページにリダイレクトしています。一方、バリデーションチェックの結果が偽の場合、フォームを設置しているページを再レンダリングしています。再レンダリングしたページでは@contact.errorsに格納されているエラーメッセージを使用するため、redirect_toではなくrenderを使う必要があります。

このとき、フォームをページ下部に設置している場合、再レンダリングでページ先頭に戻されるのはユーザーフレンドリーな設計とは言えません。ページ先頭ではなくフォームの先頭に再レンダリングしたいと考えるのが普通です。

レンダリングでアンカー指定

結論から言うとrenderでアンカー指定することはできません(renderはビューをレンダリングするだけでURLの変更は行わないため)。代わりにフォーム送信時のURL指定時にアンカーを指定します。

index.html.erb

<%= form_with model: @contact, url: contact_sending_path(anchor: 'form') id: 'form' do |form| %>
<%= form_with model: @contact, url: '/contact/sending#form' id: 'form' do |form| %>

index.html.slim

= form_with model: @contact, url: contact_sending_path(anchor: 'form') id: 'form' do |form|
= form_with model: @contact, url: '/contact/sending#form' id: 'form' do |form|

renderは新しいURLのリクエストを作成するわけではないので、フォーム送信時に指定したURLが再レンダリング後のページでも使用されます。当然、そのURLにアンカーが指定されているなら再レンダリング後のページでも機能します。

ちなみに、バリデーションチェックの結果が真の場合にリダイレクトされるURL、つまり送信完了ページのURLにもフォームで指定したアンカーが残りますが、送信完了ページに該当のID(今回は#form)が含まれない場合はアンカーは無視されます。ただし、表示されているURLはアンカー付きのままなので(/contact/done#form)、それが気になるならJavaScriptで削ってください。

まとめ

Railsの機能というより裏ワザ的なテクニックなので、知っている人はあまり多くないかもしれません。renderでアンカー指定する機会はあまりないかもしれませんが、知っておくとよりユーザーフレンドリーな設計のWebアプリにできるかと思います。

本記事を参考にしていただければと思います。

関連記事

【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