💭

夫婦の「レギュラーメンバー」を管理するお買い物アプリを作ってみた〜Cursorで爆速開発した話〜

に公開
Cursor
Vibe Coding
idea

作ったものはこちら👈
まず、Cursor Pro Plus以外は無料で作りました。私は非エンジニアです。

はじめに

こんにちは！最近話題のAIペアプログラミングエディタ「Cursor」を使って、夫婦で使うお買い物リスト管理アプリを開発しました。今回は、このアプリのコンセプトから技術選定、そしてCursorでの開発体験まで、包括的にお話ししたいと思います。

サービスコンセプト：「レギュラーメンバー」という発想

なぜ「レギュラーメンバー」なのか？

普通のお買い物リストアプリとは違う、このアプリの特徴はレギュラーメンバーという考え方にあります。

毎週スーパーに行くたびに、同じような商品を買いませんか？

  • いつもの野菜（キャベツ、人参、玉ねぎ...）
  • いつもの肉類（鶏胸肉、豚こま切れ...）
  • いつもの調味料や日用品

これらの商品は、まさに我が家の「レギュラーメンバー」。サッカーチームでいうところの先発メンバーのような存在です。

従来のお買い物リストの課題

一般的なお買い物リストアプリは、毎回商品を入力する必要があります。しかし、これって実は面倒なんです：

  1. 入力の手間: 毎回同じ商品名を入力するのが面倒
  2. 買い忘れ: いつもの商品を思い出すのに時間がかかる
  3. 夫婦間での共有: リストを都度共有するのが大変
  4. スーパーでの効率: 商品の並び順がランダムで、売り場を行ったり来たり

解決策：「レギュラーメンバー管理」という新しいアプローチ

1. 事前登録でストレスフリー

よく買う商品を「レギュラーメンバー」として事前に登録しておきます。カテゴリも一緒に設定するので、後で整理が簡単。

登録できるカテゴリ

  • 野菜・生鮮
  • 豆類
  • きのこ類
  • 果物
  • 肉類
  • 魚類
  • 乳製品
  • パン
  • 飲み物
  • 冷凍食品
  • お菓子
  • その他

2. スーパーの売り場順に自動ソート

これが一番の特徴です！商品がスーパーの売り場順に自動で並ぶため、効率的に買い物ができます。

野菜売り場 → 肉・魚売り場 → 乳製品売り場 → パン売り場...

という具合に、一筆書きで買い物が完了します。

3. 夫婦間でのリアルタイム共有

夫婦IDとパスワードで安全にログインし、データはPostgreSQLデータベースに保存。リアルタイムで夫婦間同期されるので、片方が商品を追加すると、もう片方のスマホにも即座に反映されます。

4. シンプルで分かりやすいUI

余計な機能を省き、「追加」と「削除」だけのシンプルな操作。直感的に使えるデザインにこだわりました。

技術構成：モダンな技術スタックで安定性を確保

フロントエンド

  • React 18 + TypeScript: 型安全性とモダンな開発体験
  • CSS-in-JS: コンポーネント単位でのスタイル管理

バックエンド

  • Node.js + Express.js: 軽量で高速なAPIサーバー
  • PostgreSQL: 信頼性の高いリレーショナルデータベース
  • JWT認証: セキュアな認証システム
  • bcryptjs: パスワードのハッシュ化

インフラ・デプロイ

  • Docker & Docker Compose: 開発環境の統一化
  • Render: 本番環境ホスティング
  • Supabase: マネージドPostgreSQLサービス

Cursorでの開発体験：AIペアプログラミングの威力

従来の開発 vs Cursor開発

このアプリを作る上で、Cursorの恩恵を特に感じた場面をご紹介します。

1. 爆速プロトタイピング

従来: 機能要件を整理 → 設計書作成 → コーディング開始まで数日
Cursor: 頭の中のアイデアを自然言語で説明 → 30分でプロトタイプ完成

例えば、「スーパーの売り場順に商品を並べたい」という要望を伝えただけで、カテゴリ定義から並び順ロジックまで、一気に実装してくれました。

2. TypeScript型定義の自動生成

フロントエンドとバックエンドで使う型定義を統一する際、Cursorが自動で型安全な設計を提案してくれました：

interface RegularItem {
  id: string;
  itemId: string;
  coupleId: string;
  name: string;
  categoryId: string;
  createdAt: string;
}

interface Couple {
  id: number;
  coupleId: string;
  coupleName: string;
  passwordHash: string;
  createdAt: string;
  updatedAt: string;
}

3. セキュリティ実装の提案

JWT認証やパスワードハッシュ化など、セキュリティ周りの実装で、ベストプラクティスを自動で提案してくれました。

特に「bcryptでパスワードをハッシュ化してから保存」「JWTトークンの適切な検証」など、セキュリティホールになりがちな部分を的確に指摘・実装してくれたのは感動でした。

4. Docker環境の構築

開発環境の統一化のためのDocker設定も、「PostgreSQL + Node.js + Reactの開発環境を作りたい」と伝えるだけで、適切なdocker-compose.ymlを生成してくれました。

5. デバッグとエラー解決

開発中に遭遇したエラーについて、エラーメッセージを貼り付けるだけで：

  • 原因の特定
  • 解決方法の提案
  • 修正コードの生成

までを一貫して行ってくれました。

Cursorを使って良かった点

  1. 学習コストの削減: 新しい技術やライブラリを使う際の調査時間が大幅短縮
  2. コード品質の向上: ベストプラクティスを自動で適用
  3. 開発速度の向上: 単純なCRUD操作などのボイラープレートコードを自動生成
  4. 設計の改善: より良い設計パターンの提案

注意点・課題

もちろん、Cursorにも課題はあります：

  1. 過度な依存: 基礎的な理解なしに使うと、後でメンテナンスが困難
  2. 提案の検証: AIの提案が必ずしも最適解とは限らない
  3. セキュリティチェック: セキュリティ関連の実装は人間による最終確認が必須

実際の使用シーン

平日の夕方

妻が仕事帰りにスーパーに寄る前に、家にある食材をチェックしてレギュラーメンバーから必要な商品をピックアップ。夫もリアルタイムで確認して「醤油も切れてるよ」とコメント。(これから実装予定)

週末の買い出し

夫婦でスーパーに行く際は、アプリの順番通りに売り場を回るだけ。効率的に買い物が完了し、買い忘れもなし。

新商品の追加

「このスナック菓子、気に入ったからレギュラーメンバーに追加しよう」と思ったら、その場で簡単に登録。次回からリストに自動で含まれます。

今後の展望

予定している機能追加

  1. 在庫管理機能: 商品ごとの在庫状況を記録
  2. 予算管理: 月の食費予算との照らし合わせ
  3. レシピ連携: よく作る料理から自動でレギュラーメンバーを提案
  4. 特売情報: 近所のスーパーの特売情報との連携
  5. 相場情報: ある商品が安いかどうか判断するための相場情報

さらなるCursor活用

今後の機能追加でも、Cursorを活用して：

  • ユーザーフィードバックの実装
  • パフォーマンス最適化
  • テストコードの充実

を進めていく予定です。

まとめ

「レギュラーメンバー管理アプリ」は、日常の小さな不便を解決する、シンプルでありながら実用的なアプリケーションです。

サービスの価値

  • 毎回の入力作業から解放
  • 効率的な買い物動線の実現
  • 夫婦間でのスムーズな情報共有

Cursorの価値

  • アイデアから実装までの時間短縮
  • 技術的な課題の迅速な解決
  • 品質の高いコードの自動生成

小さなアプリですが、実際に使ってみると「なぜ今まで無かったんだろう」と思える便利さがあります。同じような課題を感じている夫婦の方がいらっしゃいましたら、ぜひ一度試してみてください。

そして、もしアプリ開発に興味がある方は、Cursorを使ってみることを強くおすすめします。AIとペアプログラミングをする未来が、もうすでに現実になっています。

レギュラーメンバー
https://regular-member.onrender.com/

Discussion