この記事はCodeRabbit オンラインワークショップ「AIコーディングエージェント連携」用の資料です。
前半（CodeRabbit Appのセットアップ）
CodeRabbit Appのセットアップです。OSS版は、以下の手順でアプリとリポジトリを接続します。
- RabbitKanbanをフォークします
- GitHub Marketplaceを開きます
- Addボタンを押して、一番下の
Open Sourceを選択します - Accountは先ほどRabbitKanbanをフォークした組織を選択してください
-
Allow my billing information to be linked with this organizationをチェックして、進めます - 対象リポジトリは、All repositories または RabbitKanbanを選択してください（後で変更も可能です）
インストール後にCodeRabbitのダッシュボードに遷移します。ここで該当リポジトリが表示されていれば完了です。
フォークしたリポジトリを自分のPCにクローンしてください。
後半
修正済ファイル をダウンロード&伸張して、ファイルをすべて先ほどクローンしたリポジトリのファイルと差し替えます。
一応動いているのは分かるかと思います。
修正後
埋め込んだ初学者ミス一覧
| # | ファイル | 場所 | バグ内容 |
|---|---|---|---|
| 1 | search-filter.js | setSearchKeyword() |
searchKeyword = keyword.toLowerCase() の後で keyword = keyword.trim() しているため、trim結果がローカル変数にしか反映されない（前後の空白が残る） |
| 2 | search-filter.js | shouldShowCard() |
card.content を小文字化せずに includes() しているため、大文字小文字を区別しない検索が機能しない（"Task"を入力しても"task"を含むカードがヒットしない） |
| 3 | ui-renderer.js | highlightSearchText() |
keyword を正規表現の特殊文字としてエスケープしていないため、"."を入力すると全文字にマッチし、"+"を入力するとエラーになる |
| 4 | ui-renderer.js | highlightSearchText() |
keyword が空のとき return text でエスケープなしに返しており、XSS脆弱性がある |
| 5 | ui-renderer.js | createCardElement() |
innerHTML を使うべきところで textContent を使っているため、<mark>タスク</mark> がHTMLタグとして解釈されず文字列そのままで表示される |
| 6 | event-handler.js | setupSearchListener() |
let timerId をコールバック内で宣言しているため、イベント発火のたびに undefined で初期化される → clearTimeout(undefined) は何もしないのでデバウンスが機能しない |
| 7 | event-handler.js | handleFilter() | 全ボタンから .active を削除した後、クリックされたボタンへの .active 追加を忘れている → どのボタンも視覚的にアクティブにならない |
| 8 | index.html | In Progressフィルターボタン |
data-filter="in-progress" としているが setActiveFilter() は "inprogress" を期待しており、バリデーションではじかれてフィルターが機能しない |
レビュー
編集後のファイルをコミットして、PRを作成してください。
git checkout -b task8
git add .
git commit -m "fix: フィルタ検索機能を追加"
git push
PRについては、内容はなくて大丈夫です。
数分待つと、CodeRabbitからのレビューが返却されます。
