JavaScript：総合演習：Webアプリを作る

出力 == 1

filter で done が false のものを絞る（JS09）。

const tasks = [
  { text: "買い物", done: false },
  { text: "掃除", done: true },
];

console.log(tasks.filter((t) => !t.done).length);

状態から必要なものを取り出すのがアプリの基本動作。元の配列は変わらないので、絞り込みを何度でも自由に試せる。

解答 == B

画面と保存内容がズレないようにするには。

B

「状態が正、画面はその写し」——これが宣言的UIの考え方（JS17）。React・Vueなど現代のフレームワークもすべてこの思想で作られている。

出力 == 全2件 / 完了1件 / 残り1件

filter で完了数を数え、残りは引き算。オブジェクトで返すと受け取り側が分割代入できる（JS08）。

const countTasks = (tasks) => {
  const done = tasks.filter((t) => t.done).length;
  return { all: tasks.length, done, remaining: tasks.length - done };
};

const tasks = [
  { text: "買い物", done: false },
  { text: "掃除", done: true },
];

const { all, done, remaining } = countTasks(tasks);
console.log(`全${all}件 / 完了${done}件 / 残り${remaining}件`);

集計を関数に切り出すと、画面のどこからでも同じ計算を呼べる。表示形式を変えたくなっても、この関数は触らなくてよい。

const state = { tasks: [{ text: "買い物", done: false }] };

localStorage.setItem("tasks", JSON.____(state.tasks));

console.log(localStorage.getItem("tasks"));

出力 == [{"text":"買い物","done":false}]

オブジェクトや配列を文字列にするメソッド（JS17）。

stringify

localStorage は文字列しか保存できない。これを忘れると [object Object] になり、中身が失われる。

解答 == C

片方だけだと何がズレるか。

C

保存を忘れると再読み込みで消え、再描画を忘れると画面に出ない。「状態を変える → 保存 → 描き直す」は必ずセットで行う。

出力 == all:2 done:1 active:1

switch で条件を分ける（JS04）。all のときは元の配列をそのまま返す。

const filterTasks = (tasks, filter) => {
  switch (filter) {
    case "done":
      return tasks.filter((t) => t.done);
    case "active":
      return tasks.filter((t) => !t.done);
    default:
      return tasks;
  }
};

const tasks = [
  { text: "買い物", done: false },
  { text: "掃除", done: true },
];

const counts = ["all", "done", "active"]
  .map((f) => `${f}:${filterTasks(tasks, f).length}`)
  .join(" ");

console.log(counts);

絞り込みの条件も状態の一部として持つのがコツ。フィルタを切り替えたら再描画するだけで、表示が切り替わる。

localStorage.setItem("tasks", "{壊れたデータ");

const load = () => {
  ____ {
    return JSON.parse(localStorage.getItem("tasks")) ?? [];
  } catch (e) {
    return [];
  }
};

console.log(load().length);

出力 == 0

例外が起きうる処理を囲むキーワード（JS10）。

try

保存内容はユーザーが手で書き換えられるし、アプリの更新で形式が変わることもある。失敗したら初期状態から始めるのが安全。

解答 == B

後から追加された項目にも反応させたい。

B

イベント委譲（JS12）。再描画で項目を作り直すたびにリスナーを付け直す必要がなく、登録も1回で済む。

出力 == 買い物：完了

tasks[index].done = !tasks[index].done で反転できる。

const toggleTask = (tasks, index) => {
  tasks[index].done = !tasks[index].done;
};

const tasks = [
  { text: "買い物", done: false },
  { text: "掃除", done: true },
];

toggleTask(tasks, 0);

console.log(`${tasks[0].text}：${tasks[0].done ? "完了" : "未完了"}`);

! で真偽を反転させるのが定番。状態を変えるだけの関数にしておくと、保存や再描画は呼び出し側の責任として分離できる。

出力 == true false false

trim() で前後の空白を除いてから判定する（JS12）。21文字は "あ".repeat(21) で作れる。

const validateTask = (text) => {
  const trimmed = text.trim();
  return trimmed.length > 0 && trimmed.length <= 20;
};

const results = ["買い物", "  ", "あ".repeat(21)]
  .map((t) => validateTask(t))
  .join(" ");

console.log(results);

検証を関数に切り出すと、追加時と編集時の両方から同じルールを使える。ルールが変わってもここ1箇所を直すだけで済む。

出力 == 保存：2件 / フィルタ：all

state ごと JSON.stringify で保存し、JSON.parse で復元する。

const state = { tasks: [], filter: "all" };

const save = () => localStorage.setItem("app", JSON.stringify(state));

state.tasks.push({ text: "買い物", done: false });
state.tasks.push({ text: "掃除", done: true });
save();

const loaded = JSON.parse(localStorage.getItem("app"));
console.log(`保存：${loaded.tasks.length}件 / フィルタ：${loaded.filter}`);

状態をまるごと1つのキーに保存すると、項目が増えても保存処理を書き足さずに済む。フィルタの選択状態も復元されるので、再訪時に前回の続きから始められる。

li 2つ・done 1つ・summary が 全2件 / 残り1件

render の冒頭で list.innerHTML = "" して作り直す（JS11・JS17）。

const state = {
  tasks: [
    { text: "買い物", done: false },
    { text: "掃除", done: true },
  ],
};

const list = document.querySelector("#list");
const summary = document.querySelector("#summary");

const render = () => {
  list.innerHTML = "";

  for (const task of state.tasks) {
    const li = document.createElement("li");
    li.textContent = task.text;

    if (task.done) {
      li.classList.add("done");
    }

    const del = document.createElement("button");
    del.textContent = "削除";
    del.classList.add("del");
    li.appendChild(del);

    list.appendChild(li);
  }

  const remaining = state.tasks.filter((t) => !t.done).length;
  summary.textContent = `全${state.tasks.length}件 / 残り${remaining}件`;
};

render();

render は状態を読むだけで、状態を変えない。この分担を守ると、いつ呼んでも同じ結果になるので、動作が予測しやすくなる。

出力 == APIから2件取得

load() が空配列なら await fetchTasks() を使う。非同期なので init は async にする（JS15）。

const fetchTasks = () =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { text: "資料作成", done: false },
        { text: "メール返信", done: false },
      ]);
    }, 20);
  });

const load = () => {
  try {
    return JSON.parse(localStorage.getItem("tasks")) ?? [];
  } catch (e) {
    return [];
  }
};

const state = { tasks: [] };

async function init() {
  const saved = load();

  if (saved.length > 0) {
    state.tasks = saved;
    console.log(`保存から${saved.length}件復元`);
    return;
  }

  state.tasks = await fetchTasks();
  console.log(`APIから${state.tasks.length}件取得`);
}

init();

保存があればそれを使い、無ければ取得する——実際のアプリで最もよくある起動処理。2回目以降の訪問では通信が発生しないので、表示も速くなる。

li 1つ・input が空・保存1件

validate → push → save → render → クリアの順に書く。1つでも欠けるとズレる。

const state = { tasks: [] };

const input = document.querySelector("#input");
const addBtn = document.querySelector("#addBtn");
const list = document.querySelector("#list");

const save = () => localStorage.setItem("tasks", JSON.stringify(state.tasks));

const render = () => {
  list.innerHTML = "";

  for (const task of state.tasks) {
    const li = document.createElement("li");
    li.textContent = task.text;
    list.appendChild(li);
  }
};

addBtn.addEventListener("click", () => {
  const text = input.value.trim();

  if (!text) {
    return;
  }

  state.tasks.push({ text, done: false });
  save();
  render();
  input.value = "";
});

この5手が「1つの操作」の完成形。実務でも、状態を変える操作はすべてこの流れで書く。順序を守れば、画面・保存・状態の3つが必ず一致する。

active 選択後 li が2つ

e.target.dataset.filter で属性値が取れる。state.filter を書き換えて render を呼ぶだけでよい（イベント委譲）。

const state = {
  tasks: [
    { text: "A", done: false },
    { text: "B", done: true },
    { text: "C", done: false },
  ],
  filter: "all",
};

const list = document.querySelector("#list");
const filters = document.querySelector("#filters");

const visibleTasks = () => {
  switch (state.filter) {
    case "active":
      return state.tasks.filter((t) => !t.done);
    case "done":
      return state.tasks.filter((t) => t.done);
    default:
      return state.tasks;
  }
};

const render = () => {
  list.innerHTML = "";

  for (const task of visibleTasks()) {
    const li = document.createElement("li");
    li.textContent = task.text;
    list.appendChild(li);
  }
};

filters.addEventListener("click", (e) => {
  const value = e.target.dataset.filter;

  if (!value) {
    return;
  }

  state.filter = value;
  render();
});

render();

フィルタを変えてもタスク自体は一切変わらない。変わるのは「どれを表示するか」だけ。状態と表示を分けておくと、こういう機能があとから簡単に足せる。