Skip to content

簡単なアプリケーションを作ってみよう(TODOリスト)

公開日:December 23, 2024更新日:December 23, 2024
📄

TODOリスト作成

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 = "";
});

このコードでは、

  1. document.getElementById()で、必要なHTML要素を取得しています。
  2. addButton.addEventListener("click", ...)で、追加ボタンがクリックされたときの処理を登録しています。
  3. taskInput.valueで、入力欄の値(タスク)を取得しています。
  4. 入力欄が空の場合は、returnで処理を抜けて、何もせずに終了します。
  5. document.createElement("li")で、新しいli要素を作成しています。
  6. newListItem.textContentで、li要素にタスクのテキストを設定しています。
  7. document.createElement("button")で削除ボタンを作成し、テキストを設定しています。また、deleteButton.classList.add("delete-button")で、CSSでスタイルを適用するためにdelete-buttonクラスを追加しています。
  8. deleteButton.addEventListener("click", ...)で、削除ボタンがクリックされたときの処理を登録しています。
  9. taskList.removeChild(newListItem)で、削除ボタンの親要素であるli要素をリストから削除しています。
  10. newListItem.appendChild(deleteButton)で、li要素に削除ボタンを追加しています。
  11. taskList.appendChild(newListItem)で、リストにli要素を追加しています。
  12. taskInput.value = ""で、入力欄を空にしています。

動作確認

index.htmlをブラウザで開き、TODOリストの動作を確認してみましょう!

  • タスクを入力して「追加」ボタンをクリックすると、リストにタスクが追加される。
  • 各タスクの右端にある「削除」ボタンをクリックすると、そのタスクが削除される。
  • タスクが空の状態で「追加」ボタンをクリックしても、何も起こらない。

これらの機能が正しく動作することを確認してください。

TODOリストアプリの動作イメージ