filterメソッドは TODOリストの「絞り込み」 にとてもよく使われます。
ここでは初心者でも動かしやすい ブラウザで動く小さなTODOフィルタアプリ を例にして説明します。
ゴール
「すべて／完了済み／未完了」を切り替えて表示できる TODO アプリを作ります。
💡filter の役割：
→ 「完了済みだけ見たい」「未完了だけ見たい」などのときに、filterでデータを絞り込みます。
💻 完成イメージ
| フィルタボタン | 表示内容 |
|---|---|
| すべて | 全てのタスク |
| 完了済み | done: true のタスクだけ |
| 未完了 | done: false のタスクだけ |
🧩 HTML + JS（そのままブラウザで動かせます）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TODOフィルタの例</title>
<style>
body {
font-family: sans-serif;
background: #f8f9fa;
padding: 20px;
}
button {
margin-right: 6px;
padding: 5px 10px;
}
.done {
text-decoration: line-through;
color: #999;
}
</style>
</head>
<body>
<h2>✅ TODOフィルタのサンプル</h2>
<div id="buttons">
<button onclick="showAll()">すべて</button>
<button onclick="showDone()">完了済み</button>
<button onclick="showTodo()">未完了</button>
</div>
<ul id="list"></ul>
<script>
// 初期データ
const todos = [
{ id: 1, text: '牛乳を買う', done: false },
{ id: 2, text: 'メールを送る', done: true },
{ id: 3, text: '宿題をやる', done: false },
{ id: 4, text: '洗濯する', done: true },
];
const list = document.getElementById('list');
// 共通：指定した配列を画面に描画する関数
function render(items) {
list.innerHTML = ''; // 一度消す
items.forEach(todo => {
const li = document.createElement('li');
li.textContent = todo.text;
if (todo.done) li.classList.add('done');
list.appendChild(li);
});
}
// フィルタ関数
function showAll() {
render(todos); // そのまま全部表示
}
function showDone() {
const doneItems = todos.filter(todo => todo.done === true);
render(doneItems);
}
function showTodo() {
const todoItems = todos.filter(todo => todo.done === false);
render(todoItems);
}
// 初期表示
showAll();
</script>
</body>
</html>
解説（filter の使われ方）
✅ filter の部分
const doneItems = todos.filter(todo => todo.done === true);
ここでやっていること：
- todos配列を順番に見る
- 各要素の
todo.doneがtrueのときだけ 残す - 結果として「完了済みだけの新しい配列」ができる
未完了のときは false の条件にするだけ。
const todoItems = todos.filter(todo => todo.done === false);
このように「条件を変えるだけ」で簡単に絞り込みを切り替えられます。
さらに発展（オプション）
たとえば以下も filter で簡単にできます：
- 「キーワードを含むタスクだけ表示」
- 「今日の日付のタスクだけ表示」
- 「優先度が高いものだけ表示」
例：
const keyword = "メール";
const searchResult = todos.filter(t => t.text.includes(keyword));
まとめ
| 機能 | メソッド | 役割 |
|---|---|---|
| すべて表示 | — | 元の配列をそのまま |
| 完了済み表示 | filter(todo => todo.done) | trueの要素だけ |
| 未完了表示 | filter(todo => !todo.done) | falseの要素だけ |
完成イメージ
- テキスト入力 → 「追加」ボタンでタスクを追加
- 各タスクにチェックボックス（✅）
- フィルタボタン「すべて」「完了」「未完了」で表示切り替え
- filter() で絞り込み実装！
See the Pen TODO Filter App by MONO365 -Color your days- (@monoqlo365) on CodePen.
filter() の使われ方
ここがポイント👇
if (currentFilter === 'done') {
filtered = tasks.filter(t => t.done);
} else if (currentFilter === 'todo') {
filtered = tasks.filter(t => !t.done);
}
tasks.filter(t => t.done)→doneが true のタスクだけ残す（完了済み）tasks.filter(t => !t.done)→ false のタスクだけ残す（未完了）filter()が返すのは新しい配列。元のtasksは変更されません。
仕組みの流れ
tasks（全タスク）を保持render()が呼ばれるたびに- 今のフィルタ設定（
currentFilter）を確認 filter()で表示すべきタスクを抽出
- 今のフィルタ設定（
forEach()でDOMに反映
練習課題（チャレンジ！）
- 「削除」ボタンを各タスクに追加してみましょう。
→ filter で「削除したいID以外」を残すと実現できます。
tasks = tasks.filter(t => t.id !== 削除対象のID);
- 「検索キーワード」で絞り込み機能を追加してみよう。
→t.text.includes(keyword)を filter 条件に足すだけ！
