子供達の毎日のがんばりを「見える化」したい。ピアノの練習をやったか、宿題は終わったか、プリントは何枚やったか──そんな日々の記録を楽しく管理できるアプリが欲しくて、Claude Codeの力を借りて作ってみました。開発途中でElectronの壁にぶつかりましたが、方針転換して無事完成。その一部始終を書きます。
作りたかったもの
子供が毎日やるべきことをチェックして、がんばった分だけ「ゲーム時間」が貯まる仕組みのカレンダーアプリです。具体的にはこんな要件でした。
- ピアノ・宿題・プリントなど、毎日の学習や練習を記録できる
- プリント枚数に応じてゲーム時間が自動計算されて「貯まる」
- 貯まった時間はお金にも交換できる
- 子供ごとにデータを分けて管理できる
要は、がんばったらゲーム時間がもらえるというモチベーション設計です。
外発的動機づけにはなりますが、遊びの一貫だったり、30分ゲームするには国語を１枚と英語を２枚頑張ろうって考えたり、買いたいものがあるからポイント貯めてお金に変えようって考えたり、良い面もあるかなとは思ったり。
最初はElectronで作ろうとした
デスクトップアプリとして動かしたかったので、最初はElectronで開発を始めました。子供モードと親モードを分けて、iCloud経由でデータを共有する設計です。
※ Electronとは、Web技術（HTML/CSS/JavaScript）を使ってWindows・Mac・Linuxのデスクトップアプリを作れるフレームワーク。VS CodeやSlackもこの技術で作られています。
ところが、macOS 26 Tahoe環境でElectronがうまく起動しないという問題にぶつかりました。
互換性の問題のようです。。。
方針転換──HTML1ファイルで完結させる
インストールして使うアプリにこだわるのをやめて、HTML・CSS・JavaScriptを1つのファイルにまとめた構成に切り替えました。この判断が結果的に大正解でした。
- ブラウザさえあれば動くので、OS互換性の問題がゼロ
- 外部ライブラリもサーバーも不要
- ファイルをダブルクリックするだけで起動
- データはブラウザのlocalStorageに保存
※ localStorageとは、ブラウザにデータを保存できる仕組み。サーバーを使わなくても、ブラウザを閉じてもデータが残ります。ただし、ブラウザのデータを消去すると一緒に消えるので注意が必要です。キャッシュのクリアだけなら基本的に大丈夫。ただし「全てのサイトのデータを削除」や「Cookieとサイトデータを削除」を選ぶと一緒に消えます。Safariの「履歴とWebサイトのデータ消去」もLocalStrageごと消えるので注意です。ブラウザのアンインストールも消えます。
完成した機能一覧
最終的に約750行のHTMLファイル1つで、ここまでの機能を実現できました。
- 月表示カレンダー ── 日付ごとに達成アイコンを表示
- 日別記録 ── ピアノ・宿題のチェック、プリント枚数、ゲーム時間を入力
- ゲーム時間の条件付き解放 ── ピアノと宿題を両方やらないと入力不可
- 時間の自動計算 ── プリント枚数×レートで時間が貯まり、ゲームで消費
- お金への交換表示 ── 残り時間を設定レートで金額換算
- 複数の子供に対応 ── タブ切り替えで子供ごとにデータ管理
- 編集ロック ── 保存済みの記録はパスワードが必要（ゲーム時間追加だけ例外）
- フルカスタマイズ ── 項目名・レート・パスワードを設定画面から変更可能
- 項目の追加・削除 ── チェック項目や枚数項目を自由に増減
- 手動エクスポート/インポート機能 ── まんがいちデータが消えても復活できるように
Claude Codeを使ってみた感想
今回の開発では、要件を日本語で伝えるだけでClaude Codeが設計からコード生成まで一気にやってくれました。特に助かったのは以下のポイントです。
※ Claude Codeとは、Anthropic社が提供するAIコーディングツール。ターミナル（コマンドライン）から直接AIにコーディングを依頼でき、ファイルの作成・編集・実行まで自動で行ってくれます。
- Electronで詰まった時、原因調査→バージョンアップ→方針転換まで自動で進んでくれた
- 「ゲーム時間だけパスワードなしで増やせるように」のような細かい仕様変更もすぐ反映
- 1040行のコードを一貫した設計で書ききってくれた
自分はプログラミングの専門家ではありませんが、「こういうものが欲しい」を言葉で伝えるだけで形になるのは、本当にすごい体験でした。
まとめ
macOS 26 TahoeはまだElectronとの互換性に課題がありますが、「とりあえず動くもの」を最短で作るなら単一HTMLファイルという選択肢は最強です。localStorageだけでも子供用アプリのデータ保存には十分ですし、Claude CodeのおかげでElectronの壁にぶつかってもすぐにHTML版に切り替えて完成できました。
子供の学習管理に悩んでいる方、AIの力を借りてアプリを作ってみたい方の参考になれば幸いです。
「頑張りカレンダー」はこちらからダウンロード
https://github.com/npc-works/child_calender2/releases/tag/v2.0.0
※この記事はNPCの中の人 azusaの実務経験をもとに書いています。