【Rails】戻るボタンの実装

スマホとかタブレットメインで使うアプリケーションは、画面の端っこをひゅって逸らすだけで戻れたりするから便利だけど、PCアプリケーションはそうはいかない。使いやすいアプリケーションを考えると、”どのページからでもどのページへも遷移できること”かなと思った。例えば、メニューバーがあるとか、ナビゲーションバーがあるとか。ただ、シンプルなアプリケーションでやたらと表示項目を多くすると逆にわかりにくくなる。
今回、僕はわりとシンプルなアプリケーションを作っているため、わかりやすく「戻るボタン」があるといいなと思い、実装してみたので書いていきます。

結論から言うと

<%= link_to '戻る', :back %>

以上です。これで簡単に前の画面に戻ることができる。

ただ、実際にこれを記述してうまくいくところもあれば、うまくいかないところもあった。

無限ループ

例えば、どんどん詳細ページの奥の方に入っていって、手前のページを３、奥のページを１とすると、３→２→１とページ遷移したあと、１のページにある戻るボタンを押すと上手く２のページに戻ってこれる。
しかし、２のページにある戻るボタンを押すと、構造上は前のページは３だけど、現２のページの前に表示していたのは１だから、１のページに遷移する。
無限ループの発生

複数ページ戻る

そこで複数ページ戻れるように記述する方法がある

<%= link_to '戻る', 'javascript:history.back()' %>

()の中は何ページ戻るのかを指定できる。例えば２ページ戻りたいときは、(−２)とする。

以上、戻るボタンの実装メモでした。

戻るボタンの範囲指定

ちなみに、link_to でページ遷移を実装する際、どの範囲をクリックするとlink_to の範疇に入るのか、ページ遷移がかなうのかを指定するのに、条件分岐する際のifと同様、do ~ end で指定することができる。例えば、今回の話でいうと、戻るボタンにアイコン画像を設定して、画像をクリックすると戻るボタンのlink_toタグが反応するように、その範囲を指定してみた。

<%= link_to :back do %>
  <div class="back-btn">
    <%= image_tag 'back-btn.png',class: "back-btn-icon" %>
  </div>
<% end %>

終わりに

今までアプリケーションを作っていく中でも、戻るボタンがあったらいいなとずっと思っていて、ようやく実装できた。アプリケーションの投稿とか編集のテストの過程で何回もページ遷移をしていたけど、これでかなり作りやすくもなったし、ユーザーにとっても使いやすくなったかなと。意外と簡単ですぐできたので良かった。