Rork × Claude Code レビューフロー：AIが生成したコードをAIで磨く実践ガイド

Rork でアプリの形が見えてくる瞬間は、いつも気持ちがいい。数十秒で画面が生まれ、ロジックがつながり、「動いた」という感覚が先にくる。しかしそのコードを本番に持ち込む前に、立ち止まって問いかける必要があります。「このコード、信頼できるか？」

Rork が出力する React Native コードは品質の幅が広い。シンプルなUIコンポーネントであれば申し分ないが、API 通信・状態管理・認証まわりになると、エラーハンドリングの欠落やメモリリークにつながる実装が紛れ込むことがあります。プロンプトが的確でも、ゼロからのコード生成には限界があります。

そこで試してほしいのが、Claude Code を「コードレビュアー」として使うフローです。Rork が設計し、Claude Code が審査する——この2段階を組み合わせることで、AI生成コードの信頼性を実用レベルまで引き上げられます。

Rork 生成コードによくある問題パターン

Rork のプロンプト精度が上がるにつれて、生成されるコードの「見た目品質」は高くなりました。TypeScript で書かれ、コンポーネント分割も一定はされています。しかし実際のプロジェクトで遭遇する問題は、見た目ではわかりにくいものが多いです。

よく見かける問題を整理すると次のようになります。

エラーハンドリングの欠落: fetch を .then チェーンで書いているが、ネットワークエラーや HTTP エラーレスポンスを握りつぶしている実装が散見されます。開発中は問題がなくても、本番の不安定な回線でアプリがサイレントに壊れます。

TypeScript 型の形骸化: フロントマターでは TypeScript と明示されているのに、コンポーネントの props が any だらけという状態はよくあります。型チェックが通るだけで型の恩恵がゼロになります。

useEffect のクリーンアップ漏れ: コンポーネントがアンマウントされた後も非同期処理が走り続け、setState が呼ばれます。React Native では「Can't perform a React state update on an unmounted component」というワーニングとなって現れるが、Rork の生成コードにクリーンアップ関数が含まれていないケースは少なくありません。

マジックナンバー・ハードコード値: API エンドポイントや設定値がコンポーネント内にべた書きされています。後からスケールさせるときに修正箇所が散在して困る。

これらは Rork の失敗ではなく、生成AIによるコード作成が本来的に抱えるトレードオフです。「動く」を最優先にした結果、「堅牢さ」が後回しになります。

Claude Code が Rork の相棒に最適な理由

Claude Code はプロジェクト全体のファイル構成とコードを読んだ上でフィードバックを返せる点が強みです。単一ファイルに対するコードレビューツールとは異なり、「このコンポーネントが呼び出している API 関連のユーティリティも含めて問題がないか」という横断的な確認が可能になります。

Claude Code が Rork プロジェクトのレビューに適している理由はもう一つあります。React Native と Expo のエコシステム固有のリスクについて、かなりの知識を持っていることです。Hermes エンジンで動かしたときの挙動、EAS Build での注意点、iOS と Android の差異——こうした実践的な文脈でコードを評価してくれます。

さらに、Claude Code は修正案を提示するだけでなく「なぜそう変えるのか」を説明します。単に直すだけでなく、次回の Rork プロンプトを改善するヒントにもなります。

セットアップと基本的なレビュー手順

Claude Code の導入と Rork プロジェクトへの適用はシンプルです。

まず Claude Code をインストールする:

npm install -g @anthropic-ai/claude-code
claude --version

Rork からプロジェクトを GitHub へ export（または Rork Max の場合は Xcode プロジェクトをローカルに展開）した後、プロジェクトルートで Claude Code を起動する:

cd my-rork-project
claude

起動後、次のようなプロンプトをそのまま貼り付けてレビューを開始できる:

このReact NativeプロジェクトのコードをレビューしてEの観点で確認してほしい：
1. エラーハンドリングが欠落しているAPI呼び出し
2. useEffectのクリーンアップ漏れ
3. TypeScript型が any になっている箇所
4. ハードコードされたURLや設定値
問題が見つかったファイルと行番号をリストアップした上で、優先度の高い修正案を2〜3件提示してほしい。

Claude Code はプロジェクト内のファイルを走査し、問題箇所を特定して返答します。1,000行を超えるコードベースでも数秒で結果が返ってくるため、リリース前の最終チェックとして取り込みやすい。

Before/After で見る実際の改善例

Claude Code によるレビューで最も改善効果が出やすいのが、API 呼び出しと useEffect の組み合わせです。

次のコードは Rork が生成した典型的なユーザープロフィール取得コンポーネントです:

// Before: Rork 生成コード（問題あり）
const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);
 
  useEffect(() => {
    fetch(`https://api.example.com/users/${userId}`)
      .then(res => res.json())
      .then(setUser);
  }, []);
 
  return <Text>{user?.name}</Text>;
};

一見動いているように見えるが、3つの問題があります。ネットワークエラーを握りつぶしている、コンポーネントがアンマウントされた後に setUser が呼ばれる可能性がある、そして userId の型定義がありません。

Claude Code のレビュー後、次の形に改善される:

// After: Claude Code レビュー後（改善版）
interface User {
  id: string;
  name: string;
  email: string;
}
 
const UserProfile = ({ userId }: { userId: string }) => {
  const [user, setUser] = useState<User | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    let mounted = true; // アンマウント後の state 更新を防ぐフラグ
 
    const fetchUser = async () => {
      try {
        const res = await fetch(`https://api.example.com/users/${userId}`);
        if (\!res.ok) {
          throw new Error(`サーバーエラー: HTTP ${res.status}`);
        }
        const data: User = await res.json();
        if (mounted) setUser(data);
      } catch (err) {
        if (mounted) {
          setError(err instanceof Error ? err.message : 'ユーザー情報の取得に失敗しました');
        }
      } finally {
        if (mounted) setLoading(false);
      }
    };
 
    fetchUser();
    return () => { mounted = false; }; // クリーンアップ関数
  }, [userId]); // userId を依存配列に追加
 
  if (loading) return <ActivityIndicator size="small" color="#007AFF" />;
  if (error) return <Text style={{ color: '#FF3B30' }}>{error}</Text>;
  return <Text>{user?.name ?? '名前なし'}</Text>;
};

変更点はコード行数で見ると約2倍になるが、実際に「堅牢になった」と感じられる変化です。エラー時にアプリが沈黙する代わりにユーザーにフィードバックが届き、高速なナビゲーションでも state 更新が安全に制御されます。

繰り返し使えるレビュープロンプト集

Claude Code に毎回渡せるプロンプトを目的別に持っておくと、レビューが習慣化しやすい。

リリース前の総合チェック用:

src/ 配下のすべてのコンポーネントとカスタムフックをレビューして、
本番環境で問題になりそな箇所を優先度（高/中/低）付きでリストアップしてほしい。
修正が必要なコードスニペットには改善版のコードも一緒に示すこと。

特定機能のレビュー用:

src/screens/PaymentScreen.tsx のコードをレビューしてほしい。
特にStripe APIとのやりとりで、エラー処理・タイムアウト・二重送信防止の観点から問題がないか確認すること。

Rork プロンプト改善のヒント収集用:

このプロジェクトで発見した問題パターンをまとめて、
「次回 Rork に渡すプロンプトに追記すべき品質要件」を5項目で提案してほしい。

最後のプロンプトが特に有効です。Claude Code がレビューで拾った問題を Rork のプロンプト改善につなげることで、次の生成コードの品質が自然に上がっていく。

このワークフローを習慣化する

Rork × Claude Code のレビューフローは、一度だけ使うツールではなく、プロジェクトの節目に組み込むプロセスとして定着させることで真価を発揮します。

推奨するタイミングは3つあります。1つ目は新しい画面や機能を Rork で追加したとき。生成直後にレビューをかけることで、問題を早期につぶせる。2つ目は TestFlight や内部テスト版を配布する前。外部の人に触れる前の最後のゲートとして機能します。3つ目は本番リリース前の最終チェックとして。

vibe coding の基本フローを押さえた上でこのレビューステップを追加すると、「速く作れる + 壊れにくい」という両立が見えてくる。Rork が得意な速度と、Claude Code が補う堅牢性——この組み合わせが、個人開発者でも本番品質のアプリを出し続けるための実践的な答えだと感じています。

Rork 生成コードでよく遭遇するエラーの種類についてはRork AI生成コードのエラーパターンと修正ガイドでも詳しく解説しているので、合わせて参考にしてほしい。

次のステップとして、このレビューフローをチームや自分のワークフローに組み込んでみてほしい。Claude Code の claude review 機能と、自分のプロジェクト固有のレビュープロンプトを育てていくと、3ヶ月後には「Rork 生成コードの怖さ」がかなり和らいでいるはずです。