こんにちは、かつコーチです。
「React NativeってReactと何が違うの？」「JavaScriptだけでiPhoneとAndroidの両方のアプリが作れるって本当？」。
そんな疑問を持って、この記事にたどり着いた方も多いと思います。
私自身、普段はReactでWebアプリを作ることが多いのですが、あるとき「スマホアプリも作ってみたい」と思い立ち、React Nativeに触れてみました。
最初は「Reactの知識がどこまで通用するのか」が全く分からず、手探りで進めた記憶があります。
この記事では、React Nativeとは何か、なぜJSやReactの知識が活かせるのか、そしてFlutterなど他の選択肢との違いについて整理します。
読み終える頃には、React Nativeの全体像がつかめるはずです。
React Nativeとは？
専門用語の定義
React Nativeとは、Meta社が開発しているフレームワークで、JavaScript（またはTypeScript）とReactの書き方だけで、iOSとAndroidのネイティブアプリを作れる仕組みのことです。
ここで重要なのが「ネイティブアプリ」という言葉です。
ネイティブアプリとは、iOSならSwift、AndroidならKotlin（またはJava）で作られた、そのOS専用のアプリのことを指します。
Webサイトをアプリっぽく見せる「WebView」ベースのアプリとは違い、端末のボタンやカメラ、通知などの機能に直接アクセスできます。
React Nativeのすごいところは、Swiftのコードを書かなくても、JavaScriptを書くだけでこの「本物のネイティブ部品」を操作できる点です。
私はよく、React Nativeのことを「通訳者」に例えています。
あなたがReactの書き方（JSXやuseStateなど）で「ボタンを配置したい」と伝えると、React Nativeがそれを、iOSの言語・Androidの言語にそれぞれ通訳して、実際のネイティブのボタン部品を画面に出してくれる。
そんなイメージです。
つまり開発者は英語（React）だけ話せれば良くて、現地語（Swift/Kotlin）を覚える必要がない、というわけです。
なぜそれが必要なのか
スマホアプリを作る場合、本来はiOS用とAndroid用で別々にコードを書く必要があります。
言語もSwiftとKotlinで異なりますし、開発チームも別々に用意することが多いです。
これはとても非効率です。
同じ機能を持つアプリを、2つの言語で2回実装しなければならないからです。
React Nativeを使えば、1つのコードベース（JavaScript/TypeScript）から、iOSとAndroidの両方にアプリを配布できます。
しかも、すでにReactを使ってWeb開発をしている人であれば、コンポーネント設計や状態管理（useState、useEffectなど）の考え方をそのまま流用できます。
私が実際にReact Nativeを触ってみて驚いたのは、useStateやuseEffect、propsの受け渡しなど、Reactで当たり前にやっていたことが、ほぼそのまま通用したことです。
「あ、これ知ってる書き方だ」という安心感がありました。
JS/Reactの知識はどこまで活かせるのか
活かせる部分
- JSXの書き方（ただし
<div>ではなく<View>のような専用コンポーネントを使う） useState、useEffect、useContextなどのフック- propsやstateによるコンポーネント設計の考え方
- npmパッケージのエコシステム（多くのライブラリがそのまま使える）
- 条件分岐やmap関数によるリスト表示のロジック
新しく覚える必要がある部分
- HTMLタグの代わりに
ViewやTextなど専用コンポーネントを使うこと - CSSではなく、JavaScriptオブジェクトでStyleSheet（後述の記事で詳しく解説します）を書くこと
- ネイティブモジュール（カメラやGPSなど）へのアクセス方法
- New Architectureと呼ばれる、Fabric・TurboModulesという新しい仕組み（2026年時点ではこちらが標準です。詳しくは別記事で解説します）
つまり、ゼロから覚えることは意外と少なく、「Reactの応用編」として学べるのがReact Nativeの大きなメリットだと感じています。
Flutterとの違いに軽く触れる
React Nativeとよく比較されるのが、Googleが開発するFlutterです。
FlutterはDartという言語を使い、UIを描画エンジンで独自に描くという特徴があります。
一方React Nativeは、前述の通り本物のネイティブ部品を「通訳」して使う仕組みです。
大きな違いをまとめると、以下のようになります。
| 項目 | React Native | Flutter |
|---|---|---|
| 言語 | JavaScript / TypeScript | Dart |
| UIの描画方式 | ネイティブ部品を操作 | 独自エンジンで描画 |
| 既存Reactエンジニアの学習コスト | 低い | 高い（Dartを新規習得） |
私の感覚では、すでにJS/Reactの経験がある方にとっては、React Nativeの方が圧倒的に学習コストが低いです。
逆に、デザインの一貫性を極限まで追求したい場合や、新規にモバイル専門のチームを作る場合はFlutterも有力な選択肢になります。
このシリーズでは、JS/React経験者を前提に、React Nativeにフォーカスして解説していきます。
まとめ
この記事のポイント
- React Nativeは、JavaScript/Reactの書き方でiOS/Android両対応のネイティブアプリを作れるフレームワーク
- React Nativeは「通訳者」のような存在で、Reactのコードをネイティブ部品に変換してくれる
useStateやuseEffectなど、Reactの知識の多くはそのまま活かせる- HTMLタグの代わりに専用コンポーネント、CSSの代わりにStyleSheetを使う点は新しく覚える必要がある
- Flutterとの違いは「言語」と「UIの描画方式」。JS/React経験者にはReact Nativeの方が学習コストが低い
次に読むべき記事
React Nativeの全体像がつかめたら、次は実際に手を動かして環境を作ってみましょう。
「Expoで環境構築とプロジェクト作成をする基本」で、実際にプロジェクトを立ち上げる手順を解説しています。
