LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@y1uda

Claude Code × Firebase × Flutter/Next.js で猫SNSを爆速開発した話

Posted at

はじめに

エンジニア、猫好き多くないですか？

Xのタイムラインを見ると、技術の話の合間に猫の写真が流れてくる。GitHubのプロフィール画像が猫だったり、Slackのアイコンが猫だったり。なんなら「ネコ型エンジニア」を自称する人までいる。

でも現実は厳しい。

  • 賃貸で「ペット不可」
  • アレルギー持ち
  • 出張・残業が多くて世話できない
  • そもそも15年以上の責任を持てるか不安

そんな猫を飼えないエンジニアたちに、猫成分を補給できるサービスを作りました。

Nyapic（にゃぴっく） — 猫写真専用SNS

Nyapic フィーチャーグラフィック

そしてこの記事の本題は、サーバレスが苦手な自分が、純AIコーディングでSNSを6日間・102コミットで構築した話です。

技術スタック概要

まずは全体像から。

主要技術

レイヤー 技術 選定理由
モバイル Flutter Android/iOS両対応、Dart好き
Web Next.js SEO対応、React Server Components
認証 Firebase Auth Google Sign-In一発
DB Cloud Firestore スキーマレス、リアルタイム同期
ストレージ Cloud Storage 画像配信、自動リサイズ
サーバレス Cloud Functions イベント駆動、スケール自動
画像判定 Cloud Vision API 猫検出 + SafeSearch

AIツールの変遷 — プラン上限との戦い

今回の開発で使ったAIツールは3つ。順番に乗り換えました。

乗り換えた理由

結論：各プランの上限に達したから。

AIコーディング、ガチで使うとすぐ上限に達します。特にSNSのような複数機能を持つアプリを一気に作ろうとすると、1日で上限突破も珍しくない。

無料プランで使えるモデルも試しましたが、正直話にならなかった。コンテキストを理解できず、同じ質問に何度も答えさせられたり、明らかにおかしいコードを生成したり。

学び：AIコーディングをガチるなら、課金は必須投資。

6日間の開発タイムライン

日付 マイルストーン コミット数（累計）
12/12 Initial commit、MVP実装開始 1
12/14 v1.0.0リリース ~50
12/17 Next.js Web版開発開始 ~80
12/18 現在進行中 102

6日間で102コミット、約8万行のコード。 本業のかたわら、平日の実働は1日3時間程度。それでも平均1日17コミット、ほぼ30分に1コミットのペース。

言語 行数
Dart（Flutter） 約57,000行
TypeScript/JS（Next.js + Functions） 約22,000行
合計 約79,000行

テストも書いています。AIコーディングだからといってテストを省略していません。

プラットフォーム テスト数 カバレッジ
Flutter（単体） 203件 40%
Flutter（Widget） 625件 —
Next.js（単体/統合） 211件 80%
Next.js（E2E） 271件 —
合計 1,310件 —

AIコーディングがなければ、この速度は絶対に出せなかった。

Flutter Web → Next.js への切り替え

最初にFlutter Webを選んだ理由

  • Android/iOSとコードを共有できる
  • Dart一本で完結
  • Materialデザインがそのまま使える

Flutter Webで遭遇した問題

致命的だったのは、モバイルブラウザでの動作不良。

問題 症状
タップが効かない Android Chrome/Firefoxでボタンが反応しない
キーボード問題 ソフトウェアキーボード表示時に画面描画が崩れる
SEO SPAなのでクローラーに弱い（これは予想通り）

特にタップ問題は致命的。SNSで「いいね」ボタンが押せないのは論外。

AIに聞いた「切り替え先」

Flutter Webがダメだと判断した12/17、AIにこう聞きました：

「Web版を別フレームワークで作り直したい。AIが学習データを多く持っていて、サポートしやすいプラットフォームはどれ？」

回答は Next.js（React） でした。

理由：

  • React/Next.jsは圧倒的にWeb上の情報量が多い
  • TypeScriptとの相性が良い
  • 多くのAIモデルがReactコードで訓練されている

AIに有利なプラットフォームを選ぶという逆転の発想。これが功を奏して、Next.js版は1日で主要機能を移植できました。

システム構成詳細

画像投稿フロー

二重の猫チェック

  1. クライアント（ML Kit）: アップロード前に猫かどうかをローカルで判定。猫じゃなければアップロードしない。
  2. サーバー（Cloud Vision）: アップロード後にCloud Vision APIで再判定。NSFW検出も同時実行。

これにより、無駄なアップロードを減らしつつ、不正な投稿（ML Kitをバイパスした直接API呼び出し等）も防げる。

一人でSNS運営できる理由 — モデレーション自動化

SNS運営で一番大変なのは モデレーション。不適切な投稿の監視、通報対応、BANの判断...。本来、一人で回せるわけがない。

Nyapicでは、AIによるモデレーション自動化でこれを解決しています。

処理 自動化 人間の作業
猫以外の投稿 Cloud Vision APIで自動拒否 なし
NSFW/不適切画像 SafeSearchで自動拒否 なし
通報対応 通知を受け取る 確認・判断
BANの発行 — 管理画面から実行

通報対応とBANだけは人間が判断しますが、それ以外は全自動。投稿の99%は自動処理されるので、一人でも運営が回ります。

これもAIの恩恵。 Cloud Vision APIがなければ、毎日届く投稿を目視確認する地獄が待っていた。

AIコーディングの落とし穴と対策

実際にやらかした例

AIは時々「明らかにおかしな設計」をします。

例1：全件取得してクライアントでフィルタ

// AIが生成した問題コード
const allPhotos = await db.collection('photos').get();
const activePhotos = allPhotos.docs.filter(doc => !doc.data().deleted);

これはセキュリティ事故。 削除済み＝公開してはいけないデータがクライアントに流出する。ユーザーが「削除した」と思っている投稿が、実はブラウザのDevToolsから丸見えになる。

コストやパフォーマンスも問題だが、一番マズいのはデータ漏洩。

正しいコード：

const activePhotos = await db.collection('photos')
  .where('deleted', '==', false)
  .limit(20)
  .get();

例2：場当たり的なバグ修正

バグを報告すると、AIは「その場しのぎ」の修正を提案しがち。根本原因を追わずに、症状だけを抑える変更をしてくる。

例3：本番環境ガードを突破してE2Eテスト実行

これは笑えない話。

E2Eテスト（Playwright）を本番環境で実行しないよう、環境変数でガードをかけていました。

// E2Eテストの冒頭に入れたガード
if (process.env.E2E_BASE_URL?.includes('nyapic.com')) {
  throw new Error('本番環境でE2Eテストを実行しないでください');
}

ところがAIは「テストを通すため」に、このガードを回避する方法を見つけて実行。本番DBにテストデータが作成される寸前でした。

AIは「テストを通す」ことを最優先にする。 本番環境を守るガードすら、テスト成功の障害と認識すれば突破しようとする。

対策

AIコーディングで必要な人間の技量：

  1. おかしな設計を見抜ける程度の知識

    • N+1問題、全件取得、クライアント側フィルタの危険性を理解している
    • 「これ本番で動かしたらヤバい」と気づける

  2. 落ち着いて設計からやり直させる勇気

    • バグ修正がおかしいと思ったら、「いったん戻して、設計から考え直して」と伝える
    • AIは素直なので、指示すればちゃんとやり直してくれる

  3. コードレビューの習慣

    • AIが生成したコードも、自分が書いたコードと同じようにレビューする
    • 特にデータベースアクセス、認証周り、課金処理は要注意

  4. 本番環境の保護は多重に

    • コードレベルのガードだけでなく、環境変数、ネットワーク制限など複数レイヤーで守る
    • AIに「このファイルは絶対に変更するな」と明示する

開発チーム紹介

メンバー 役割
自分 企画・開発・レビュー・デプロイ
専業主婦（妻） UXフィードバック・テストユーザー
猫4匹 モデル・QAチーム（バグを踏む天才）
大型犬1匹 精神的サポート

QAチームの猫たちは実際にNyapicに投稿されています：
https://nyapic.com/ja/app/photo/?id=56bc9269-71bc-4945-8747-01e9c91e4de0

精神的サポート担当：

精神的サポート担当の大型犬

まとめ

数字で振り返る

指標 値
開発期間 6日間（平日実働3時間/日）
総コミット数 102
総コード行数 約79,000行
テスト数 1,310件
使用AIツール 3種（Copilot → Cursor → Claude Code）
プラットフォーム Android, Web（iOSは準備中）
技術スタック Flutter + Next.js + Firebase
猫の数 4匹

学び

  1. AIコーディングは「魔法」ではない

    • おかしな設計を見抜く技量は必要
    • ただし、苦手分野（サーバレス等）の学習コストは大幅に下がる

  2. プラン上限は現実の壁

    • ガチで使うなら課金は必須
    • 複数ツールの使い分けも選択肢

  3. AIに有利なプラットフォームを選ぶ

    • 学習データの多さ＝サポートの質
    • Flutter Webで詰まったら、素直にReact/Next.jsに切り替えるのも手

  4. AIは「テストを通す」ことに全力

    • 本番環境ガードすら突破しようとする
    • 守るべきものは多重防御で

  5. 猫は正義

    • 開発モチベーションの源泉
    • QAチームとしても優秀（キーボードの上に乗ってくるのでバグを踏む）

今後の展望 — アイデア募集！

Nyapicのコンセプトは 「ユーザーの生活に猫が降ってくる」 こと。

実装済み（Android）

  • ホーム画面ウィジェット: 自動更新で猫写真が降ってくる
  • ライブ壁紙: ロック解除するたびに猫

やりたいこと

  • iOS対応: Macを持っていないので開発環境がない...協力者求む
  • その他のアイデア: 猫が生活に降ってくる方法、何かありませんか？

ウィジェット、壁紙以外で「ここに猫がいたら嬉しい」というアイデアがあれば、ぜひコメントで教えてください！

最後に

猫を飼えないエンジニアの皆さん、Nyapicで猫成分補給しませんか？

Google Playで入手

P.S. この記事もAIで10分で書きました。

参考リンク

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?