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

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

## 機能概要
コードの意味
- 記事のコメント一覧を取得して表示する
- 新しいコメントを投稿する
- 「いいね済み」かどうかを取得してハートを切り替える

## 各関数の意味
① handleHeartDisplay
```javascript
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
```javascript
const handleCommentForm = () => {
    $('.show-comment-form').on('click', () => {
        $('.show-comment-form').addClass('hidden')
        $('.comment-text-area').removeClass('hidden')
    })
}
```
- 「コメントを書く」ボタンをクリックしたときに、テキストエリアを表示
- on('click')はクリックイベントをバインドするjQueryの記述

-----
③ appendNewComment
```javascript
const appendNewComment = (comment) => {
    $('.comments-container').append(
        `<div class="article_comment"><p>${comment.content}</p></div>`
    )
}
```
- コメントをHTMLとしてページの末尾に追加
- comment.contentはサーバーから返されたJSONの中身

## ページ読み込み後の処理
```javascript
document.addEventListener('DOMContentLoaded', () => {
  const dataset = $('#article-show').data()
  const articleId = dataset.articleId
```
- Railsビューに埋め込んだdata-article-idから記事IDを取得
- jQueryの$('#article-show').data()でdata属性を取得

-------
④ コメント一覧の取得
```javascript
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件ずつ表示

------
⑤ コメントの投稿
```javascript
$('.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の関数

-------
⑥ いいね状態の取得
```javascript
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操作 → 素早く動作確認できるので便利

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

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