【Rails】link_toの使い方を徹底解説!

Rails

link_toとは

link_toはリンクを作成できるrailsのヘルパーメソッドです。
ビューファイルに記述できるメソッドになります。

link_toの使い方

link_toは下記のように記述します。

erb
1
2
3
<%= link_to "テキスト", "リンク先のパス" %>
<!-- 例 -->
<%= link_to "Yahoo!", "https://www.yahoo.co.jp/" %>

上の例だとコンパイルされた時に下記のコードになります。

html
1
<a href="https://www.yahoo.co.jp/">Yahoo!</a>

HTMLでリンクを作成する際はaタグを使います。
ですがrailsでリンクを作成する時にはlink_toを使うのが一般的です。
link_toを使うと下記のメリットがあります。

  • aタグよりも簡単に書ける
  • railsに最適化したコードでaタグにコンパイルしてくれる

ですのでrailsのビューでリンクを作成するときはlink_toを積極的に使いましょう。

オプションの指定

link_toには下記のオプションが用意されています。

オプション名 説明
method httpメソッドの指定
target リンク先のウィンドウの指定
class スタイルシートのclassの指定

method

httpメソッドを指定する時に使います。
何も指定しないときは「get」になります。
destroyアクションを動かしたいときはhttpメソッドはdeleteになりますね。
ですので下記のような記述になります。

erb
1
2
<!-- 例 -->
<%= link_to "削除", "/users/1", method: :delete %>

削除する時に確認フォームを出す時には下記のオプションを使用します。

erb
1
<%= link_to "削除", "/users/1", method: :delete, data: { confirm: "本当に削除しますか?" } %>

target

リンク先をクリックした時にどのウィンドウで開くのかを指定することができます。

説明
_blank ウィンドウを新規に開いて表示させる
_self 現在のウィンドウに表示させる

他にも種類はありますが、上の2つだけ覚えておけば良いでしょう。
何も指定しないときは「_self」となります。

class

link_toでコンパイルされるaタグにclassを指定させます。

erb
1
<%= link_to "トップページ", "/", class: "hoge" %>

このように記述すると下記のようにコンパイルされます。

html
1
<a href="/" class="hoge">トップページ</a>

同じようにしてidも指定することができます。

アイコンにリンクを作成してみよう

今までは文字のリンクを作成しましたが、アイコンに対してリンクを作成してみましょう。
例えばFont Awesomeのアイコンにリンクを貼る場合は下記のように記述します。

erb
1
2
3
<%= link_to "/" do %>
  <i class="fas fa-home"></i> トップページ
<% end %>

このように書くと下記のコードにコンパイルされます。

html
1
<a href="/"><i class="fa fa-home"></i> トップページ</a>

アイコンに対してリンクを作成する場合はこのようにブロックを使用すると覚えておきましょう。

画像のリンクを作成してみよう

画像をクリックした時のリンクを作成してみましょう。
link_toと同じヘルパーメソッドであるimage_tagを使います。

erb
1
<%= link_to image_tag('test.jpg'), 'パス' %>

内部リンクを作成してみよう

上の例であるyahoo!へのリンクは外部サイトへのリンクでした。
今回はPrefixを使った内部リンクの作成をしてみます。

今までは下記のように直接パスを指定していました。

erb
1
<%= link_to "Yahoo!", "https://www.yahoo.co.jp/" %>

またトップページへの内部リンクも下記のように記述していました。

erb
1
<%= link_to "トップページ", "/" %>

上のコードは下記のようにPrefixを使って書くことができます。

erb
1
<%= link_to "トップページ", root_path %>

Prefixとは?

Prefixはパスが代入されている変数のようなものです。
Prefixにどのパスが設定されているかは「rake routes」コマンドで確認ができます。

prefix
コマンドを実行すると上のようにPrefixが確認できます。
Prefixを使うときは末尾に「_path」と追記します。
prefixを確認するとルートパスを表す「/」というパスは「root」になっています。
なのでlink_toのパスを指定する場所には「_path」をつけた「root_path」を書いてあげれば「/」で指定した記述と同じになります。

パスにidが入っているときはidの情報が入っているインスタンスを引数として渡してあげることにより指定ができます。
例えばusersコントローラーのshowアクションを動かすときは通常のパスだと「users/"ユーザーのid"」になりますが、Prefixを使って書くと「user_path(@user)」のような記述になります。
上の「@user」はコントローラーで「@user = User.find(params[:id])」などで記述してあげれば@userの中にはそのユーザーのidも含まれているのでuser_pathの引数として指定できます。

Prefixはresourcesメソッドを使いルーティングを設定すれば自動で作成されます。
可読性をあげるためにもパスを指定するときにはPerfixを使用したほうがいいです。

実際に投稿フォームを作ってみよう

それではlink_toを実際のアプリで使ってみましょう。
下記のコマンドを順に実行してみましょう。
①git clone -b link_to https://github.com/miyagit/programan_dojo.git

② cd programan_dojo

③ bundle install
→ rbenv: version ‘2.4.1’ is not installed と表示された場合は、ruby -v と実行してください。

ruby -vと実行し出てきたversion(例: 2.3.1)と出てきたら、

vim .ruby-versionとし、
ruby -vで出てきた値(例: 2.3.1)に書き換えてください。

続いてvim Gemfileとし、ruby 2.4.1と書いてある部分をruby -vで出てきた値(例: 2.3.1)に書き換えてください。

④ rails db:create && rails db:migrate && rails db:seed

環境構築が完了しました。と表示されると、
本当にrails applicationが動作するかrails sコマンドで起動しましょう。

rails sを起動し、ブラウザでlocalhost: 3000と入力して下記のような画面が出てくれば環境構築完了です!

環境構築
このような画面が表示されば成功です。

アプリ内でコードを書いてみよう

それでは実際にコードを書いていきましょう。
link_toはビューで使うヘルパーメソッドなので練習でmainのtop.html.erbに記述をしてみます。
app/views/main/top.html.erbを開きましょう。

erb
1
2
3
<div class='p-top'>
    <p class='p-top__title'>今回の記事の目標:<%= @title %></p>
</div>

このような記述になっているので、2行目の下にユーザー一覧が表示されるリンクを作成してみましょう。
もう一度link_toの書き方をおさらいしておきます。

erb
1
<%= link_to "テキスト", "リンク先のパス" %>

上のように書くのでしたね。
今回は「ユーザー一覧」というテキストをクリックするとusersコントローラーのindexアクションが動くように指定したいので、「テキスト」の部分には「ユーザー一覧」が入ります。
「リンク先のパス」は内部リンクなのでPrefixを使い指定してみましょう。

Prefixを確認するには「rake routes」コマンドを使うのでした。
実際にターミナルで「rake routes」コマンドを入力してみましょう。

rale routes
確認すると「users#index」を動かすにはPrefixは「users」を指定すればいいことがわかります。

パスとして記述するには末尾に「_path」を追記するので下記のようなコードになります。
Prefixは変数のようなものなので、クオテーションで囲わないよう注意です。

erb
1
<%= link_to "ユーザー一覧", users_path %>

実際にapp/views/main/top.html.erbに書いて表示を確認してみましょう。

erb
1
2
3
4
<div class='p-top'>
    <p class='p-top__title'>今回の記事の目標:<%= @title %></p>
    <p><%= link_to "ユーザー一覧", users_path %></p>
</div>

このようにしっかりとリンクが作成されているはずです。

prefix
リンクをクリックし、ユーザー一覧が表示されるか確認してみましょう。

link_to
このように表示されればOKです。

ユーザーを削除するリンクを作成してみよう

次は今表示されているページでユーザーを削除するリンクを作成してみましょう。
まずは削除するアクションのdestroyをusersコントローラーに追加します。

ruby
1
2
3
4
5
6
7
8
9
10
11
class UsersController < ApplicationController
    def index
        @users = User.all
    end

    def destroy
        user = User.find(params[:id])
        user.destroy
        redirect_to users_path
    end
end

削除後はユーザー一覧を表示させたいので、redirect_toでusersコントローラーのindexアクションを動かすよう指定してあげます。
この時もprefixを利用して書くことができます。

次にこのdestroyアクションを動かすためのパスを指定します。
「rake routes」コマンドで確認をしてみましょう。

rake routes
users#destroyのPrefixを見ると何も書いてありません。
ということはPrefixでの指定はできないということでしょうか?
実は何も書かれていないのは省略されているからです。

ここだと空欄の上にある「user」が省略されている下の3箇所に入ります。
ちなみに一番上の空欄にはその上の「users」が入ります。
ですのでパスは「user_path("userのidが入ったインスタンス")」となります。

それではusersのindex.html.erbを編集してみましょう。

erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class='p-top'>
<table border="1" class= 'p-top__introduce'>
    <tr>
    <th>id</th>
    <th>名前</th>
    <th>年齢</th>
    <th>身長</th>
    <th>体重</th>
    <th>削除</th>
    </tr>
    <% @users.each do |user| %>
      <tr>
      <td><%= user.id %></td>
      <td><%= user.name%></td>
      <td><%= "#{user.age}歳" %></td>
      <td><%= "#{user.tall}cm" %></td>
      <td><%= "#{user.weight}kg" %></td>
      <td><%= link_to "削除", user_path(user) %></td>
      </tr>
    <% end %>
  </table>
</div>

パスの引数にはユーザーのidが入っている「user」という変数が入ります。
それではビューを確認してみましょう。

引数
このようにしっかりとリンクされています。
ではクリックをして実際削除されるか試してみましょう。
するとこんなエラーが出てしまいました。

エラー画面

usersコントローラーにshowアクションが定義されていないよというエラーです。
おかしいですね、destroyアクションを動かすはずなのになぜshowアクションが動くリンクになってしまったのでしょう?

ここでもう一度rake routesの結果をみてみましょう。

rake routes

確認すると同じパスが4つありますね。
ただよく見るとVerbの欄のhttpメソッドに違いがあります。

今回はhttpメソッドを何も指定しなかったのでデフォルトのgetメソッドでパスが送られ、その結果showアクションが実行されたというわけです。
ですのでもしユーザーの詳細ページ(showアクション)へのリンクを作成したいのであれば今のような記述でリンクを作成できます。

詳細ページへのリンク

ではdestroyアクションを動かす時のhttpメソッドを確認してみましょう。

httpメソッド

「DELETE」であることが確認できました。
ですのでlink_toのオプションでmethodにdeleteを指定してあげます。

link_toの部分を下記のように編集してください。

erb
1
<%= link_to "削除", user_path(user), method: :delete %>

そして一番下のユーザーの削除のリンクをクリックしてみましょう。

削除のリンク
しっかりと一番下のユーザーが削除されたでしょうか?
ただこれだと間違ってクリックしてしまった時でも削除されてしまいます。

できれば削除が実行される前に確認メッセージが表示されるとユーザーにとって優しいですね。
なので確認メッセージが出るようlink_toのオプションで設定してみましょう。
link_toの部分を下記のように編集をしてください。

erb
1
<%= link_to "削除", user_path(user), method: :delete, data: { confirm: "本当に削除しますか?" } %>

削除のリンクをクリックしてみましょう。

削除のリンク
このようにメッセージが出てるのが確認できればOKです。

unless_currentを使ってみよう

link_toの記述をlink_to_unless_currentとすると現在表示されているページへのリンクを無効にすることができます。
mainのtopページとusersのindexページに両方のリンクを作成してみます。

mainのtop.html.erbを下記のように編集してください。

erb
1
2
3
4
<div class='p-top'>
    <p class='p-top__title'>今回の記事の目標:<%= @title %></p>
    <p class='p-top__title'><%= link_to "トップページ", root_path %> <%= link_to "ユーザー一覧", users_path %></p>
</div>

usersのindex.html.erbを下記のように編集してください。

erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class='p-top'>
<table border="1" class= 'p-top__introduce'>
    <tr>
    <th>id</th>
    <th>名前</th>
    <th>年齢</th>
    <th>身長</th>
    <th>体重</th>
    <th>削除</th>
    </tr>
    <% @users.each do |user| %>
      <tr>
      <td><%= user.id %></td>
      <td><%= user.name%></td>
      <td><%= "#{user.age}歳" %></td>
      <td><%= "#{user.tall}cm" %></td>
      <td><%= "#{user.weight}kg" %></td>
      <td><%= link_to "削除", user_path(user), method: :delete, data: { confirm: "本当に削除しますか?" } %></td>
      </tr>
    <% end %>
  </table>
  <p class='p-top&#95;&#95;title'><%= link_to "トップページ", root_path %> <%= link_to "ユーザー一覧", users_path %></p>
</div>

ビューを確認してみるとどちらにもリンクが貼られているのが確認できます。

リンク


リンク

それでは両方のページの「link_to」を「link_to_unless_current」に変更してビューを表示させてみましょう。

ビューの表示

ビューの表示

このように表示中のページへのリンクが解除されているのが確認できますね!

まとめ

link_toはリンクを作成できるヘルパーメソッドです。 使うことによりコードを簡潔に書けたり、便利なオプションをつけることができます。