🙌
【個人開発】底値表アプリを開発した話
概要
- 底値表アプリ（Price Table）は、商品の価格情報を手軽に管理できるWebアプリ
- PWA対応によりオフラインでも利用可能
- PCだけでなくモバイルにも対応
- データのエクスポート/インポートはJSON形式
- GitHub Pagesで無料公開・運用中
底値表アプリを作った背景
私はかなりの節約家で普段からレシートを持ち帰って家計簿をつけています。
節約家な私は 商品を1円でも安く買いたい ので、家計簿と一緒に買った商品の価格比較をExcelで行っていました。
そんなある日、スーパーで買い物をしていた時に「その場でスマホを使って価格を記録して残しておくアプリがあれば良いのになぁ～」と思い、底値表の開発を始めました（たぶん3日前くらい）
（やっぱり、Excel管理面倒！！スマホですぐ見れないし、、、）
とりあえず、AIに相談してたたき台の設計を作ってもらい、開発を進行していきました。
（自分がやったのはデータ設計と画面設計程度です。）
開発進めて3日後、以下のサイトが完成しました。（AIすごい）
使用技術・バージョン
- フロントエンド:React v19.1.0
- ルーティング: react-router-dom v7.6.3
- UI: Tailwind CSS v3.4.17, react-icons v5.5.0, clsx v2.1.1
- PWA: service worker, manifest.json
- デプロイ: gh-pages v6.3.0
- リンター・フォーマッター: ESLint, Prettier, eslint-plugin-tailwindcss
特徴・工夫ポイント
-
PWA対応
PWA実装のため、オフラインでも利用可能。スマホにインストールしてホーム画面追加もOK！ -
データ共有
JSON形式でエクスポート・インポートでき、端末間のデータ移行やバックアップ可能 -
GitHub Pages公開
静的ビルド＆無料ホスティングでWebアプリを公開 -
レスポンシブ対応
スマホ・PC両対応のレスポンシブデザイン
使い方
1. 商品の追加
- 「新規追加」ボタンで商品登録フォームを開き、必要事項を入力して「登録」
2. 価格記録の追加
- 各商品ごとの「価格追加」ボタンで価格記録を追加
3. 商品の検索
- 上部の検索バーで商品名を入力して絞り込み
4. 商品・記録の編集/削除
- 商品や価格の「編集」「削除」ボタンで内容の変更や削除が可能
5. データのエクスポート/インポート（JSON）
- ヘッダー部の「エクスポート」ボタンでデータをJSONファイルとしてダウンロード
- 「インポート」ボタンでバックアップしたJSONファイルを読み込み復元
PWA・オフライン対応について
- 初回アクセス時または設定からPWAとしてインストール可能（スマホなら「ホーム画面に追加」）
- オフライン時もキャッシュされたデータで閲覧・操作が可能
- データはブラウザのローカルストレージに保存され、エクスポート/インポートで他端末と共有可能
GitHub
追記
7/15
- 店舗検索機能と最安値フィルター機能を追加
Discussion