スライドショー

【Rails入門】link_toの使い方とオプションをわかりやすく解説!

Ruby on RailsのViewでは、リンクを作成するlink_toメソッドを、本当によく使います。しかし実際にlink_toを使おうとすると、以下のように、様々なところで引っかかってしまいます。

link_toの書き方を忘れてしまった…
link_toにクラスやパラメーターをつけたい!
画像にリンクをつけたい!

そこで今回は、link_toの以下の内容について解説します!

  • 【基礎】link_toとは
  • 【基礎】link_toの書き方
  • 【発展】link_toのオプション

この記事を読めば、link_toの使い方がまるっとわかります!

link_toとは

link_toメソッドは、メソッド名からもイメージできますが、リンクを作成するためのメソッドです。HTMLでリンクを作成するときは、<a>タグを使用します。一方、Railsでは、一般的にlink_toメソッドを使用します。

link_toメソッドを使用すると、

  • Railsにとって適切な形で<a>タグを出力できる
  • オプションを使用して、少しの記述で多くの<a>タグを出力できる

といったメリットがあります。

link_toの使い方

Scaffoldでlink_to_demoアプリを作成する

link_toの動作を確認しながら覚えるために、app/samurai/link_to_demoディレクトリを作成し、デモアプリを作成しましょう。

(1)以下の記事を参考に、Ruby on Railsをインストールします。

初心者でもかんたん!Ruby on Rails の開発環境の構築手順(Mac/Windows 両対応)
更新日 : 2019年8月9日

参照先の記事では「app/samurai/sample1」ディレクトリを作成することになっていますが、ここでは「app/samurai/link_to_demo」ディレクトリを作成しました。

(2)以下のコマンドを1行ずつ入力します。

rails generate scaffold Fruit name:string description:text
rails db:migrate
rails server

以上で、デモアプリが起動しました。scaffoldについては以下の記事で詳しく解説していますので、よかったら参考にしてみてください。

(3)ブラウザで「http://localhost:3000/fruits」にアクセスし、果物データをいくつか入れておきましょう。

rails-link-to01

基本的なリンクを作成する

それでは、link_toメソッドの説明をしましょう。link_toの基本的な構文は以下のとおりです。

<%= link_to '表示したい文字', パス %>

この記載から、以下のようなHTMLが作成されます。

表示したい文字

パスの部分は、大きく分けて2通りの記述方法があります。

リンク種別説明
内部リンクRailsで開発中のサイト(ここまでの説明でScaffoldで作成したサイト)のページを表示するためのリンクnew_fruit_path
外部リンク内部リンク以外のリンクhttps://ja.wikipedia.org/wiki/果物

内部リンクを作成する

内部リンクは、Railsで開発中のサイト(ここまでの説明でScaffoldで作成したサイト)のページを表示するためのリンクです。

今回のデモアプリの場合なら、新しい果物データを登録するページや、登録済みの果物データを削除するためのリンクが内部リンクです。link_toで内部リンクを生成する例は、app/views/fruits/index.html.erbファイルにあります。

以下のような記述がありますね。

<%= link_to 'New Fruit', new_fruit_path %>

この記述から、以下のように/fruits/new(新しい果物データを登録するページ)へのリンクが作成されます。

New Fruit

new_fruit_pathのほかにも、以下のような記述が使えます。

  • fruits_path
    erbファイルの記述:<%= link_to 'Index', fruits_path %>
    作成されるHTML:<a href="/fruits">fruits_path</a>
  • edit_fruit_path
    erbファイルの記述:<%= link_to 'Edit', edit_fruit_path(@fruit) %>
    作成されるHTML:<a href="/fruits/1/edit">Edit</a>
  • fruit_path
    erbファイルの記述:<%= link_to 'Show', fruit_path(fruit) %>
    作成されるHTML:<a href="/fruits/1">Show</a>

内部パスとして使える記述は、「rails routes」コマンドを実行したときの表示結果からわかります。

Running via Spring preloader in process 19515
    Prefix Verb   URI Pattern                Controller#Action
    fruits GET    /fruits(.:format)          fruits#index
           POST   /fruits(.:format)          fruits#create
 new_fruit GET    /fruits/new(.:format)      fruits#new
edit_fruit GET    /fruits/:id/edit(.:format) fruits#edit
     fruit GET    /fruits/:id(.:format)      fruits#show
           PATCH  /fruits/:id(.:format)      fruits#update
           PUT    /fruits/:id(.:format)      fruits#update
           DELETE /fruits/:id(.:format)      fruits#destroy

Prefix欄の表示に「_path」を付与したものを、内部リンクのパスに指定できます。ただし、URI Pattern欄に「:id」と表示されている場合は、内部リンクのパスで「fruit」のようにパラメータを指定する必要があります。

また、上で紹介した記述は、Verb欄が「GET」と表示されているモノだけですが、「GET」以外のモノでも、あとで説明するHTTPメソッドを指定することで、同様に使用できます。

外部リンクを作成する

外部リンクは、内部リンク以外のリンクです。たとえば、Wikipediaなど、自分のRails以外のシステムで動作しているサイトへのリンクが、外部リンクです。link_toで外部リンクを生成する例は、以下のとおりです。

参考

<%= link_to '果物 - Wikipedia', "https://ja.wikipedia.org/wiki/果物" %>

これを、app/views/fruits/index.html.erbファイルに追記すると、以下のような一般的なリンクを作成できます。

参考

果物 - Wikipedia

classやtargetを指定する

<a>タグでは、以下のようにclassやtarget="_blank"を指定することがあります。

果物 - Wikipedia

link_toでも、以下のように記述すると、classやtargetを指定できます。

<%= link_to '果物 - Wikipedia', "https://ja.wikipedia.org/wiki/果物", { :class => "outer", :target => "_blank"} %>

idもclassと同じように指定できますので、試してみてください。

パラメータを指定したリンクを作成する

次はパラメータを説明しましょう。app/views/fruits/index.html.erbファイルに、以下の記述があります。

<%= link_to 'Edit', edit_fruit_path(fruit) %>

これで以下のようなリンクを作成できます。

Edit

/1/の部分が特別な感じがしますね。この/1/を生成するために必要な情報をパラメータと呼びます。

今回の例では、「edit_fruit_path(fruit)」のカッコの中の「fruit」がパラメータです。fruitの正体を調べるために同じファイルの上の方を見てみるとfruitの正体が分かります。以下のように変数@fruitsの内容を1つ取り出したFruitオブジェクトでした。

<% @fruits.each do |fruit| %>

つまり、edit_fruit_pathにパラメータfruitを指定することで、そのfruit専用のリンク(特定の果物データを編集するページへのリンク)を作成しているのです。

データを削除するリンクを作成する

デモアプリからデータを削除するリンクも作成できます。app/views/fruits/index.html.erbファイルに、以下の記述があります。

<%= link_to 'Destroy', fruit, method: :delete, data: { confirm: 'Are you sure?' } %>

この記述からは、以下のようなリンクが作成されます。

Destroy

‘Destroy’以外は、ここまでに説明していなかった記述でした。

fruit

パスです。「href="/fruits/1"」のように、(削除する)果物データを指すURLになります。

method: :delete

上で説明した「bin/rake routes」コマンドの実行結果で、Verb欄に「GET」以外が表示されていたモノを利用するときは、method:を指定します。いきなり難しいですね!どういうことか説明しましょう。

実は、HTTP(ホームページなどデータをやり取りする方式)では、ブラウザからサーバーに対して様々な依頼を送信して、データやファイルをやり取りしています。代表的な依頼方式は以下のとおりです。

依頼方式(HTTPメソッド)説明
GETHTMLファイルや画像ファイルを取得する場合
POST文章や画像をブラウザから送信する場合
DELETEデータやファイルを削除する場合
PUTリソースの作成や置換
PATCHリソースの部分的な置換

このGET、POST、DELETEなどをまとめて、HTTPメソッドと呼んでいます。link_toでも、このHTTPメソッドを指定でき、DELETEを利用する場合に「method: :delete」と指定します。

なお、method:を書かない場合は、GETで依頼しています。

data: { confirm: 'Are you sure?' }

クリックするとデータが削除されるなど、誤ってクリックすると不利益を被るようなリンクを作成する際は、確認用のメッセージを表示することが推奨されています。

上記のように「confirm」を追加すると、リンクをクリックしたときに以下のようなメッセージが表示され、「OK」をクリックするとリンク先にアクセスできます(今回の例の場合は、データが削除されます)。

rails-link-to101

まとめ

link_toは、RailsのViewでリンクを作成するメソッドです。リンクがなければホームページではない、と言えるくらいですから、link_toがよく使われるのは当然ですね。Railsに慣れている人でも、簡単なlink_toは書けるものの、classやtargetはどうやって書くんだっけ?

確認用のメッセージを表示できたと思うんだけど…

となる方は、思いのほかいらっしゃいます。link_toに限らず、メソッドのオプションまでしっかり覚えることで、コーディングの時間をより短くすることができます。時間を短縮するならしっかり覚えましょう。

もちろん、この記事をいつでも表示できるようにブックマークに入れておいても、しっかり覚えたことになると思いますよ!それでは!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

侍テック編集部

侍テック編集部

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説