JavaScriptでTODOリストを実装するには、DOMの操作やイベントに関する知識が必要になるため、JavaScriptを勉強中の方にはちょうど良い練習になります。
そこで今回は、JavaScriptでのTODOリストの作り方を解説していきます。
クリックイベントを使用し、ボタンに機能を与え、ボタンをクリックする動作を着火剤としてイベントを発動させてみましょう。
デモ
今回は、以下のようなシンプルなTODOリストを実装していきます。
フォームに文字を入力し「Add Task」ボタンをクリックするとリストが表示され、「Delete」ボタンを押すと選択したリストが削除されます。
HTMLとCSSの準備
まずはHTMLとCSSの準備をしていきます。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TODO-List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>TODO-List</h1>
<form>
<input class="task_value" type="text" />
<button class="task_submit" type="button">Add Task</button>
</form>
<div id="table">
<h2>Current Tasks</h2>
<ul class="task_list"></ul>
</div>
<script src="main.js"></script>
</body>
</html>タスクを入力するための<input class="task_value">と、タスクを追加するための<button class="task_submit">、そして入力したタスクを表示させるための<ul class="task_list">を用意します。
CSS
html {
font-size: 16px;
}
body,html {
width: 960px;
margin: 1rem auto;
font-family: serif;
}
.task_value {
height: 1.5rem;
}
.task_submit {
height: 2rem;
}
#table {
background-color: papayawhip;
width: 50%;
height: 400px;
border-radius: 1rem;
margin-top: 2rem;
}
h2 {
font-size: 1.2rem;
padding: 1rem;
}
li {
margin: 2rem 2rem 2rem 0;
display: flex;
justify-content: space-between;
}ここまででTODOリストの見た目が完成しました。デザインは好みで調整してください。
JavaScriptでTODOリストを実装
準備ができたところで、JavaScriptに移っていきましょう。
全体のコード
const taskValue = document.getElementsByClassName('task_value')[0];
const taskSubmit = document.getElementsByClassName('task_submit')[0];
const taskList = document.getElementsByClassName('task_list')[0];
// 追加ボタンを作成
const addTasks = (task) => {
// 入力したタスクを追加・表示
const listItem = document.createElement('li');
const showItem = taskList.appendChild(listItem);
showItem.innerHTML = task;
// タスクに削除ボタンを付与
const deleteButton = document.createElement('button');
deleteButton.innerHTML = 'Delete';
listItem.appendChild(deleteButton);
// 削除ボタンをクリックし、イベントを発動（タスクが削除）
deleteButton.addEventListener('click', evt => {
evt.preventDefault();
deleteTasks(deleteButton);
});
};
// 削除ボタンにタスクを消す機能を付与
const deleteTasks = (deleteButton) => {
const chosenTask = deleteButton.closest('li');
taskList.removeChild(chosenTask);
};
// 追加ボタンをクリックし、イベントを発動（タスクが追加）
taskSubmit.addEventListener('click', evt => {
evt.preventDefault();
const task = taskValue.value;
addTasks(task);
taskValue.value = '';
});ボタンをトリガーとして考えるのがポイントです。
ボタンをクリックしたら何を実行するのか一つひとつ箇条書きにしてみるのもおすすめです。
上から順番にコードを解説していきます。
要素を取得する
まずは、DOM操作でボタン要素とタスクを表示させるための要素を取得しましょう。
const taskValue = document.getElementsByClassName('task_value')[0];
const taskSubmit = document.getElementsByClassName('task_submit')[0];
const taskList = document.getElementsByClassName('task_list')[0];タスクを入力するためのインプットフォーム、タスクを登録するためのボタン、さらにタスクを表示させるための空のリストをそれぞれ取得します。
追加ボタンを作成する
続いて、タスクを追加するための追加ボタンの機能を実装していきます。
const addTasks = (task) => {
// 入力したタスクを追加・表示
const listItem = document.createElement('li');
const showItem = taskList.appendChild(listItem);
showItem.innerHTML = task;
// タスクに削除ボタンを付与
const deleteButton = document.createElement('button');
deleteButton.innerHTML = 'Delete';
listItem.appendChild(deleteButton);
// 削除ボタンをクリックし、イベントを発動（タスクが削除）
deleteButton.addEventListener('click', evt => {
evt.preventDefault();
deleteTasks(deleteButton);
});
};addTasks関数には、主に以下の3つの役割があります。
- 入力したタスクを追加する
- タスクに削除ボタンを付与する
- 削除ボタンにクリックイベントを付与する
一つずつ確認していきましょう。
まずは、入力したタスクを追加・表示させるための実装を行います。
const listItem = document.createElement('li');
const showItem = taskList.appendChild(listItem);
showItem.innerHTML = task;
createElementは要素を生成し、appendChildは親要素に対して子要素を追加します。
これにより、元々HTMLで用意していた<ul>の子要素に<li>が追加されるようになりました。
showItem.innerHTML = taskは、入力したタスクを表示する役割があります。
次に、入力したタスクを削除するための削除ボタンを作ります。
const deleteButton = document.createElement('button');
deleteButton.innerHTML = 'Delete';
listItem.appendChild(deleteButton);上記と同じようにボタン要素を生成し、ボタンのテキストを「Delete」と表示させます。
さらに、削除ボタン要素を上記で生成したリスト要素（listItem）の子要素として追加しましょう。
これにより、<li>の子要素に<button>が追加されるようになりました。
そして、削除ボタンをクリックした時のイベントを用意します。
deleteButton.addEventListener('click', evt => {
evt.preventDefault();
deleteTasks(deleteButton);
});削除ボタンをクリックしたら、deleteTasks関数が呼び出されるようにします。
preventDefaultは、デフォルトのイベントを打ち消す役割があります。
実装を意図しているイベントを中止するのではなく、それ以外にあらかじめついているイベントを中止させるイメージです
evt.preventDefault()によって、該当イベント以外のものを中止するようにしています。
ここまでで追加ボタンの機能を実装することができました。
削除ボタンに機能を付ける
削除ボタンにタスクを消すための機能を付けます。
const deleteTasks = (deleteButton) => {
const chosenTask = deleteButton.closest('li');
taskList.removeChild(chosenTask);
};closestは、自身の要素と親要素の中から一致する要素を返します。
removeChildは、親要素からみた子要素を削除します。
これにより、上記でクリックイベントとして呼び出されたdeleteTasks関数は、削除ボタンを含むタスクを削除することができるようになりました。
追加ボタンにイベントを付与する
さいごに、追加ボタンにクリックイベントを付与していきましょう。
追加ボタン自体はすでに機能していますが、機能を呼び出すためには、削除ボタンと同様にクリックイベントと紐付ける必要があります。
taskSubmit.addEventListener('click', evt => {
evt.preventDefault();
const task = taskValue.value;
addTasks(task);
taskValue.value = '';
});追加ボタンをクリックしたら、addTasks関数が呼び出されるようにします。
taskValue.value = ''は、タスクを入力するためのインプットの中身を空にする役割があります。
タスクを入力した後に、テキストが残らないようにするためです。こうすることで、タスクが再度登録しやすくなります。
以上ですべての実装が完成です。
まとめ
今回は、JavaScriptでTODOリストの作り方を解説しました。
プログラム自体は複雑なものではありませんが、一つひとつの動作を追いながら、必要な機能を考えていく必要があります。
DOMの操作やイベントだけではなく、さまざまなメソッドも取り扱いました。
これらの練習を含めて、自身が使いやすいTODOリストにアレンジして実装してみてください。
コメント