JavaScript | 1 日 90 分 × 7 日アプリ学習：簡単 ToDo アプリ（初級編）

1日目のゴールと今日のテーマ

1日目のテーマは「配列でタスクを管理して、画面を“描き直しながら”ToDoリストを動かす感覚をつかむこと」です。

作るのは、ほんとにシンプルな ToDo アプリです。

• テキスト入力して「追加」ボタンを押すと、タスクが増える
• 追加されたタスクを一覧表示する
• 「全消去」ボタンで、全部消せる

ここに今日の学びを全部詰め込みます。

• 配列：タスクを「一覧」として持つ箱
• 動的追加：ボタンを押すたびに配列にタスクを足す
• 再描画：配列の中身から、毎回画面を描き直す

この3つがつながったとき、「あ、アプリってこうやって動いてるんだ」が見えてきます。

まずは「今日作る ToDo アプリ」のイメージを固める

画面の見た目（ざっくり）

HTML はだいたいこんな構成を考えます。

<input id="todo-input" type="text" placeholder="やることを入力" />
<button id="add-button">追加</button>
<button id="clear-button">全消去</button>

<div id="todo-list"></div>

やりたいことを言葉にするとこうです。

• 入力欄に「買い物に行く」と打って「追加」 → 下に「買い物に行く」が表示される
• さらに「勉強する」と打って「追加」 → 「買い物に行く」「勉強する」と2つ並ぶ
• 「全消去」を押す → 一覧が空になる

ここで大事なのは、画面に出ている “文字のリスト” の正体は「配列」 だ、という意識です。
配列を変えて、その結果として「画面を描き直す」──これが今日のゴール。

配列で ToDo の「本体」を管理する

なぜ配列を使うのか

タスクが1つだけなら、変数1つで十分です。

let todo = "買い物に行く";

let todo = "買い物に行く";

でも、2つ、3つと増えたら？

let todo1 = "買い物に行く";
let todo2 = "勉強する";
let todo3 = "部屋を片付ける";
// …

let todo1 = "買い物に行く";
let todo2 = "勉強する";
let todo3 = "部屋を片付ける";
// …

こうなると、すぐに管理不能になります。
なので、「タスク一覧」は必ず1つの配列にまとめます。

let todos = [];

let todos = [];

ここに、タスクを追加していきます。

todos.push("買い物に行く");
todos.push("勉強する");
// todos は ["買い物に行く", "勉強する"]

todos.push("買い物に行く");
todos.push("勉強する");
// todos は ["買い物に行く", "勉強する"]

今日の大事な約束

• 画面に表示されているタスクは、配列 todos の中身と“常に一致させる”
• 逆に言うと、画面は配列の「結果」でしかない

これが頭に入ると、「配列を変えたら再描画」という流れが自然に見えてきます。

動的追加：入力→配列に追加→再描画 の流れ

まずは要素を JavaScript から触れるようにする

const inputEl = document.getElementById("todo-input");
const addButton = document.getElementById("add-button");
const clearButton = document.getElementById("clear-button");
const listEl = document.getElementById("todo-list");

let todos = [];

const inputEl = document.getElementById("todo-input");
const addButton = document.getElementById("add-button");
const clearButton = document.getElementById("clear-button");
const listEl = document.getElementById("todo-list");

let todos = [];

「追加」ボタンのクリックを拾う

addButton.addEventListener("click", handleAdd);

addButton.addEventListener("click", handleAdd);

handleAdd の中でやりたいことは3つです。

1. 入力欄の文字を取る
2. 配列 todos に追加する
3. 画面を再描画する

コードにするとこうなります。

function handleAdd() {
  const text = inputEl.value.trim();

  if (text === "") {
    // 空のときは何も追加しない
    return;
  }

  todos.push(text);
  inputEl.value = "";   // 入力欄を空にしてあげる
  render();
}

function handleAdd() {
  const text = inputEl.value.trim();

  if (text === "") {
    // 空のときは何も追加しない
    return;
  }

  todos.push(text);
  inputEl.value = "";   // 入力欄を空にしてあげる
  render();
}

ここでの重要ポイントは二つです。

• 入力値を trim() して、空文字（スペースだけなど）は追加しない
• 配列に追加したあと、必ず render() を呼ぶ

この「データを変える → 再描画する」というクセをつけておくと、アプリが一気に作りやすくなります。

再描画：配列から画面を“毎回作り直す”

「再描画」の考え方

render() は、「配列 todos の中身をもとに、画面の一覧を作り直す」関数です。

やることはこうです。

1. いったん表示部分を空っぽにする
2. todos の中身を先頭から順に取り出して
3. 1タスクごとに表示用の要素を作って
4. 画面に追加していく

コードにしてみる

function render() {
  // いったん全部消す
  listEl.textContent = "";

  // todos の中身を順番に表示
  todos.forEach((todo) => {
    const itemEl = document.createElement("div");
    itemEl.textContent = todo;
    listEl.appendChild(itemEl);
  });
}

function render() {
  // いったん全部消す
  listEl.textContent = "";

  // todos の中身を順番に表示
  todos.forEach((todo) => {
    const itemEl = document.createElement("div");
    itemEl.textContent = todo;
    listEl.appendChild(itemEl);
  });
}

ここでの深掘りポイントは、

• 「部分更新」ではなく「毎回全部作り直す」 という発想
• シンプルなアプリなら、このほうが圧倒的に分かりやすい

配列がアプリの「真の状態」で、
画面はそれを映しているだけ、という構造になっています。

全消去：配列を空にしてから再描画する

「全消去」は配列の中身をリセットするだけ

「全消去」ボタンの動きも、実はすごくシンプルです。

1. todos を空の配列にする
2. render() を呼ぶ

これだけです。

イベント登録から書いてみます。

clearButton.addEventListener("click", handleClear);

function handleClear() {
  todos = [];
  render();
}

clearButton.addEventListener("click", handleClear);

function handleClear() {
  todos = [];
  render();
}

もう一度強調しておきます。

• 画面を直接いじって “タスクだけ削除しよう” としない
• いつでも「配列を正にして、画面は再描画」で考える

この切り替えができた瞬間、アプリ開発の思考が一段階上がります。

1日目の全体コードイメージ

ここまでの流れを一枚にまとめると、こうなります。

const inputEl = document.getElementById("todo-input");
const addButton = document.getElementById("add-button");
const clearButton = document.getElementById("clear-button");
const listEl = document.getElementById("todo-list");

let todos = [];

function render() {
  listEl.textContent = "";

  todos.forEach((todo) => {
    const itemEl = document.createElement("div");
    itemEl.textContent = todo;
    listEl.appendChild(itemEl);
  });
}

function handleAdd() {
  const text = inputEl.value.trim();
  if (text === "") {
    return;
  }

  todos.push(text);
  inputEl.value = "";
  render();
}

function handleClear() {
  todos = [];
  render();
}

function setup() {
  addButton.addEventListener("click", handleAdd);
  clearButton.addEventListener("click", handleClear);
  render();
}

setup();

const inputEl = document.getElementById("todo-input");
const addButton = document.getElementById("add-button");
const clearButton = document.getElementById("clear-button");
const listEl = document.getElementById("todo-list");

let todos = [];

function render() {
  listEl.textContent = "";

  todos.forEach((todo) => {
    const itemEl = document.createElement("div");
    itemEl.textContent = todo;
    listEl.appendChild(itemEl);
  });
}

function handleAdd() {
  const text = inputEl.value.trim();
  if (text === "") {
    return;
  }

  todos.push(text);
  inputEl.value = "";
  render();
}

function handleClear() {
  todos = [];
  render();
}

function setup() {
  addButton.addEventListener("click", handleAdd);
  clearButton.addEventListener("click", handleClear);
  render();
}

setup();

この中で特に大事なのは、

• todos は「アプリの状態（タスク一覧）」を表す配列
• render() は「状態 → 画面」に変換する係
• handleAdd / handleClear は「状態をどう変えるか」を決める係

という役割分担になっていることです。

1日目のまとめと、2日目へのつなぎ

今日やったことを言葉で整理すると、こうなります。

• タスク一覧を配列 todos で管理する感覚をつかんだ
• 「追加」ボタンで入力値を配列に push し、その後 render() で画面を作り直す流れを覚えた
• 「全消去」では配列を空にして、再描画するだけでいいと理解した
• 画面はあくまで「配列（状態）の結果」であり、直接バラバラにいじらないほうがシンプルだと体感した

2日目からは、ここに少しずつ機能や“現実味”を足していきます。

• 1件ずつ削除できるようにする
• タスクに番号やIDをつける
• 「完了したタスク」の扱いを考え始める

その全部の土台になるのが、今日やった
「配列で状態を持ち、render で再描画する」 という設計です。

最後にひとつ、あえて聞きたい。

今日の中で、「あ、これちょっと気持ちいいな」と感じたのはどこでしたか？
配列に push したあと render() を呼んだ瞬間か、
todos = [] だけで全消去できたときか。

その「気持ちいい」と感じた部分が、あなたと“アプリ設計”をつなぐ一番大事なポイントです。
そこを意識しながら、2日目の ToDo 強化に進んでいきましょう。