◆当サイトで人気のプログラミング教室のおすすめランキングはこちら!
プログラミングは独学では非効率で、時間を無駄にするリスクがあります。効率的なカリキュラムで学べるスクールを受講しましょう。

DMM WEBCAMP【マンツーマンサポート】1ヶ月短期集中でプログラミングを学ぶスクール
1ヶ月通い放題・メンター常駐の教室環境でプログラミングを学びたい方!
TechAcademyオンラインで開講しているプログラミングスクール
オンラインでどこでも学べる!/教室に行くのが忙しい人でも安心!
TECH::CAMP教養としてのITスキルを学べるスクール
Webデザイン/AI(人工知能)/IOS/Androidアプリ制作/VRを学びたい方!
DMM WEBCAMP PRO転職保証付き!エンジニアとして転職したい人におすすめ!
未経験からプロのエンジニアへ3ヶ月で転職する為のスクールです!
1月生募集中!当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP PROコース。
12月生は満員となっております。1月生募集に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

はじめに

RailsアプリケーションはWebアプリケーションですので、画面の移動は原則としてリンクです。

そのため、ビューファイルにリンクを埋め込めば良いのですが、ただHTMLを埋め込むのではなく、メソッドを埋め込んで実装するのが原則でしょう。

そんなときに利用するのが、link_toメソッドです。

おそらく、Railsアプリケーションを作っていく中での使用頻度としては、1、2を争うほど使っていくことになるメソッドとも言えます。

今回は、そんな身近で使い勝手のあるlink_toメソッドについて、詳しく解説していきましょう。

link_toを使えば、リンクを埋め込める

link_toを使えば、リンクを埋め込めます。HTMLで言うところ、「aタグ」を生成してくれるメソッドです。

例えば、もっとも単純な動きとしては、以下のようになります。
(ビューファイル)

<%= link_to 'Google Search', 'https://www.google.co.jp' %>

(出力されるaタグ)

a href="https://www.google.co.jp">Google Search</a>

上記のように、基本的には、表示上の文言と移動先のURLを設定することで、ブラウザ上でリンクとなるaタグを生成してくれます。

しかし、上記の使い方であれば、HTMLで固定リンクを記載するのと何ら変わりません。

link_toは、もっと柔軟に変化させられるポテンシャルを秘めているのです。

link_toでできること

link_toには、ただ決まったリンクを生成するだけではなく、代表的なものだけでも以下のような機能があるのです。

URLやパスを指定したリンクを生成する

前述で紹介した、link_toの基本です。もちろん、外部のURLだけではなく、内部の別ページのリンクも指定することができます。

また、Railsでは表示文言やURLを動的に生成することができますので、ただ固定リンクを張りつけるだけではありません。

ルーティングの名前でリンクを指定する

Railsの特徴的な機能の1つ「ルーティング」では、HTTPリクエスト(HTTPメソッド)とURLごとに、特定のアクションを行わせることができます。そして、その組み合わせに対して、「名前」を付けることができるのです。
※ルーティングについては、【Rails入門説明書】routesについて解説を参照してください

link_toは、その名前をリンクとして指定することができます。こうすることで、仮にルーティングが変わったとしても、ビューファイルを変更することなく、routesファイルを編集するだけで済みますので、メンテナンス性が向上します。

パラメータを渡すことができる

link_toでは、任意のパラメータを渡すこともできます。外部サイトへのアクセスで必要なパラメータはもちろん、自プログラムのアクションへ引数としてパラメータを渡して処理をするなど、応用範囲は広いでしょう。

多彩なオプションを付与できる

aタグでリンクを生成する場合、class指定やtarget指定、リンク先のMIMEタイプなどを指定することができます。link_toでも、同様の指定を行うことができますので、CSSでのスタイル設定なども容易です。

ブロックを使って複雑なリンクも作成可能

HTMLで作ることができるdiv全体のリンクや、アイコン表示なども、do~endブロックを使って表現可能です。

以上のように、link_toはaタグでできることをすべて表現でき、なおかつメンテナンス性も高めてくれます。もっともっと活用していきましょう。

コツコツ独学×スクールで実践。未経験からエンジニアに転職!【WebCamp卒業生インタビュー】

link_toの使い方

前述までに紹介したそれぞれの機能について、具体的な実装方法(使い方)を説明していきます。

テスト環境の準備

その前に、テスト環境を作って動作確認ができるようにしておきましょう。

scaffoldとbootstrapを使って、lt_testというアプリケーションを生成します。

1.以下のコマンドで、Railsアプリケーションのひな型を作成します。

> cd C:\Rails

> rails new lt_test

> cd lt_test

> rails generate scaffold User name:string email:string phone:string

> rake db:migrate

2.bootstrapのインストール
以下の2行をGemfileに追記してください。

gem 'bootstrap-sass', '~> 3.3.7'
gem 'sass-rails', '>= 3.2'

※sass-railsは、すでにGemfileに記載があれば、不要です

以下のコマンドでインストール

> bundle install

3.bootstrapの初期設定
以下の3ファイルを修正してください。
(app/assets/stylesheets/application.css)

 * -- commentout(delete"=")
 * require_tree .
 * require_self
 */

// -- bootstrap import -- add
@import "bootstrap-sprockets";
@import "bootstrap";

修正後、拡張子を「scss」に変更しておきます。

(app/assets/javascripts/application.js)

// Bootstrap add
//= require bootstrap-sprockets

(/app/views/layouts/application.html.erb)

  :
  <body>
    <div class="container">  <!-- add -->
      <%= yield %>
    <div>                    <!-- add -->
  </body>
  :

※なお、【Rails入門説明書】Bootstrapについて解説に詳細が記載されていますので、参照してください

4.テストデータの登録
サーバを起動し、ブラウザからテストデータを3件ほど登録しておきましょう。

> rails s</pre>
<pre>

(localhost:3000/users)

URLやパスを指定したリンクを生成する

まずは、link_toのもっとも基本的な使い方です。

この方法で使用する場合の基本的な構文は、以下になります。

link_to '表示する文字列', 'リンク先のURL(パス)'

冒頭でも紹介した通り、表示する(リンクになる)文字列と、移動先のURLを引数にします。

テスト環境のリスト表示画面に、冒頭で消化したGoogleへのリンクを追加してみましょう。

変更するのは、「app/views/users/index.html.erb」です。
(app/views/users/index.html.erb)

  :
<%= link_to 'New User', new_user_path %>
<br>                                                        <!-- (1) -->
<%= link_to 'Google Search', 'https://www.google.co.jp' %>  <!-- (2) -->

一番下のNew Userのリンクの下へ(1)(2)を追加します。((1)は見やすくするための改行です)

HTMLを確認すると、(2)の部分は、以下のように変換されています。

<a href="https://www.google.co.jp">Google Search</a>

同様に、内部リンクのパス指定も行えますので、それも試してみましょう。
(app/views/users/index.html.erb)

  :
<%= link_to 'New User', new_user_path %>
<br>                                                        <!-- (1) -->
<%= link_to 'Google Search', 'https://www.google.co.jp' %>  <!-- (2) -->
<br>                                                        <!-- (3) -->
<%= link_to 'Const New User', '/users/new' %>               <!-- (4) -->

(4)の指定で、Rails内の新規作成ページへ遷移します。

しかし、同じ新規作成ページでも、もともとあったものと記載方法が違っている点に注意してください。

Railsアプリケーションでは、基本的に(4)のような内部リンクの固定パス指定を行いません。それは、次で紹介するルーティングを利用するためです。

ルーティングの名前でリンクを指定する

Railsでは、ルーティングを使って各種ページへの遷移を管理しています。そのため、仮に内部的なディレクトリ構成の変更があった場合でも、routesファイルのみを修正することで対応することができるわけです。

このルーティングの設定には、名前を付けることができます。link_toは、その名前を使ってリンクを作ることができるのです。

ではまず、テスト環境のルーティングの設定を確認してみましょう。

> rake routes

上記のコマンドで、以下のようなルーティング設定の一覧が表示されます。(他にも表示されますが、今回必要な部分のみ抜粋しています)

    Prefix Verb   URI Pattern                Controller#Action
     users GET    /users(.:format)           users#index
           POST   /users(.:format)           users#create
  new_user GET    /users/new(.:format)       users#new
 edit_user GET    /users/:id/edit(.:format)  users#edit
      user GET    /users/:id(.:format)       users#show
           PATCH  /users/:id(.:format)       users#update
           PUT    /users/:id(.:format)       users#update
           DELETE /users/:id(.:format)       users#destroy
                     :

この中で、「Prefix」の部分が、ルーティングに付けられた名前です。(空欄のものは名前が付けられていません)

link_toは、この名前を使って、リンクを生成することができるのです。その場合の構文は以下のようになります。

link_to '表示する文字列', ルーティングの名前_path

名前をそのまま使うのではなく、「_path」を付与する点に注意してください。

実際のプログラムコードについては、すでにscaffoldが自動で生成してくれています。例えば、一覧画面の下に最初からあった「New User」のリンクは、以下のような記載になっているのです。
(app/views/users/index.html.erb)

  :
<%= link_to 'New User', new_user_path %>

前述しているルーティングのリストを見ると、新規作成画面である「/users/new」へのルーティングには、「new_user」という名前が付けられていますので、link_toでは、「new_user_path」と指定しているわけです。

こうすることで、仮にディレクトリ構成が変わったとしても、複数のビューファイル(index.html.erbなど)を修正する必要がないため、メンテナンス性が上がるわけです。

パラメータを渡す

「New User」以外の、行ごとに表示されているリンク「Show」「Edit」「Destroy」についても、ルーティングの名前を使ってリンクを生成しています。
(app/views/users/index.html.erb)

        :
    <% @users.each do |user| %>
      <tr>
        :
        <td><%= link_to 'Show', user %></td>
        <td><%= link_to 'Edit', edit_user_path(user) %></td>
        <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
        :

しかし、実際にはこれらのリンクは「New User」のように固定されているわけではなく、行によって表示されるURLが違っているのです。(ブラウザ上のリンクにカーソルを当てて、ブラウザの下端に表示されるURLを確認すれば、違っていることが分かります)

その行による違いを指定するために、パラメータを渡しているのです。

パラメータを渡す場合の構文は、以下のようになります。

link_to '表示する文字列', ルーティングの名前_path(パラメータ)

index.html.erbの例で言えば、Editリンク指定のルーティング名にある「(user)」です。

なお、このuserは、Entryオブジェクトと呼ばれるActiveRecordオブジェクトで、ルーティング設定の名前ではありません。

Entryオブジェクトは、アクションが定義されているコントローラで付与されているもので、リストの中のどのデータが指定されたのかの情報が格納されています。

ここで設定されているEntryオブジェクト「user」は、その上の「」のブロック引数「user」です。(可読性を考慮すれば、このブロック引数の名前はあまり良い例ではありません)
※インスタンス変数の「@user」は、コントローラのindexメソッドで取得しています

“未経験”でもたった1ヶ月で営業からエンジニアとして転職!『WebCamp』受講者インタビュー

ルーティングの名前は省略できる?

ここまでの説明を読んで、多くの人が「Show」と「Destroy」のリンクで設定されている「user」に疑問を持っていると思います。

「user」という指定だけで、「_path」が付与されていませんし、まるで、Entryオブジェクトだけの記載のようにも見えます。

じつは、この2か所の「user」は、「user_path(user)」の略なのです。

試しに、以下のように修正しても、正しく表示されます。
(app/views/users/index.html.erb)

        :
        <td><%= link_to 'Show', user_path(user) %></td>
        :

link_toのルーティング設定の名前を使ったURL指定では、「Show」と「Destroy」のようにID指定だけで生成されるURLは、Entryオブジェクトだけ記載しても良いことになっているのです。

なお、ID指定だけで生成されるURLというのは、ルーティング設定の「URI Pattern」が「モデル名の複数形の/:id」になっているものです。

外部リンクのパラメータ(クエリー)

内部リンクのパラメータについては、上述のようにハッシュで指定することで渡すことができますが、外部リンクの場合は、どうすれば良いのでしょうか。

例えば、Google検索した結果のURLとなる、以下のようなクエリー付きのリンクを生成させたいときの対応方法です。
「https://www.google.co.jp/search?q=Taro」

じつは、その場合のもっとも単純な方法は、URLの文字列を自分で作ることです。

ただし、この場合、名前で検索するリンクを「https://www.google.co.jp/search?q=Taro」と直接指定するのは、メンテナンス性が著しく落ちますので、「'https://www.google.co.jp/search?q=' + user.name」と、Entryオブジェクトから取得するようにすべきでしょう。

以下の(5)の行を追記することで、一覧の行ごとに名前でGoogle検索した結果のリンクを付けることができます。
(app/views/users/index.html.erb)

        :
        <td><;%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
        <td><%= link_to 'Google Search', 'https://www.google.co.jp/search?q=' + user.name %></td>     <!-- (5) -->
      </tr>
        :

HTTPリクエスト(HTTPメソッド)の指定

改めて、テスト環境のルーティング設定を見てみましょう。

    Prefix Verb   URI Pattern                Controller#Action
     users GET    /users(.:format)           users#index
           POST   /users(.:format)           users#create
  new_user GET    /users/new(.:format)       users#new
 edit_user GET    /users/:id/edit(.:format)  users#edit
      user GET    /users/:id(.:format)       users#show
           PATCH  /users/:id(.:format)       users#update
           PUT    /users/:id(.:format)       users#update
           DELETE /users/:id(.:format)       users#destroy
                     :

ここにある、ルーティング設定に名前が設定されていないものについて、どう設定するのでしょうか。

ポイントは、GETやPOST、DELETEといった、HTTPリクエスト(HTTPメソッド)です。

scaffoldで自動設定されるルーティングでは、URIが同じでGETリクエスト以外のものについて、名前が付いていません。これは、名前指定のURLでは、そのままでは「GETリクエスト」として処理されるからなのです。

つまり、GETリクエスト以外のルーティングについては、HTTPリクエストを指定してやる必要があるということになります。

そのときに使用するのが、「methodオプション」です。

実際に、テスト環境にあるDestroyのリンクは、そうした設定になっています。
(app/views/users/index.html.erb)

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

「user(= user_path(user))」でURLを指定し、methodオプションで、「:delete」を指定しているわけです。

確認ポップアップの表示

Destroyリンクのlink_toを、もう一度確認しましょう。
(app/views/users/index.html.erb)

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

Destroyリンクのlink_toには、dataオプションが設定されています。

この設定で、Destroyのリンクをクリックしたときに表示される、確認ポップアップを指定しています。そのときに表示される文言は、confirmオプションに渡している文字列です。

class定義

scaffoldは、最低限のひな型を作ってくれますが、残念ながらスタイルまでは対応してくれません。

そのため、事前にbootstrapを導入していますが、それでも勝手に設定してくれるわけではありません。

つまり、自分でスタイル設定しなければ、見た目を変えることはできないのです。(実際、ここまでに確認した一覧表示も、お世辞にもきれいなものとは言えないものだと思います)

そのため、CSSでスタイルを定義して、class設定していきましょう。class設定についても、link_toのオプションで対応できるのです。

テスト環境にスタイル設定をしてみましょう。

  :
<%= link_to 'New User', new_user_path, class:"btn btn-primary" %>
  :

ブラウザで読み込みなおすと「New User」のリンクがボタンになっています。("btn btn-primary"はbootstrapで定義されているスタイルです)

その他のオプション

link_toはオプション設定をすることで、ここまでに説明した以外にも柔軟な対応を行うことができます。

オプションを含んだ構文は、以下のようになります。

link_to '表示する文字列', URL [, オプション名: パラメータのシンボル, HTMLオプション名: パラメータのシンボル,,,]
link_to '表示する文字列', URL [, オプション => パラメータのシンボル, HTMLオプション => パラメータのシンボル,,,]
link_to '表示する文字列', URL [, オプション名: "パラメータ", HTMLオプション名: "パラメータ",,,]

※HTMLオプション設定は複数設定可能です。また、記載方法は、上記のどの書き方でも構いません

:オプション名 説明
:data DATA要素
:method HTTPメソッド(:get, :post, :put, :delete)の指定
:remote Ajaxでリンクを処理
:HTMLオプション名 説明
:name アンカー名
:href リンク先
:hreflang リンク先の言語コードを指定
:type 関連ファイルのMIMEタイプを指定
:media 関連ファイルの出力メディアのリンクタイプ
:rel この文章から見た、href属性で指定するリンク先の役割
:rev href属性で指定するリンク先から見た、この文章の役割
:charset 関連ファイルの文字コード
:shape ホットスポット領域の形状
:coords ホットスポットの形状の座標
:target 別ウインドウで表示する
:id 要素固有の識別子
:class 要素を分類するクラス名
:title 要素の補足情報
:style 要素の補足情報
:dir 表記方向
:lang 基本言語

ブロックを使って複雑なリンクも作成可能

div全体のリンクや、アイコン表示については、前述のオプションだけでは対応が難しくなります。そのため、link_toはブロックを使うこともできるようになっているのです。

その場合の構文は、以下の通りです。

<%= link_to URL [, オプション名: パラメータのシンボル, HTMLオプション名: パラメータのシンボル,,,] do %>
  リンクになるタグや文字列
<% end %>

ブロックを利用する場合、ブロック内がリンクになるため、link_toの第1引数は文字列ではありません。注意してください。

先ほど各行に追加したGoogle検索の要領で、電話番号の列に設定してみましょう。ここでは、電話番号の列に背景色を付けてみました
(app/views/users/index.html.erb)

        :
        <td><%= user.name %></td>
        <td><%= user.email %></td
        <td>                                                                  <!-- (6) -->
          <%= link_to 'https://www.google.co.jp/search?q=' + user.phone do %> <!-- (7) -->
            <div class="bg-success"><%= user.phone %></div>                   <!-- (8) -->
          <% end %>                                                           <!-- (9) -->
        </td>                                                                 <!-- (10) -->
        :

未経験から上京し、エンジニアとしてチームラボグループに転職!【WebCampPro卒業生インタビュー】

まとめ

今回は、Railsアプリケーションでリンクを生成するlink_toについて解説しました。

link_toは、Railsアプリケーションの画面遷移の基本で、使いやすさの重要なポイントでありますが、なによりメンテナンス性を決める要です。

Railsが用意してくれているルーティングの仕組みをうまく活用し、メンテナンス性の高いプログラムを作っていきましょう。

・link_toを使って、aタグを生成できる
・link_toのリンク先にルーティングの名前を利用するときは、名前に「_path」を付与する。
・Entryオブジェクトというのは、指定された行の情報を持つActiveRecordオブジェクト
・ID指定だけのURLはEntryオブジェクトの指定だけでURLを生成してくれる
・タグも含めてリンクにしたい場合は、ブロックを使う
・ブロックを利用する場合、文字列指定は不要

DMM WEBCAMP ONLINE/プログラミングコースについて

WEBCAMPでは、「どこでも学べる」オンラインコースを開講しています。

初心者・未経験の方でもわずか1ヶ月でプログラミングの基礎を学び、アプリケーション開発をすることができます。

DMM WEBCAMP ONLINEが選ばれる3つの理由

1.学習の仕方がわからなくても安心!初心者に寄り添った学習カリキュラム

これから学習を始める初心者の方や、独学で挫折してしまった方に向けて、アプリケーション作成をゴールとする一気通貫したカリキュラムを提供しています。2500名を輩出しているWebCampだからこその教室でのリアルな受講生の声を反映し、オンラインコースでも初心者に寄り添った学習体験をご提供いたします。

2.つまずいたらすぐ解決!プロのエンジニアに質問し放題

プログラミング学習で挫折する理由の多くは「つまずいた時に聞ける人がいない」ことです。オンラインコースでは、現役エンジニアやプロ講師に、すぐにチャットでの質問が可能です。つまずきをすぐに解消できるので、挫折せずに学習を継続することができます

3.1ヶ月間で終わらなくても大丈夫!カリキュラムは"卒業後"も"無料"で利用可能

受講したいけど、仕事が急に忙しくなるかもしれないから受講するか迷っている・・・そんな方も多いのではないでしょうか?ご安心ください。カリキュラムは期間終了後も「無料」で使うことができます。また、しっかり学習時間を確保した方も、振り返って学習することでプログラミングスキルがご自身に馴染んできます。

▼まずは無料でWEBデザインのカリキュラムを体験しよう!

【インタビュー】1ヶ月でRubyをゼロから学び、Webエンジニアとして転職!

ブラジルから帰国し技術をつけようとRubyエンジニアを目指してWebCampでRubyを学び、見事Webエンジニアとして転職を果たした田中さんにお話を伺いました。

Rubyの学習がしたい。基礎をしっかりと理解したい

転職のサポートがほしい

と考えている方はぜひお読み下さい。

【WebCamp卒業生インタビュー】1ヶ月でRubyをゼロから学び、Webエンジニアとして転職!

おすすめの記事