1. 変数とデータの扱い

この章の目的

JavaScriptにおける変数、配列、オブジェクトの使い方を理解し、ToDoアプリでどのようにデータを扱っているかを学びます。

変数の定義

let と const の違いを理解しましょう。

let taskCount = 0;       // 後から変更可能
const appTitle = "ToDoアプリ"; // 変更不可（定数）

配列の使い方

タスクを複数まとめて管理したい場合に使います。

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

tasks[0].text で「買い物」が取り出せます。

オブジェクトの使い方

タスクグループのように名前付きで情報を管理したいときに便利です。

const taskGroup = {
  desc: "今日のタスク",
  tasks: [
    { text: "宿題", done: false }
  ]
};

ToDoアプリでの実践例

実際のアプリでは、次のようにデータを全体で管理しています。

let taskGroups = {
  "仕事": {
    desc: "会社でやること",
    tasks: [
      { text: "会議の準備", done: false }
    ]
  },
  "プライベート": {
    desc: "個人の用事",
    tasks: []
  }
};

ローカルストレージとの関係

変数に格納したデータは、localStorage で保存・復元されます。

// 保存
localStorage.setItem("taskGroups", JSON.stringify(taskGroups));

// 読み込み
const saved = localStorage.getItem("taskGroups");
if (saved) {
  taskGroups = JSON.parse(saved);
}