JavaScript | 1 日 60 分 × 7 日アプリ学習：JavaScript基礎・DOM操作ミニ家計簿編

ミニ家計簿アプリ 1日目のゴール
家計簿で扱う1件分のデータを言葉で整理する
家計簿1件分をオブジェクトで表現する
1. 深掘りポイント
複数の家計簿データを配列で管理する
1. 深掘りポイント
ミニ家計簿 1日目の小さなアプリを作る
1. HTMLの骨組み
JavaScriptで家計簿データを定義する
配列を画面に表示する関数を作る
1. 深掘りポイント
ミニ家計簿 1日目の完成コード
配列・オブジェクトの「感覚」をもう一段深く理解する
1日目で本当に掴んでほしいこと

ミニ家計簿アプリ 1日目のゴール

1日目のテーマは 「配列とオブジェクトを使って“1件の支出”と“支出の一覧”を表現できるようになること」 です。

ミニ家計簿は、

日付
項目（食費・交通費など）
金額
メモ

といった情報を扱います。これを オブジェクト として表現し、それらを配列にためていくことで、「家計簿の1行」と「家計簿全体」をコードで表現していきます。

家計簿で扱う1件分のデータを言葉で整理する

まず、「家計簿の1行」に何が必要かを整理します。

日付：いつ使ったお金か
カテゴリ：何に使ったか（食費・交通費など）
金額：いくら使ったか
メモ：ひとことメモ（例：ランチ、電車代など）

これを ひとつのまとまり として扱いたいので、 JavaScriptでは オブジェクト を使います。

家計簿1件分をオブジェクトで表現する

オブジェクトは「名前付きの値の集まり」です。家計簿1件分をオブジェクトで書くと、次のようになります。

// 家計簿の1件分を表すオブジェクト
const record = {
  date: "2026-08-14",   // 日付
  category: "食費",      // カテゴリ（何に使ったか）
  amount: 800,          // 金額（数値）
  memo: "コンビニでおにぎり" // メモ
};

// 家計簿の1件分を表すオブジェクト
const record = {
  date: "2026-08-14",   // 日付
  category: "食費",      // カテゴリ（何に使ったか）
  amount: 800,          // 金額（数値）
  memo: "コンビニでおにぎり" // メモ
};

JavaScript

深掘りポイント

date, category, amount, memo は「プロパティ名」
"2026-08-14" や 800 は「プロパティの値」
record.date のようにして、あとから値を取り出せる

オブジェクトは、 「意味のあるひとまとまりのデータ」 を表現するのに向いています。

複数の家計簿データを配列で管理する

家計簿は、1件だけではなく、 日々の支出がたくさんたまっていくもの です。

そこで、複数のオブジェクトを配列に入れて管理します。

// 家計簿の一覧を表す配列
const records = [
  {
    date: "2026-08-14",
    category: "食費",
    amount: 800,
    memo: "コンビニでおにぎり"
  },
  {
    date: "2026-08-14",
    category: "交通費",
    amount: 320,
    memo: "電車代"
  },
  {
    date: "2026-08-13",
    category: "日用品",
    amount: 1200,
    memo: "ドラッグストアで洗剤"
  }
];

// 家計簿の一覧を表す配列
const records = [
  {
    date: "2026-08-14",
    category: "食費",
    amount: 800,
    memo: "コンビニでおにぎり"
  },
  {
    date: "2026-08-14",
    category: "交通費",
    amount: 320,
    memo: "電車代"
  },
  {
    date: "2026-08-13",
    category: "日用品",
    amount: 1200,
    memo: "ドラッグストアで洗剤"
  }
];

JavaScript

深掘りポイント

records は「家計簿の行の一覧」
中身は オブジェクトの配列
records[0].category のようにして、「1件目のカテゴリ」を取り出せる

ここで、 「オブジェクト × 配列」 の組み合わせがとても強力だということを感じてほしいです。

ミニ家計簿 1日目の小さなアプリを作る

1日目のゴールとして、 「あらかじめ用意した家計簿データを画面に一覧表示するミニアプリ」 を作ってみます。

HTMLの骨組み

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ミニ家計簿 1日目</title>
</head>
<body>
  <h1>ミニ家計簿（1日目）</h1>

  <!-- 家計簿一覧を表示する場所 -->
  <ul id="recordList"></ul>

  <script>
    // ここに JavaScript を書いていく
  </script>
</body>
</html>

<ul> は「箇条書きリスト」です。ここに、家計簿の1件ずつを <li> として追加していきます。

JavaScriptで家計簿データを定義する

HTMLの <script> の中に、家計簿の配列を定義します。

// 家計簿の一覧を表す配列（サンプルデータ）
const records = [
  {
    date: "2026-08-14",
    category: "食費",
    amount: 800,
    memo: "コンビニでおにぎり"
  },
  {
    date: "2026-08-14",
    category: "交通費",
    amount: 320,
    memo: "電車代"
  },
  {
    date: "2026-08-13",
    category: "日用品",
    amount: 1200,
    memo: "ドラッグストアで洗剤"
  }
];

// 家計簿の一覧を表す配列（サンプルデータ）
const records = [
  {
    date: "2026-08-14",
    category: "食費",
    amount: 800,
    memo: "コンビニでおにぎり"
  },
  {
    date: "2026-08-14",
    category: "交通費",
    amount: 320,
    memo: "電車代"
  },
  {
    date: "2026-08-13",
    category: "日用品",
    amount: 1200,
    memo: "ドラッグストアで洗剤"
  }
];

JavaScript

この時点で、 「家計簿の中身」をコードで表現できている 状態です。

配列を画面に表示する関数を作る

次に、 records 配列の中身を画面に表示する関数を作ります。

// 家計簿の配列を画面に表示する関数
function renderRecords(recordsArray, listElement) {
  // いったん表示を空にする
  listElement.innerHTML = "";

  // 配列の各要素（1件分の家計簿）を順番に処理
  recordsArray.forEach(function(record) {
    // li 要素を作成
    const li = document.createElement("li");

    // 表示用のテキストを組み立てる
    const text =
      record.date + " / " +
      record.category + " / " +
      record.amount + "円 / " +
      record.memo;

    // li にテキストをセット
    li.textContent = text;

    // ul に li を追加
    listElement.appendChild(li);
  });
}

// 家計簿の配列を画面に表示する関数
function renderRecords(recordsArray, listElement) {
  // いったん表示を空にする
  listElement.innerHTML = "";

  // 配列の各要素（1件分の家計簿）を順番に処理
  recordsArray.forEach(function(record) {
    // li 要素を作成
    const li = document.createElement("li");

    // 表示用のテキストを組み立てる
    const text =
      record.date + " / " +
      record.category + " / " +
      record.amount + "円 / " +
      record.memo;

    // li にテキストをセット
    li.textContent = text;

    // ul に li を追加
    listElement.appendChild(li);
  });
}

JavaScript

深掘りポイント

recordsArray.forEach(...)
- 配列の各要素（家計簿1件）を順番に処理するためのメソッド
record.date や record.amount
- オブジェクトのプロパティを使って、「意味のある情報」を取り出している
createElement("li") ＋ appendChild(li)
- JavaScriptでHTML要素を作り、画面に追加している

この関数は 「家計簿配列 → 画面表示」 という役割を持っています。

ミニ家計簿 1日目の完成コード

ここまでの内容をひとつにまとめた 1日目の完成版です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ミニ家計簿 1日目</title>
</head>
<body>
  <h1>ミニ家計簿（1日目）</h1>

  <!-- 家計簿一覧を表示する場所 -->
  <ul id="recordList"></ul>

  <script>
    // 家計簿の一覧を表す配列（サンプルデータ）
    const records = [
      {
        date: "2026-08-14",
        category: "食費",
        amount: 800,
        memo: "コンビニでおにぎり"
      },
      {
        date: "2026-08-14",
        category: "交通費",
        amount: 320,
        memo: "電車代"
      },
      {
        date: "2026-08-13",
        category: "日用品",
        amount: 1200,
        memo: "ドラッグストアで洗剤"
      }
    ];

    // 家計簿の配列を画面に表示する関数
    function renderRecords(recordsArray, listElement) {
      // いったん表示を空にする
      listElement.innerHTML = "";

      // 配列の各要素（1件分の家計簿）を順番に処理
      recordsArray.forEach(function(record) {
        // li 要素を作成
        const li = document.createElement("li");

        // 表示用のテキストを組み立てる
        const text =
          record.date + " / " +
          record.category + " / " +
          record.amount + "円 / " +
          record.memo;

        // li にテキストをセット
        li.textContent = text;

        // ul に li を追加
        listElement.appendChild(li);
      });
    }

    // DOM要素の取得
    const recordList = document.getElementById("recordList");

    // ページ読み込み時に家計簿を表示
    renderRecords(records, recordList);
  </script>
</body>
</html>