【無料】メモ書きにも使えるToDoリストとその作り方

<div class="container">
  <input type="text" id="new-todo" placeholder="New task...">
  <button id="add-btn">Add</button>
  <button id="clear-btn">Clear</button>
  <ul id="todo-list"></ul>
</div>

.customize input,
.customize button {
  margin-right: 10px;
  font-size: 18px;
}

#todo-list {
  list-style-type: none;
  padding: 0;
}

#todo-list li {
  padding: 8px;
  border-bottom: 1px solid #aaa;
  display: flex;
  align-items: center;
  cursor: move;
}

#todo-list li.completed {
  text-decoration: line-through;
  color: grey;
}

#todo-list li input[type="checkbox"] {
  margin-right: 10px;
}

document.addEventListener('DOMContentLoaded', function() {
  const todoList = document.getElementById('todo-list'); // ToDoリストを表示するための要素
  const addBtn = document.getElementById('add-btn'); // ToDoを追加するためのボタン
  const clearBtn = document.getElementById('clear-btn'); // ToDoリストをクリアするためのボタン
  const newTodoInput = document.getElementById('new-todo'); // 新しいToDoを入力するための入力フィールド

  // Local StorageからToDoを読み込む
  let todos = JSON.parse(localStorage.getItem('todos')) || [];

  // ToDoを表示する関数
  function renderTodos() {
      todoList.innerHTML = ''; // ToDoリストをクリア
      todos.forEach((todo, index) => {
          const li = document.createElement('li'); // ToDoのリスト項目を作成
          li.draggable = true; // 追加: 各リスト項目をドラッグ可能にする
          li.dataset.index = index; // 追加: 各リスト項目にデータ属性を追加

          const checkbox = document.createElement('input'); // 完了状態を示すチェックボックスを作成
          checkbox.type = 'checkbox';
          checkbox.checked = todo.completed; // ToDoの完了状態を設定
          checkbox.addEventListener('change', () => toggleComplete(index)); // チェックボックスの状態が変わったときの処理を追加
          li.appendChild(checkbox);

          const span = document.createElement('span'); // ToDoの内容を表示する要素を作成
          span.textContent = todo.text;
          if (todo.completed) {
              li.classList.add('completed'); // 完了したToDoには線を引く
          }
          li.appendChild(span);

          // 追加: ドラッグイベントリスナーを設定
          li.addEventListener('dragstart', handleDragStart);
          li.addEventListener('dragover', handleDragOver);
          li.addEventListener('drop', handleDrop);

          todoList.appendChild(li); // ToDoリストにリスト項目を追加
      });
  }

  // 新しいToDoを追加する関数
  function addTodo() {
      const text = newTodoInput.value.trim(); // 入力フィールドからテキストを取得
      if (text !== '') {
          todos.push({ text, completed: false }); // 新しいToDoを配列に追加
          newTodoInput.value = ''; // 入力フィールドをクリア
          saveTodos(); // ToDoをLocal Storageに保存
          renderTodos(); // ToDoを再表示
          newTodoInput.focus(); // カーソルを入力フィールドに戻す
      }
  }

  // ToDoの完了状態を切り替える関数
  function toggleComplete(index) {
      todos[index].completed = !todos[index].completed; // ToDoの完了状態を反転
      saveTodos(); // ToDoをLocal Storageに保存
      renderTodos(); // ToDoを再表示
  }

  // 全てのToDoをクリアする関数
  function clearTodos() {
      if (confirm('To Do リストをすべてクリアします。よろしいですか？')) {
          todos = []; // ToDoの配列を空にする
          saveTodos(); // ToDoをLocal Storageに保存
          renderTodos(); // ToDoを再表示
          newTodoInput.focus(); // カーソルを入力フィールドに戻す
      } else {
          newTodoInput.focus(); // カーソルを入力フィールドに戻す
      }
  }

  // ToDoをLocal Storageに保存する関数
  function saveTodos() {
      localStorage.setItem('todos', JSON.stringify(todos)); // ToDoの配列を文字列に変換して保存
  }

  // 追加: ドラッグイベントのハンドラー関数
  function handleDragStart(event) {
      event.dataTransfer.setData('text/plain', event.target.dataset.index);
  }

  function handleDragOver(event) {
      event.preventDefault();
      event.dataTransfer.dropEffect = 'move';
  }

  function handleDrop(event) {
      event.preventDefault();
      const draggedIndex = event.dataTransfer.getData('text/plain');
      const targetIndex = event.target.closest('li').dataset.index;

      if (draggedIndex !== targetIndex) {
          const draggedTodo = todos.splice(draggedIndex, 1)[0];
          todos.splice(targetIndex, 0, draggedTodo);

          saveTodos();
          renderTodos();
      }
  }

  // イベントリスナーを設定
  addBtn.addEventListener('click', addTodo); // Addボタンをクリックしたときの処理
  clearBtn.addEventListener('click', clearTodos); // Clearボタンをクリックしたときの処理
  newTodoInput.addEventListener('keypress', function(event) {
      if (event.key === 'Enter') { // Enterキーを押したときの処理
          addTodo();
      }
  });

  // 初期表示
  renderTodos(); // ページ読み込み時にToDoを表示
  newTodoInput.focus(); // 初期表示時にカーソルを入力フィールドに設定
});