見出し画像

【Next.js + Supabase】Cursorを使って2日で情報ストックシステムを作った話【費用0円運用】

すけさん

こんにちは！ すけさん です。

今回は、
・Cursor（AIエディター）
・Next.js
・Supabase
・Vercel

を活用して、「お気に入りURLやメモを整理・管理できる自分専用システム」を開発した体験談を紹介します。

開発期間は約2日。

しかも、執筆時点では各サービスの無料枠のみを利用して運用できています。AIを活用した開発（AI駆動開発）に興味がある方や、「自分専用のツールを作ってみたい」と考えている方の 参考になれば幸いです。


なぜ作ったのか？

皆さんは、ネットで見つけた役立つサイトや、仕事でよく使う定型文などをどのように管理していますか？
ブラウザのブックマークやスマホのメモ帳は便利ですが、情報が増えてくると、 「あのメモどこに保存したっけ？」 となることが増えてきます。

私自身も同じ悩みを抱えていました。

そこで、
・URLを保存できる
・メモも残せる
・ジャンルごとに整理できる
・必要な時にすぐ見つかる

そんな自分専用の情報ストックシステムを作ることにしました。
今回のテーマは単なる個人開発ではありません。
「アイデアは人間が考え、実装はAIに支援してもらう」
というAI駆動開発に挑戦することも大きな目的でした。

完成したシステム

実際に作成したシステムはこちらです。

システムURL

　https://fav-code-stock.vercel.app/

※無料枠の範囲で安全に運用するため、新規ユーザー登録は停止しています。動作確認用として以下のデモアカウントを用意しています。
　メールアドレス：demo@example.com
　パスワード：Demo1234!
※複数の方が利用する可能性があるため、個人情報の入力はお控えください。

主な機能

ログイン認証
Supabase Authenticationを利用し、ユーザーごとにデータを管理しています。

情報の登録・編集・削除
以下の情報を保存できます。
・タイトル
・URL
・メモ
・ジャンル

ジャンル管理
「仕事」「勉強」「プライベート」などのカテゴリを自由に追加・編集・削除できます。

アコーディオン表示
登録データをジャンルごとに自動分類。
必要な時だけ展開できるため、情報量が増えても見やすく管理できます。

開発環境表示
ローカル環境で動作している場合はDEVバッジを表示し、本番環境との違いが一目で分かるようにしています。

ソースコード

今回開発したシステムのソースコードはGitHubで公開しています。

GitHub
　https://github.com/ryo-riverfield/fav-code-stock

システム構成や設計方針もドキュメントとして残しています。
「AIを使った開発の実例を見てみたい」
「同じようなシステムを作ってみたい」
という方はぜひ参考にしてください。

費用をかけずに運用する構成

今回の開発で最初に決めていた条件があります。
それは、
「できる限り費用をかけずに運用すること」
です。
そこでAIにも相談しながら、以下の構成を選びました。

Cursor

AIと対話しながら開発できるエディター。
コード生成やリファクタリング、バグ修正の支援を受けながら開発を進められます。

Next.js

今回のシステムの土台となるWebアプリケーションフレームワークです。
画面表示の高速化やSEOへの対応、データ取得の仕組みなど、現代的なWebシステム開発に必要な機能が標準で備わっています。
Vercelが開発しているフレームワークでもあるため、Vercelとの相性が非常に良く、デプロイ（公開作業）も数クリックで完了します。
AIとの開発相性も良く、Cursorが生成するコード例やサンプルも豊富なため、個人開発でもスムーズに開発を進めることができました。

Supabase

データベースと認証機能を提供するサービス。
今回は、
・ユーザー認証
・データ保存
・アクセス制御
を担当しています。
無料枠でも高機能で、個人開発との相性が抜群です。

Vercel

Next.jsとの相性が非常に良いホスティングサービス。
ソースコードをGitHubへプッシュするだけで自動的にデプロイされるため、インフラ構築の手間を大幅に削減できます。
個人開発レベルであれば無料枠でも十分利用できます。

執筆時点では、これらの無料枠のみで運用できています。
この構成を選んだことで、サーバー構築やデータベース管理に時間をかけることなく、アプリケーション開発そのものに集中できました。

AIに「個人開発で無料運用しやすく、学習コストが比較的低く、将来的な拡張にも耐えられる構成」を相談した結果、Next.js + Supabase + Vercelという組み合わせにたどり着きました。

AI駆動開発で感じたこと

今回の開発で実感したのは、
「AIは開発者の代わりではなく、開発速度を大幅に向上させるパートナー」だということです。
特に役立ったのは次のような場面でした。

AIに任せたこと

・CRUD機能の実装
・Supabase接続
・認証機能の実装支援
・UIコンポーネント作成
・エラーハンドリングの提案
・コードレビュー

自分で判断したこと

・システム全体の構成
・データ設計
・ジャンル管理の仕様
・画面レイアウト
・操作性
・セキュリティ確認

特に印象的だったのは、
「こういう画面にしたい」
「このボタンを押したらこう動いてほしい」
というアイデアを伝えるだけで、AIがすぐにコードとして形にしてくれることでした。
従来であれば数時間かかる実装を短時間で試せるため、アイデアを形にするスピードが大幅に向上しました。

苦労したこと・注意点

もちろんAIがあれば何でも解決するわけではありません。
実際に苦労した点もありました。

英語の壁

VercelやSupabaseなどの海外サービスは管理画面やドキュメントが英語中心です。翻訳ツールを活用しながら設定を進める必要がありました。

コードのブラックボックス化

AIは非常に優秀ですが、「なぜそのコードで動いているのか」 を理解しないまま進めると、後から保守できなくなる危険があります。自分自身で100%把握できていないという現状があるため、動くことだけで満足せず、コードの理解を深めることも重要だと感じました。

AIの提案を鵜呑みにしない

AIは間違ったコードを自信満々に提案することもあります。そのため、
・本当に仕様通りか
・セキュリティ上問題ないか
・想定外の動作をしないか
を自分で検証することが欠かせません。

まとめ

今回の開発を通じて感じたのは、
AI駆動開発とは、
「人間が何を作るかを決め、AIが実装を加速する開発スタイル」
だということです。

重要なのは、
・誰のために作るのか
・何を実現したいのか
・どんな体験を提供したいのか
を人間が考えること。

実装部分はAIが強力にサポートしてくれる時代になりました。
以前であれば専門知識や長い開発期間が必要だった個人開発も、今ではAIを活用することで驚くほど短期間で実現できます。

もし、
「こんなツールが欲しい」
と思っているものがあるなら、一度AIを相棒にして挑戦してみてください。思っている以上に早く、自分のアイデアが形になるはずです。

最後までお読みいただき、ありがとうございました！

いいなと思ったら応援しよう！