TODOリスト作成
TODOリストは、やるべきタスクをリスト形式で管理するアプリケーションです。タスクの追加、削除などの基本的な機能を備えた、シンプルなTODOリストを作ってみましょう。
完成イメージ
まずは、完成イメージを見てみましょう。
このような、タスクを追加・削除できるTODOリストを作成します。
HTMLの作成
まずは、HTMLでTODOリストの骨組みを作成します。index.html
の<body>
タグの中身を、以下のように書き換えてください。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 超入門</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>TODOリスト</h1>
<div>
<input type="text" id="taskInput" placeholder="タスクを入力">
<button id="addButton">追加</button>
</div>
<ul id="taskList"></ul>
<script src="script.js"></script>
</body>
</html>
<h1>
タグでTODOリストの見出しを表示しています。<input type="text">
タグで、タスクを入力する欄を作成しています。id="taskInput"
で、taskInput
というIDを付けています。placeholder
属性で、入力欄に薄く表示されるテキストを設定しています。<button>
タグで「追加」ボタンを作成しています。id="addButton"
で、addButton
というIDを付けています。<ul>
タグで、タスクを一覧表示するためのリストを作成しています。id="taskList"
で、taskList
というIDを付けています。
CSSで見た目を整える
次に、CSSで見栄えを整えましょう。style.css
に以下の内容を書き込んでください。
css
body {
font-family: sans-serif;
text-align: center;
}
input[type="text"] {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
margin-right: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #f06;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
ul {
list-style: none;
padding: 0;
margin-top: 20px;
}
li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.delete-button {
background-color: #ccc;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
padding: 5px 10px;
}
これで、入力欄やボタン、リストなどのスタイルが整いました。特に、各TODOリストの右端に配置される削除ボタンには.delete-button
クラスを指定してスタイルを適用しています。
JavaScriptで動きをつける
最後に、JavaScriptでTODOリストの動きをつけましょう。script.js
に以下の内容を書き込んでください。
javascript
// 1. HTML要素を取得する
const taskInput = document.getElementById("taskInput");
const addButton = document.getElementById("addButton");
const taskList = document.getElementById("taskList");
// 2. 追加ボタンがクリックされたときの処理
addButton.addEventListener("click", () => {
// 3. 入力欄からタスクを取得する
const task = taskInput.value;
// 4. 入力欄が空の場合は、何もしない
if (task === "") {
return;
}
// 5. 新しいli要素を作成する
const newListItem = document.createElement("li");
// 6. li要素にタスクのテキストを設定する
newListItem.textContent = task;
// 7. 削除ボタンを作成する
const deleteButton = document.createElement("button");
deleteButton.textContent = "削除";
deleteButton.classList.add("delete-button"); // クラスを追加
// 8. 削除ボタンがクリックされたときの処理
deleteButton.addEventListener("click", () => {
// 9. 削除ボタンの親要素(li要素)を削除する
taskList.removeChild(newListItem);
});
// 10. li要素に削除ボタンを追加する
newListItem.appendChild(deleteButton);
// 11. リストにli要素を追加する
taskList.appendChild(newListItem);
// 12. 入力欄を空にする
taskInput.value = "";
});
このコードでは、
document.getElementById()
で、必要なHTML要素を取得しています。addButton.addEventListener("click", ...)
で、追加ボタンがクリックされたときの処理を登録しています。taskInput.value
で、入力欄の値(タスク)を取得しています。- 入力欄が空の場合は、
return
で処理を抜けて、何もせずに終了します。 document.createElement("li")
で、新しいli
要素を作成しています。newListItem.textContent
で、li
要素にタスクのテキストを設定しています。document.createElement("button")
で削除ボタンを作成し、テキストを設定しています。また、deleteButton.classList.add("delete-button")
で、CSSでスタイルを適用するためにdelete-button
クラスを追加しています。deleteButton.addEventListener("click", ...)
で、削除ボタンがクリックされたときの処理を登録しています。taskList.removeChild(newListItem)
で、削除ボタンの親要素であるli
要素をリストから削除しています。newListItem.appendChild(deleteButton)
で、li
要素に削除ボタンを追加しています。taskList.appendChild(newListItem)
で、リストにli
要素を追加しています。taskInput.value = ""
で、入力欄を空にしています。
動作確認
index.html
をブラウザで開き、TODOリストの動作を確認してみましょう!
- タスクを入力して「追加」ボタンをクリックすると、リストにタスクが追加される。
- 各タスクの右端にある「削除」ボタンをクリックすると、そのタスクが削除される。
- タスクが空の状態で「追加」ボタンをクリックしても、何も起こらない。
これらの機能が正しく動作することを確認してください。