検索が動いたら、その確認を次の変更でも繰り返せるようにします。同じ入力が同じ結果になるかを、コマンドで確かめるのが自動テストです。
この回では検索処理のテストを用意し、1か所だけわざと壊します。失敗を検出した後、直前の保存状態へ戻して、もう一度実行します。
表示の読みやすさやTabキーの移動は、自分でもブラウザで確認します。検索のテストが通ることと、すべての操作が使えることは、別々に見ます。
この回の準備
前の回までのページはブラウザだけで開けました。今回の自動テストには、PCにNode.jsが必要です。Node.jsは、ブラウザの外でもJavaScriptを実行するソフトです。
Codeのターミナル、または普段のターミナルでnode --versionを実行します。数字が出なければ、Node.js公式のダウンロードページからLTS版を用意してください。この講座の完成見本はNode.js 22.17で確認しています。追加のテスト用パッケージは使いません。
ターミナルの作業先をknowledge-desk-practiceにします。Codeの作業フォルダと同じ場所かを確認し、実際の仕事のファイルが混ざっていないことを見ます。
期待値を先に読む
テストでは、配布データを使った検索結果と、次の条件を比べます。AIにテストを書かせる前に、自分で期待する結果を読みます。
| 入力や操作 | 期待する結果 |
|---|---|
| 検索もカテゴリも空 | 元の順で6件 |
議事録、振り返り、新入社員 | それぞれ対応する1件 |
前後に空白を付けたＯＮＢＯＡＲＤＩＮＧ | 新入社員の資料1件 |
| 仕事の進め方カテゴリ | 2件 |
| 仕事の進め方と議事録 | 1件 |
| 学びと議事録 | 0件 |
| 存在しない資料 | 0件 |
| 会議と議事録の2語 | 両方を含む1件 |
| 検索やカテゴリ一覧を実行した後 | 元の6件が変わっていない |
完成見本では、これらを関連する条件でまとめた7件のテストにしています。テスト数を増やすことより、必要な条件が入っているかを見ます。
テストを作って実行する
BRIEF.md、ACCEPTANCE.md、data.js、domain.jsを読んでください。
Node.js組み込みのnode:testとnode:assert/strictだけで、tests/search.test.mjsを作ってください。追加パッケージは入れません。
createRequireでdomain.jsとdata.jsを読み、selectRecordsとcategoriesForを検証してください。
期待値は、空なら6件、議事録1件、全角大文字と前後空白のONBOARDINGで1件、仕事の進め方2件、学び+議事録0件、存在しない語0件、会議+議事録1件です。カテゴリ一覧の重複と、元データが変わらないことも確認します。
HTMLらしい文字を含む資料も、文字データとして検索できることを確認してください。これは画面でスクリプトが実行されないことの証明とは分けて説明します。
テストを通すために期待値や配布データを勝手に書き換えず、違いを報告してください。
node --test tests/*.test.mjsを実行し、実行コマンド、合否、失敗した条件、まだ見ていない操作を報告してください。自分でも同じコマンドを実行します。
node --test tests/*.test.mjs
実行結果のpassとfailを見ます。完成見本では、7件のテストが成功し、失敗は0です。作ったテストの数が違う場合は、期待値の表にある条件を一通り確認できているか見ます。
コマンドが成功しても、読み込むファイルが別の完成見本だったら、作業中のページは確認できていません。テストが、同じフォルダのdata.jsとdomain.jsを読んでいるかも見ます。
ブラウザでも確認する
index.htmlを開き、検索欄へ入力します。カテゴリを変え、0件の案内を見て、条件をクリアします。Tabキーで操作し、画面を狭くしたときの表示も見ます。
今回の自動テストが対象にしているのは、資料の選び方です。入力欄から検索処理へ値が渡るか、結果が画面へ描画されるか、文字が読めるかは手動確認に含めます。
自動テストの結果と、手動で確認した操作をACCEPTANCE.mdへ別々に残します。まだ見ていない点は、そのまま書きます。
保存してから、1か所だけ壊す
Gitが使える場合は、まず今の正常な状態を保存します。Gitはファイルの変更履歴を残す仕組みです。この練習は、ほかの変更が混ざっていない練習用フォルダだけで行います。
この練習用フォルダのGit状態を確認してください。まだGit管理していない場合は、このフォルダだけで開始します。
差分と対象ファイルを確認し、秘密情報や実在の個人情報がなく、テストと手動確認が済んだ現在の状態を、ローカルの保存点としてコミットしてください。外部へのpushはしません。
保存した状態と、保存後に未保存の変更が残っていないかを報告してください。別の変更が残っていたら、壊す練習を始めずに教えてください。保存が済んで、練習用の変更以外が残っていないことを確認します。Gitをまだ使えない場合は、この回の破壊と復旧の演習を後に回し、フォルダのコピーを残しておきます。
準備ができたら、次の指示を送ります。
復旧の練習です。domain.jsの検索処理だけを変更し、検索語を無視してカテゴリだけで選ぶ状態にしてください。
data.jsとtestsは変更せず、ほかのファイルにも触れないでください。
node --test tests/*.test.mjsを実行し、どの期待値が外れたかを報告してください。まだ修正しないでください。テストが失敗すれば、今回壊した条件を検出できたことになります。失敗したテスト名を読み、検索語を無視したことと一致するかを見ます。全部通った場合は、検索語の条件をテストが見ているか確認します。
差分を読んで、その変更だけ戻す
次の2つのコマンドで、未保存の変更とdomain.jsの差分を見ます。
git status --short
git diff -- domain.js
復旧の練習で変えたのがdomain.jsだけであることを確認します。このファイルに別の未保存の変更が混ざっていない場合に限り、直前のコミットへ戻します。
git restore --source=HEAD -- domain.js
この操作は、domain.jsの未コミットの変更を捨てます。残したい変更が混ざっていたら実行せず、今回壊した部分だけを戻す方法をClaudeに提案してもらってください。
復旧後にテストを再実行し、ブラウザで「議事録」の検索とクリアを試します。コードを保存状態へ戻したことと、結果が直ったことの両方を確認します。
Claude Codeのcheckpointにも編集を戻す機能がありますが、公式の説明ではBashコマンドで変更したファイルなどが対象外です。Gitで残す履歴と同じ範囲を戻せるとは考えず、実際に何を戻すかを見てください。
この回の合格条件
- 同じ作業フォルダの検索処理を、自動テストで確認できる。
- 自動テストが見ていない画面操作を説明できる。
- 正常な保存点の後で、検索語を無視する変更をテストが検出する。
- 今回の変更だけを戻し、テストとブラウザで再確認できる。
Gitの演習を後に回した場合は、復旧を完了済みと記録せず、残っている練習として書きます。
つまずいたとき
| 起きたこと | 確かめること |
|---|---|
| nodeが見つからない | Node.jsの導入後、ターミナルを開き直したか |
| ワイルドカードのパスで実行できない | node --test tests/search.test.mjsで1ファイルを指定して試す |
| domain.jsを読めない | ファイルの保存先とCommonJS対応の出力があるか |
| テストだけが勝手に変わった | git diffで期待値の変更を見つけ、変更理由を確認する |
| restoreができない | 正常な状態のコミットがあるか。なければ復旧を推測で進めない |
今日のまとめ
- 期待値を、自分でも繰り返し実行できるテストにしました。
- 検索処理と画面操作を分け、確認結果を残しました。
- 保存点を作ってから1か所を壊し、その変更だけを戻しました。
次は不具合を証拠で伝える回です。エラーを見つけたとき、直せる情報の渡し方を練習します。
セルフチェック
1. 検索処理の自動テストがすべて通った後にも、この実習で必要な確認はどれですか。
2. git restoreでdomain.jsを戻す前に確かめることはどれですか。
3. テストが失敗したとき、まず避ける行動はどれですか。
参考・出典
- Node.js: 組み込みテストランナー。node:testと
node --testの実行方法。 - Git: git restore。復元元と対象ファイルを指定する方法。
- Anthropic: Checkpointing。巻き戻せる編集と、Bashの変更などの対象外。
確認日: 2026年10月10日。期待値は、この講座の配布データと完成見本の検索テストに対応します。