【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】Railsアプリのデバッグ《マルチデバイス篇》
# はじめに 近年のWebアプリはレスポンシブ対応が当たり前になっています。最低でもPCとスマートフォンに対応したデザイン、ときにはその中間のタブレットに対応したデザインなんかも作成する必要があります。 Webアプリの開発はPCを使って行う [...]
2021年5月23日 13:02
【Rails】Railsアプリのデバッグ《Better Errors篇》
# はじめに Railsアプリの開発中になんらかのエラーが発生すると、デフォルトでは以下のような画面が表示されます(画像をクリックすると拡大します)。 <a class="gallery" data-group="gallery" href [...]
2021年5月22日 19:42
【Rails】Railsアプリのデバッグ《byebug篇》
# はじめに Ruby on Railsに限りませんが、アプリの開発中にはエラーは付き物です。なにかしらのエラーが発生したときに、エラーの原因を特定しエラー箇所を修正することをデバッグと言います。Railsではデバッグの手助けとなる機能があらかじ [...]
2021年5月22日 15:30
【Rails】Bundler 2.2.x以降は開発者が適切なプラットフォームを追加する必要がある
# 事象 昔作ったRailsアプリを久しぶりに修正しデプロイしようとしたところ、以下のエラーが出力されました。 ```bash # 実行コマンド Running $HOME/.rbenv/bin/rbenv exec bundle ch [...]
2021年5月18日 16:18
【Rails】Webpackerと互換性のないNode.jsがインストールされているとエラー
# 事象 昔作ったRailsアプリを久しぶりに修正しデプロイしようとしたところ、以下のエラーが出力されました。 ```bash # 実行コマンド Running $HOME/.rbenv/bin/rbenv exec bundle ex [...]
2021年5月18日 15:04