この記事で話すこと
1. 無課金開発の技術スタック : 学習も兼ねて選定した、Google Antigravity × Convex / Supabaseなど使用した技術スタックの構成について
2. 作れたアプリの紹介 : 「ラーメン記録アプリ」と「友達と使うSNS」の紹介
3. 開発を通しての学び : 無課金開発・運用・デプロイまでやってみて気づいた、技術とUXの話

はじめに

エンジニアになって2年目。
普段はRuby on Railsを使ったバックエンドの開発・保守運用をしています。

これまで、仕事以外でコードを書くことや、個人で何かを作ることなんて一度もありませんでした。
しかし、この前ハッカソンに参加して個人開発を楽しんでいる人と出会ったことで、「自分も何か作ってみたい」という想いが生まれました。

1. 無料で済むならそれがいい

絶対に課金したくないという強いこだわりがあるわけではありません。
学習のために身銭を切ることは大切ですし、必要な投資は惜しまないつもりです。

ただ、「かからずに済むなら、その方がいい」 に決まっています。
なので、どうすれば無料枠の範囲内でこれらを使えるのか？を考えて作ることにしました。

情報のキャッチアップの機会にもなった

そして何より、この制約を課すことで 「世の中にどんなサービスがあり、無料枠で何ができるのか？」 を調べる必要が必然的に生まれました。

結果として、この調べる作業が会社で使っている技術しか知らなかった自分にとっては、最新のSaaSやBaaSなどを知るための、「学習機会」 になりました。どうすれば無料枠の範囲内でリッチな機能を実現できるか？その「工夫」自体がパズルのようで楽しくもありました。

2. 今回使用した技術スタック

今回の開発で使用したツールとサービスの一覧です。
すべて無料プランまたは、AIの無料枠の範囲内で運用しています。

これまで、言語やサービスといえば仕事で使うRuby on RailsとAWS。開発ツールもCursorやClaude Codeといった限られたものしか触れてこなかった自分からするとかなり世界が広がりました。

【AI & 開発環境】

Google Antigravity (Agentic IDE): https://idx.google.com/
Google AI Studio (LP): https://aistudio.google.com/
Cline (Autonomous Coding Agent): https://cline.bot/
Nano Banana (AI Image Generator): https://antigravity.google/
Grok (LLM for Coding): https://x.ai/

【アプリ① Nooodle】

Convex (Backend / DB): https://convex.dev/
Clerk (Authentication): https://clerk.com/
Cloudflare R2 (Object Storage): https://www.cloudflare.com/developer-platform/r2/

【アプリ② Dolphins】

Supabase (BaaS All-in-One): https://supabase.com/

【共通インフラ】

Vercel (Hosting / Deployment): https://vercel.com/

3. AI駆動の開発環境

今回の開発では、2つのAIエディタを使い分けました。

メイン：Google Antigravity

メインエディタとして使用。
特筆すべきは、Gemini 3 Pro や Claude Opus 4.5 (Thinking) といった最先端のモデルが、この環境なら無料で使えてしまう点です。
通常なら高額なAPI利用料がかかるレベルのモデルを無料で使えるのはでかい。回数制限はありますが、5時間でリセットされるのでかなり使えました。セコ技ですが、複数Googleアカウントを使えば、かなり使い続けられました。この太っ腹さが今回の無課金開発を支えてくれました。

環境構築のような複雑な手順も、AIに「ハンズオン形式の手順書」を書かせて実行することで、初めて使うサービスも学びながら進めることができました。

サブ：VS Code + Cline

選んだ理由はシンプルに「無料」だからです。

修正作業には Cline で無料で利用できる独自のLLMの、Grok Code Fast 1 を選択しました。
これにより、ちょっとした修正やエラー対応も、API料金を一切気にすることなく、無限にAIに投げ続ける環境が完成しました。

今回初めてClineをインストールして使ってみたのですが(今更)、AIが勝手にターミナルを操作して、コマンドを叩き、修正までどんどんやってくれる動きには驚きました。

デザイン：Nano Banana

アプリ内のアイコンや素材はすべて Nano Banana で生成しました。

LP制作：Google AI Studio

ランディングページ（LP）の作成には Google AI Studio を使用しました。「どんなアプリか」「どんな雰囲気にしたいか」を伝えるだけで、デザインから実装コードまで一気に出力してくれるため、コーディングの手間を大幅に削減できましたし、以降それを参考にしてアプリ全体の雰囲気を整えることができたのでとても良かったです。

4. 作ったアプリ①：Nooodle

〜あなたのラーメン記録を、もっと楽しく。〜

1つ目は、「No Ramen, No Life.」 を掲げるラーメン記録アプリです。

コンセプト: 食べたラーメンを記録し、共有するラーメン専用SNS
技術構成: Convex + Clerk + Cloudflare R2

作り方：ハッカソンの構成を「リバースエンジニアリング」

友達と1日かけてラーメン旅に出るほどのラーメン好きなのですが、このアプリは、そんな「好き」が高じて生まれました。

このアプリはゼロから設計したわけではありません。
ハッカソンで教えてもらった技術構成（Convex + Clerk）が非常に強力だったので、それをそのまま活用しました。

具体的には、AIに 「この技術スタックを使った仕様書を作成して」 と依頼し、いわばリバースエンジニアリング的に土台を作り、そこから中身を自分の作りたい「ラーメンアプリ」に書き換えていく手法を取りました。
これだけでも、自分の中の世界が一気に広がりました。実際に動かすためにはAPIキーの設定などが必須になるため、自然と各種設定画面にも触れることになり、良い学習になりました。

【工夫した点】Cloudflare R2で通信量を節約

画像投稿がメインなので、Convexのストレージを使うと通信量で無料枠を超える懸念がありました。
そこで、10GBまで無料の Cloudflare R2 を利用し、クライアントから直接アップロードする実装にしました。

src/lib/r2.ts

// AWS SDK v3を使って、Cloudflare R2へ直接アップロードする実装
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
// ... (中略) ...
export async function uploadToR2(file: File, key: string): Promise<string> {
  // ... (アップロード処理) ...
  return `${process.env.R2_PUBLIC_URL}/${key}`;
}

「どうすれば無料で大量の画像を扱えるか？」を調べた結果、この構成に辿り着きました。
これで安心してたっぷり記録できる！

こだわりの機能たち(紹介したいだけ)

▼ 食べた杯数に応じてランクが上がるシステム。「投稿したい」というモチベーションになります。

▼ 特定の条件を満たすと貰えるバッジ機能。

▼ どのジャンルが好みなのかを一目でわかるようにしてみました。他のユーザーとの比較ができるのも楽しい。

▼ 推しメン機能。自分だけのフルコースを登録できます！

5. 作ったアプリ②：Dolphins

〜友達と使う、内輪なSNS〜

2つ目は、もっとラフでプライベートなアプリです。
高校時代バスケ部だったのですが、その時のチーム名をそのままアプリ名にしています。

コンセプト：「とるに足らない話をLINEやXより、もっと気軽に」

Xはいろんな人に投稿が見られる。
LINEだと通知が飛んでしまうし、既読もつく。夜中にふと思いついたことを投げるには少し気が引けます。

通知がないという安心感があるからこそ、いつでも好きな時に、どうでもいいことを投稿できる。そんな ストレスフリーな場所 を目指しました。

画像は具体的なやり取りを含むので割愛させていただきます。

技術構成：Supabase（事前学習用）

こちらは Supabase (Auth, DB, Storage) 一本で構築しました。
選定理由は、Convexとの比較もしたかったのと、今後仕事や他の開発でSupabaseを使う機会がありそうだったので、「事前学習として触っておこう」 と思ったからです。なかなかいい機会になったと思います。

複雑な構成にせず、シンプルな機能（投稿、いいね、グループ）で実装し、友達に触ってもらうことを重視しました。

コラム: DB比較：ConvexとSupabase使ってみて

今回、性質の異なる2つのBaaSを使い比べてみて、それぞれの「使い心地」に明確な違いを感じました。

Convex：圧倒的に簡単

正直、Convexの方が圧倒的に簡単でした。
「DBの変更がリアルタイムで同期される」という体験には何より驚きました。

バックエンドのデータを書き換えた瞬間、フロントエンドの画面が勝手にヌルッと更新される。この「リアルタイム同期がデフォルト」という仕様には感動しました。

Supabase：RLSの「壁」と「安心感」

一方でSupabaseは、最初にRLS（Row Level Security）ポリシーの設定で躓きました。
「誰がこのデータを読めるのか？」「更新できる条件は？」をポリシーで厳密に定義する必要があり、Convexのような「とりあえず動く」気楽さはありませんでした。

しかし、その設定を乗り越えると
「データベースレベルでセキュリティが担保されている」という*安心感**があります。
一旦今の個人開発のレベルではどちらを使ってもさほど変わりはないと思いますが、作りたいもののフェーズや性質、特に規模によって使い分けるのが良いと感じました。

6.今回得た「学び」

ローカルで作って満足するのではなく、「維持費0円」という制約の中で工夫し、実際にデプロイして「友達に使ってもらう」。
この一連のプロセスを完走したことで、技術面だけでなく、エンジニアとしての視点も大きく変わりました。

① 「多機能」＝「使われる」ではない

開発中はついつい「あれもこれも」と機能を盛り込みたくなってしまいます。
例えば、「自分のラーメン活動を分析できたら楽しいはず！」と思って投稿の統計をとるインサイト機能を作り込みましたが、蓋を開けてみるとほとんど見られていませんでした。

逆に、あまり深く考えずに実装した　「写真のトリミング機能」 や　「最寄り駅の登録」 といった地味な機能の方が、「これ便利！」「使いやすい」と喜ばれました。
機能の多さよりも、メインの機能をいかに気持ちよく使えるかの方が、ユーザーにとっては遥かに重要なんだと痛感しました。

② UXって大事

普段は社内用プロダクトの保守がメインで、すでに出来上がったものを扱っているため、正直あまり「UX（ユーザー体験）」を意識する機会はありませんでした。

しかし今回は、DBストレージの帯域制限（コスト）との戦いがありました。
「どうすればDBに問い合わせずに済むか？」「キャッシュできないか？」
最初はコスト削減のために始めたバックエンド的な工夫でしたが、結果としてアプリの動作が軽快になり、使い勝手が劇的に向上しました。

「画面が重いのは、それだけで使い勝手が悪い」。
パフォーマンスの追求が、結果としてUXに直結しているという面白さにも気づきました。

③ 「できる範囲」から「やりたいこと」思考へ

これまでは無意識に「今の自分の知識（Railsなど）で実現できる範囲」で物事を考えていました。
しかし今回は、「こういう機能が欲しい」というゴールが先にあり、「今の知識ではわからないけど、何かで実現できないかな？」と調べるように思考が変わりました。
「わからなくても、調べればなんとかなるかも」 という選択肢が広がり、エンジニアとしての自信がつきました。

④ 新しいものを使うハードルが下がった

AIと一緒にいくつかのBaaS（Clerk, Convex, Supabaseなど）を触っていくうちに、だんだんと 「新しいサービスの画面でも、大体こんな機能があって、ここで設定できるんだろうな」 という推測ができるようになりました。
新しい管理画面に対する「勘所」のようなものが身につき、開発スピードが徐々に上がりました。
「新しいものが出たら、まずは使ってみる」 ことの大切さを実感しました。

⑤ やるならセキュリティの学習もしないと

そして何より、実際にアプリをデプロイして使ってもらう中で、セキュリティの重要性に気づきました。
AIを使えば、誰でも簡単にアプリを作れる時代です。僕でも作れたので。しかし、それは同時に「誰でも他人のデータを預かる立場になれる」ということでもあります。
作り手としての楽しさだけでなく、情報を預かる立場としての責任を肌で感じられたことは、技術以上に大きな収穫でした。

8. まとめ

個人開発レベルであれば、AIがあれば、専門外の言語やインフラの壁はもう怖くないかもしれません。
「これがほしい」という純粋な思いさえあれば、ここまで形にできます。

とはいえ、今回はAIに頼って「作り上げた」だけで、技術の一つ一つを深く理解しているわけではありません。今後も継続的な学習が必要だと痛感しています。

それでも、まずは動くものを作りきったことで、景色が変わりました。食わず嫌いだった技術へのハードルが下がり、視野が一気に広がったこと。これが今回の一番の収穫です。

ぜひ皆さんも、AIを相棒に「自分だけのアプリ」を作ってみてください。