コードを一行も書かず、夫婦で使う買い物リストアプリを約1週間で作ってみた
はじめに
コードを一行も書かず、夫婦で使う買い物リストアプリを約1週間で作ってみた
普段、妻と買い物リストを共有するためにGoogle Keepを使っている。
買い物に行く前に必要な商品をチェックしたり、買い忘れがないように確認したり。Google Keepでも一通りのことはできる。
ただ、使い続けていると、もう少しこうなっていたら便利なのに、と思うことがあった。
例えば、毎週のように買う商品を、その都度リストに追加するのが面倒だったり、夫婦で使ううえで、もう少し買い物に特化した操作ができたらよいと感じたり。
そこで、以前から少し興味のあった「自分たち専用の買い物リストアプリ」を作ってみることにした。
今回は、ChatGPTとClaude Codeを使って開発を進めた。
結果から言うと、構想開始から最初の完成版まで約1週間。自分ではコードを一行も書かずに、夫婦で共有できるアプリを作ることができた。
まずは、どんなアプリを作ったのか
作ったのは、iPhoneのブラウザから使える買い物リストアプリだ。
特別なアプリをインストールしなくても、Safariからアクセスして利用できる。
主な機能は次のとおり。
* スーパー、ドラッグストア、100円ショップなど、
買い物場所ごとに商品を管理できる
* 買い物場所は自由に追加・名称変更できる
* 商品ごとに「買う」「買わない」を切り替えられる
* 購入した商品は個別、またはまとめて購入確定できる
* 最後に購入した日付を確認できる
* 商品名で検索できる
* 夫婦それぞれのGoogleアカウントでログインし、
同じ買い物リストを共有できる
データはFirebaseのFirestoreに保存している。
例えば、私が商品を「買う」に変更すると、妻の画面にもその変更が反映される。
買い物リストという小さなアプリではあるが、認証やデータ共有まで含めて作ることになった。
※掲載した画面は開発当初のもの。完成後、実際に妻に使ってもらった結果、画面構成や一部の機能を見直している。その話は次の記事で詳しく書く予定だ。
なぜ既存のアプリを使わなかったのか
もちろん、買い物リストのアプリはすでに数多く存在する。
Google Keep以外のアプリもいくつか調べた。
ただ、便利そうなアプリでも、夫婦で共有するためには有料プランが必要だったり、利用するために新しくアカウントを登録する必要があったりする。
自分たちが欲しい機能と、使い始めるまでの手間が、なかなか一致しなかった。
そこで考えたのが、AIを使って自分で作るという選択肢だった。
以前であれば、買い物リストのためだけにWebアプリを一から開発するのは、少し大げさに感じていたと思う。
しかし、最近はAIによるコーディング支援がかなり進んでいる。
日常生活で使う小さなアプリなら、どこまで作れるのだろうか。
実験としても面白そうだった。
なお、Google Keepから完全に移行できることを、最初から成功条件にはしていなかった。
使ってみてKeepの方が便利なら、そのままKeepを使い続ければよい。
まずは作って試してみよう、という気持ちで始めた。
ReactもFirebaseも、ほぼ未経験だった
私は普段、業務システムの開発や保守に携わっているSEだ。
JavaやOracleを中心に扱ってきたが、今回使うことにしたReactやFirebaseについては、ほぼ未経験だった。
技術構成は、ChatGPTと相談しながら決めた。
今回利用した主な技術とツールは以下のとおり。
* React / TypeScript：アプリの画面・処理
* Vite：開発・ビルド環境
* Firebase Authentication：Googleログイン
* Cloud Firestore：買い物データの保存・共有
* Firebase Hosting：アプリの公開
* GitHub：ソースコードと変更履歴の管理
* Claude Code：設計・実装・テスト
* ChatGPT：仕様の整理・実装結果のレビュー
正直なところ、開発を始めた時点では、Reactのコンポーネント構造やFirebaseの細かな仕組みまで理解していたわけではない。
これまでの自分なら、まずReactの基礎を学び、Firebaseの使い方を調べ、小さなサンプルを作ってから開発に入っていたと思う。
今回はその順序を変えた。
作りたいものを先に決め、分からない技術は開発を進めながら確認する。
AIを使えば、その進め方がどこまで成立するのかを試してみたかった。
開発はChatGPTとClaude Codeを使い分けた
今回の開発では、基本的に次の流れで進めた。
1. ChatGPTで要件を整理する
まず、どのような画面にしたいか、商品をどう管理したいか、夫婦でどのように共有するかなどを相談した。
例えば、「購入済みの商品の扱いをどうするか」「毎週買う商品をどう管理するか」といったことだ。
最初からすべての仕様が決まっていたわけではない。
ChatGPTとやり取りしながら、欲しい機能や不要な機能を一つずつ整理していった。
2. Claude Codeに設計・実装・テストを依頼する
仕様がある程度まとまったら、Claude Codeに開発を依頼した。
Claude CodeはGitHubのリポジトリ上でソースコードを作成し、テストを実施し、変更内容をプルリクエスト（PR）として提出する。
私はその変更内容やテスト結果を確認してから、採用するかどうかを判断する。
3. ChatGPTでPRをレビューする
Claude Codeが実装した内容について、ChatGPTにもレビューしてもらった。
「仕様どおりか」「既存機能に影響はないか」「不具合につながりそうな処理はないか」といった観点で確認する。
問題が見つかった場合は、修正内容を整理してClaude Codeへ再度依頼した。
4. iPhoneで実際に操作する
最後は実際のiPhoneで動かした。
画面のレイアウト、ボタンの押しやすさ、商品の追加や購入操作、夫婦間のデータ共有などを確認した。
AIがテストに成功したと報告していても、最終的に使いやすいかどうかは、実際に操作してみなければ分からない。
こうして、ChatGPTとClaude Codeを行き来しながら開発を進めた。
自分ではコードを一行も書かなかった
今回の開発で、自分でも少し驚いているのがこの点だ。
私はソースコードを一行も書いていない。
Reactのコンポーネントも、Firebaseとの連携処理も、テストコードも、基本的にはClaude Codeが作成した。
もちろん、何も考えずにAIへ丸投げしたわけではない。
要件を決め、仕様を確認し、レビュー結果を見て、問題があれば修正を依頼した。
Windowsのローカル環境でコマンドを実行したり、Firebaseへデプロイしたりする作業も行った。
ただ、コードを書くという作業そのものはAIに任せた。
これまで業務でプログラムを作ってきた身としては、なかなか不思議な感覚だった。
特に今回は、ほとんど触ったことのないReactやFirebaseを利用している。
未経験の技術でも、実際に動くアプリを作りながら理解を深めていける。
AIによって、開発の入り口が大きく変わってきていると感じた。
構想開始から最初の完成版まで約1週間
今回の開発を思い立ったのは、10月26日。
そこから仕様を考え、技術構成を決め、実装やテストを進めた。
本格的に開発を進めたのは10月29日ごろからで、11月2日には最初の完成版ができた。
仕事や生活の合間の空き時間を利用して進めたため、実際の総作業時間は計測していない。
それでも、構想開始から約1週間で、認証やデータ共有まで備えたアプリを動かせるようになった。
自分でReactやFirebaseを学びながら一からコードを書いていたら、同じ期間でここまで進められたかは分からない。
少なくとも、自分にとっては想像以上のスピードだった。
一方で、今回は既存のサービスやライブラリを活用している。
また、業務システムで培ってきた要件整理やテスト、レビューの経験も役立っていると思う。
AIだけの力で完成した、とは考えていない。
作って終わりではなかった
最初の完成版ができたあと、妻にも実際に使ってもらった。
すると、こちらが便利だと思って作り込んだ機能について、思いがけない指摘があった。
売り場カテゴリや自動ソートなど、商品を探しやすくするつもりで実装した機能が、実際の妻の買い物の仕方とは合っていなかったのだ。
結果として、せっかく作った機能を廃止し、商品を自由に並び替える方式へ変更することになった。
このあたりは今回の開発で特に印象に残った出来事なので、次の記事で詳しく紹介したい。
そして、その改善を経て、現在は日常生活の中でアプリを使い始めている。
妻からは、以前使っていたGoogle Keepより使いやすいという感想も得られた。
まだ改善したい点はあるが、実際に使ってもらえるものができたのはうれしい。
今回やってみて感じたこと
今回、AIを使って個人開発をしてみて、特に感じたことがある。
それは、自分でコードを書けなくても開発は進められるが、何を作るか、どう確認するかを考える必要はなくならないということだ。
AIはソースコードだけでなく、テストコードも作成してくれる。
しかし、そもそもの仕様が利用者に合っていなければ、正しく実装されたとしても便利なアプリにはならない。
また、テストが成功していても、実際に使って初めて見つかる問題はある。
今回は、SEとしての経験が、コードを書く場面以外でも役立つことを実感した。
同時に、AIを使った開発では、人間がどこまでコードを理解し、どこまで品質を確認すべきなのかという疑問も残った。
このあたりは、今後もう少し掘り下げて考えてみたい。
まずは、日常のちょっとした不便を、AIの力を借りてアプリにできた。
それだけでも、今回の個人開発は十分にやってみる価値があったと思う。
⸻
次回は、妻に実際に使ってもらったことで、売り場カテゴリや自動ソートを廃止することになった話を書く予定だ。
AIで機能を作ることと、利用者にとって便利なものを作ることは、やはり別の話だった。
⸻
AI活用の実績
* 使用AI：
ChatGPT、Claude Code
* AIの役割：
要件整理支援、設計、実装、テスト、
コードレビュー支援
* 人間の役割：
要件・仕様の判断、レビュー、実機検証、デプロイ
* 使用技術：
React、TypeScript、Firebase、GitHub
* 成果：
夫婦で共有できる買い物リストアプリを開発
* 開発期間：
2026年10月26日〜11月2日（最初の完成版まで）
* コーディング：
自分ではソースコードを一行も記述していない
