Railsで新規作成→確認画面→完了画面の順に実装したい

Question

前提・実現したいこと

以下写真のような新規作成→確認画面→完了画面の実装がしたいです。

現在は新規作成~完了までの流れは実装済みです。

問題は登録完了後にブラウザバックをすると作成中に以下のようなエラーメッセージが出てしまいます。

試したこと

エラー分通りRouting部分をPOSTではなくGETに変えました。

すると、以下のように新規作成時にエラーがでるので、

RoutingのConfirmにGETとPOSTを記述しました。

すると登録完了までは無事にできますが、完了後に再度ブラウザバックをすると以下のようなエラーがでます。

ここから先どうを進めて良いのか分からずに困っています。

ちなみにブラウザはChromeでもSafariでも同じエラーが出ます。

該当のソースコード

ソースコードは以下です。

config/routes.rb

Rails.application.routes.draw do
  root to: 'registrations#index'
  resources :registrations, only: [:index, :new, :create] do
    collection do
      get :confirm
      post :confirm
      get :finish
    end
  end
end

app/models/registration.rb

class Registration < ApplicationRecord
  validates :name, presence: true
end

app/controllers/registrations_controller.rb

class RegistrationsController < ApplicationController
  def index
    @registrations = Registration.all
  end

  def new
    @registration = Registration.new
  end

  def confirm
    @registration = Registration.new(registration_params)
    unless @registration.valid?
      flash.now[:danger] = "正しく入力してください。"
      render :new
    end
  end

  def create
    @registration = Registration.new(registration_params)

    if params[:back].present?
      render :new
      return
    end

    if @registration.save
      redirect_to action: :finish
    else
      flash.now[:danger] = "登録に失敗しました。"
      render :new
    end
  end

  def finish
  end

  private
  def registration_params
    params.require(:registration).permit(:name)
  end
end

app/views/registrations/new.html.erb

<%= form_with( model: @registration, local: true, url: {action: :confirm}) do |f| %>
    <h2>登録手続き</h2>
    <% if @registration.errors.any? %>
      <div id="error_explanation">
        <%= @registration.errors.count %>件のエラーがあります。
        <ul>
          <% @registration.errors.full_messages.each do |msg| %>
            <li><%= msg %></li>
          <% end %>
        </ul>
      </div>
    <% end %>

  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name %>
  </div>
  <div class="actions">
    <%= link_to '登録一覧へ', root_path %>
    <%= f.submit '確認する' %>
  </div>
<% end %>

app/views/registrations/confirm.html.erb

<%= form_with( model: @registration, local: true, url: {action: :create}) do |f| %>
  <h2>登録確認</h2>
  <%= hidden_field_tag :finish, true %>
  <%= f.hidden_field :name %>
  <div class="field">
    <%= f.label :name %>
    <%= @registration.name %>
  </div>
  <div class="actions">
    <%= f.submit '登録作成へ戻る', name: 'back' %>
    <%= f.submit '完了する' %>
  </div>
<% end %>

app/views/registrations/finish.html.erb

<h1>登録完了しました。</h1>
<p><%= link_to '登録一覧へ戻る', root_path %></p>

また以下が私の実装しているGitHubのリンクです。
https://github.com/yyytuit/confirm

補足情報

DBはMysqlです。
Railsのバージョンは5.2.4です。

Answer 1

実装したことがないので調べてみたところ、詳しく記載してある記事がありましたので共有します。

https://qiita.com/ngron/items/d55aac6e81a9fb2fe81c

---

個人的には確認画面だけのためにアクションを追加するのはやりすぎな感じがします。
そのため標準機能で補うのも一案かと思います。

data: {confirm: "この内容で登録しますか？"}

利点としては、一行で実装できることと、少し設定すればデザインをカスタマイズすることもできます。

---

参考：Railsガイド：確認ダイアログ
参考：railsでgithubみたいな確認ダイアログを簡単に設定する方法

Comments

[nyan_tech_24]

解答ありがとうございます。
そうですね。その上記実装は以前にやって、その時にエラーは出なかっと思います。
ただどうしても完了画面を見せたい要件がありまして、このような実装になっています。

[no1knows]

すいません。大切な完了画面の実装を見逃していました。
「ブラウザバックをクリックした時にどのページに遷移することを期待しているのか」
を質問に追記しておくと、実装経験のある方から答えをもらえるかもしれません。

ちなみに戻るボタンではなく、ブラウザバックは、サーバーサイド（Rails）の話ではないので、本来はJavaScriptなどで実装するほうが適切なアプローチのような気がします。（実際どうなんだろう）
またTurbolinksを利用しているとさらに複雑になるかもしれないですが・・・
https://teratail.com/questions/252619

[nyan_tech_24]

no1knowsさん、参考サイトありがとうございます。
参考サイトを拝見させていただいたのですが、JavaScriptがまだ未熟で、本件でどのように実装すればいいのか分からず手が止まってしまいます。
どこのページに以下を書くと動くようになるか、ご教示いただけないでしょうか？

```
$(function(){
history.pushState(null, null);
$(window).on("popstate", function (event) {
location.href = "任意のpath";
})
});
```

[no1knows]

> 「ブラウザバックをクリックした時にどのページに遷移することを期待しているのか」
とTurbolinks実装の有無を追記ください。

ちなみに書くのはapplication.jsなどで良いかと思います。
実装の際はどのコントローラーのどのアクションでそのコードを実施するか？といった内容も必要となります。

[nyan_tech_24]

no1knowsさん失礼しました。
> 「ブラウザバックをクリックした時にどのページに遷移することを期待しているのか」
とTurbolinks実装の有無を追記ください。

ブラウザバックなので、例えばブラウザバックすると以下のようにしたいです。

完了画面→確認画面
確認画面→新規作成画面
新規作成画面→ホーム

またTurbolinksは入れてません。

[no1knows]

個人的にこの実装はやめておいたほうが良いかと思います。
理由としては、仕様にかなり無理があるのとControllerの動きをきちんと把握できていない印象だからです。

まぁどうにか実装しようとしたらできるのでしょうが・・・ここに労力を割くのがもったいないです。

なぜ仕様に無理があるのかについて説明します。
完了画面→確認画面ですが、すでにデータをDBに保存した状態から確認画面に戻るわけですが、
戻った状態＝データは保存されていない状態が正しいということになるかと思います。
（戻った状態でブラウザを閉じた時にデータが保存されていたらユーザーからみるとよくわからない状態になるので・・・）
とするとそこでデータを削除して、さらに登録していた値をブラウザに保持させる必要がでてきそうです。
もちろんページ遷移時の操作（上記JavaScriptなど）も必要となるかと思います。
考えることも実装することも盛り沢山になってしまいます。

上記と下記のユーザビリティの違いはそんなにないような気がするので（まぁここは個人差がありますが・・・）標準的な実装をみやすくわかりやすくしてあげたほうが、あとからのエラーやバグに悩まされなくて良いと思います。

①Rails標準機能のdata: {confirm: "この内容で登録しますか？"}で確認ダイアログを表示させる
②保存完了時にflashメッセージを表示させる

参考：https://qiita.com/dice9494/items/2a0e92aba58a516e42e9

なんなら②のflashメッセージを画面いっぱいに表示させて数秒で消えるとかにしておいてもいいのかな・・・

[nyan_tech_24]

no1knows
回答ありがとうございます。
jsの件も考慮にいれながら、cookieを持たせるなど別のアプローチがないか検討します！