はじめに

　私は大きな地震が起こると、「防災セットを用意しなきゃ」と思いながら、そのたび挫折してきました。
　Webサイトごとに言っていることが違うし、「3日分」と言われても家族構成（子供、高齢者、ペット）によって必要な量はバラバラ。結局、我が家には何をどれだけ用意すればいいのかわからなくなっていました。
　そんな動機で開発したのが、防災セット管理アプリ「SonaEru（ソナエル）」です。本記事では、非エンジニアがAI（Antigravity）を使ってアプリを完成させるまでの開発プロセスと、実際の技術スタック・アーキテクチャについて解説します。

作ったアプリ「SonaEru」

　家族構成を入力するだけで、必要な防災グッズと数量を自動計算し、チェックリスト化してくれるアプリです。

主な機能

個別最適化: 大人（男性、女性）・子供・乳幼児・高齢者・ペット（イヌ/ネコ）に対応した数量計算。
2つのリスト: 「自宅備蓄品」と「非常用持ち出し袋」の分離
重量管理: 準備状況に応じた持ち出し袋の重さを可視化
通知機能: 賞味期限が近付くとプッシュ通知
完全オフライン: SQLiteを使用したローカル完結型
4つの作成モード:
1. 自宅備蓄+持ち出し袋
2. 自宅備蓄のみ
3. 持ち出し袋のみ
4. アイテムなし

技術スタックと選定理由

　AIと相談し、以下の技術スタックを採用しました。

カテゴリ	技術	選定理由
Framework	React Native (Expo SDK 54)	クロスプラットフォーム対応と開発環境構築の容易さ。Windows環境でも開発可能。
Language	TypeScript	AIにコードを書かせる際、型定義がある方が整合性を保ちやすいため必須。
Styling	NativeWind (TailwindCSS)	Web開発の知識（クラス名）でスタイルを当てられるため、学習コストが低い。
Database	expo-sqlite	オフライン動作必須のため。async/awaitで書ける最新APIを使用。
Routing	Expo Router	ファイルベースルーティングが直感的。
IAP	RevenueCat	iOS/Androidの課金実装の複雑さを隠蔽してくれるため。

プロジェクト構造

Expo Routerを採用した標準的な構成です。

app/
├── app/               # 画面（ファイルベースルーティング）
│   ├── (tabs)/        # タブ画面
│   ├── _layout.tsx    # ルートレイアウト
│   └── ...
├── components/        # UIコンポーネント
├── constants/         # 定数・マスターデータ
├── contexts/          # グローバルステート (Context API)
├── database/          # SQLite関連ロジック
└── hooks/             # カスタムフック

アーキテクチャのポイント

「AIにコードを書かせる」ことを前提に、保守性を高めるための工夫をいくつか導入しました。

1. Master Data Pattern（ロジックの分離）

防災アイテムの定義や数量計算ロジックは、管理しやすくするためにconstants\MasterData.ts1ファイルに集約しました。このファイルさえ更新すれば、アプリ内の計算ロジックが一括で変わる仕組みです。

// アイテム定義のインターフェース
export interface ItemTemplate {
  name: string;
  category: ItemCategory;
  storageType: 'stockpile' | 'carryOn';
  unitWeight: number; // g
  // 家族構成(comp)と日数(days)を受け取り、必要数を返す関数
  getQuantity: (comp: FamilyComposition, days: number) => number;
}
// 例：即席ラーメン（備蓄用）
export const STOCKPILE_FOODS: ItemTemplate[] = [
  {
    name: 'カップ麺・乾麺',
    category: 'food',
    storageType: 'stockpile',
    unitWeight: 100,
    // ロジック：大人1人あたり1日1食、子供も同様
    getQuantity: (comp, days) => (comp.adult + comp.child) * 1 * days,
  },
  // ... 他のアイテム
];

データベースには、このマスターデータから計算された「結果（数量）」だけを保存します。この設計により、新しい防災グッズの追加や推奨数量の変更が非常に簡単になりました。

2. Contextによる責務の分離

状態管理ライブラリ（ReduxやZustand）は導入せず、ReactのContext APIで十分と判断しました。以下の4つのContextに責務を明確に分けています。

DatabaseContext: SQLiteの初期化、データ読み書き、マイグレーション管理
ProContext: RevenueCatを使用した課金状態の管理
SettingsContext: 通知設定やテーマ設定
FontSizeContext: 文字サイズ変更（高齢者ユーザーへの配慮）

// シンプルなContextパターンの採用
export const DatabaseProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [db, setDb] = useState<SQLite.SQLiteDatabase | null>(null);
  const [data, setData] = useState<StockpileItem[]>([]);
  // アプリ起動時の初期化処理
  useEffect(() => {
    const init = async () => {
      const database = await SQLite.openDatabaseAsync('sonaeru.db');
      await migrateDatabase(database); // マイグレーション実行
      setDb(database);
    };
    init();
  }, []);
  // ...
};

AI開発の実際

　今回の開発では、「Antigravity」（Claude 4.5 Opus, Gemini 3 Pro）を使いました。
　実際に開発してみて驚いたのは、「AIはReact Native（特にTypeScript + Expo）のコードを書くのが非常に得意」だということです。
　SwiftやKotlinのネイティブコードに比べて、Web技術ベースのReact NativeはWeb上に学習データが膨大にあるためか、AIが生成するコードの精度が高く、「エラー解決に追われる」ことはほとんどありませんでした。エラーログをコピペすれば解決できました。また、Expo SDK や NativeWind (TailwindCSS) といったメジャーで標準的なライブラリを選定したことも、スムーズに開発できた要因だと感じています。

リリース前の準備

　App Store公開にはまでに結構時間がかかりました。

1. プライバシーポリシーと利用規約（Notionで作成・公開）

　App Storeへの申請には、プライバシーポリシーのURLが必須です。最初はWebサイトとして作ろうかと思いましたが、更新のしやすさを考えて Notion で作成し、Web公開機能を使ってURLを発行しました。これなら規約変更時もアプリのアップデートなしで即座に反映できます。アプリ内に表示する利用規約もNotionで作成しました。

2. スクリーンショット作成（Windows＋Figma）

　私はWindowsで開発していたため、iOSシミュレーターは使えませんでした。そこで、デザインツール Figma を活用してストア画像を作成しました。
作成手順 （iPhone用）:

App Store Connectの「プレビューとスクリーンショット」セクションに書いてあるサイズでフレームを作成する。
FigmaコミュニティでiPhoneモックアップを検索し、コピーして、自分のワークスペースにペースト。
実機（iPhone）でアプリ画面をスクショ
モックアップスクリーンに配置し、ストアで見栄えがいいように装飾
エクスポートしてApp Store Connectでアップロード

6.9インチサイズで作成すれば、自動でサイズ調整されるので楽です。
「メディアマネージャーですべてのサイズを表示」からサイズを確認できます。

Figma画面

3. AdMob認証とサイト移行

　アプリの収益化として Google AdMob を導入しましたが、これには「app-ads.txt」を配置するためのデベロッパーサイトが必要です。

　最初は GitHub Pages で作成し、無事にAdMobの認証を通すことができました。その後、将来的な拡張性（動的なOGP生成やホスティング機能の充実など）を考慮して、現在は Firebase Hosting へ移行しています。アプリ本体だけでなく、こうした「Webサイト側の準備」もリリースには不可欠でした。

開発費用と期間

項目	詳細
開発期間	約2か月
Apple Developer Program登録料	12,800円（公式は$99ですが、実際はこの金額でした)
Google AI Pro	月額 2,900円 x 2か月
合計	約 18,600円

まとめ

　SonaEruは、技術的には「SQLiteを使ったTodoリスト」の応用と言えます。しかし、「Master Data Patternによるドメインロジックの分離」と「ユーザー体験（UX）へのこだわり」を組み合わせることで、実用的なアプリに仕上がりました。

AIを活用することで、個人開発者が「技術の壁」に阻まれることなく、「アイデア」を形にできる時代が来ています。

もし「自分もアプリを作ってみたい」と思っている方がいれば、ぜひAIという最強のパートナーと一緒に挑戦してみてください。

アプリをみる
App Store: SonaEru