React と React Native の違い：同じ考え方、異なる部品
React と React Native の違い
React と React Native：要素の対応表と使い分け | We.Inc
ReactはHTML要素でWebの画面を作り、React Nativeはネイティブのビューで iOS と Android のアプリを作ります。各Web要素に対応するネイティブ部品と、共有できるものを確認しましょう。
Reactはライブラリで、React Nativeはそれを使って iOS と Android のアプリを作ります。WebのReactでは、div や button などのHTML要素をブラウザーのページに描画します。React Nativeは View や Text など独自のコンポーネントを描画し、それらは実際のプラットフォームのビューになります。コンポーネント、props、state、フックの使い方はどちらも同じです。
並べて比較
- 項目
- React（Web、react-dom）
- React Native
- どこで動く？
- Webブラウザー
- iOS と Android のアプリ
- 構成部品
- HTML要素：div、p、img、input
- コアコンポーネント：View、Text、Image、TextInput
- スタイリング
- CSSファイル、className、またはスタイルオブジェクト
- JavaScriptオブジェクトを渡す style プロパティ。多くは StyleSheet.create から
- デフォルトの flex の向き
- row（display: flex のとき）
- タップやクリックのハンドラー
- onClick
- onPress
- 共通部分
- コンポーネント、JSX、props、state、フック
- コンポーネント、JSX、props、state、フック
違いを一番早くつかむには、Web要素をネイティブの対応部品に置き換えてみることです。下の対応表でHTMLタグ、prop、CSSの書き方を検索すると、各行にReact Nativeでの置き換え先と、動作の違いについての短いメモが表示されます。
- 検索ボックスにHTML要素、prop、CSSの考え方を入力します。例：img、onClick、class。
- React Nativeの列で、置き換え先のコンポーネント、prop、APIを確認します。
- メモで動作の違いを確認します。画像のサイズ指定が必須であることや、テキストは Text の中に置く必要があることなどです。
- さらに下のコード例で、同じ小さなカードを両方のプラットフォーム向けに書いたものを見られます。
- どちらも初めてなら、まずWebでReactを学びましょう。コンポーネント、state、フックの知識はすべてそのまま使え、ブラウザーのツールのほうがデバッグしやすいです。
- データ取得、検証、状態管理のロジックは、react-dom や react-native を import しないプレーンなTypeScriptモジュールにまとめましょう。そうしたファイルはWebアプリとモバイルアプリで共有できます。
- 見た目の層は作り直すつもりでいましょう。マークアップとCSSはネイティブのコンポーネントに移せないので、ロジックを共有していても画面づくりの時間は見込んでおきます。
- リモートの Image には必ず幅と高さを明示しましょう。img タグと違って、ダウンロードしたファイルから自動でサイズが決まりません。
よくある質問
React Native は React と同じものですか？
いいえ。Reactはコンポーネントのライブラリで、React NativeはReactを使ってネイティブのモバイルビューを動かすフレームワークです。コンポーネントの書き方は同じですが、HTMLの代わりに View、Text などのネイティブコンポーネントを描画し、ブラウザーのDOMはありません。
React Native で HTML や CSS は使えますか？
直接は使えません。div や span の要素も、CSSファイルもありません。スタイルはcamelCaseの名前を持つJavaScriptオブジェクトで、ほぼCSSに対応しています。レイアウトはflexboxを使いますが、いくつかのデフォルトが異なります。
React と React Native、どちらを先に学ぶべきですか？
多くの場合はReactが先です。React Native自身のドキュメントも、Reactのコンポーネント、JSX、props、stateを基礎として教えており、Webで練習したほうが結果をすぐ確認できます。
ReactのWebアプリとReact Nativeのアプリでコードを共有できますか？
ロジックは共有できます。型、APIクライアント、検証、DOMに触れないフックなどです。画面やコンポーネントは描画するプリミティブが異なるため、通常は共有できません。
React Native は本物のネイティブアプリを作りますか？
はい。React Nativeのドキュメントによると、実行時にコンポーネントに対応するAndroidとiOSのビューが作られるので、View はラッパーの中のWebページではなく、ネイティブのビューになります。
共有できるもの、できないもの
- どちらも react パッケージを使います。関数コンポーネント、JSX、props、state、エフェクト、コンテキスト、カスタムフックは同一で、useState のようなフックはスマートフォンでもブラウザーでも同じように動作します。
- 違うのはレンダラーです。Webでは react-dom がコンポーネントをHTML要素に変換します。React Nativeでは View や Text などのコンポーネントがプラットフォームのビューに変換されるため、document.querySelector からCSSセレクターまで、DOMに依存するものは使えません。
Web開発者がつまずくテキストとレイアウトの規則
- React Nativeでは、すべての文字列を Text コンポーネントの中に置く必要があり、View の直下に文字列を置くとエラーになります。スタイルの継承も限定的で、入れ子の Text は親の Text から継承しますが、View は子に何も引き継ぎません。
- レイアウトの仕組みはflexboxですが、flexDirection のデフォルトは column、alignContent は flex-start、flexShrink は 0 で、flex には数値を1つしか指定できません。WebのCSSから写したレイアウトには、flexDirection: "row" の追加が必要になることがよくあります。
どちらを選ぶべきか
- マーケティングサイト、ダッシュボード、Webアプリ、検索エンジンに見つけてもらう必要があるコンテンツなど、ブラウザーで開くものにはReactを選びます。端末の機能やネイティブのナビゲーションを使い、iOS と Android のストアに並ぶアプリが必要ならReact Nativeを選びます。
- 両方を使うチームも多くあります。ReactのWebアプリとReact Nativeのアプリで、型やAPIのコードを共有する形です。Web側でNext.jsも検討しているなら、このサイトの Next.js と React の比較ガイドでその選択を解説しています。
1つのカードを両方で書く
コンポーネントのロジックは同一です。同じprops、同じ useState の呼び出し、同じハンドラーです。変わるのは要素とスタイリングだけです。
Web向けのReact
HTML要素、CSSクラス、onClick。ブラウザーはテキストの後にボタンを配置します。
iOS と Android 向けのReact Native
react-native の View、Text、Pressable、StyleSheet.create によるスタイル、そして onClick の代わりに onPress。
リスト：Webでは map()、スマートフォンでは FlatList
React Nativeで同じリストを書く
FlatList は画面の近くにあるものだけを描画するので、長いリストもなめらかです。keyExtractor が key プロパティの役割を果たします。
flexboxレイアウト、スタイル、タッチ操作を備えたコンテナーです。スクロールはしません。
テキストはすべて Text の中に置く必要があります。入れ子の Text はスタイルを継承します。見出しタグはありません。
ネットワーク画像には幅と高さの明示が必要です。ローカルファイルは require() を使います。
onChangeText はイベントではなく、新しい文字列を直接渡します。
multiline プロパティで複数行のテキストを入力できます。
入力したテキストを隠します。multiline とは併用できません。
制御された真偽値の入力です。onValueChange で value を更新します。
Button は title プロパティを受け取り、Pressable はタップ可能にしたい任意の子要素を包みます。
Pressable には onPressIn、onPressOut、onLongPress もあります。
子要素をすべて一度に描画するので、短いコンテンツに使いましょう。
長いリストを効率よく描画します。data と renderItem が必要で、keyExtractor で各キーを設定します。
ブラウザーなど、インストール済みのアプリでURLを開きます。タップできるリンクにするには Pressable で包みます。
スタイルはオブジェクトで、通常は StyleSheet.create で定義します。配列を渡すと組み合わせられ、最後のものが優先されます。
スタイル名はWebでのReactの style プロパティと同じくcamelCaseです。
すべての View はflexコンテナーで、指定しない限り子要素を縦に積み重ねます。
Web要素からReact Nativeへの対応表
要素、prop、CSSの考え方を検索
img、onClick、class...
{v} 行中 {n} 行を表示
一致するものがありません。div や input などのタグ名を試してください。
Web要素とReact Nativeでの対応部品
WebのReact
React Native
変わる点
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る