はじめに

インスタ風のアプリを作成している中で、Ralis側で繰り返し処理をしている箇所にJavaScriptでcssクラスをつけたり外したりする処理　などの実装に苦戦したので、実装方法を整理してアウトプットします。

やりたいこと

記事の一覧画面でAjaxを使って、いいねができるようにしたい

問題

show.htmlのようなpost_idが一意に決まっているようなページをJavaScriptで操作するのではなく、
index.htmlのようなpostがたくさん表示されているページから各ポストのidを個別に指定して操作していく実装がわからなかったです。

viewはこんな感じ

- @posts.each do |post|
  .card
    = image_tag post.user.profile.avatar
    = show_posttime(post)
    = post.user.username

    - post.images.each do |image|
      = image_tag image

    = post.caption
    = image_tag 'likeBtn'
    = image_tag 'unlikeBtn'

    = image_tag 'commentBtn'

    = link_to "https://twitter.com/intent/tweet?url=#{URI.encode_www_form_component(request.original_url)}&text=#{URI.encode_www_form_component(post.caption)}", rel: 'nofollow', target: '_blank' do
      = image_tag 'shareBtn'

postがたくさん吐き出されるので、
どのポストなのかJavaScript側にどう伝えたらいいかに悩みました。

やり方

方針

JavaScript側でも繰り返し処理を行う

hamlにid,classを追加する

- @posts.each do |post|
  .card.post-index{data: {post_id: post.id}}
    .
    .
    .
    = image_tag 'likeBtn', class: 'hidden', id: "likeBtn_#{post.id}"
    = image_tag 'unlikeBtn', class: 'hidden', id: "unlikeBtn_#{post.id}"

post-indexをidでなくclassにしているのは、javascript側で.post-indexがついている要素をeachで繰り返し処理をするため
Btnの出し分けは、javascriptでaddClass,RemoveClassを使って実行したいため、動的にidを付与

dataの使いどき

JavaScriptでHTMLを操作したいときにdata属性が便利
今回のケースのように個別の投稿からidを取得することもできる
今回は違う実装をしてしまったけど、Btnにdata属性を指定したら、クリックしたときにdata属性に付与したidを取得してリクエストに使うこともできる

具体的なdataの使い方

hamlで対象の要素にdata属性を付与する
haml: data: {post_id: post.id} => html: data-post-id="1"
=>javascript: dataset{postID: "1"}　という感じに変換される
jQueryでは$('.post').data()でdataの中身を取得できる

JavaScriptファイルを記述する

$(document).on('turbolinks:load', () => {
  $('.post-index').each(function() {    //hamlの繰り返しに対応して、eachの繰り返し処理を行う
    const dataset = $(this).data()    //thisはここでは繰り返しされているなかで出てきてる一つの要素
    const postId = dataset.postId

    axios.get(`/posts/${postId}/like`)   //リクエスト先のPathを動的に設定
    .then(response => {
      if (response.data.has_like === true) {  //バックエンド側のレスポンスとして、likeの有無を確認
        $(`#unlikeBtn_${postId}`).removeClass('hidden')
        $(`#likeBtn_${postId}`).addClass('hidden')
      } else {
        $(`#unlikeBtn_${postId}`).addClass('hidden')
        $(`#likeBtn_${postId}`).removeClass('hidden')
      }
    })

    $(`#likeBtn_${postId}`).on('click', () => {
      axios.post(`/posts/${postId}/like`)
      .then(response => {
        if (response.data.has_like === true) {
          $(`#unlikeBtn_${postId}`).removeClass('hidden')
          $(`#likeBtn_${postId}`).addClass('hidden')
        } else {
          $(`#unlikeBtn_${postId}`).addClass('hidden')
          $(`#likeBtn_${postId}`).removeClass('hidden')
        }
      })
    })

    $(`#unlikeBtn_${postId}`).on('click', () => {
      axios.delete(`/posts/${postId}/like`)
      .then(response => {
        if (response.data.has_like === true) {
          $(`#unlikeBtn_${postId}`).removeClass('hidden')
          $(`#likeBtn_${postId}`).addClass('hidden')
        } else {
          $(`#unlikeBtn_${postId}`).addClass('hidden')
          $(`#likeBtn_${postId}`).removeClass('hidden')
        }
      })
    })
  })
})

ポイントは繰り返し処理をすること
繰り返しをしないと1番上に表示するポストにだけJavaScriptが適用されてしまう
それ以外の記述は基礎的な感じ

一応Controller（バックエンド）の記載

class LikesController < ApplicationController
  before_action :authenticate_user!
  before_action :set_like, only: [:show, :destroy]

  def show
    # もしそのポストのlikeが存在したらtrue,しなければfalseを返す
    render json: {
      has_like: @like.present?
    }
  end

  def create
    like = current_user.likes.build(post_id: params[:post_id])
    like.save!
    render json: {
      has_like: like.present?
    }
  end

  def destroy
    @like.destroy!
    render json: {
      has_like: !@like.destroyed? #destroyをしてもpresent?で確認するとメモリ上のオブジェクトは残っているのでtureで返されてしまう
    }
  end

  private
  def set_like
    @like = current_user.likes.find_by(post_id: params[:post_id])
  end

end

そんなに難しいことはしてない
唯一特殊なのが、has_like: !@like.destroyed?の記述
has_like: like.present?で通したかったけど、destroy実行後もこの書き方だとtrueが返ってきてしまった
メモリ上オブジェクトが残ってしまうため、とのこと

おわりに

わりといろんなWebアプリでインデックスページでいいねができたり、コメントできたりするのが普通だと思うのでその実装方法を学べたのが良かったです。

view側での繰り返し処理をする場合のjavascriptの適用方法という感じで抽象化しても、色んな場面で使えそう。

本編には関係ないですが、data属性をうまく使うともっとJavaScriptの記述をシンプルにできた気がするので、今度はそのへんも深めていきたいと思います。