JavaScript | クラス継承でアロー関数を使うときの実務的な注意点

class TodoApp {
  constructor() {
    this.todos = [];

    // ボタンにイベントを登録（アロー関数を使うのでthisが壊れない）
    document.querySelector("#addBtn")
      .addEventListener("click", this.handleAdd);
  }

  // ✅ アロー関数：イベントハンドラ（thisを固定したい）
  handleAdd = () => {
    const input = document.querySelector("#todoInput");
    const text = input.value.trim();
    if (text) {
      this.addTodo(text);   // ← thisが常にインスタンスを指す
      input.value = "";
    }
  };

  // ✅ 通常メソッド：共通処理（インスタンス間で共有できる）
  addTodo(text) {
    this.todos.push(text);
    this.render();
  }

  // ✅ 通常メソッド：削除処理
  removeTodo(index) {
    this.todos.splice(index, 1);
    this.render();
  }

  // ✅ 通常メソッド：描画処理
  render() {
    const list = document.querySelector("#todoList");
    list.innerHTML = "";

    this.todos.forEach((todo, index) => {
      const li = document.createElement("li");
      li.textContent = todo;

      const btn = document.createElement("button");
      btn.textContent = "削除";
      // 削除ボタンのイベントハンドラはアロー関数で書くとthisが壊れない
      btn.addEventListener("click", () => this.removeTodo(index));

      li.appendChild(btn);
      list.appendChild(li);
    });
  }
}

class TodoApp {
  constructor() {
    this.todos = [];

    // ボタンにイベントを登録（アロー関数を使うのでthisが壊れない）
    document.querySelector("#addBtn")
      .addEventListener("click", this.handleAdd);
  }

  // ✅ アロー関数：イベントハンドラ（thisを固定したい）
  handleAdd = () => {
    const input = document.querySelector("#todoInput");
    const text = input.value.trim();
    if (text) {
      this.addTodo(text);   // ← thisが常にインスタンスを指す
      input.value = "";
    }
  };

  // ✅ 通常メソッド：共通処理（インスタンス間で共有できる）
  addTodo(text) {
    this.todos.push(text);
    this.render();
  }

  // ✅ 通常メソッド：削除処理
  removeTodo(index) {
    this.todos.splice(index, 1);
    this.render();
  }

  // ✅ 通常メソッド：描画処理
  render() {
    const list = document.querySelector("#todoList");
    list.innerHTML = "";

    this.todos.forEach((todo, index) => {
      const li = document.createElement("li");
      li.textContent = todo;

      const btn = document.createElement("button");
      btn.textContent = "削除";
      // 削除ボタンのイベントハンドラはアロー関数で書くとthisが壊れない
      btn.addEventListener("click", () => this.removeTodo(index));

      li.appendChild(btn);
      list.appendChild(li);
    });
  }
}

<input id="todoInput" type="text" placeholder="タスクを入力" />
<button id="addBtn">追加</button>
<ul id="todoList"></ul>

<script>
  const app = new TodoApp();
</script>

<input id="todoInput" type="text" placeholder="タスクを入力" />
<button id="addBtn">追加</button>
<ul id="todoList"></ul>

<script>
  const app = new TodoApp();
</script>