JavaScriptでToDoリストアプリを作成しよう！

こんにちは！株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「JavaScriptでToDoリストアプリを作成の仕方」についてお伝えしていきます。

JavaScriptでToDoリストアプリを作成しよう

HTML、CSS、JavaScriptを使用してシンプルなToDoリストアプリを作成していきます。

HTMLとCSSのセットアップ

<!DOCTYPE html>
<html>
<head>
  <title>ToDoリストアプリ</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>ToDoリスト</h1>
  <input type="text" id="task-text" placeholder="新しいタスクを入力">
  <button id="add-task">追加</button>
  <ul id="task-list">
    <!-- タスクがここに追加されます -->
  </ul>
  <script src="app.js"></script>
</body>
</html>

このHTMLコードでは、ToDoリストのタイトルやタスクを入力するフィールドを記述しています。

スタイリングは、styles.cssを作成し記述してください。

今回の記事では、スタイルを記述しません。

JavaScriptでリスト管理

JavaScriptを使用してタスクの追加のコードを記述します。

app.jsを作成し、そこに記述してください。

// app.js

document.getElementById('add-task').addEventListener('click', function () {

   // 入力フィールドから新しいタスクのテキストを取得
  const taskText = document.getElementById('task-text').value;
  if (taskText) {
  
    // タスクを表示するul要素を取得
    const taskList = document.getElementById('task-list');
    
    // 新しいタスクを表示するli要素を作成
    const taskItem = document.createElement('li');
    
    taskItem.textContent = taskText;
    taskList.appendChild(taskItem);
    // 新しいタスクを追加した後、入力フィールドをクリア
    document.getElementById('task-text').value = '';
  }
});

// タスクを削除するためのコードを追加することもできます

上記のJavaScriptコードは、タスクを入力し、追加ボタンをクリックするとリストに追加されます。

ローカルストレージの活用

次に、ローカルストレージを使用してユーザーのToDoリストを保存し、ページをリロードしてもタスクが失われないようにします。

ローカルストレージは、ブラウザー内でデータを保存する仕組みです。

// ページ読み込み時にローカルストレージからタスクを取得
window.onload = function () {
  // ローカルストレージから保存されたタスクを取得
  const savedTasks = JSON.parse(localStorage.getItem("tasks")) || [];

  // タスクを表示するul要素を取得
  const taskList = document.getElementById("task-list");

  // 保存されたタスクをリストに追加
  savedTasks.forEach(function (taskText) {
    const taskItem = document.createElement("li");
    taskItem.textContent = taskText;
    taskList.appendChild(taskItem);
  });
};

// "追加"ボタンがクリックされたときの処理
document.getElementById("add-task").addEventListener("click", function () {
  // 入力フィールドから新しいタスクのテキストを取得
  const taskText = document.getElementById("task-text").value;
  if (taskText) {
    // タスクを表示するul要素を取得
    const taskList = document.getElementById("task-list");

    // 新しいタスクを表示するli要素を作成
    const taskItem = document.createElement("li");
    taskItem.textContent = taskText;

    // リストに新しいタスクを追加
    taskList.appendChild(taskItem);

    // ローカルストレージから保存されたタスクを取得
    const savedTasks = JSON.parse(localStorage.getItem("tasks")) || [];

    // 新しいタスクを保存されたタスクの配列に追加
    savedTasks.push(taskText);

    // ローカルストレージに保存
    localStorage.setItem("tasks", JSON.stringify(savedTasks));

    // 新しいタスクを追加した後、入力フィールドをクリア
    document.getElementById("task-text").value = "";
  }
});

このコードは、ページの読み込み時にローカルストレージからタスクを取得し、"追加"ボタンがクリックされたときに新しいタスクをリストに追加し、それをローカルストレージに保存する機能を提供します。

下記のコードは削除機能も追加した場合

// ウェブページが読み込まれたときに実行される処理
window.onload = function () {
  // ローカルストレージから保存されたタスクを取得し、存在しなければ空の配列を作成
  const savedTasks = JSON.parse(localStorage.getItem("tasks")) || [];
  // タスクリストの要素を取得
  const taskList = document.getElementById("task-list");

  // 保存された各タスクに対して処理を行う
  savedTasks.forEach(function (taskText) {
    // タスクを表示する関数を呼び出す
    createTask(taskText);
  });
};

// タスクを追加するボタンがクリックされたときの処理
document.getElementById("add-task").addEventListener("click", function () {
  // ユーザーが入力したタスクのテキストを取得
  const taskText = document.getElementById("task-text").value;
  // 入力が空でない場合
  if (taskText) {
    // タスクを表示する関数を呼び出す
    createTask(taskText);
    // タスクを保存する関数を呼び出す
    saveTask(taskText);
    // 入力フィールドをクリア
    document.getElementById("task-text").value = "";
  }
});

// タスクを表示する関数
function createTask(taskText) {
  // タスクリストの要素を取得
  const taskList = document.getElementById("task-list");
  // 新しいタスクアイテム（li要素）を作成
  const taskItem = document.createElement("li");
  // タスクアイテムにテキストを設定
  taskItem.textContent = taskText;

  // 削除ボタンを作成
  const deleteButton = document.createElement("button");
  // 削除ボタンのテキストを設定
  deleteButton.textContent = "削除";
  // 削除ボタンがクリックされたときの処理を設定
  deleteButton.addEventListener("click", function () {
    // タスクを削除する関数を呼び出す
    deleteTask(taskText);
    // タスクアイテムをタスクリストから削除
    taskList.removeChild(taskItem);
  });

  // 削除ボタンをタスクアイテムに追加
  taskItem.appendChild(deleteButton);
  // タスクアイテムをタスクリストに追加
  taskList.appendChild(taskItem);
}

// タスクをローカルストレージに保存する関数
function saveTask(taskText) {
  // ローカルストレージから保存されたタスクを取得し、存在しなければ空の配列を作成
  const savedTasks = JSON.parse(localStorage.getItem("tasks")) || [];
  // 新しいタスクを保存されたタスクリストに追加
  savedTasks.push(taskText);
  // タスクリストをローカルストレージに保存
  localStorage.setItem("tasks", JSON.stringify(savedTasks));
}

// タスクを削除する関数
function deleteTask(taskText) {
  // ローカルストレージから保存されたタスクを取得し、存在しなければ空の配列を作成
  const savedTasks = JSON.parse(localStorage.getItem("tasks")) || [];
  // 指定されたタスクをフィルタリングして削除
  const updatedTasks = savedTasks.filter(function (task) {
    return task !== taskText;
  });
  // 更新されたタスクリストをローカルストレージに保存
  localStorage.setItem("tasks", JSON.stringify(updatedTasks));
}