概要
緑さんはプログラミングが趣味なので、ちょこちょこアプリ制作の手伝いもしてるわけじゃんか?
あと JavaScript, TypeScript のフレームワークである React.js にも素養もあるわけじゃんか?
今回も手伝いで、 React Native アプリの Android 15 対応と、それにともなう React Native バージョンアップをやってきたぜ。なかなか得がたい体験だったんで、これを始めたときの “えーーーっと、どう進めればいいんだ? 方針というか……” みたいな頃のぼくへ向けて、 Android 15 対応、 React Native のバージョンアップとはどういうことなのかを解説する記事を書くぜ。
今思えば、最短ルート
- React Native のバージョンを 0.77 以上へ上げる (Android 15 へ対応している最低のバージョンなので)
- その他、 package.json に書いてある全ての依存パッケージをひとつずつ、適切なバージョンへ上げる
- 更新が終わっている依存パッケージについては、代替パッケージへ変更する
- Android 公式の出している Android 15 対応マニュアルに従って、アプリの Android 設定ファイル側を対応していく
これは本当に “今思えば” であって、実際は “Android 15 対応” がメインの目的であったので、情報をたどる方向は真逆であった。
Android 15 対応マニュアルを辿っていく → なんかうまくいかない。どうやらパッケージたちが古いようだ → パッケージのバージョンアップを試すけれど、なんかうまくいかない。どうやらメインの React Native が古すぎて、依存パッケージたちの新しいバージョンと合わないようだ → ほな React Native を上げるかぁ……、というのが実際にたどったルートだ。
なので、理想としては “Android 15 対応かあ……プラットフォーム側がどかんと変わることになるから、どうせ React Native のバージョンアップも必要なんだろうなあ……ほら、調べたら Android 15 には React Native 0.77 以上が必要らしい……じゃ、そこから始めるか” と考えるべきだったろう。
じゃあ、各工程、もうすこし詳しく書いていく。
React Native のバージョンを上げるとはこういうこと
- 上げる先のバージョンを決める
- まあ、できれば “最新バージョンのいっこ手前” まで上げちゃうのがいいだろう。なるべく最新に近いほうがいいし、かつ、最新バージョンは怖いから。
- React Native Upgrade Helper で、 from, to を埋める
- ここ↑に記されたとおりに、リポジトリのコードを更新する
- ただまあ……自分のコードベースでは、自分のアプリのオリジナルコードが入っているので、完全に Helper 通りに修正できるかといえば不可だろう。ここは自分の技量でがんばるしかなかろう。
この状態だと、 React Native は新しく、別のパッケージたちは古い、という状態なので、たぶん Android ビルドはうまくいかないだろう。
依存パッケージのバージョンを全部上げるとはこういうこと
- package.json のパッケージたちの、 React Native のバージョンに対応したバージョンをすべて調べる
- 何も考えず最新化できれば苦労はないのだけど、 “この React Native バージョンにはこのバージョンだけ対応してる” みたいなのがあるのだ。
- これをやっていると、 “あれ? 対応してるバージョンがない……更新が終わっており、別のパッケージへの引っ越しを推奨している……” というのがある。これはスキップして、次のステップへ回す。
- バージョンを更新する
- 更新の際には、ただの
yarn installではなく、これ↓くらいやったほうが安定するぜ。
- 更新の際には、ただの
# node_modules
rm -rf node_modules
yarn cache clean
yarn install
# iOS 側
(cd ios; rm -rf Pods Podfile.lock)
(cd ios; pod cache clean --all)
(cd ios; pod install)
なんだか、我が愛する Python のプロジェクトと比べて、 React Native プロジェクトでは、各種パッケージの後方互換性がてんでなっていないな、という感覚を受ける。
更新の終わっているパッケージを代替パッケージへ変更するとはこういうこと
- 上のステップで発見した、 “更新が終わっており代替パッケージを推奨しているもの” については、それを削除して、別パッケージをインストールすることになるだろう
- パッケージが丸ごと変わるので、自分のコードは確実に変更が必要だろう
この作業をしていると、 “依存パッケージの量を減らしていきたい、外部パッケージを使うにしても、なるべくシンプルに使うようにしよう、” と強く思うようになる。
Android 公式に従って Android 15 対応をするとはこういうこと
- 大まかに言うと、以下の3つのドキュメントに対応が終われば OK
- “Android 15 SDK をセットアップする” ドキュメント: https://developer.android.com/about/versions/15/setup-sdk?hl=ja
- ここ↑からリンクで飛べる、 “動作の変更点: すべてのアプリ” ドキュメント: https://developer.android.com/about/versions/15/behavior-changes-all?hl=ja
- 同じく、 “動作の変更点: Android 15 以上をターゲットとするアプリ” ドキュメント: https://developer.android.com/about/versions/15/behavior-changes-15?hl=ja
- ドキュメントを見ていると、 “AGP ってなんだよ” “Gradle ってなんだよ” みたいなことを思うので、整理しておく
- Gradle: コードをコンパイルするツール。別にこれ自体は Android 専用ってわけではない。
- AGP, Android Gradle Plugin: Gradle に Android ビルドの機能を与えるプラグイン。
- Android SDK 35: Android 15 用の SDK。
- Android Gradle Plugin Upgrade Assistant: Android Studio の中にあるツール。普通に、コードの中に書いてある Gradle や Android Gradle Plugin のバージョンを自分で書き換えたりすると、なんか “ビルド通らん……?” ってなることがある。 Assistant は、これを安全に行ってくれる安全ネットだ。たとえば、 Gradle と Android Gradle Plugin には、適切なバージョンの対応があり、それをしっかり合わせてくれたりする。
- 今回のアプリの場合、 “動作の変更点: すべてのアプリ” ドキュメントの中でも、 “16 KB ページサイズのサポート” に特に困らせられた。これについてはさらに専用のドキュメントがある
- https://developer.android.com/guide/practices/page-sizes?hl=ja
- まあ、 React Native を新しく更新することで、ここに書かれていることはだいたい対応が終わっているハズだ。それは結果論で、上述したように、ぼくは逆方向に作業を進めたせいでいろいろ苦労しちゃったわけだけど。
- また、 “動作の変更点: Android 15 以上をターゲットとするアプリ” ドキュメントの中でも、 “エッジ ツー エッジ” に特に困らせられた。これは Android 画面の、上部のステータスバーと、下部のナビゲーションバーが透明になって、アプリのコンテンツがその下へ潜り込むようになることだ。たとえば上部にテキストがあったり、下部にボタンがあったりすると、バーの下に潜り込んで使えなくなっちゃう。これについては react-native-safe-area-context を使うぞ。
所感
- まあ結局、以上のステップの合間に、ものすごい量のビルドエラー、ランタイムエラーをひとつずつ見て、丁寧に対応をしていく必要はある。だけど、それは最近の AI agent の発達のおかげもあって、個人的には問題なかった。
- ぼくが今回の作業中に疑問だったのは、 “こういった、プラットフォーム側のアップデートに追従する作業や、 React Native 本体のアップデート作業は、アプリを作っている人は全員やっているハズなのに、作業の全体的な流れについて、権威あるドキュメントがあんまりヒットしないのは何なんだ……?” ということだった。
- なので、今回は細かいことよりも、 “アップデート作業というものの全体像” を捉えるための記事を書いといたぜ。
- プログラミング自体はずっと趣味でやっているけれど、既存プロジェクトのバージョンアップなんてのは、そこから一歩踏み込んだスキルセットだよな。それに触れることができたので、今回は楽しかったぜ。
