家計簿アプリにカテゴリの追加・編集・削除機能を実装した【改修記録⑥】

はじめに

月別切り替え・円グラフ・予算設定・固定費自動追加・CSVエクスポートに続き、今回はカテゴリの追加・編集・削除機能を実装しました。

【シンプル家計簿】https://kakeibo-khaki.vercel.app/

これまでカテゴリは「食費・交通費・光熱費・娯楽・医療・給与・その他」の7つ固定でしたが、自分の好みでカスタマイズできるようになりました。

---

追加した機能

カテゴリ設定画面（category.html）

• カテゴリの追加・編集・削除が可能
• デフォルト7カテゴリは「デフォルト」バッジ付きで表示
• 重複名のチェックあり
• 削除時に確認ダイアログを表示
• データはkakeibo_catsキーでlocalStorageに保存

index.htmlの変更点

• カテゴリセレクトをlocalStorageから動的に生成
• 予算パネルのカテゴリ別設定も動的に生成
• 🏷️カテゴリ設定へのリンクを追加

---

実装の概要

1. データ構造

// kakeibo_catsの構造
cats = [
  { id: 123, name: '食費',   isDefault: true },
  { id: 456, name: '交通費', isDefault: true },
  { id: 789, name: '美容',   isDefault: false }, // 追加したカテゴリ
]

isDefaultフラグで「デフォルト」バッジの表示を制御しています。

2. 初期化処理

const DEFAULT_CATS = ['食費','交通費','光熱費','娯楽','医療','給与','その他'];

let cats = JSON.parse(localStorage.getItem('kakeibo_cats') || 'null');
if(!cats){
  // 初回アクセス時はデフォルトカテゴリを生成して保存
  cats = DEFAULT_CATS.map(name => ({
    id: Date.now() + Math.random(),
    name,
    isDefault: true
  }));
  saveCats();
}

nullチェックをすることで、初回アクセス時だけデフォルトカテゴリを生成します。2回目以降はlocalStorageから読み込みます。

3. 編集機能のUI切り替え

function startEdit(id){
  const item = document.querySelector(`.cat-item[data-id="${id}"]`);
  // 表示要素を隠してinputを表示
  item.querySelector('.cat-name').style.display = 'none';
  item.querySelector('.edit-input').style.display = 'block';
  item.querySelector('.edit-input').focus();
  // ボタンを切り替え
  item.querySelector('.btn-edit').style.display = 'none';
  item.querySelector('.btn-save').style.display = 'inline-block';
  item.querySelector('.btn-cancel').style.display = 'inline-block';
  item.querySelector('.btn-del').style.display = 'none';
}

編集ボタンを押すとテキストがinputに切り替わり、保存・キャンセルボタンが表示されます。displayの切り替えだけで実現しています。

4. index.htmlのカテゴリを動的生成

変更前（固定）：

<select id="inp-cat">
  <option value="食費">食費</option>
  <option value="交通費">交通費</option>
  <!-- 固定で書いていた -->
</select>

変更後（動的）：

<select id="inp-cat"></select> <!-- 空のまま -->

// カテゴリをlocalStorageから読み込んで動的に生成
function renderCatSelect(){
  const sel = document.getElementById('inp-cat');
  sel.innerHTML = getCatNames()
    .map(name => `<option value="${name}">${name}</option>`)
    .join('');
}

// 起動時に呼び出す
renderCatSelect();

---

まとめ

変更箇所	内容
category.html	カテゴリ設定専用画面を新規作成
index.html	カテゴリセレクトを動的生成に変更
index.html	予算パネルのカテゴリ別設定も動的生成に変更
index.html	カテゴリ設定へのリンクを追加

次回はダークモード対応の実装を予定しています。

---

★開発したアプリ
【シンプル家計簿】https://kakeibo-khaki.vercel.app/