【Rails】 link_toの使い方をマスターして簡単にリンクを作成しよう！

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

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

HTMLでリンクを作成する際は、aタグを使いますが、railsでリンクを作成する時にはlink_toを使うのが一般的です。 link_toメソッドを使うと、以下のようにaタグにコンパイルされます。

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

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

link_toメソッドは、「aタグよりも簡単に書ける」や「railsに最適化したコードでaタグにコンパイルしてくれる」などのメリットがあります。

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

link_toの基礎情報

リンクをコピーしました

この章では、link_toメソッドのオプションや画像リンクの作成方法について解説します。

オプションの指定

リンクをコピーしました

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

method

リンクをコピーしました

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

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

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

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

target

リンクをコピーしました

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

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

class

リンクをコピーしました

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

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

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

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

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

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

リンクをコピーしました

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

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

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

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

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

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

リンクをコピーしました

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

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

画像にスタイルをつけたい場合は下記のように記述します。

1
<%= link_to image_tag('test.jpg', class: "クラス名"), 'パス' %>

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

リンクをコピーしました

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

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

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

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

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

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

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

Prefixとは？

リンクをコピーしました

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

コマンドを実行すると上のように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の引数として指定できます。

実際にlink_toメソッドを使ってみよう

リンクをコピーしました

この章では、手を動かしながらlink_toメソッドを使っていきます。自分の手で作成すると理解が深まりますので是非取り組みましょう。

環境構築の用意

リンクをコピーしました

それではlink_toを実際のアプリで使ってみましょう。

下記のコマンドを順に実行してみましょう。

1
2
3
git clone -b link_to https://github.com/miyagit/programan_dojo.git #1.リポジトリを複製する
cd programan_dojo #2.programan_dojoディレクトリへ移動
bundle install  #3.gemをインストール

上記のbundle installを実行した際にrbenv: version ‘2.4.1’ is not installedと表示された場合は、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)に書き換えてください。

最後に以下を実行します。

1
rails db:create && rails db:migrate && rails db:seed #4.データベース作成と初期データ投入

上記を実行すると「環境構築が完了しました。」と表示されるので、アプリケーションが動作するかrails sコマンドで起動しましょう。

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

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

リンクをコピーしました

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

リンクをコピーしました

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

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アクションを動かすためのパスを指定します。
rails routesコマンドで確認をしてみましょう。

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

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

それではusersのindex.html.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アクションが動くリンクになってしまったのでしょう？

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

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

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

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

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

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

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

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

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

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

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を下記のように編集してください。

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を下記のように編集してください。

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に変更してビューを表示させてみましょう。

このように表示中のページへのリンクが解除されているのが確認できますね！Ruby on Railsについては、複数人での開発体制やテストコードの書き方など実際の開発現場での役に立つこちらの参考書が良いでしょう。

役に立ったらSHARE♪

• twitter
• facebook
• はてブ