はじめに
「筋トレを簡単に記録したいなー、でも世にあるアプリでしっくりくるものがない」
「iPhoneでもPCでも使える、シンプルな習慣管理アプリを自分で作りたい」
「生成AIに手伝ってもらえば作れるかも」
そんな思いから、以下を満たすWebアプリを
HTML / CSS / JavaScript（with ChatGPT)で作りました。
- カレンダーに ⭕️ / ❌ を記録
- 連続達成日数（ストリーク）表示
- データは端末内のみ（サーバーなし）
- GitHub Pagesで公開
- PWA化してホーム画面アプリとして利用可能
この記事では、設計思想・構成・実装のポイントをまとめます。
完成したアプリでできること
- 月別カレンダー表示
- 日付タップで ⭕️ / ❌ を記録
- 前月 / 次月への切り替え
- 連続達成日数（ストリーク）自動計算
- localStorage によるデータ保存
- iPhone / PC 両対応
- PWA対応（オフライン利用可）
技術スタック
| 項目 | 内容 |
|---|---|
| フロントエンド | HTML / CSS / JavaScript（Vanilla） |
| データ保存 | localStorage |
| デプロイ | GitHub Pages |
| PWA | manifest.json / service-worker.js |
※ サーバー・DB・APIは使用していません。
ファイル構成
/
├── index.html
├── manifest.json
├── service-worker.js
├── icon-192.png
└── icon-512.png
UI設計の考え方
意識したポイントは以下です。
• 毎日開いても疲れない
• 操作はワンタップ
• 情報は最小限
• iPhoneでも片手操作しやすい
UI構成はとてもシンプルで、
• ヘッダー：年月表示＋月切替
• 上部：ストリーク表示
• メイン：カレンダー
のみです。
カレンダー実装のポイント
js
const firstDay = new Date(year, month, 1).getDay();
const lastDate = new Date(year, month + 1, 0).getDate();
- Date(year, month + 1, 0) で月末日を取得
- 月初の曜日ズレは空セルで調整
- 日付クリックで ⭕️ → ❌ → 未記録 をトグル
データ保存（localStorage）
js
const key = `${year}-${month + 1}-${day}`;
localStorage.setItem(key, value);
- データは端末のブラウザ内のみ
- サーバー送信なし
- 他人の端末からは見えない
本アプリはサーバー通信を行わず、データはすべてブラウザの localStorage に保存されます。
🔥 連続達成日数（ストリーク）実装
js
function calculateStreak() {
let count = 0;
let date = new Date();
while (true) {
const key = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
if (localStorage.getItem(key) === "⭕️") {
count++;
date.setDate(date.getDate() - 1);
} else {
break;
}
}
return count;
}
- 今日から過去へ遡って ⭕️ が続く限りカウント
- ❌ または未記録でストップ
- 習慣化のモチベーション維持に効果大
📱 PWA化（ホーム画面アプリ）
manifest.json
js
{
"name": "Habit Calendar",
"short_name": "Habit",
"start_url": "./",
"display": "standalone",
"background_color": "#f2f4f8",
"theme_color": "#2563eb",
"icons": [
{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
service-worker.js
js
self.addEventListener("install", e => {
e.waitUntil(
caches.open("habit-cache").then(cache =>
cache.addAll(["./", "./index.html"])
)
);
});
- Safariで開いて「ホーム画面に追加」でアプリ化
- アドレスバーなし
- オフラインでも利用可能
アイコン作成
- ⭕️ をモチーフにしたシンプルなデザイン
- 192px / 512px の2サイズ
- PWA要件を満たす最小構成
GitHub Pages公開とセキュリティ
結論
✅ 個人情報漏洩のリスクはほぼなし
理由：
• サーバーなし
• DBなし
• ログインなし
• データは localStorage のみ
「紙の習慣トラッカーをWeb化した」イメージです。
作ってみた感想
- フレームワークなしでも実用レベルまで作れる
- PWAは個人ツールと相性が良い
-「自分で毎日使うもの」を作ると完成度が上がる
今後の拡張アイデア
- 複数習慣の管理
- 月別達成率表示
- CSVエクスポート
- クラウド同期（将来）
まとめ
- HTML / CSS / JSだけで
- iPhone / PC両対応
- 習慣トラッカーを作成
- PWA化＆GitHub Pages公開
生成AIにサポートしてもらいWebだけでここまでできるという良い実例になりました。