【Rails初学者】Rails × jQuery × Axiosで、いいね・コメント機能のJSコードを読む備忘録

こんにちは。
rails初学者です。
Railsアプリでよく見かける「いいね機能」や「コメント投稿機能」。今回は以下のコードをもとに、JavaScript（jQuery + axios）でどうやってフロントを実装しているのかを理解したく、記録として残します。

機能概要

コードの意味

• 記事のコメント一覧を取得して表示する
• 新しいコメントを投稿する
• 「いいね済み」かどうかを取得してハートを切り替える

各関数の意味

① handleHeartDisplay

const handleHeartDisplay = (hasLiked) => {
    if (hasLiked) {
        $('.active-heart').removeClass('hidden')
    } else {
        $('.inactive-heart').removeClass('hidden')
    }
}

• hasLikedがtrueなら赤いハート（active-heart）を表示
• falseなら白いハート（inactive-heart）を表示
• hiddenクラスは非表示を意味するCSSクラスです（Tailwindなどでよく使われる）

---

② handleCommentForm

const handleCommentForm = () => {
    $('.show-comment-form').on('click', () => {
        $('.show-comment-form').addClass('hidden')
        $('.comment-text-area').removeClass('hidden')
    })
}

• 「コメントを書く」ボタンをクリックしたときに、テキストエリアを表示
• on('click')はクリックイベントをバインドするjQueryの記述

---

③ appendNewComment

const appendNewComment = (comment) => {
    $('.comments-container').append(
        `<div class="article_comment"><p>${comment.content}</p></div>`
    )
}

• コメントをHTMLとしてページの末尾に追加
• comment.contentはサーバーから返されたJSONの中身

ページ読み込み後の処理

document.addEventListener('DOMContentLoaded', () => {
  const dataset = $('#article-show').data()
  const articleId = dataset.articleId

• Railsビューに埋め込んだdata-article-idから記事IDを取得
• jQueryの$('#article-show').data()でdata属性を取得

---

④ コメント一覧の取得

axios.get(`/api/articles/${articleId}/comments`)
  .then((response) => {
    const comments = response.data
    comments.forEach((comment) => {
        appendNewComment(comment)
    })
  })
  .catch((e) => {
    window.alert('失敗しました')
    console.log(e)
})

• 非同期でコメント一覧を取得
• appendNewComment()を使って1件ずつ表示

---

⑤ コメントの投稿

$('.add-comment-button').on('click', () => {
  const content = $('#comment_content').val()
  if (!content) {
      window.alert('コメントを入力してください')
  } else {
      axios.post(`/api/articles/${articleId}/comments`, {
        comment: {content: content}
      })
        .then((res) => {
          const comment = res.data
          appendNewComment(comment)
          $('#comment_content').val('')
        })
  }
})

• コメントを投稿して、成功したらすぐに表示に反映
• .val()はフォームの値を取得/変更するjQueryの関数

---

⑥ いいね状態の取得

axios.get(`/api/articles/${articleId}/like`)
  .then((response) => {
    const hasLiked = response.data.hasLiked
    handleHeartDisplay(hasLiked)
  })

• ログインユーザーが「いいね済み」かどうかを取得して表示を切り替え

---

⑦ いいねボタンの動作

listenInactiveHeartEvent(articleId)
listenActiveHeartEvent(articleId)

• ハートを押したときの処理（別ファイル handle_heart.js に定義）

まとめ

関数名	役割
handleHeartDisplay	いいね状態に応じてハートを表示
handleCommentForm	コメント欄の表示切り替え
appendNewComment	新しいコメントをHTMLで追加
axios.get/post	コメント一覧取得・投稿・いいね取得
listenXXXHeartEvent	ハートのクリックイベント登録

---

おわりに（自分用メモ）

Rails × jQuery × axios の連携で、最低限のフロントエンドの動きはかなりシンプルに作れる。
特に「コメント一覧の取得・追加」「いいね状態の取得・切り替え」は実装パターンがほぼ決まってるので、今回のコードは今後も流用できそう。

• DOMContentLoadedでデータ取得・DOM操作の初期化
• axios.get/post → 非同期処理の基本形
• jQueryでイベント登録＋DOM操作 → 素早く動作確認できるので便利

今後使い回す前提で、モジュール分割・再利用しやすいように意識して書くこと。

※初学者のため、間違えていたらすいません