Sample lesson

無料サンプルレッスン：
JavaScript：一覧の絞り込み

カテゴリ選択を一覧表示へつなぐ無料レッスンです。全件・一致・0件・全件への復帰を実装し、結果の重複や件数のずれを初稿から修正して確認します。

1. ゴール：条件を変えても一覧と件数が一致する

配列と関数、イベント処理を学んだ人向けに、カテゴリ選択を画面の一覧へつなぎます。エディターとJavaScriptを実行できるブラウザーを用意します。架空の資料三件だけを使い、通信や保存は行いません。

これは編集部が作った課題とレビューのサンプルです。フォーム送信を扱う既存レッスンとは別に、選択を何度も変えたときの描画を練習します。

2. 課題：全件・一致・0件・復帰を作る

初期表示は三件です。地図は「紙の地図」「港の地図」の二件、写真は「町並みの写真」の一件、音声は0件にします。0件なら理由と戻り方を表示し、すべての資料へ戻すと三件を復元します。

提出物はHTMLと、選んだ種類・表示名・件数を並べた四行の記録です。選択欄をTabで選び、キーボードでも変更できることを確認してください。

3. 初稿：前の結果を残したまま追加する

const matches = items.filter(item => item.category === select.value);
for (const item of matches) {
  const li = document.createElement("li");
  li.textContent = item.name;
  list.append(li);
}
if (matches) status.textContent = "資料があります";

これはrender関数の中身の断片です。items、select、list、statusは修正版の宣言を使う前提で、単独では動きません。「すべて」の条件、前の結果の削除、0件の判定が欠けています。

4. レビュー例：元データと表示を分ける

条件を変えるたびに表示が増える原因は、前のliを残していることです。描画前にlist.replaceChildren()で一覧だけを空にします。
空の配列も条件式では真になるため、matches.length === 0で件数を調べます。0件のときの戻り方を案内します。
元のitemsを書き換えると全件へ戻せなくなります。filterで表示用の配列を作り、元の三件を残します。

参考：MDNのfilter、textContent（2026年10月27日確認）。表示名をHTMLとして解釈しないため、文字はtextContentへ入れます。

5. 修正版：初期表示も変更後も同じ関数を使う

次をfilter-practice.htmlとして保存して開きます。最初のrender()が初期表示を作り、以降はchangeイベントで同じ関数を呼びます。イベント登録は一度だけです。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>資料一覧の絞り込み練習</title>
<style>
body { margin: 1rem; font-family: sans-serif; line-height: 1.8; }
main { max-width: 42rem; margin-inline: auto; }
select { max-width: 100%; font: inherit; padding: .5rem; }
select:focus-visible { outline: 3px solid #174ea6; outline-offset: 3px; }
li { overflow-wrap: anywhere; }
</style>
</head>
<body>
<main>
<h1>資料一覧（架空の練習）</h1>
<label for="category">資料の種類</label>
<select id="category">
  <option value="all">すべての資料</option>
  <option value="map">地図</option>
  <option value="photo">写真</option>
  <option value="audio">音声</option>
</select>
<p id="status" role="status"></p>
<ul id="results"></ul>
<noscript><p>この練習の絞り込みにはJavaScriptが必要です。</p></noscript>
</main>
<script>
const items = [
  { name: '紙の地図', category: 'map' },
  { name: '町並みの写真', category: 'photo' },
  { name: '港の地図', category: 'map' }
];
const select = document.querySelector('#category');
const list = document.querySelector('#results');
const status = document.querySelector('#status');
function render() {
  const category = select.value;
  const matches = items.filter(item => category === 'all' || item.category === category);
  list.replaceChildren();
  for (const item of matches) {
    const li = document.createElement('li');
    li.textContent = item.name;
    list.append(li);
  }
  status.textContent = matches.length === 0
    ? '該当する資料はありません。すべての資料を選ぶと一覧へ戻れます。'
    : `${matches.length}件の資料があります。`;
}
select.addEventListener('change', render);
render();
</script>
</body>
</html>