はじめに

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

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

でも現実は厳しい。

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

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

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

そしてこの記事の本題は、サーバレスが苦手な自分が、純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日で主要機能を移植できました。

システム構成詳細

画像投稿フロー

二重の猫チェック

クライアント（ML Kit）: アップロード前に猫かどうかをローカルで判定。猫じゃなければアップロードしない。
サーバー（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コーディングで必要な人間の技量：

おかしな設計を見抜ける程度の知識
- N+1問題、全件取得、クライアント側フィルタの危険性を理解している
- 「これ本番で動かしたらヤバい」と気づける
落ち着いて設計からやり直させる勇気
- バグ修正がおかしいと思ったら、「いったん戻して、設計から考え直して」と伝える
- AIは素直なので、指示すればちゃんとやり直してくれる
コードレビューの習慣
- AIが生成したコードも、自分が書いたコードと同じようにレビューする
- 特にデータベースアクセス、認証周り、課金処理は要注意
本番環境の保護は多重に
- コードレベルのガードだけでなく、環境変数、ネットワーク制限など複数レイヤーで守る
- 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匹

学び

AIコーディングは「魔法」ではない
- おかしな設計を見抜く技量は必要
- ただし、苦手分野（サーバレス等）の学習コストは大幅に下がる
プラン上限は現実の壁
- ガチで使うなら課金は必須
- 複数ツールの使い分けも選択肢
AIに有利なプラットフォームを選ぶ
- 学習データの多さ＝サポートの質
- Flutter Webで詰まったら、素直にReact/Next.jsに切り替えるのも手
AIは「テストを通す」ことに全力
- 本番環境ガードすら突破しようとする
- 守るべきものは多重防御で
猫は正義
- 開発モチベーションの源泉
- QAチームとしても優秀（キーボードの上に乗ってくるのでバグを踏む）

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

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

実装済み（Android）

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

やりたいこと

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

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

最後に

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

Google Playで入手

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

参考リンク