第20章 AI時代のReact Native開発

React NativeとCoding Agentの相性が良い理由と、Skillsをはじめとする開発を支えるツール群をまとめます。

本書はAI(Coding Agent)を使った開発を、特別な手段ではなく標準的な開発スタイルとして扱います。第13章ではSkillsとExpo MCPの準備を済ませ、第18章のビルドログの読み解きや第19章のモジュール自作でも顔を出しました。本章ではその土台になる考え方と、実際に役立つツール群をまとめて整理します。基礎と実践を一通り走り終えた今のタイミングだと、各ツールが効く具体的な場面が思い浮かびやすいはずです。

なぜReact Native開発はAIエージェントと相性が良いのか

理由は3つあります。

JavaScriptエコシステムとの親和性

React NativeとExpoのコードはTypeScriptで書け、エコシステム自体もnpm経由のJavaScriptライブラリ群で成り立っています。LLMが学習している膨大なコード資源(Web開発のコード)とほぼ同じ語彙・同じ慣習で書けるため、エージェントが書くコードの品質が安定しやすいという背景があります。

加えて、コードの編集サイクル(エディタで保存 → Hot Reloadで即反映)が短いので、エージェントが書いたコードを動かしてフィードバックするループを回しやすい、という運用面での相性もあります。

ベストプラクティスの変化が速いが、Skillsで追従できる

React NativeとExpoは進化が速く、半年〜1年で「推奨される書き方」が変わります。第1章で触れたとおり、これは健全な進化ですが、開発者にとっては「最新の作法を覚え続ける」コストになります。

このコストを軽くするのが、後述するSkillsの仕組みです。Expoや関連プロジェクトが公式に「現時点のベストプラクティス」をエージェントに教える教材を公開しているため、エージェントが古い知識のまま動くリスクを下げられます。

ただしSkillsそれ自体も時間とともに陳腐化するので、定期的なアップデートが必要です。最新のドキュメントを直接参照する手段としては、

• Expo MCP: Expo公式のMCPサーバ。最新のExpoドキュメントを引けるほか、EASのビルド状況やログの確認、シミュレータの操作(スクリーンショット、画面のタップ、ログ収集)までエージェントから扱えます。以前は有料プラン限定でしたが、現在は無料プランにも月ごとの利用枠が付いています
• Expo公式ドキュメントのMarkdown配信: 各ページのURL末尾に index.md を付けるとMarkdown形式で返してくれます(例: https://docs.expo.dev/develop/user-interface/assets/index.md)。Context7のようなツールと組み合わせれば、ExpoのMCPに準じた使い方も可能

といった選択肢があります。

反復作業が多く、人間がやる必要のない部分を任せやすい

新しい画面の追加、ナビゲーションの設定、APIクライアントの定義、Storybookのストーリー作成、テストの足場作り ― モバイルアプリ開発には「型に沿った繰り返し作業」が多くあります。こうした作業は、人間が一から書くより、エージェントに方針を伝えて生成させてレビューするほうが圧倒的に速いです。

Skillsの活用

Skillsは、AIエージェントに「ある領域で作業する時のお作法」を教えるための仕組みです。Markdownで書かれたガイドをエージェントが読み込み、文脈にあった書き方・選び方をしてくれるようになります。

React Native開発に活用したいSkillsは、執筆時点では大きく3系統(Expo / Vercel / Callstack)が主役です。コミュニティでも個人開発者によるSkillsの公開が活発になっており、今後さらにラインナップが増えていく流れにあります。

Expo公式Skills

expo/skillsで公開されている、Expoチーム自身が整備しているSkills群です。本書もこれを一次資料として尊重しています。代表的なものを挙げると、

• building-native-ui: Expo Routerを使ったUI構築の包括ガイド
• native-data-fetching: fetch、TanStack Query、SWR、エラー処理、キャッシュ戦略
• expo-deployment: デプロイ全般
• expo-dev-client: Development Buildの作り方と運用
• expo-tailwind-setup: NativeWind v5 + Tailwind CSS v4のセットアップ
• expo-cicd-workflows: EAS Workflowsを使ったCI/CD
• expo-api-routes: Expo Router + EAS HostingでのAPIルート構築
• expo-module: Expo Modules APIの作り方
• upgrading-expo: SDKアップグレードの手順
• eas-update-insights: EAS Updateの効果測定
• use-dom: DOM Componentsの使い方

これらはExpo公式が継続的にメンテナンスしているため、内容が古くなりにくいのが大きな利点です。

Vercel agent-skills

VercelもReact関連のagent-skillsを公開しています。React/Next.jsの設計パターンに関するガイドが中心ですが、React Nativeでも参考になる発想が多くあります。

Callstack agent-skills

React Nativeに長くコミットしているCallstack社のSkillsです。React Nativeのパフォーマンス最適化、ネイティブモジュール、ビルド構成といった、より踏み込んだ領域をカバーしています。

自分でSkillを書く

公式・サードパーティのSkillsで足りない領域、あるいはチーム固有のお作法をエージェントに守らせたい場合は、自分でSkillを書きます。たとえば「このプロジェクトのデザイントークンの使い方」「APIクライアントの命名規則」「テストの書き方の流派」など、社内ドキュメントに書き留めるような暗黙知を、そのままMarkdownでSkillにしておけば、エージェントが書くコードを自然とチームの作法に揃えられます。

「チームの暗黙知をMarkdownに落としてエージェントに読ませる」というワークフローは、AI時代の新しいドキュメンテーションの形だと思います。

エージェントに「目と手」を与える

ここからは、コード生成だけでないAI活用の話です。Coding Agentに「画面を実際に見て、実機を操作する」能力を与えるツールが登場してきています。

コードを書くところで終わらず、実行中の状態と端末上の結果を確認して次の修正へ戻るループを作ります。

agent-react-devtools ― まずはここから

agent-react-devtoolsは、Callstack製のCLIで、Reactコンポーネントツリーやレンダリングのプロファイル情報をエージェントに渡せるようにします。エージェントは「今この画面はどんなコンポーネント階層を持っているか」「再レンダリングが多発しているのはどこか」を機械的に読み取れるようになります。

DevToolsを拡張するほどではない、まずはコンポーネントの内部状態をエージェントから見せられればいい、という用途には、この agent-react-devtools から入るのが手軽です。

Rozenite ― DevToolsを拡張する

Rozeniteは、React Native DevToolsを拡張するためのフレームワークです。

近年のReact Native刷新で大きく強化されたDevTools(パフォーマンスパネル、ネットワークパネルなど)に、独自のパネルを追加できます。すでに次のような拡張が公開されています。

• Expo Atlas連携(バンドルサイズの可視化)
• TanStack Queryの状態モニタ
• React Navigationの遷移トラッカー
• Overlay(画面上にデバッグUIを重ねる)

ここまでは「人間の開発者向けの便利機能」ですが、Rozeniteの面白いところは、これらの情報をMCP(Model Context Protocol、エージェントが外部ツールから情報を受け取るための共通プロトコル)経由でエージェントに渡せる点です。エージェントは「今アプリがどんな画面を表示していて、どんなネットワークリクエストが流れていて、どんなクエリの状態を持っているか」を読み取れるようになります。

実際に手元の開発でRozeniteを組み込んでみた記録はReact Native開発が変わる。RozeniteでCoding Agentに「目と手」を与えた話にあります。あわせて、本章で触れたSkillsの選び方はReact Native開発で活用したいCoding Agent向けSkills 3選にまとめました。

agent-device ― エージェントが実機を操作する

agent-deviceは、Callstack製の、iOS/Androidのシミュレータ・エミュレータ・実機をエージェントが直接操作するためのCLIです。Expo公式ドキュメントにも専用ページが用意されているほど、Expoとの組み合わせが意識されています。

エージェントは、

• スクリーンショットを撮って画面状態を確認する
• タップ、スワイプ、テキスト入力で操作する
• 画面遷移を追跡する
• ログを読み取る

といったことを自律的に行えます。「コード書いて → 実機で確認 → 不具合を見つけて修正」というループを、人間が介在せずに回せる範囲が広がります。

「目と手を与えられたエージェント」は、UIの実装とデバッグを一緒に進められるパートナーになります。React Native開発のスピード感が一段変わる体験ができるはずです。

Storybook for React Native

Coding Agentと並べて語るのは少し意外かもしれませんが、Storybookも「AI時代の開発」と相性が良いツールです。

理由は、Storybookがコンポーネントを単体で表示・操作できる小さな箱を提供してくれるからです。エージェントが新しいコンポーネントを作ったあと、Storybookで動作確認する → スクリーンショットを撮る → 想定通りか判定する、という流れが自然に組めます。

第17章で触れたとおり、Storybook for React Nativeにはネイティブ環境(iOS/Android)で動かすものと、React Native Web Vite経由でブラウザ上で動かすものの2系統があります。エージェントと組む前提で考えると、この使い分けの意味合いが少し変わります。実用的には、

• まずはWeb版で大半のコンポーネントを作り切る(ブラウザを操作するMCPやCLIツールでエージェントにフィードバックループを回させやすい)
• ネイティブ固有の挙動が出る箇所(タッチ、キーボード、テキスト表示や入力(特にAndroidで差が出やすい)、SafeArea、ネイティブAPI連携など)はネイティブのStorybookで微調整する

という流れが、AIとの組み合わせで効率よく回せます。

人間にとっても、コンポーネントカタログとして開発・レビューに役立ちます。「ある程度UIを持つアプリ」では早めに導入しておく価値があります。

本章で取り上げたツールの位置づけ

これらをすべて最初から使う必要はありません。プロジェクトの状況に合わせて取り入れていけばよいですが、「こういうものがある」という地図だけは持っておくと、行き詰まった時の引き出しになります。

エージェント活用との付き合い方

最後に、エージェントを使う上で意識しておきたい点を3つ。

1. 生成されたコードはレビューする: 当たり前ですが、エージェントの出力は常に正しいわけではありません。とくにReact Nativeの細かいAPI差分(SDKバージョンによる挙動違い、プラットフォーム固有の制約)は誤ることがあります
2. ベストプラクティスの根拠を意識する: Skillsが教えるお作法には理由があります。理由を理解せずに従うと、例外的な状況で判断を誤ります
3. 動かして確かめる: モバイルアプリは「手元で動かしてみないと分からない」要素が大きいです。コードレビューだけで完結させず、実機で触ってみる時間を確保してください

エージェントは強力な相棒ですが、判断の最終責任は開発者側にあります。「ここは任せられる」「ここは自分で確かめたほうがいい」の線引きを自分の中に持っておくことが、付き合い方の要になります。

本章のまとめ

• React NativeとExpoはAIエージェントと相性が良い(型情報、Skills、反復作業の多さ)
• Expo公式・Vercel・CallstackのSkillsを取り込むことで、最新作法に追従しやすくなる
• Rozeniteとagent-deviceで、エージェントに「目と手」を与えられる
• Storybookと組み合わせると、コンポーネント単位での自動確認がしやすい
• エージェント任せにせず、レビューと実機確認は人間が責任を持つ

次章では、本書をひととおり追い終えた後の運用 ― バージョンアップへの追従とアップグレード戦略を扱います。本章で紹介したupgrading-expo Skillが主役になる章です。