React Native

概要

React Nativeは、ReactとJavaScript（またはTypeScript）を使ってネイティブモバイルアプリを構築するための、Metaが作ったオープンソースフレームワークです。Webと同じようにコンポーネントを書きますが、それがWebビューではなく、本物のネイティブのiOSおよびAndroidのUIウィジェットとしてレンダリングされます。コードの大部分は両プラットフォーム間で共有され、必要なときにはプラットフォーム固有のネイティブコードに踏み込むこともできます。

強み

1つのコードベースで2つのプラットフォーム — ロジックとUIの大部分をiOSとAndroidで共有できる。
Reactを使うため、Web開発者がすぐに生産的になれ、エコシステムも巨大。
Webビューではなく真のネイティブコンポーネントをレンダリングし、本当にネイティブな感触を実現する。
Fast Refreshが編集中にほぼ瞬時のフィードバックを与える。
逃げ道：限界にぶつかったときはSwift/Kotlinでネイティブモジュールを書ける。

トレードオフ

JavaScriptとネイティブの間のブリッジが、パフォーマンスがクリティカルな処理やアニメーションの多い処理を複雑にすることがある。
ネイティブの依存関係やビルドツールは壊れやすく、バージョンに敏感なことがある。
難しい部分には依然としてプラットフォームの知識（とiOSビルドのためのMac）が必要。
一部の新しいOS機能は、コミュニティやあなた自身がラップするまで利用が遅れる。

使いどころ

1つのチームと1つのコードベースでiOSとAndroidの両方にネイティブアプリを出したいとき、特にチームがすでにReactを知っている場合に、React Nativeを選びましょう。コンテンツ、コマース、CRUD系のアプリにうまくフィットします。

バイブコーディングとの相性

React NativeはただのReactなので、AI支援コーディングと相性が良いです。アシスタントはコンポーネント、フック、propsに深く精通しています。モデルにはTypeScriptを使わせ、可能な限りコンポーネントを小さくステートレスに保たせ、手間のかからないビルドとネイティブモジュールのためにExpoと組み合わせるよう指示しましょう。生成されるコードが適切なライブラリを選ぶよう、対象プラットフォームと必要なネイティブ機能を最初に伝えておきましょう。

import { Text, Button, View } from "react-native";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Add" onPress={() => setCount(count + 1)} />
    </View>
  );
}