ページ遷移なしで「いいね！」のカウントを更新したい。

Question

プログラミング初心者です。Railsを学んでいます。

最近、remote: trueでAjaxを使った画面切り替えを学びました。

そこで表題通りのことをやってみようと思ったのですが、やはりページを更新しないと「いいね！」のカウントが増えない…

具体的に言うと、画面上の「いいね！」という文字（アイコンは使わない）をクリックすると、文字の横にあるカウント数（いいね！が押された総数）が１つ増える、ということをページの更新なしでしたいのですが、いまいち理解できていなくてどうすればいいのかわかりません。

以下に関わっていると思われるサンプルコードを示しますが、過不足がありましたらご指摘ください。ホントよくわかってません。

「いいね！」を置くページは特定のブログ記事のshowページとします。

※あくまで練習用・学習用のアプリケーションです。この例ではユーザー認証を省き、誰でも記事を1回見るごとに1回ずつ「いいね！」できるようにしています。

  has_many :likes, dependent: :destroy

  belongs_to :blog, counter_cache: :likes_count

  def show
    @blog = Blog.find(params[:id])
  end

views/blogs/show.html.erb

<span id="like-it">
  <span><%= link_to 'いいね！', blog_likes_path(@blog),method: :post, remote: true %></span>　　
  <span><%= @blog.likes_count %>件</span>
</span>

  def create
    @blog = Blog.find(params[:id])
    like = Like.create(blog_id: params[:blog_id])
  end

views/likes/create.js.erb

$("#like-it").html("<%= j(render 'like') %>")

views/likes/_like.html.erb

<span>いいね！しました。</span>
<span><%= @blog.likes_count %>件</span>

と、ここまで来てもうわかりません…
リンクの "いいね！" を押すと部分テンプレの "いいね！しました。" に切り替わるのですが、このままでは当然<%= @blog.likes_count %>は増えません。

リンクの "いいね！" を押すと "いいね！しました。" に切り替わるのと同時に、<%= @blog.likes_count %>を更新するにはどうすればいいのでしょうか。具体的に教えていただけると助かります。

Comments

[m.ts10806]

回答依頼出されるのは良いのですが、回答ついた後で出される場合はその回答でどこがどう分からなかったのかコメントいただけると追記できますのでお手間でなければ回答にコメントください。

Answer 1

DB上のカウントアップだけでhtmlの見た目がかわるわけではないので、同時にJavaScriptで見た目の数値もカウントアップをしてください。
Ajaxの戻り値で現在のカウント値を取得してその値を反映するのが確実ですね。

Comments

[Gr.]

mts10806さん
回答ならびに追記・修正依頼、ありがとうございます。
＞Ajaxの戻り値で現在のカウント値を取得してその値を反映する
これについて「Ajax, 戻り値」などで検索してみたのですがよくわかりませんでした。
具体的にどのように書けばよいのでしょうか。
参考にしたサイト（https://qiita.com/YuitoSato/items/94913d6a349a530b2ea2）では、ページ遷移せずにカウントを反映するのにたった1行のjs記述で済んでいるのですが、create.js.erbのrenderのうしろにどの部分の変数を持たせればいいのか、どう書けばいいのか、上記参考サイトはコード内に誤字も多く理解しかねている次第です。

[m.ts10806]

提示されたURLでもそうですが、テンプレートファイルに書いているため、結局のところ、その結果によりブラウザに出てくるコード（HTML,CSS,JavaScript）がどうなっているか、、、になってきます。
確かにこの記事ではj()をサーバーサイドの言語で実行した結果を返される情報をそのまま#like-buttonsに設定しているのでわかりにくいとは思いますね。
誤字等についてはコメントでいろいろ指摘されていて修正もされているのでおそらくちゃんと動くものとは思われます。

私自身、Rubyに明るいわけではなく、どちらかというとPHPの方なので同じような書き方が実現可能かどうかまではわかりませんが、処理言語やフレームワークが違うだけで考え方は同じはずなので、
ロジック的には同じで大丈夫なはずです。

これちなみにですが、Ajaxを実行している個所のJavaScriptの処理はどうなっていますか？
一般的には
https://qiita.com/zakiyamaaaaa/items/bdda422db2ccbaea60d9
上記のように
$.ajaxでurlを呼び出してそのリクエストを受け取ってサーバー側で処理し、その結果をレスポンスとして返してまたjavascript側で受け取り・・・という流れになります。
1.Ajaxで呼び出されているプログラムは何か
2.そのプログラムから何を返却して受け取っているか
が分かれば、進みそうに思います。

[Gr.]

返答ありがとうございます！
1.Ajaxで呼び出されているプログラムは何か
　―これはlikeコントローラーのcreateアクションということでいいのでしょうか。
2.そのプログラムから何を返却して受け取っているか
　―これは.createで１つ増やした後のlikes_countの値を変数に入れて返却すればいいのでしょうか。
すみません。お手数おかけしております。

[m.ts10806]

>1.Ajaxで呼び出されているプログラムは何か
>―これはlikeコントローラーのcreateアクションということでいいのでしょうか。

うーん。逆質問されても先に書いた通り、Rubyに詳しいわけではないのでわかりません。
Railのルーティングはよく分からないですが、例えば「 /Likes 」という
URLでアクセスされたらLikesControlerを呼び出す、みたないなルーティング設定がどこかにあると思いますので、
Ajax（JavaScript）から呼び出されているのは「 /Likes 」という
URLになると思います。
実際に、実行するとDB上の値がカウントアップされているのであれば仰っていることは正しいとは思います。

> 2.そのプログラムから何を返却して受け取っているか
　―これは.createで１つ増やした後のlikes_countの値を変数に入れて返却すればいいのでしょうか。

私が質問者さんのコメントの意図を正しくくみ取れているかわかりませんが、それで良いと思います。
実際はいろんな人がそのボタンを押すと思います。非同期である以上、画面遷移を伴いませんので、Aさんが画面を開いてボタンを押すまでの間に別のBさんやCさんが押してしまうことはあり得ると思います。
そのため単に1を加算するだけではなく、あくまでその押して更新された直後のカウント数を再度取得する必要があります（回答の後半に書いたのはそのような内容です）

[Gr.]

返答ありがとうございます！
わかりづらい質問の中、なんとか意を汲み取っていただき感謝いたします。
いただいた回答を参考に改めて調べなおしてみたいと思います。
素早く丁寧な対応、ありがとうございました！

[m.ts10806]

いえいえ。あまり具体的な回答ができずすみませんでした。
解決に向かいそうで何よりです