こんにちは！今回は、個人的なニーズから開発したメシログアプリ「GohanLog」について、開発の経緯や技術スタック、苦労した点などをまとめてみたいと思います。
なぜ作ったのか？
世の中には「食べログ」や「Retty」、「Google Maps」など、素晴らしいグルメアプリがたくさんあります。
でも、自分が欲しかったのは 「他人に見せるため」ではなく「自分のための」 シンプルな記録帳でした。
既存のアプリは高機能すぎて起動が遅かったり、SNS機能が邪魔だったり…。
そこで、僕はiPhoneのメモに記録を取っていました。
しかしいつかアプリ化してみたいという想いはあり、この度Antigravityを知ったのをきっかけに作ってみることにしました。
Antigravity
Googleが公開した、新しい開発プラットフォームです。
既に素敵な解説記事がたくさんあると思うので詳細はそちらにお譲りするとして、
一番の特徴は、従来の「AI がコード補助をする」ツールを超えて、「エージェント（AI）が主体となってタスクを計画・実行・検証する」開発フローを目指している点です。
実はこれまでにも何度か挑戦しては失敗して諦めていたのですが、
これなら自分でも開発できるんじゃないかと思い、再度挑戦してみました。
アプリの概要
GohanLog 🍚
https://sugirin.github.io/GohanLog/
iPhoneのホーム画面に追加して使うことを想定したWebアプリです。
- 記録 (Record): 店名、一緒に行った人、写真、メモをサクサク入力。よく使うタグは自動で候補に出ます。
- 履歴 (History): 写真付きのリストで振り返り。店名や人名で瞬時にフィルタリング可能。
- データ管理: データは全て端末内のIndexedDBに保存。JSONでのバックアップ/復元も完備。
開発の記録
まず最初に与えたプロンプトはこのようなものです。
私は人と食事に行った時、いつ誰とどこに行ったのかをメモしています。
今はiPhoneのメモアプリで取っていますが、これをアプリ化したいです。
キーコンセプトは、
・シンプルで軽量、起動から5秒で記録
・ネット接続不要
・記録するものは、日付・人物・店の名前・1〜数枚の写真
・記録するときに極力文字入力を使いたくない。そのために、
・日付はデフォルトで今日に設定され、変更の必要があればカレンダー選択
・一度登場した人物や店の名前はタグ化し、次からはタップだけで済む
・写真はアプリからカメラを直接起動するか、アルバムから選択する
・後で、人物や店の名前から、以前いつ行ったのかを見返せるようにしたい
まずはどのような技術スタックでこれを実現できるか、検討・提案してください。
すると大体以下のような技術スタックを提案してくれました。
Hostingの部分だけ、あまりに聞き馴染みのないものだったので後からGithub Pagesにしてもらいました。
-
Frontend: React 19 + TypeScript + Vite
- 最新のReact 19を採用。Viteのおかげで開発もビルドも爆速です。
-
Styling: Tailwind CSS v4
- リリースされたばかりのv4を導入。CSS変数の扱いやビルドパフォーマンスが向上しています。デザインは「ポップでプレミアム」なUIを目指しました。
-
Database: Dexie.js (IndexedDB wrapper)
- サーバーレスで完結させるため、ブラウザのIndexedDBを使用。Dexie.jsを使うことで、SQLライクに直感的にデータを扱えます。
-
PWA: vite-plugin-pwa
- ネイティブアプリのような挙動を実現するために必須。オフライン動作やホーム画面への追加をサポートします。
-
Hosting: GitHub Pages
- 静的サイトとして無料でホスティング。デプロイもGitHub Actionsで自動化しています。
これで進めて！と言い、後は指示に従ってNode.jsのインストールなどを行うと…
なんと一発でそれなりに動くものができてしまいました。
その後は実際に触ってフィードバックを繰り返し、自分の思う形に近づけていきました。
今回の開発で自分でコードを書いた部分は1行もありません。
こだわりポイントと苦労した点
1. 完全オフライン動作
地下の飲食店でも使えるように、通信を一切必要としない設計にしました。
2. 文字入力を極力避けるUI/UX
iPhoneのメモでのタグ機能をイメージして、一度登場した店や人物をワンタップで記録に追加できることを実現しました。
3. 細かいデザイン
アイコンとテキスト入力欄が被ってしまったり、余白がなくギチギチな印象のUIになったり。。。
見た目の部分はまだ不得意なようなので、細かくフィードバックをしましたが、
使っているテンプレートの兼ね合いなどでうまく反映できないことがほとんどでした。
今も格闘中です。
課題
コードを全く書かず、構成も理解しないままに動くものができてしまったので、
自分の知識は全く増えていません。
AIに頼むほどでもないような変更（例えば、文字色を変えるなど）でも、どこを変えたらいいのか探し当てるのに苦労します。
AIが書いてくれたコードを読み、理解できるように頑張ろうと思います。
まとめ
「自分が欲しいものを作る」というのは個人開発の醍醐味です。GohanLogは毎日の食事がちょっと楽しくなる、そんなアプリになったと思います。
もし興味があれば、ぜひ使ってみてください！（データはあなたの端末にしか保存されないので安心してください）
（この文章も大半AIに書いてもらいました。最近のAIの進歩は凄まじいですね。）
Repository: https://github.com/sugirin/GohanLog