1. /
  2. /
  3. 【ストア要件に備える】React Native CLIによる更新手順と注意点

【ストア要件に備える】React Native CLIによる更新手順と注意点

このエントリーをはてなブックマークに追加
LINEで送る

最近オンラインゲームに熱が再燃していて、Discordで知らない人と話すのが意外と楽しいなと感じています。こんにちは、クラウドソリューション開発部の寺谷です。

今回は、React Native スマホアプリ開発の保守で避けて通れないバージョンアップについてまとめます。React Native のアップデートは一筋縄ではいかないことが多く、特にメジャーアップデートではさまざまな問題が起きがちです。

この記事では、React Native CLI を使ったバージョンアップ手順と進めるうえでの注意点を整理します。

1.React Native CLIとExpoの違い

バージョンアップを始める前に「React Native CLI」と「Expo」の違いを整理します。

React Native CLI
React Native のコア機能を直接扱うための標準的なコマンドラインツールです。ネイティブコード（Java/Kotlin、Objective-C/Swift）まで触れるため自由度が高い反面、環境構築や運用にはある程度の知識が必要になります。
また、CLIでのアップデートでは iOS の Xcode プロジェクトや Android の Gradle 設定など、ネイティブ側の設定ファイルを差分に沿って手作業で修正していく必要があります。

Expo
React Native をベースにした開発支援プラットフォームです。面倒な設定をある程度自動化してくれるため、比較的スムーズに開発を始められます。ただし Expo 独自の仕組みや制約があるため、ネイティブ側の高度なカスタマイズには不向きな傾向にあります。
とはいえ、基本的には Expo 側がネイティブコードを管理してくれるため、開発者は主に JavaScript/TypeScript 側の変更に集中できます。アップデートも、設定ファイル（例：app.json など）の修正で済むケースが多いです。

2.React Native CLIのバージョンアップ手順

React Native CLI を使ってバージョンアップする際の大まかな流れは次の通りです。

  1. 現在の React Native のバージョンを確認する
    まず、現在のReact Nativeのバージョンを確認します。
  2. アップデート先のバージョンを決め、方針・計画を立てる
    変更点は公式ブログで告知されることが多いので、事前に確認しておくと安全です
    リンク：https://reactnative.dev/blog
  3. Upgrade Helper を使い、差分を見ながら手作業で反映する

バージョンアップが必要になるタイミングとしては、新しい Android / iOS のリリースや、ストア要件の変更（例：Target SDK要件など）が典型です。直近だと、Google Play Store 側の要件により 16 KB ページサイズデバイスへの対応が求められ、React Native のアップデートが必要になったケースもありました。（このあたりは、対応範囲やプロジェクト状態によってはかなり大変になります。）

16KBページサイズ要件対応時のブログについては、下記にリンクを載せます。よろしければ、併せてご確認ください。
https://www.ecomottblog.com/?p=21919

3.Upgrade Helperの使用方法

React Native Upgrade Helper は、React Native のバージョンアップを支援するツールです。バージョン間の差分（追加・削除・変更）を確認できるため、作業の見落としを減らせます。
リンク：https://react-native-community.github.io/upgrade-helper/

手順は以下の通りです。

  1.  App name を入力する
    Upgrade Helper上での識別用なので、基本的に任意です（例：MyApp）。
    迷う場合は、プロジェクトの表示名に合わせるとよいでしょう。
  2.  App package を入力する
    Android の applicationId（一般的に「パッケージ名」と呼ばれるもの）を入れます。
    該当パス : android/app/build.gradle。com.xxxxxx.app のような形式です。
    ※ iOS の Bundle Identifier（com.xxxxxx.app）もおそらく同じ値のため、どちらかで参照できれば問題ありません。
  3.  Current version（現在の React Native バージョン）を選択する
  4.  Target version（アップデート先のバージョン）を選択する
  5. 「Show me how to upgrade!」 を押して、バージョン間の差分（変更点）を表示する

表示される差分には、コード変更だけでなく、追加・削除されたファイルや設定変更なども含まれます。これらを確認しながら、プロジェクト側へ手作業で反映していきます。

4.バージョンアップの注意点

バージョンアップでは、プロジェクトの構成や使用しているライブラリによって思わぬ問題が起きることがあります。
たとえば、更新によって既存コードが動かなくなったり、依存ライブラリが新しいバージョンに追従できておらずビルドできなくなったりするケースです。

そのため、Upgrade Helper の差分を見ながら進めるのはもちろん、依存関係を含めて影響範囲を確認しつつ慎重に作業することが重要です。

実際に私も、React Native のバージョンアップ時に特定のライブラリが新しいバージョンへ対応しておらず、アプリがビルドできなくなった経験があります。当時は Recoil（状態管理ライブラリ）を利用しており、アップデート後に Recoil が React 19 に対応しておらず、結果としてビルドが通らない状態になりました。

このようなトラブルを避けるには、バージョンアップ前に利用中ライブラリの互換性を確認し、必要に応じて以下のような判断をするのが有効です。

  • ライブラリ側のアップデートに合わせて、こちらも追従してバージョンを上げる
  • 対応が遅れている場合は、修正が入るまでバージョンアップ自体を見送る
  • 将来的な保守が見込めない場合は、代替ライブラリを検討して移行する

今回のケースでは、Recoil がすでにアーカイブされており、今後のアップデートも期待できない状況でした。
そのため、代替となる状態管理ライブラリを検討し、移行する判断をしました。

このように、バージョンアップは単に上げるだけでなく、ライブラリの入れ替えやコード修正が必要になることもあります。
事前準備と影響範囲の確認をしっかり行い、最後にリグレッションテストまで実施して、安全にアップデートを進めていきましょう。

5.まとめ

React Native CLIのバージョンアップは、プロジェクトの保守性向上や新機能の取り込みのために重要な作業です。一方で、依存ライブラリやネイティブ設定の影響を受けやすく、慎重に進める必要があります。

Upgrade Helperを活用してバージョン間の差分を確認しつつ、プロジェクト全体のコードや依存関係を洗い出し、必要な変更を一つずつ反映していくのがポイントです。

また、アップデートによって既存機能が動かなくなる可能性もあるため、十分な動作確認（特にリグレッションテスト）を行い、問題が起きた場合にすぐ切り分け・対応できる体制があれば、着手しやすくなります。

適切な手順と注意点を押さえれば、React Nativeのアップデートはプロジェクトの成長につながる前向きな取り組みになります。焦らず、安全に進めていきましょう！

エコモットでは、モノづくりに共感してくれる仲間を募集中です！弊社に少しでも興味がある方、ぜひ下記の採用ページをご覧ください！