JavaScriptでToDoアプリを作る④～最適化 その1～

前回までで、動作的(機能的)にはRaiseTechのReactコースの課題の要求を概ね満たしているので、ここからは、より良いコードにするために最適化して行く。

過去記事：

• JavaScriptでToDoアプリを作る①
• JavaScriptでToDoアプリを作る②
• JavaScriptでToDoアプリを作る③
• Web Storage APIとは？

今回の最適化ポイント

for の代わりに、配列のループ処理は、forEach / map / filter / reduce などのビルトインメソッドを使う。

Deleteボタン押下時の処理

JavaScript(変更前)

const deleteTasks = (deleteButton) => {
  const chosenTask = deleteButton.closest('li');
  taskList.removeChild(chosenTask);

  // ローカルストレージに保存
  const lStorage = getLocalStorage();
  for (let i = 0; i < lStorage.length; i++) {
    if (lStorage[i].item === chosenTask.id) {
      lStorage.splice(i, 1);
      setLocalStorage(lStorage);
      break;
    }
  }
};

JavaScript(変更後)

const deleteTasks = (deleteButton) => {
  const chosenTask = deleteButton.closest('li');
  taskList.removeChild(chosenTask);
  // ローカルストレージに保存
  setLocalStorage(getLocalStorage().filter((ls) => ls.item !== chosenTask.id));
};

Completeボタン押下時の処理

JavaScript(変更前)

const completeTasks = (completeButton) => {
  const chosenTask = completeButton.closest('li');

  if (chosenTask.className === 'complete') {
    // 完了タスクを未完了に戻す
    chosenTask.className = 'notComplete';
    completeButton.innerHTML = 'Complete';
  } else {
    // 未完了タスクを完了にする
    chosenTask.className = 'complete';
    completeButton.innerHTML = 'Restore';
  }

  // 完了・未完了のデータをローカルストレージに保存
  const lStorage = getLocalStorage();
  for (let i = 0; i < lStorage.length; i++) {
    if (lStorage[i].item === chosenTask.id) {
      if (chosenTask.className === 'complete') {
        lStorage[i].comp = 1;
      } else {
        lStorage[i].comp = 0;
      }
      setLocalStorage(lStorage);
      break;
    }
  }
};

JavaScript(変更後)

const completeTasks = (completeButton) => {
  const chosenTask = completeButton.closest('li');

  if (chosenTask.className === 'complete') {
    // 完了タスクを未完了に戻す
    chosenTask.className = 'notComplete';
    completeButton.innerHTML = 'Complete';
  } else {
    // 未完了タスクを完了にする
    chosenTask.className = 'complete';
    completeButton.innerHTML = 'Restore';
  }

  // 完了・未完了のデータをローカルストレージに保存
  let tempStorage = [];
  tempStorage = getLocalStorage().map((ls) => {
    if (ls.item === chosenTask.id) {
      ls.comp = chosenTask.className === 'complete' ? 1 : 0;
    }
    return ls;
  });
  setLocalStorage(tempStorage);
};

やること追加ボタン押下時の処理

JavaScript(変更前)

taskSubmit.addEventListener('click', (evt) => {
  evt.preventDefault();
  const task = taskInput.value;
  if (task === '') {
    // タスク未入力は認めない
    window.alert('タスクを入力してください');
    return;
  }

  const lStorage = getLocalStorage();
  if (lStorage !== null) {
    for (let i = 0; i < lStorage.length; i++) {
      if (lStorage[i].item === task) {
        // タスクの重複は認めない
        window.alert('タスクが重複しています');
        return;
      }
    }
  }

  addTasks(task);
  taskInput.value = '';
});

JavaScript(変更後)

taskSubmit.addEventListener('click', (evt) => {
  evt.preventDefault();
  const task = taskInput.value;
  if (task === '') {
    // タスク未入力は認めない
    window.alert('タスクを入力してください');
    return;
  }

  if (getLocalStorage() !== null) {
    if (getLocalStorage().find((ls) => ls.item === task) !== undefined) {
      // タスクの重複は認めない
      window.alert('タスクが重複しています');
      return;
    }
  }

  addTasks(task);
  taskInput.value = '';
});

リロード時の処理

JavaScript(変更前)

document.addEventListener('DOMContentLoaded', () => {
  const lStorage = getLocalStorage();

  if (lStorage === null) {
    taskList.textContent = '';
  } else {
    // ローカルストレージに保存してあるデータを戻す
    for (let i = 0; i < lStorage.length; i++) {
      const listItem = document.createElement('li');
      listItem.id = lStorage[i].item;
      if (lStorage[i].comp === 1) {
        listItem.setAttribute('class', 'complete');
      }
      listItem.textContent = lStorage[i].item;
      taskList.appendChild(listItem);
      addButtons(listItem);
    }
  }
});

JavaScript(変更後)

document.addEventListener('DOMContentLoaded', () => {
  const lStorage = getLocalStorage();

  if (lStorage === null) {
    taskList.textContent = '';
  } else {
    // ローカルストレージに保存してあるデータを戻す
    lStorage.forEach((ls) => {
      const listItem = document.createElement('li');
      listItem.id = ls.item;
      if (ls.comp === 1) {
        listItem.setAttribute('class', 'complete');
      }
      listItem.textContent = ls.item;
      taskList.appendChild(listItem);
      addButtons(listItem);
    });
  }
});

for でも問題ないが、mapやfind、filterを使った方が、何をしているのかがわかりやすい。(forは万能すぎて、何をしているのかを理解するのに時間がかかる。)