Expo + Gemini APIでAIチャットアプリを個人開発して審査まで通した実装記録

// ❌ これはReact Nativeでは動かないことがある
const response = await fetch(url, { method: "POST", body: JSON.stringify(body) });
const reader = response.body!.getReader();
// → response.body が null になるケースがある

// hooks/useGeminiChat.ts
import { useState, useCallback } from "react";
import { genAI } from "../lib/gemini";
import type { Content } from "@google/genai";
 
interface Message {
  role: "user" | "model";
  text: string;
}
 
export function useGeminiChat() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [isStreaming, setIsStreaming] = useState(false);
 
  const sendMessage = useCallback(async (userText: string) => {
    const userMessage: Message = { role: "user", text: userText };
    const updatedMessages = [...messages, userMessage];
    setMessages(updatedMessages);
    setIsStreaming(true);
 
    // チャット履歴をGemini SDK のフォーマットに変換
    const history: Content[] = updatedMessages.slice(0, -1).map((msg) => ({
      role: msg.role,
      parts: [{ text: msg.text }],
    }));
 
    let assistantText = "";
    setMessages((prev) => [...prev, { role: "model", text: "" }]);
 
    try {
      const chat = genAI.chats.create({
        model: "gemini-2.5-flash",
        config: {
          systemInstruction:
            "あなたは親切なAIアシスタントです。簡潔で分かりやすい日本語で答えてください。",
        },
        history,
      });
 
      const stream = await chat.sendMessageStream({ message: userText });
 
      for await (const chunk of stream) {
        const chunkText = chunk.text ?? "";
        assistantText += chunkText;
 
        // ストリーミング中にリアルタイムで最後のメッセージを更新
        setMessages((prev) => {
          const updated = [...prev];
          updated[updated.length - 1] = {
            role: "model",
            text: assistantText,
          };
          return updated;
        });
      }
    } catch (error) {
      console.error("Gemini API エラー:", error);
      setMessages((prev) => {
        const updated = [...prev];
        updated[updated.length - 1] = {
          role: "model",
          text: "申し訳ありません、エラーが発生しました。しばらくしてから再試行してください。",
        };
        return updated;
      });
    } finally {
      setIsStreaming(false);
    }
  }, [messages]);
 
  return { messages, isStreaming, sendMessage };
}

// 更新をバッチ処理してUIのちらつきを防ぐ
let updateBuffer = "";
let updateTimer: ReturnType<typeof setTimeout> | null = null;
 
for await (const chunk of stream) {
  updateBuffer += chunk.text ?? "";
 
  if (!updateTimer) {
    updateTimer = setTimeout(() => {
      const textToAppend = updateBuffer;
      updateBuffer = "";
      updateTimer = null;
 
      assistantText += textToAppend;
      setMessages((prev) => {
        const updated = [...prev];
        updated[updated.length - 1] = { role: "model", text: assistantText };
        return updated;
      });
    }, 16); // 約60fps
  }
}

// utils/chatHistory.ts
import AsyncStorage from "@react-native-async-storage/async-storage";
 
const HISTORY_KEY = "chat_history";
const MAX_HISTORY_PAIRS = 10; // 直近10往復（20メッセージ）まで保持
 
export async function saveHistory(messages: Message[]): Promise<void> {
  const trimmed = messages.slice(-MAX_HISTORY_PAIRS * 2);
  await AsyncStorage.setItem(HISTORY_KEY, JSON.stringify(trimmed));
}
 
export async function loadHistory(): Promise<Message[]> {
  const stored = await AsyncStorage.getItem(HISTORY_KEY);
  return stored ? JSON.parse(stored) : [];
}
 
export async function clearHistory(): Promise<void> {
  await AsyncStorage.removeItem(HISTORY_KEY);
}

// components/ImagePickerButton.tsx
import * as ImagePicker from "expo-image-picker";
import * as FileSystem from "expo-file-system";
 
export async function pickImageAndAnalyze(
  prompt: string = "この画像を説明してください"
): Promise<string> {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    quality: 0.7, // 品質を下げてファイルサイズを削減（コスト削減）
    base64: true, // base64エンコードを有効化
  });
 
  if (result.canceled || !result.assets?.[0]) {
    throw new Error("画像が選択されませんでした");
  }
 
  const asset = result.assets[0];
 
  if (!asset.base64) {
    throw new Error("base64エンコードに失敗しました");
  }
 
  // MIMEタイプを取得
  const mimeType = asset.mimeType ?? "image/jpeg";
 
  // Gemini APIへの送信
  const response = await genAI.models.generateContent({
    model: "gemini-2.5-flash",
    contents: [
      {
        parts: [
          { text: prompt },
          {
            inlineData: {
              mimeType,
              data: asset.base64,
            },
          },
        ],
      },
    ],
  });
 
  return response.text ?? "";
}

// utils/usageTracker.ts
const USAGE_KEY = "daily_usage";
const FREE_LIMIT = 10;
 
interface DailyUsage {
  date: string;
  count: number;
}
 
export async function checkAndIncrementUsage(): Promise<{
  allowed: boolean;
  remaining: number;
}> {
  const today = new Date().toISOString().split("T")[0];
  const stored = await AsyncStorage.getItem(USAGE_KEY);
  const usage: DailyUsage = stored
    ? JSON.parse(stored)
    : { date: today, count: 0 };
 
  // 日付が変わったらリセット
  if (usage.date !== today) {
    usage.date = today;
    usage.count = 0;
  }
 
  if (usage.count >= FREE_LIMIT) {
    return { allowed: false, remaining: 0 };
  }
 
  usage.count += 1;
  await AsyncStorage.setItem(USAGE_KEY, JSON.stringify(usage));
 
  return { allowed: true, remaining: FREE_LIMIT - usage.count };
}

// 用途に応じてモデルを使い分ける
const MODEL_CONFIG = {
  free: "gemini-2.5-flash",      // 無料ユーザー向け：コスト重視
  premium: "gemini-2.5-pro",     // 有料ユーザー向け：品質重視
  image: "gemini-2.5-flash",     // 画像解析：FlashでもVisionは十分
} as const;
 
export function selectModel(isPremium: boolean, hasImage: boolean): string {
  if (hasImage) return MODEL_CONFIG.image;
  return isPremium ? MODEL_CONFIG.premium : MODEL_CONFIG.free;
}

// ❌ Before: チャンクがそのまま完全な JSON である前提
for await (const chunk of stream) {
  const json = JSON.parse(chunk); // 数十回に一度落ちる
  appendText(json.candidates[0].content.parts[0].text);
}

// ✅ After: 未完成の断片をバッファに残す
let buffer = "";
 
function drainCompleteObjects(chunk: string): string[] {
  buffer += chunk;
  const results: string[] = [];
  let depth = 0;
  let start = -1;
  let inString = false;
  let escaped = false;
 
  for (let i = 0; i < buffer.length; i++) {
    const c = buffer[i];
    if (escaped) { escaped = false; continue; }
    if (c === "\\") { escaped = true; continue; }
    if (c === '"') { inString = !inString; continue; }
    if (inString) continue;
    if (c === "{") { if (depth === 0) start = i; depth++; }
    else if (c === "}") {
      depth--;
      if (depth === 0 && start >= 0) {
        results.push(buffer.slice(start, i + 1));
        start = -1;
      }
    }
  }
  // 未完成の断片だけを残す
  buffer = start >= 0 ? buffer.slice(start) : "";
  return results;
}

// utils/retry.ts
export async function withRetry<T>(
  fn: () => Promise<T>,
  maxRetries = 3,
  baseDelay = 1000
): Promise<T> {
  for (let attempt = 0; attempt < maxRetries; attempt++) {
    try {
      return await fn();
    } catch (error: any) {
      const isRateLimit =
        error?.status === 429 || error?.message?.includes("429");
      if (!isRateLimit || attempt === maxRetries - 1) throw error;
 
      const delay = baseDelay * Math.pow(2, attempt);
      console.log(`レートリミット到達。${delay}ms後に再試行...`);
      await new Promise((resolve) => setTimeout(resolve, delay));
    }
  }
  throw new Error("最大リトライ回数を超えました");
}