はじめに
JavaScriptにはさまざまな便利な関数がありますが、その中でもfilter関数は配列の中から条件に合った要素だけを抽出できる、とても強力でよく使われるものです。
この記事では、filter関数を活用してタスクを分類するシンプルなToDoアプリ「もふもふToDo」の仕組みを解説します。
JavaScriptを少しだけ学んだことのある人にも理解できるよう、やさしく説明しています。
アプリの特徴と構成
「もふもふToDo」は、HTMLとJavaScriptだけで作られた軽量なWebアプリです。画面にはタスクの入力欄と複数のフィルターボタンが用意されており、操作はすべてブラウザ上で完結します。
見た目はシンプルですが、filter関数を使ってタスクをリアルタイムで分類する機能を備えています。学習用のコード例としても、個人の予定管理ツールとしても活用できます。
ToDoアプリって何ができるの？
ToDoアプリは、やらなければならないことを整理して一覧表示できるアプリです。タスクの追加や完了チェック、期限や優先度の設定などを通して、毎日のやるべきことをスムーズに管理できます。
「もふもふToDo」では、以下の情報を入力してタスクを作成します。
- タスク名
- 優先度（低・中・高）
- 期限（日付）
追加されたタスクは画面に表示され、完了したタスクにはチェックを入れることで状態を管理できます。
ソースコードの解説
HTMLとJavaScriptのソースコードを公開します。それぞれ自分の環境に作成して自分のオリジナルWebアプリを作成してみてください。
【ファイルの配置方法はこちらの記事を参照】
HTMLファイルのソースコード
こちらが「もふもふToDo」のHTMLファイルの中身です。ファイル名はindex.htmlになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>もふもふToDo</title>
<style>
body {
font-family: 'Hiragino Maru Gothic ProN', sans-serif;
background-color: #fffaf5;
text-align: center;
padding: 30px;
}
h1 {
color: #d35d7c;
}
input, select, button {
margin: 5px;
padding: 8px;
border-radius: 6px;
border: 1px solid #ccc;
}
ul {
list-style: none;
padding: 0;
}
li {
background: #ffeef0;
margin: 8px auto;
padding: 10px;
width: 60%;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<h1>もふもふToDo</h1>
<input type="text" id="taskInput" placeholder="タスク名">
<select id="prioritySelect">
<option value="low">低</option>
<option value="medium">中</option>
<option value="high">高</option>
</select>
<input type="date" id="dueDate">
<button onclick="addTask()">追加</button>
<div style="margin-top:20px;">
<button onclick="filterTasks('all')">すべて</button>
<button onclick="filterTasks('incomplete')">未完了</button>
<button onclick="filterTasks('overdue')">期限切れ</button>
<button onclick="filterTasks('high')">高優先度</button>
</div>
<ul id="taskList"></ul>
<script src="script.js"></script>
</body>
</html>JavaScriptのソースコード
こちらが「もふもふToDo」のJavaScriptのソースコードになります。ファイル名はscript.jsです。
const tasks = [];
// 「追加」ボタンが押された時の処理
function addTask() {
const title = document.getElementById("taskInput").value;
const priority = document.getElementById("prioritySelect").value;
const due = document.getElementById("dueDate").value;
if (!title || !due) return alert("タスク名と期限を入力してください");
tasks.push({ title, priority, due, completed: false });
document.getElementById("taskInput").value = "";
document.getElementById("dueDate").value = "";
renderTasks(tasks);
}
// 完了状態を切り替える処理
function toggleComplete(index) {
tasks[index].completed = !tasks[index].completed;
renderTasks(tasks);
}
// フィルターをかける処理
function filterTasks(mode) {
let filtered = tasks;
const today = new Date().toISOString().split('T')[0];
if (mode === 'incomplete') {
filtered = tasks.filter(t => !t.completed);
} else if (mode === 'overdue') {
filtered = tasks.filter(t => !t.completed && t.due < today);
} else if (mode === 'high') {
filtered = tasks.filter(t => t.priority === 'high');
}
renderTasks(filtered);
}
// タスクを表示する処理
function renderTasks(taskArray) {
const list = document.getElementById("taskList");
list.innerHTML = "";
taskArray.forEach((task, index) => {
const li = document.createElement("li");
li.innerHTML = `
<input type="checkbox" ${task.completed ? 'checked' : ''} onclick="toggleComplete(${index})">
<strong>${task.title}</strong>（優先度: ${task.priority}, 期限: ${task.due}）
`;
list.appendChild(li);
});
}filterで未完了のタスクを表示する
最初に紹介するのは、filter関数を使って「未完了のタスクだけを表示する」機能です。
const incompleteTasks = tasks.filter(task => !task.completed);このコードでは、completedプロパティがfalseのタスクだけを抽出して、新しい配列として返しています。これにより、やるべきことが明確になり、効率的に作業を進めることができます。
期限切れタスクの抽出にも便利
次に、期限が過ぎたタスクを見つける方法を紹介します。filter関数は日付との比較にも対応しているので、次のように書けます。
const overdueTasks = tasks.filter(task => task.due < today);このコードでは、今日の日付よりも前に設定された期限を持つタスクだけを取り出しています。提出物の管理や勉強スケジュールの見直しに役立ちます。
優先度の高いタスクを取り出す
filterは文字列の一致を条件に使うこともできます。たとえば、優先度が「高」に設定されたタスクだけを集めたい場合は、次のように書きます。
const highPriorityTasks = tasks.filter(task => task.priority === "high");これにより、特に大事なタスクだけを一覧表示できるようになります。重要な試験対策や提出締切が迫っている資料などを、まとめて確認するのに便利です。
filterのメリットと注意点
filter関数の最大のメリットは、元の配列を変更せず、新しい配列を生成することです。これにより、データの整合性を保ちながら柔軟な表示切り替えが可能になります。
また、filterはmapやreduceといった他の配列メソッドともよく組み合わせて使われます。これらの違いを学んでおくと、より高度なJavaScriptの操作も理解しやすくなります。
ただし、filterはすべての要素を1つずつチェックするため、データの数が非常に多い場合はパフォーマンスに注意が必要です。ただし「もふもふToDo」のような小規模な学習用アプリでは、特に問題になることはありません。
アプリを動かしながら楽しく学ぼう
「もふもふToDo」は、filterを実際に体験しながら学べるアプリです。未完了、期限切れ、優先度の高いタスクなど、複数の条件に応じて表示を切り替えることができます。
ボタンをクリックすると、すぐに画面上のリストが変化するので、コードの動きが視覚的に確認できます。「自分で書いたコードが動いている」という実感を得ることで、学習のモチベーションも高まります。
自分だけのToDoアプリに進化させよう
基本機能が理解できたら、ぜひ自分なりにアプリを拡張してみましょう。以下のようなアイデアが考えられます。
- タグをつけて分類する
- 色分け表示を取り入れる
- フィルターの組み合わせ検索
- ローカルストレージへの保存機能
こうしたカスタマイズを通して、プログラミングの楽しさと実用性の両方を実感できます。自分のアイデアを形にする喜びを体験してみてください。
おわりに
JavaScriptのfilter関数は、シンプルでありながら応用範囲の広い便利なツールです。「もふもふToDo」のようなアプリを通して、filterの使い方を自然に学び、実践に役立てることができます。
まずは実際にアプリを動かしてみて、コードがどのように動いているかを観察してみましょう。そして、少しずつ手を加えて、自分だけのToDoアプリを完成させてください。プログラミングがもっと楽しく、身近に感じられるようになるはずです。
コメント