Ruby on RailsのViewでは、リンクを作成する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をインストールします。
参照先の記事では「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」にアクセスし、果物データをいくつか入れておきましょう。
基本的なリンクを作成する
それでは、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メソッド） | 説明 |
|---|---|
| GET | HTMLファイルや画像ファイルを取得する場合 |
| POST | 文章や画像をブラウザから送信する場合 |
| DELETE | データやファイルを削除する場合 |
| PUT | リソースの作成や置換 |
| PATCH | リソースの部分的な置換 |
このGET、POST、DELETEなどをまとめて、HTTPメソッドと呼んでいます。link_toでも、このHTTPメソッドを指定でき、DELETEを利用する場合に「method: :delete」と指定します。
なお、method:を書かない場合は、GETで依頼しています。
data: { confirm: ‘Are you sure?’ }
クリックするとデータが削除されるなど、誤ってクリックすると不利益を被るようなリンクを作成する際は、確認用のメッセージを表示することが推奨されています。
上記のように「confirm」を追加すると、リンクをクリックしたときに以下のようなメッセージが表示され、「OK」をクリックするとリンク先にアクセスできます（今回の例の場合は、データが削除されます）。
まとめ
link_toは、RailsのViewでリンクを作成するメソッドです。リンクがなければホームページではない、と言えるくらいですから、link_toがよく使われるのは当然ですね。Railsに慣れている人でも、簡単なlink_toは書けるものの、classやtargetはどうやって書くんだっけ？
となる方は、思いのほかいらっしゃいます。link_toに限らず、メソッドのオプションまでしっかり覚えることで、コーディングの時間をより短くすることができます。時間を短縮するならしっかり覚えましょう。
もちろん、この記事をいつでも表示できるようにブックマークに入れておいても、しっかり覚えたことになると思いますよ！それでは！
