表示、検索、カテゴリの順に作る

ナレッジデスクに検索を付けます。資料を表示できることを確かめてから、検索、カテゴリの順に足します。

一度に全部作ってもらうと、不具合が出たとき、どの追加が原因だったかを探しにくくなります。作業を小さく分けると、前にできていたことと今回増えたことを比べられます。

前の回で用意したdata.jsの6件を使います。スターターから始めた人も、ここで最初の画面を作れます。

ファイルの役割を揃える

資料の表示を確認してから検索とカテゴリを追加し、それぞれで件数を確認する工程の概念図 — 作った段階ごとに結果を見ます。前の段階でできていた表示が残っていることも確認します。

ファイル	役割
`index.html`	見出し、検索欄、カテゴリ、結果を置く
`styles.css`	文字、色、余白を整える
`data.js`	架空の6件を渡す
`domain.js`	資料を選ぶ処理をまとめる
`app.js`	入力を受け取り、画面に結果を表示する

資料を選ぶ処理と、画面へ表示する処理を分けます。後の回で、資料の選び方を自動テストするためです。

完成見本では、domain.jsからglobalThis.KnowledgeDeskという名前で処理を渡します。中にはselectRecordsとcategoriesForがあります。前者は条件に合う資料を選び、後者はカテゴリ一覧を作るものです。名前はコピー指示に含めるので、暗記しなくて構いません。

1. まず6件を表示する

Codeで練習用フォルダを開き、モードをManualにします。すでに最初の画面を作った人は、資料を6件の入力へ置き換えます。

表示だけを作る

CLAUDE.md、BRIEF.md、README.md、data.jsを読んでください。
今日は資料の表示だけを実装します。
index.html、styles.css、domain.js、app.jsを使い、data.jsのglobalThis.KNOWLEDGE_RECORDSにある6件を表示してください。名前、カテゴリ、説明、タグと、全体の件数を見せます。
domain.jsはglobalThis.KnowledgeDeskにselectRecords(records, options)とcategoriesFor(records)を置き、typeof moduleの確認付きでCommonJSのmodule.exportsにも対応させてください。画面を操作する処理はapp.jsに分けます。
index.htmlはdata.js、domain.js、app.jsを、この順の通常のscriptタグとdeferで読み込みます。ファイルを直接開く方式を保ち、type=module、import、fetch、サーバー、外部通信は使いません。
資料の文字はtextContentで表示し、innerHTMLで資料を埋め込まないでください。
検索とカテゴリの操作はまだ付けません。作業後に、変更したファイルと、私が開いて確かめる点を報告してください。

index.htmlを開き直します。6件の名前を前の回の表と照合してください。同じ名前が重複していないか、説明とカテゴリがあるかも見ます。

表示が崩れていたら、この段階で直します。6件が出ていないまま検索へ進まないでください。

2. 検索を付ける

次は入力した言葉に合う資料だけを表示します。タイトルだけでなく、説明とタグも検索対象にします。

検索語は、前後の空白と全角英数字、大文字と小文字を揃えて比べます。たとえばタグにあるonboardingは、ＯＮＢＯＡＲＤＩＮＧと入力しても見つかる、という条件にします。

検索を足す

表示できている6件に、ラベル付きの検索欄を追加してください。
selectRecordsで、title、summary、tagsを検索します。検索語はNFKCで全角英数字を揃え、大文字小文字と前後の空白を揃えて比較してください。複数語は、すべての語を含む資料を返します。元データは変更しません。
空の検索なら6件、『議事録』なら1件、『ＯＮＢＯＡＲＤＩＮＧ』なら1件、該当しない語なら0件と表示してください。
0件のときは『該当する資料がありません』と案内し、検索語を消すと6件に戻るようにします。
カテゴリ絞り込みはまだ追加しません。変更したファイルと、確認したこと、未確認のことを報告してください。

ブラウザを更新し、検索欄へ次の値を1つずつ入れます。前の検索語を消してから、次の値を試してください。

入力	期待する表示
何も入れない	6件
`議事録`	会議の準備と議事録の1件
`ＯＮＢＯＡＲＤＩＮＧ`	新入社員の最初の一週間の1件
`会議議事録`	会議の準備と議事録の1件
`存在しない資料`	0件と案内文

結果が表と違う場合は、入力した言葉と実際の件数を伝えます。「検索がおかしい」とだけ伝えず、合わなかった条件を示してください。

3. カテゴリを付ける

検索ができたら、カテゴリを追加します。カテゴリと検索語を一緒に使ったときも確かめます。

カテゴリを足す

カテゴリの選択欄を追加してください。選択肢はcategoriesForでdata.jsから重複なく取り出し、『すべてのカテゴリ』も用意します。
検索語とカテゴリの両方を満たす資料だけを表示してください。
検索が空で『学び』なら2件。『学び』と『議事録』なら0件。『仕事の進め方』と『議事録』なら1件です。
『条件をクリア』ボタンで検索語を空、カテゴリをすべてに戻し、6件を表示してください。キーボードでも操作できるラベルとフォーカスを用意します。
表示件数と0件の案内を更新してください。元の6件のデータは変更しないでください。

カテゴリだけ、検索だけ、両方の組み合わせを試します。「条件をクリア」を押した後、検索語とカテゴリの両方が戻るかを見ます。

Tabキーで検索欄、カテゴリ、クリアボタンへ移動できるかも確かめます。画面を狭くし、資料の名前や入力欄が切れていないか確認してください。自動テストだけでは、この表示や操作の確認は済みません。

この回の合格条件

何も絞り込まないと、架空の6件が表示される。
検索の表にある各入力が、期待した資料と件数になる。
「学び」で2件、「学び」と「議事録」で0件になる。
「条件をクリア」で、検索とカテゴリが戻り6件になる。
検索欄などにラベルがあり、キーボードで操作できる。

確認した結果はACCEPTANCE.mdに残します。未確認の操作も書き、実際に試してから確認済みへ変えます。

つまずいたとき

起きたこと	見るところ	修正する範囲
資料が出ない	3本のscriptの順番、ファイル名	入力データと表示の接続
fileで開くとエラーになる	importやfetchを使っていないか	通常のscriptで読める構成
検索後に元へ戻らない	元データを上書きしていないか	6件は保持し、表示する結果だけを変える
カテゴリが重複する	選択肢の作成方法	categoriesForと選択欄の初期化
0件でも前の資料が残る	表示を更新する処理	結果一覧と案内を同時に更新する

直すときも、すべてを一度に作り直さず、再現できた条件から始めます。

今日のまとめ

資料の表示、検索、カテゴリを、別の作業として作りました。
入力した値と期待した件数を、実際の画面で比べました。
確認結果と未確認の操作を、ファイルに残しました。

次はテストして、壊して、戻す回です。期待した結果を、繰り返し実行できるチェックにします。

セルフチェック

1. この回で機能を追加する順番はどれですか。

2. 配布データでカテゴリを『学び』、検索を『議事録』にした場合の受入条件はどれですか。

参考・出典

Anthropic: Best practices。範囲を限定した依頼と、検証できる条件の考え方を参照。
MDN: script要素。通常のscriptとdeferの扱い。
MDN: textContent。資料の文字をテキストとして表示する方法。

確認日: 2026年10月10日。ファイル名、検索条件、期待する件数は、この講座の配布データと完成見本に対応します。