Railsで戻るボタンを実装する方法を現役エンジニアが解説【初心者向け】

初心者向けにRailsで戻るボタンを実装する方法について現役エンジニアが解説しています。Railsで戻るボタンを実装するには、link_toのリンク先を:backに指定します。後はButtonタグやCSSでボタン風に装飾すると完成です。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

Railsで戻るボタンを実装する方法について解説します。

Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。

田島悠介

今回は、Rubyに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

Railsで戻るボタンを実装する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

戻るボタンとは

ブラウザの戻るボタンクリックや、スマホでスワイプすると前のページに戻ることができますが、ウェブページ内に前のページに戻るボタンを設置することができます。

Railsで戻るボタンを実装する方法

Railsで戻るボタンを実装するには、link_toのリンク先を :backに指定することで実現可能です。

 

= link_to "戻る", :back

 

ですが、これだけではただのリンクとなるため、ボタンにするには<button>タグと組合せたり、CSSでボタン風の装飾をするなどの工夫が必要です。

[PR] Rubyのプログラミングで挫折しない学習方法を動画で公開中

実際に書いてみよう

<button>タグと組合せて書いてみましょう。

link_to メソッドはlink_to “表示テキスト”, “リンク先” のように、表示テキストとリンク先を引数で指定できます。

今回のように「戻るボタン」に対してリンク先を指定したい場合にはlink_to “リンク先” do とすることでdo以降の内容に対してリンクを設定することができます。

 

<%= link_to :back do %>
  <button>戻る</button>
<% end %>

 

CSSでボタン風の装飾をする方法はここでは解説しませんが、background-colorやborder、border-radiusなどを適切に指定すればボタン風にすることができますので、興味のある方は挑戦してみてください。

筆者プロフィール

メンター稲員さん

フリーランスエンジニア。
大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語:Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。
おうち大好きマンです。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも最短4週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。