【Rails】指定日の投稿数を非同期通信化にて表示！

★先駆者様の記事を見ながら真似して実装してみました！↗︎

皆さんもぜひ参考にして下さい(^｡^)σ

なんですが、、、
真似しても中々実装できず、とても苦労したので、復習も兼ねてまとめてみます。
語彙力、コミュ力なしの期待値なし人材が書くので、耳にポテチ挟みながら見て下さいm(_ _)m

〜完成イメージ〜

何も入力してない時は、「年/月/日」が入る！

日付指定後、検索ボタンを押すと、すると、、、
検索結果(投降数OTZ)が一瞬で出てくる(非同期通信すげぇ!!!)

★難しいところだけピックアップ

1.ルーティングの設定

ユーザーマイページに表記していくので、usersに対してネスト？して設定します。
イケてる風に言うと、親要素に対してネストをするのだ。

routes.rb

   resources :users, only: [:index,:show,:edit,:update] do
     get "search_form" => "users#search_form"
   end

「search_form」にしている理由としては
「search」にすると別のファイルの「search」と勘違いしちゃいそう(機械様側が)
なので「form」をつけています。ネーミングセンスはこれから磨きたいです。。。

2.Controllerの設定

users_controller.rb

    @user = User.find(params[:user_id]) ###①
    @books = @user.books.where(created_at: params[:created_at].to_date.all_day) ###②
    render :search_form ###③

〜〜〜〜〜〜〜〜〜〜〜〜
#① rails routesより、、、

• Controller#Action => users#search_form
• Prefix => user_search_form ,Verb => GET
• URI Pattern => /users/:user_id/search_form(.:format)
  となっているので、(params[:user_id])が必要

#②
@user.books.where =>ユーザーが投稿した本のデータを捜せぃ！
created_at: params[:created_at].to_date.all_day =>ユーザーが今まで(to_date.all_day)投稿した(created_at)データ(params?)をcreated_at:に格納！？
そのデータを@bookに格納！！！

#③
render :search_form => すぐにsearch_formのViewへ飛ぶのじゃ！
〜〜〜〜〜〜〜〜〜〜〜〜
とゆう認識でいましたが、間違っていたらすいませんm(_ _)m

Viewの設定

_search_form.html.erb

<div class='col-md-5'>
  <%= form_with url: user_search_form_path(user), method: :get, class: "row justify-content-center", local: false do |f| %> ###❶
    <div class="col-auto">
      <%= f.date_field :created_at, class: "form-control" %> ###❷
    </div>
    <div class="col-auto">
      <%= f.submit "検索" , class: "btn btn-primary"%>
    </div>
  <% end %>
</div>
<div class="search_form_table"> ###❸
</div>

〜〜〜〜〜〜〜〜〜〜〜〜
#❶ => local: falseとすることで、非同期通信が行われる。

※よくわかる解説はこちら↓

https://railsdoc.com/page/form_with
こちらのRailsドキュメントにオプション一覧が記載されているが
ここの説明によると「リモート送信の無効（デフォルトはfalse）」とのこと。
要するに、、、
local: trueを入力していない場合、非同期通信(Ajaxによる通信)が行われる。
local: trueを入力すれば、非同期通信をキャンセルし、HTMLとしてフォームの送信が可能になる。

#❷ => このフィールドで年/月/日が表示されます。(先駆者様の引用{喜})

《ここが一番重要だと思われます！》

#❸ => "search_form_table"と定義しているが、これが非同期通信を使用する鍵となっていると推測している。
view/usersの中に「search_form.erb」ファイルを作成。
非同期通信に必須なJavaScript言語にて記述

search_form.erb

$('.search_form_table').html(` ###１
  <h2>検索結果</h2>
  <div class="card" >
    <div class="card-header">投稿数</div>
    <div class="card-body">
      <%= j( @books.count ) %> ###２
    </div>
  </div>
`)

#１
div class属性としたので、「.search_form_table」と記述し
この部分がどうなってほしいか今まで通りのhtml風で記述していく。

#２
JavaScriptの「j」をかっこよく記述し、
controllerで記述した「@books」をcountしていく！
これで投稿数がカウントされて出力されるんですね！？
〜〜〜〜〜〜〜〜〜〜〜〜

controllerのrenderにて「search_form」を指定することで
このファイルが呼び出され、非同期通信風？になっているんですね！
※間違っていたらすいません m(_ _)m

〜〜〜〜〜〜〜〜〜〜〜〜
最後にユーザーマイページに表記していくので、showページの
好きな位置に部分テンプレート記述をしてあげれば完成です！！！

show.html.erb

<%= render 'search_form' , user: @user %>

※番外つぶやき編※ showと100回つぶやいていると

show(100) => しょー => ショー => ショウ〜 => 聖戦士ダンバインのショウ・ザマに辿り着く。

さいごに思いの丈を、、、

過去に学習していた非同期通信は「remote:true」でやるとゆう固定概念でしたが
local: false とすることでも実装できると学びました！
プログラミング学習を始めて1ヶ月経ちますが、猛勉強して早くイケてる人材になれたらなと願うばかりです↗︎

こちらのQiitaの書き方などアドバイス等ありましたら、ぜひご教示下さいませ OTZ