A Little Each Day

note to self

Railsのlink_toメソッドの使い方

こんにちは。本日はRailsでリンク化するために使われるlink_toメソッドの使い方についてです。

基本的な使い方はもちろん、ちょっとした応用テクニックも紹介したいと思います。

バージョン

Ruby '2.3.1'
Rails '4.2.1'


文字列

まずは基本、文字列をリンク化するパターンです。

引数に表示したい文字列とリンクのパスを渡します。

class名を指定する場合、最後にハッシュでclass名を書きましょう。

<%= link_to "表示したい文字列", リンクのパス, class: "クラス名" %>


<%= link_to "Home", root_path, class: "home" %>


この辺は基本中の基本ですね。


methodオプション・dataオプション

HTTPメソッドを指定したり、確認メッセージを出すために、それぞれmethod・dataオプションを追加できます。

<%= link_to "表示したい文字列", リンクのパス, method: 種類, data: { confirm: "メッセージ" } %>


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


ユーザーにダイアログを表示したいときに使えますね。


unless_current

unless_currentは、もしも現在のページだったらリンク化しないようにできるメソッドです。

<%= link_to_unless_current "文字列", root_path %>


<%= link_to_unless_current "Home", root_path %>


地味に便利な機能ですね。


画像

意外と戸惑う?画像も文字列と同様でlink_toの引数に表示したい画像のパスとリンクのパスを渡します。

こちらもclass名を指定するときは最後にハッシュで指定してあげましょう。

<%= link_to (image_tag("画像のパス"), リンクのパス, class: "クラス名") %>


<%= link_to(image_tag("hoge.png"), リンクのパス) %>


carrierwaveの場合

<%= link_to image_tag post.picture.url(:thumb) %>


普通の画像の場合はきちんとクォーテーションで括りましょう。


入れ子でリンク化する

これが結構つまずく人が多い、投稿一覧ページなどでサムネイルと文字が一緒に表示されている場合でブロックをリンク化するパターン。

画像と文字列がセットになっていて、もしもレスポンシブ対応する場合、タップしやすいようにと画像と文字列のあるリスト全体をリンク化したい場合がありますよね?

f:id:chi_kun:20160617223144p:plain


このようなレイアウトパターンは以下の様なソースコードであることが多いと思います。

<ul class="posts">
  <li>
  <%= image_tag post.picture.url(:thumb) %>
  <span class="post"><%= link_to post.title, post %></span>
  <span class="content"><%= post.content %></span>
  </li>
</ul>


※今回はわかりやすくするためレイアウト調整やリファクタリングをしていません。


上記のような問題の解決策として様々な対処法がありますが、一番簡単なのは要素をブロックで囲む方法です。

<%= link_to リンクのパス, class: "クラス名" do %>
  <%= 画像とか %>
  <%= テキストとか %>
<% end %>


これで複数の要素をまとめて簡単にリンク化することができます。

上記のソースコードを例として見てみましょう。

<ul class="posts">
  <%= link_to post do %>
    <li>
    <%= image_tag post.picture.url(:thumb) %>
    <span class="post"><%= post.title %></span>
    <span class="content"><%= post.content %></span>
    </li>
  <% end %>
</ul>


これでリスト全体をリンク化することができました。


ちなみにアイコンでよく使うfont-awsomeをリンク化する場合も同様に入れ子にします。

<%= link_to new_post_path do %>
  <i class="fa fa-pencil-square-o">新規投稿</i>
<% end %>


ちょっと見づらいですが...

f:id:chi_kun:20160408222445p:plain


きちんとfont-awesomeのアイコンがリンク化していますね。



本日は以上です。