Q&A個別ページでのcomments.js TypeError修正

[komagata]

問題

Q&Aの個別ページにアクセスすると以下のJavaScriptエラーがConsoleに出る:

Uncaught TypeError: can't access property "classList", n is null
    comments.js:14
    comments.js:3

原因

comments.js が #comments.thread-comments.loaded 要素を querySelector で取得しているが、Q&Aページでは comments/_comments パーシャルを使わず独自の回答表示（.answer-content）をしているため、この要素が存在しない。結果として commentContent が null になり classList.remove でTypeErrorが発生。

修正

commentContent が null の場合に early return するガードを追加。Q&Aページのようにcomments構造が異なるページでは comments.js の処理をスキップする。

Summary by CodeRabbit

• バグ修正
  • コメント機能の安定性を向上させました。

[coderabbitai]

📝 Walkthrough

Walkthrough

app/javascript/comments.jsに、DOMContentLoaded ハンドラー内で#comments.thread-comments.loaded要素が見つからない場合に早期返却するガード句を追加しました。これにより、その要素の存在を前提とした後続のロジックが実行されるのを防ぎます。

Changes

コホート / ファイル(s)	サマリー
DOMContentLoaded ガード処理 app/javascript/comments.js	コメントコンテナが DOM に存在しない場合に早期返却するガード句を追加し、後続ロジックの不正な実行を防止。

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• fix: 折り畳まれたコメントへのアンカーリンクが効くようにする #9624: 同じapp/javascript/comments.jsのDOMContentLoaded ロジックを修正するPRで、メインPRではコンテナが存在しない場合の早期返却を追加し、検索されたPRではアンカー処理とコメント展開ロジックを追加している。
• コメントが存在していないのに"前のコメント"表記が出てしまうバグの修正 #8845: 両PRともスレッドコメントのDOM処理を修正するapp/javascript/comments.jsを対象としており、一方はコンテナが存在しない場合の早期返却を追加し、他方はコメントセレクターを.thread-comment:not(.loading)に限定している。

Suggested reviewers

• shibainurou
• okuramasafumi

Poem

🐰 DOM を優しくチェック、
ガード句で守る、エラーなし
早期返却でスムーズに—
安全なコードで、ぴょんぴょん！

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	タイトルはPRの主要な変更内容（comments.jsのTypeError修正）を明確に要約しており、開発者の視点から重要な変更を適切に表現しています。
Description check	✅ Passed	PRの説明はテンプレートに従い、問題、原因、修正内容を詳細に記述していますが、Issue番号、変更確認方法、Screenshotのセクションが欠落しています。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/comments-js-null-error

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (2)

app/javascript/comments.js (2)

77-98: 任意: より防御的なコーディングを検討

moreCommentButton に対してイベントリスナーを追加する前に、null チェックを行うとより堅牢になります。現在のガード句により、この要素が存在するページでのみここに到達するはずですが、予期しないDOM構造の変更に対する防御として有効です。

♻️ 防御的なチェックの提案

+ if (!moreCommentButton) {
+   return
+ }
+
  moreCommentButton.addEventListener('click', () => {
    const nextComments = []

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/javascript/comments.js` around lines 77 - 98, Add a defensive null check
before attaching the click handler to moreCommentButton: verify
moreCommentButton is non-null (and optionally is an HTMLElement) before calling
moreCommentButton.addEventListener, and return/skip if it's absent; keep the
existing logic inside the guarded block so variables and calls like setComments,
displayMoreComments, commentRemaining, incrementSize, and nextCommentAmount only
run when the element exists.

---

15-18: 任意: より明確な条件チェックを検討

querySelectorAll は空の NodeList を返す場合でも truthy なので、15行目の if (comments) は常に true になります。意図としては if (comments.length > 0) の方が意味的に明確です。ただし、現状の実装でも forEach は空の場合に何も実行しないため、機能的な問題はありません。

♻️ より明確な条件チェックの提案

- if (comments) {
+ if (comments.length > 0) {
    loadingContent.classList.add('is-hidden')
    commentContent.classList.remove('is-hidden')
  }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/javascript/comments.js` around lines 15 - 18, The current check uses the
NodeList variable comments (from querySelectorAll) in if (comments), which is
always truthy; update the condition to explicitly check for items, e.g. if
(comments.length > 0) (or Boolean(comments.length)), so the block that hides
loadingContent and shows commentContent only runs when comment nodes exist;
locate where comments is used alongside loadingContent and commentContent in
app/javascript/comments.js and replace the truthy check accordingly.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@app/javascript/comments.js`:
- Around line 77-98: Add a defensive null check before attaching the click
handler to moreCommentButton: verify moreCommentButton is non-null (and
optionally is an HTMLElement) before calling moreCommentButton.addEventListener,
and return/skip if it's absent; keep the existing logic inside the guarded block
so variables and calls like setComments, displayMoreComments, commentRemaining,
incrementSize, and nextCommentAmount only run when the element exists.
- Around line 15-18: The current check uses the NodeList variable comments (from
querySelectorAll) in if (comments), which is always truthy; update the condition
to explicitly check for items, e.g. if (comments.length > 0) (or
Boolean(comments.length)), so the block that hides loadingContent and shows
commentContent only runs when comment nodes exist; locate where comments is used
alongside loadingContent and commentContent in app/javascript/comments.js and
replace the truthy check accordingly.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: bf2d23ec-3bb1-4427-8d73-360e82bbaf25

📥 Commits

Reviewing files that changed from the base of the PR and between e90fcb6 and d5690da.

📒 Files selected for processing (1)

• app/javascript/comments.js

[github-actions]

🚀 Review App

URL: https://bootcamp-pr-9829-fvlfu45apq-an.a.run.app

Basic認証: fjord / (ステージングと同じ)
PR更新時に自動で再デプロイされます。