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

##### ★先駆者様の記事を見ながら真似して実装してみました！↗︎
皆さんもぜひ参考にして下さい(^｡^)σ

https://qiita.com/nao0725/items/3ce5512500b38ea75431

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

#### 〜完成イメージ〜
何も入力してない時は、「年/月/日」が入る！
![スクリーンショット 2022-06-26 18.50.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2717077/e1e05359-1605-0955-fd51-545579e1d521.png)
日付指定後、検索ボタンを押すと、すると、、、
検索結果(投降数OTZ)が一瞬で出てくる(非同期通信すげぇ!!!)
![スクリーンショット 2022-06-26 18.50.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2717077/cfcc7cd7-cea1-3c7d-c728-45a69b08372b.png)

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

## 1.ルーティングの設定
ユーザーマイページに表記していくので、usersに対してネスト？して設定します。
イケてる風に言うと、親要素に対してネストをするのだ。
```php:routes.rb
   resources :users, only: [:index,:show,:edit,:update] do
     get "search_form" => "users#search_form"
   end
```

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

## 2.Controllerの設定
```php: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の設定
```php:_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言語にて記述
```php: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ページの
好きな位置に部分テンプレート記述をしてあげれば完成です！！！
```php:show.html.erb
<%= render 'search_form' , user: @user %>
```
```:※番外つぶやき編※ showと100回つぶやいていると
show(100) => しょー => ショー => ショウ〜 => 聖戦士ダンバインのショウ・ザマに辿り着く。
```

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

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