link_toでハマった話

概要

erbファイルに<%= link_to %>タグを書いたときハマった話

問題

リストを使ってカードUI風に実装する際、<li>内を全部リンク範囲にしたいことはよくある。 以下のソースは一見正しい実装に見えるが、実際は正しく動作しない(<a>タグが変なところにできる)。

  <ul>
    <% @array.each do |object| %>
      <li>
        <%= link_to object.url do %>
          <p><%= link_to object.title, object.url %></p>
          <p><%= object.description %></p>
        <% end %>
      </li>
    <% end %>
  </ul>

原因

これは<%= link_to %>がネストしていることが原因のようだ。

解決方法

そもそもカード全体がリンクになってるんだからタイトルを<a>にする必要はないと判断し、以下のように修正した。

  <ul>
    <% @array.each do |object| %>
      <li>
        <%= link_to object.url do %>
          <p><%= object.title %></p>
          <p><%= object.description %></p>
        <% end %>
      </li>
    <% end %>
  </ul>

Effective Ruby

Effective Ruby