第1章はじめに

Web開発の経験がどこまで通用するのか、そして今React Nativeを選ぶ理由を、本書のゴールと合わせて示します。

Webのコンポーネント設計が、同じアプリのモバイルUIへつながるイメージ

本書について

本書は、ReactでのWeb開発経験はあるけれど、モバイルアプリ開発は未経験というフロントエンドエンジニアに向けたReact Nativeの入門書です。

「自分のスマホで動くアプリを作ってみたい。でも、アプリ開発は敷居が高そう」と感じたことはないでしょうか。XcodeやAndroid Studioを開く前に挫折した経験がある方、ネイティブ言語を学ぶハードルに気後れしてきた方、あるいは「Webと違ってモバイルは別世界」だと思い込んできた方にこそ、本書を読んでほしいと考えています。

結論から言えば、今のモバイルアプリ開発はWeb開発者にとって驚くほど地続きの世界になっています。Expoを使えば環境構築は数分で終わり、コンポーネント・Hooks・データフェッチといったReactの考え方はそのまま通用します。「別の言語を学ぶ」というより「同じReactを別のプラットフォームで使う」感覚に近いものです。

本書のゴール

本書を読み終えるころには、次のことが一通りできるようになっているはずです。

React Nativeアプリを自分の環境でセットアップして実機で動かす
ReactとReact Nativeの共通点・相違点を踏まえて、Webの知識を活かして書く
Expo Routerでファイルベースのルーティングを設計する
StyleSheet APIでレイアウトを組み、必要に応じてプラットフォーム別の調整を行う
TODOアプリを自作し、EASでビルドしてストアに公開するまでを体験する
Coding AgentとSkillsを活用した、現代的なReact Native開発のワークフローを身につける

最後の項目は本書の特色です。詳しくは第20章で扱います。

想定する読者

具体的には次のような読者を想定しています。

React・Next.jsなどでWebフロントエンド開発の経験が半年〜数年ある
TypeScriptの基本的な型は読み書きできる
npm/yarn/pnpmなどのパッケージマネージャは普段から使っている
Gitの基本操作はできる
モバイルアプリは作ったことがない、もしくはCordova/Ionic時代に挫折した経験がある

一方で、ネイティブのiOS/Android開発経験は前提としません。SwiftもKotlinも触ったことがなくて構いません。本書では、ネイティブ側に降りる必要が出てくる場面でも、Expoの仕組みでカバーできる範囲を中心に扱います。

なぜ今、React Nativeなのか

「React Nativeってひと昔前の話では?」と感じている方もいるかもしれません。実際にはむしろ逆で、2025年〜2026年のReact Nativeはここ数年で最も勢いのあるフェーズに入っています。理由を3つに整理します。

New Architecture時代の到来

React Nativeは長らく、JavaScriptとネイティブ側をJSONのシリアライズで橋渡しする「Bridge」アーキテクチャを採用していました。これがパフォーマンス上のボトルネックや複雑な仕組みの原因になっていましたが、近年これを根本から作り直したNew Architectureが登場しました。

React Native 0.76でデフォルト有効化され、0.82で旧アーキテクチャ(Legacy)は凍結、続く0.83では相互運用レイヤーから旧実装が削除される予定です。今から始める人にとって、Bridge時代の悩みはほぼ過去のものになりました。本書も最初からNew Architectureを当然の前提として書いています。

React Foundationの設立とエコシステムの成熟

2025年、Reactとその周辺エコシステムを支えるための独立組織としてReact Foundationが設立されました。Meta、Vercel、Expo、Callstack、Microsoft、Software Mansionといった主要プレイヤーが名を連ねており、React Nativeもその中核に位置しています。

これは「React NativeはMetaのいち社内プロジェクトではなく、業界全体で支えるインフラになった」という宣言とも言えます。Expo SDKのリリースサイクルも安定し、周辺ライブラリ(Reanimated、Gesture Handler、Skia、TanStack Queryなど)も成熟期を迎えています。

Webの書き方に近づき続けている

3つめは、Web開発者にとっていちばん効く話です。React Nativeのスタイルとレイアウトは、年々CSSの書き方に近づいてきています。

gapが使えるようになり、アクセシビリティもaria-labelやroleというWebと同じ名前のpropsで書けるようになりました。New Architectureの上ではboxShadow、filter、mixBlendMode、outline系といったCSS由来のプロパティも扱えます(プラットフォームごとに対応範囲の差はあります)。アニメーションも、Reanimated 4がCSS AnimationsとCSS Transitions互換のAPIを備えたことで、transitionPropertyや@keyframesに相当する書き方がそのまま通じます。CSS Gridの追加も議論が進んでいます。

ひとつ前に挙げたNew Architectureは、Bridge時代の悩みを取り除いただけでなく、こうした新しいスタイル機能の土台にもなっています。裏を返せば、Web開発者がReact Nativeを始めるときの「学び直しの量」そのものが、年を追うごとに減り続けているということです。何が同じで何が違うのかは、第3章でまとめて整理します。

本書のスタンス

執筆にあたって、いくつか方針を決めました。書き手の立場を最初に開示しておくほうが、読者にとっても本書を使いやすくなると考えています。

Coding Agentを使った開発を前提にする

Claude CodeやCursorといったCoding Agentを使った開発を、特別な手段ではなく標準的な開発スタイルとして扱います。ExpoはAIエージェント向けのSkillsやドキュメントを公式に整備しており、本書もその流れに沿って書いています。実践編に入る手前の第13章でSkillsとExpo MCPの準備を整え、ツール全体の使い分けは基礎と実践を走り終えたあとの第20章でまとめて扱います。

Web開発者の視点を起点にする

各章で「Webだとこれに相当する」「Webではこう書くところを、React Nativeではこう書く」という対比を意識しています。差分こそが学習コストなので、すでに知っていることを繰り返し説明するより、差分の部分に紙幅を割きます。

著者の選択を、選択として伝える

技術選定には常にトレードオフがあります。本書ではたとえばスタイリングについて、基本は標準のStyleSheet APIで進めつつ(プラットフォーム標準・依存最小・パフォーマンス安定)、Tailwindライクなスタイリングが好みであればUniwindを推奨する、といった形で書いています。選択肢を示しながら「著者ならこう選ぶ」をはっきり書くスタイルです。鵜呑みにする必要はありませんが、判断の補助線として使ってください。

動かして、公開するところまでをゴールにする

第4部では、TODOアプリを段階的に作り、EASで実際にビルドしてApp Store/Google Playに公開するところまでを体験します。動くものを世に出すまでを通り抜けると、断片的な知識が一本につながります。本書の山場です。

サンプルコードと環境について

動作環境

本書のサンプルコードは、執筆時点で以下の環境で動作確認しています。

Node.js: 22 LTS以降
Expo SDK: 最新(SDK 55以降を想定)
React Native: New Architecture有効(SDKのデフォルト)
OS:
- iOSはmacOS + Xcodeで動作確認(Windows/Linuxからは実機もしくはEAS Buildを利用)
- AndroidはmacOS/Windows/LinuxでAndroid Studioまたは実機で動作確認

開発マシンとしてはmacOSが最も無難ですが、AndroidのみでよければWindows/Linuxでも問題なく進められます。WebブラウザでのExpo Web動作確認も多くのサンプルで可能です。

ひとつ注意点があります。手軽な動作確認に使うExpo Goは、SDK 55以降はApp Store / Google Playから入らなくなりました。Android実機とiOSシミュレータはExpo CLIが面倒を見てくれますが、iPhone実機で使うにはApple Developer Programへの登録が必要です。詳しくは第4章で扱います。

サンプルコードのリポジトリ

本書で使用するコードは、kazutoyo/react-native-todo-app-sampleで公開しています。クローンしてnpm installすれば、本書で解説する完成形がそのまま動きます。

なお、リポジトリ名はreact-native-todo-app-sampleですが、中のプロジェクト名は本書のコード例に合わせてsample-todo-appにしてあります。

バージョンへの注意

React NativeとExpoは進化のスピードが速く、SDKのメジャーバージョンが上がると挙動やAPIが変わることがあります。本書はあくまで執筆時点のベストプラクティスを反映していますが、半年〜1年単位で状況は変わり得ます。実装に迷ったら、まずはExpo公式ドキュメントと公式Skillsを確認するクセをつけておくと安心です。

なお、第21章ではupgrading-expo Skillとコーディングエージェントを使ったアップグレード戦略にも触れます。「常に最新版に追従していく」こと自体を、ひとつの開発スキルとして扱う構成にしています。

次章ではそもそもReact Nativeとは何なのか、JavaScriptで書いたコードがどうやって本物のネイティブUIを動かしているのか、他のクロスプラットフォーム手法と何が違うのか、そして「React Nativeで実現できないことはあるのか」という素朴な疑問に答えていきます。

第1章 はじめに

第1章はじめに