Expo/React Native

React Nativeとは

React Native は、[[React]] の書き方のまま iOS・Android のアプリを作る枠組みです。書くのはJSXですが、画面に出るのはOS標準の部品です。<div> ではなく <View>、<p> ではなく <Text> を使い、これらが実行時にネイティブのビューへ対応づけられます。

import { View, Text, Pressable } from 'react-native'

export function Counter({ count, onPress }) {
  return (
    <View>
      <Text>残り{count}件</Text>
      <Pressable onPress={onPress}><Text>更新</Text></Pressable>
    </View>
  )
}

HTMLもCSSも使いません。 スタイルはJSのオブジェクトで書き、レイアウトはFlexboxに似た独自の指定です。Web版とロジック・状態管理は共有できますが、画面のコードは共有できないと考えるのが実務上は安全です。

Expoが引き受けるもの

React Native を素で使うと、Xcode と Android Studio のプロジェクトを直接扱うことになります。ここが最初の壁です。Expo はその周辺をまとめて肩代わりします。

とくに効くのがOTA更新です。ネイティブ部分を変えない修正なら、ストア審査を通さずにJSだけを差し替えられます。文言の誤りや軽微な不具合を当日中に直せます。

Flutterとの違い

同じ「1つのコードで両OS」でも、[[Flutter]] とは画面の出し方が根本的に違います。

• React Native — OS標準の部品を呼ぶ。OSらしい見た目と挙動が自然に手に入るが、OS間の差はコードに現れる
• Flutter — 自前で描画する。どのOSでも同じ見た目になるが、OSらしさは自分で寄せる

既に React の資産と人材があるなら React Native、見た目の一貫性を最優先するなら Flutter、という選び方になります。

実務での注意点

• ネイティブ側に手を入れた瞬間に難度が上がる — Expo の管理下から外れる作業(独自SDKの組み込みなど)が入ると、両OSのビルド設定を自分で見ることになります
• ライブラリの対応状況を先に見る — Web向けのReactライブラリは大半が使えません。DOMを触るものは動きません
• [[TypeScript]] を最初から入れる — 画面の部品名やスタイル指定の誤りは実行するまで気づきにくく、型があると早く落ちます
• [[状態管理]] はWeb版と共有できる — 画面は分かれてもロジックは共通化できます。ここを共有する設計にすると二重実装が減ります

初学者向けポイント

• <Text> の外に文字を書くとエラーになります。文字は必ず <Text> の中、というのが最初に踏む規則です
• スタイルの単位はピクセルではなく密度非依存の値です。端末の解像度が違っても見た目の大きさが揃います
• OS固有の処理を書き分けるときは [[Swift]] / [[Kotlin]] のコードが登場します。まずは公開パッケージで済むかを先に調べます

関連技術とのつながり

• [[React]] — 記述の作法と再描画の考え方をそのまま持ち込んでいる
• [[TypeScript]] — 部品名やスタイル指定の誤りを実行前に落とす
• [[状態管理]] — Web版と共有できる層。二重実装を減らす要
• [[Swift]] — iOS 固有処理を書くときに登場する
• [[Kotlin]] — Android 固有処理を書くときに登場する
• [[Flutter]] — 同じ目的で、画面を自前描画する対照的な方式

Q: React Nativeで画面に表示される部品はどれ?
- [ ] HTMLの要素がそのまま表示される
- [x] JSXに書いた `<View>` や `<Text>` がOS標準の部品へ対応づけられる
- [ ] WebViewの中でHTMLが描画される
解説: 書くのはJSXですが、実際に出るのはネイティブの部品です。HTMLもCSSも使いません。

Q: ExpoのOTA更新でできることはどれ?
- [ ] ネイティブコードの変更をストア審査なしで配信する
- [x] JSバンドルの変更をストア審査なしで配信する
- [ ] OSのバージョンを更新する
解説: ネイティブ部分を変えない修正であれば、JSだけを差し替えて即日反映できます。

Q: React NativeとFlutterの画面描画の違いとして正しいのはどれ?
- [x] React NativeはOS標準の部品を呼び、Flutterは自前で描画する
- [ ] どちらもWebViewでHTMLを表示する
- [ ] React Nativeが自前描画で、FlutterがOS標準部品を呼ぶ
解説: React NativeはOSらしさが自然に出る代わりにOS間の差が現れ、Flutterは一貫した見た目になる代わりにOSらしさを自分で寄せます。