checkboxでいい感じに、絞り込み検索してみた(Javascript備忘録) #JavaScript

はじめに

ransackで、全件一覧表示を消してみた(備忘録)でも紹介していましたが、ransackというgemとJavaScriptを用いて、検索機能を実装した際に（勘違いして）いろいろ試したので、備忘録として残します。
【注意！】
※JavaScriptの知識は、Progate1周程度。
※ビュー＆コードは、一部加工しています。（そのままコピペでは、動きません。）

環境

Rails 6.1.2
jquery 3.6.0

完成イメージ

・一覧テーブルがあり、2つのチェックボックスをクリックすると、絞り込み表示される
　（データは、CSVファイルにあり。ransackで一覧表示＆キーワード検索を実装。そこからチェックボックスで絞り込み表示させる）

・一覧ページ

・②をチェック後の一覧ページ

勘違いしたところ

①Railsで定義した変数をJavaScriptへ渡す

データはCSVファイルに入っていて、ransack実装済みなのに
以下の内容を試していて、時間がかかる。
・ransackで、全件一覧表示されているビューを消す
・gonを導入（Railsで定義した変数をJavaScriptへ渡すことができるGem）
・gonを用いて、実装

②ransack検索とは別に、新たにJavaScriptでCSVファイルを読み込む
・JavaScriptで、CSVデータを読むこむ方法を調べる

大きくこの2つで、かなりの時間を費やしました

アドバイス頂いた内容

行き詰まったので、メンターさんに度々アドバイスいただきました！
このアドバイスのおかげで、軌道修正できました。

①チェックボックスをクリックした際にコンソールに出力
②チェックの入っている値を取得
③チェックの入っている値のみ表示するようにする関数を作る

③が上手く実装できなかったので、さらに詳細なアドバイスを頂きました。
④tableタグの中のtrタグに各行のデータが入っている。trタグを全て取得し，それぞれについて，値部分を取得して配列に含まれているかどうかを判定して表示・非表示を対応する
trタグの中にデータがあるんだ！！と感動しました。（かなり知識浅く、すみません。）

苦戦したところ

③、④のtrタグの値を取得して、そこからの処理がどうすればよいのか？かなり苦戦しました。
（いろんなJavaScriptの記事を読みましたが、コードの理解が出来ず、1つ1つググりながらの実装だったので時間がかかりました。）

実装のポイント

①デフォルトで、チェックボックスに☑させる

<label><input class="checkbox" type="checkbox" name="〇〇" value="①" checked> ①</label>

checkedを入れることにより、デフォルトで☑できます。

②チェックボックスをクリックすると処理が開始

$(".js-filter-form :checkbox").on("click", function(){

}

③チェックボックスに☑した値を配列に追加

  //空の配列を作成
  var checked = [];
  $(".js-filter-form :checked").each(function(){
    // チェックボックスにチェックした値を配列に追加
    checked.push($(this).val());

④全てのtrを取得し処理

$('#list tbody tr').each(function(){
      // html要素を取得
      var txt = $(this).find("td:eq(0)").html();
      // ①と②にチェックが入ると表示、チェックを外すと非表示できるよう条件分岐
      if(txt.match(checked[0]) || (checked[1])){
　　　　　//表示
        $(this).show();
      }else{
　　　　　//非表示
        $(this).hide();
      }
    });

最終コード(一部編集しております。Bootstrapは外しています。)

index.html.erb

<div>
  <h1>タイトル</h1>
   　<form class="js-filter-form :checkbox">
        <label><input class="checkbox" type="checkbox" name="〇〇" value="①" checked> ①</label>
        <label><input class="checkbox" type="checkbox" name="〇〇" value="②" checked> ②</label>
     </form>
     <%= search_form_for @q do |f| %>
　　　<%= f.label :title_cont, "タイトル" %>
     <%= f.search_field :title_cont　%>
　　　<%= f.label :content_cont, "キーワード" %>
　　　<%= f.search_field :content_cont %>
     <%= f.submit "検索" %>
     <% end %>
    <div>
  <body>
<div>
  <table id="list">
    <thead>
      <tr>
        <th>ジャンル</th>
        <th>タイトル</th>
      </tr>
    </thead>
    <tbody>
      <% Railsの変数(複数形).each do |単数形| %>
        <tr>
          <td><%= 単数形.①②を示すジャンル %></td>
          <td><%= 単数形.タイトル %></td>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>
</div>
<script>
$(".js-filter-form :checkbox").on("click", function(){
  var checked = [];
  $(".js-filter-form :checked").each(function(){
    // チェックボックスにチェックした値を配列に追加
    checked.push($(this).val());
    });
    // 全てのtrを取得
    $('#list tbody tr').each(function(){
      var txt = $(this).find("td:eq(0)").html();
      // ①と②にチェックが入ると表示、チェックを外すと非表示できるよう条件分岐
      if(txt.match(checked[0]) || (checked[1])){
        $(this).show();
      }else{
        $(this).hide();
      }
    });
});
</script>
</body>

まとめ

実際に実装すると、想像以上に難しく感じました。
しかし、JavaScriptを学習できて、楽しかったです！（いろいろアプリ作ってみたいです。）
今回の反省点は、３つ。
①「質問しないこと＝自走力」ではないので、「何日も悩んでいることは、質問する」こと
②時間は有限なので、時間を区切ってスピード意識してすすめること
③メンターさんの時間を奪わないように、質問内容をはっきりすること
度々、質問に対応して頂いたメンターさんに感謝です。
コードについて、アドバイス等ございましたらコメント頂けると幸いです。

checkboxでいい感じに、絞り込み検索してみた(Javascript備忘録)