🦧

.html.erbでjQeuryのセレクタが競合しないように規約で守る

2025/03/05に公開

 概要.html.erbでjQeuryのセレクタが競合しないように規約で守る方法を示します。

 html.erb側でやること/app/views/users/index.html.erb
<div id="users_index">
  <button id="load_more">もっと見る</button>
  <div id="user_list">
    <% @users.each do |user| %>
      <p class="user_name"><%= user.name %></p>
    <% end %>
  </div>
</div>
.html.erb の一番外側のdivにidを入れる。

idの命名ルールはそのファイルのファイルパスのviews/以下のアンダースコア区切りで拡張子部分を除く。

 jQuery側でやること/app/javascript/users/index.js
$(document).on('turbo:load', function() {
  if ($('#users_index').length) {
    $('#users_index #load_more').on('click', function() {
      alert("もっと見るボタンがクリックされました！");
    });

    $('#users_index .user_name').on('click', function() {
      alert($(this).text() + " がクリックされました！");
    });
  }
});
セレクタ指定の際に必ずファイルパスのidで指定しネストにする。
ファイルパスを.jsと.html.erbで揃える。

 まとめこの規約に従うことで、以下の恩恵が受けれます。
jQueryの使用箇所を特定しやすい(不要になったときに消しやすい)
意図せずjQueryが不要な箇所に影響を及ぼさない
.erb + jQuery を使用する場合は、このルールを徹底することで保守性を高めることができます。
（この記事のサンプルコードは生成AIによって生成しており、動作確認を行っていません。ご了承ください。）

概要

html.erb側でやること

jQuery側でやること

まとめ

Discussion