☺️

Re: ここがつらいよReact Native

に公開

こんにちは!テラーノベルとテラードラマでiOS/Android/Webとフロントエンド周りを担当している @kazutoyo です!

9か月前に、React Nativeを使っていて辛いと感じていたポイントをまとめた記事を書きました。
https://zenn.dev/tellernovel_inc/articles/cfd14c9acab294

当時はExpo 53(React Native 0.79)の頃でしたが、現在はExpo 55が最新となり、React Native本体やエコシステム、さらには開発を支援するAIツール周辺も大きく進化しています。

その結果、当時感じていた「辛さ」の多くが解消されたので、今回はそのアップデート状況についてお話ししようと思います。

1. React Native(Expo)のバージョンアップが大変

以前は、React NativeやExpoのアップグレード作業はかなりの大仕事で、(アプリの規模にもよりますが)1日で終わることはあまり多くありませんでした。

しかし現在は、Claude Codeなどのコーディングエージェントと、Expo公式の upgrading-expo スキルを組み合わせることで、アップグレード作業がかなり楽になっています。
https://github.com/expo/skills

実際、弊社のテラードラマアプリをExpo 54→55へアップグレードしたときも、ほとんどの作業はコーディングエージェントが担当し、動作確認まで含めて半日程度で完了しました。

また、React Native自体も最近は安定してきており、New Architectureに対応済みのアプリであれば、直近のアップデートはそれほど大きな差分なく追従できる印象です。

2. ライブラリの互換性

ここは、最近の自分のプロジェクトではほとんど発生しておらず、それほど気にならなくなりました。

expo installexpo-doctor を使ってプロジェクト構成を整えることで、互換性周りの問題はかなり起きづらくなっていると思います。

3. iOSのビルド時間が長い

React Native 0.81から、プリコンパイルされたReact Nativeが利用できるようになり、ビルド時間が大きく改善されました。さらに、Cコンパイラのキャッシュ(ccache)を有効にすることで、より一層最適化されます。
https://expo.dev/blog/precompiled-react-native-for-ios
https://expo.dev/changelog/compiler-cache-for-builds

加えて、Software Mansionが公開しているRNRepoも注目です。これはReact Native関連の50以上のライブラリをプリビルド済みの形で配布しているリポジトリで、ネイティブのビルド時間をさらに短縮できます。
https://rnrepo.org/

また、ExpoからはRepackというCLIツールも提供されています。これは既存のAPK/IPA/.appなどのバイナリに対して、JSバンドルやメタデータだけを差し替えて再配布できるツールです。
QAやCIで利用するバイナリを、ネイティブビルドなしで素早く配布できるため、フィードバックサイクルを大きく短縮できます。
https://docs.expo.dev/build-reference/repack/

4. CNG対応のためのConfig Pluginsの実装が面倒

ここもコーディングエージェントの活用によって、ほとんど気にならなくなりました。

Config Plugin自体の実装は依然として必要ですが、コーディングエージェントが高い精度で生成してくれるため、「面倒だ」と感じる場面はかなり減ったと思います。

5. 各プラットフォームの調整が必要

この点は依然として必要な作業ですが、それでもコーディングエージェントの登場によって確認や修正の負担はかなり軽くなったと感じています。

以前紹介した agent-device を使えば、実機でiOS/Androidの表示を確認し、デザインとの乖離があればコーディングエージェントに修正してもらう、という流れを組めます。人が地道に調整する場面はかなり減ってきたなと感じます。

また、Storybook for React Nativeを使ってネイティブ上でUIコンポーネント単位の確認を行えば、プレビューや調整、パターン検証もさらに楽になります。
https://storybook.js.org/tutorials/intro-to-storybook/react-native/en/get-started/

6. 既存のアプリの一部にReact Nativeを組み込むのは大変

弊社のテラーノベルアプリでも、エディタ機能の一部をReact Nativeで実装しています。

こうした「既存のネイティブアプリにReact Nativeの画面を追加する」というやり方は、依然としてエッジケースであり、積極的におすすめできるものではありません。

とはいえ、ExpoやCallstackといったReact Native界隈の主要なプレイヤーが、この領域への対応を強化し始めています。

その代表がExpo Brownfieldです。
ネイティブ↔React Native間のインターフェースや、React NativeアプリケーションをMavenリポジトリ・XCFrameworksとして既存アプリに組み込める形でエクスポートするCLIが提供されています。
https://docs.expo.dev/versions/latest/sdk/brownfield/

類似のライブラリとしては、React Native Brownfieldもあります。
https://oss.callstack.com/react-native-brownfield/

まとめ

この1年弱で、コーディングエージェントの台頭や、React Native/Expo自体の進化によって、以前感じていた多くの不満点が改善されました。

特にAI周辺の進化のスピードは凄まじく、去年の後半あたりからは自分自身がコードを書く機会もかなり減ってきています。

そういった環境の中で、React NativeはAIを活用した開発との相性がとても良いと感じており、これからもより積極的に使っていきたいなと思っています。

それでは、良いReact Nativeライフを!

テラーノベル テックブログ

Discussion