🦔

WebエンジニアがReactNativeをやることになった時、ネイティブ周辺ファイルがなんとなく分かるかもしれない記事

2023/06/07に公開

Gradle

はじめに

ReactNativeはいいですね。

ReactができるWebエンジニアがクロスプラットフォームなアプリをある程度Web感覚で作っていくことができます。
これは採用とかメンテナンスの意味でも結構な利点です。
とはいえ、そんなノリでWebエンジニアが開発しちゃうと、いうてもWebではないので戸惑うネイティブ由来の周辺ファイルの洗礼を受けます…笑

機能開発だけをするエンジニアならもしかしたらそこまでその辺は触ることはないかもしれませんが、バージョンアップ作業をしなきゃいけない場合なども出てくるでしょうし、そんな時は謎ファイルをたくさん触ることになって発狂しそうになることでしょう…(筆者のように笑

私はネイティブには明るくないWebエンジニアですが、ReactNativeを使っているサービスの運用管理をすることになり、0.67.3→0.71.8にバージョンアップする作業が発生しました…
その際、色々と周辺ファイルをいじることになり、理解が必要になったので、さらっとメモとして残しておきます。

時間があれば色々公式なドキュメント読めば、この記事を読むよりよっぽど正確に深く理解できますが、時間に追われた忙しいどこかのエンジニアのブラザーの多少の手助けになればと思います。

下記単語として眺めるだけだと流石に意味不明かもしれないので、これを起点にリンク先を参照してもらったり、個別にググってもらう目次的に使ってもらえれば〜
そしてお手元のファイルの中身を眺めながら、フンフンしていただければ…！

調べたりいじった記憶のあるファイル一覧

iOS

info.plist

plistはプロパティリストって意味らしい
アプリの基本的な情報が設定されている。「アプリ名(Bundle name)」や「ロケール」「バージョン」
ビルド時のユーザー定義の定数も設定できる。

〇〇.xcodeprojと〇〇.xcworkspace

xcodeのプロジェクト
xcworkspaceは複数のxcodeprojを管理できるらしい。Podsを使ってるとPodsのプロジェクトができるので、ReactNativeの場合は基本xcworkspaceもできてるのかな。
project.pbxcproj
- xcodeのGUI上で設定した内容が保存されている設定ファイル。

Podfile、Podfile.lock

https://guides.cocoapods.org/

iOSアプリのライブラリ管理ツールであるCocoaPods関連ファイル。
package.jsonとyarn.lockみたいなもの。

AppDelegate

アプリ全体のライフサイクルを管理するためのファイル
アプリケーション起動時の初期化処理を行うなど、アプリケーションの状態管理を行う。
拡張子が「h」のファイルはヘッダーファイル（宣言ファイル）。拡張子「m」は実装ファイルで、実際のロジックを書いていくファイル。

〇〇.entitlements

プッシュ通知やヘルスケアへのアクセス承認を求めれるかなど、プロジェクトのCapabilityでの設定に関するファイル。

Android

Androidのビルドについては、流石に先にこの辺のドキュメントとか記事とかさらっとみてGradleについて何か知っておいた方がいいかも。

gradleはビルドシステム
GroovyというJava感覚なスクリプトで書ける
Product Flavor、Build Typeとかで環境に応じてビルド設定を分けられる
ビルド依存関係を管理

build.gradle

gradleの設定ファイル
/android直下の共通設定のものと、配下のアプリそれぞれの固有設定のファイルがある

gradle.properties

gradleのプロパティファイル。

gradlew

Gradleの実行環境をインストールしてなくても、gradleコマンドを実行するのと同様のビルドを行なってくれるシェル。
別の開発者やCI環境とかでも安定してビルドできる。
っていう仕組みをGradle Wrapperっていう。

gradle-wrapper.jar

Gradle Wrapperの本体のjarファイル。

gradle-wrapper.properties

Gradle Wrapperのプロパティファイル。

settings.gradle

gradleをマルチプロジェクトで使うときに使うものらしい。
設定に従い、複数のサブプロジェクトを連携してビルドする。

AndroidManifest.xml

アプリに関する重要な情報を Android ビルドツール、Android オペレーティングシステム、Google Play に対して説明するもの
アプリのパッケージ名、コンポーネントの宣言、パーミッション設定など

ReactNativeFlipper.java

Flipperを初期化している
Flipper
https://fbflipper.com/docs/features/
- モバイル用のデバッグツール
  - ログやインスペクタ、ネットワークをデバッグするプラグインを動かす仕組みを提供する
  - React DevToolsとかはこれで動いてる

MainActivity.java

Activityとは、ユーザーの操作を可能にする画面を提供するコンポーネント（部品）の事です。
つまりこのファイルは、アプリをどう動かすのか、例えばボタンが押されたらこれを実行するなど、アプリの動きを書いていくもの。
ReactNativeではデフォルトではとりあえずcreateReactActivityDelegate()とかで、JavaScriptバンドルをロードし、React NativeのViewツリーをレンダリングしたりとかの橋渡しをしてくれてるのかと思っている。

MainApplication.java

React Nativeアプリケーションのエントリーポイントであり、アプリケーションの初期化や設定を行う。

その他出てきがちな単語

yogakit

Webアプリで広く使われるFlexboxレイアウトをiOSアプリケーションに適用してくれてる。
よくyogakit.modulemap' not found的なエラーが出るが、podfileを消してpod installし直したり、IPHONEOS_DEPLOYMENT_TARGETを11以上にしたら治ったりするっぽい。
https://github.com/facebook/react-native/issues/29605

Fabric

React Native の新しいレンダリングシステム
ホストビューと React ビューの間の相互運用性が向上し、なんかパフォーマンスが向上してる

New Architecture

バージョン 0.68 以降、React Native は新しいアーキテクチャを提供し、開発者に高パフォーマンスで応答性の高いアプリを構築するための新機能を提供してる。
Turbo Native Modules
https://reactnative.dev/docs/the-new-architecture/pillars-turbomodules
- ネイティブモジュールが作りやすくなった。効率化もされた。
Fabric Native Components
- Fabricを利用して、ネイティブなコンポーネントを作れる。
Codegen
- 静的型付けされたJavaScriptファイルを元に、新しいアーキテクチャに必要な型付けされたC++ファイルを生成するコードジェネレータ。
- Turbo Native ModulesやFabric Native Componentsを作るとき、楽になる。
古いアーキテクチャとの違いは詳しくはこちら
https://reactnative.dev/docs/the-new-architecture/why

Hermes

https://reactnative.dev/docs/hermes

React Native 0.69.0 以降一緒にバンドルされており、0.70 以降デフォルトとなっているJSエンジン
起動時間短縮やアプリサイズ減少やパフォーマンスの向上がされている

終わりに

うーん、まぁ流石にやっぱ多少のネイティブの知識がないと、ビルドとか色々するとき困っちゃうし、各要素ちょろっと調べるだけだと頭入ってこないですよね…
Androidとかは特に、公式リファレンスでさらっとそもそもAndroid開発自体について眺めておくのはいろんな単語が多少スッと入ってくるようになって有効でした。

あと、ReactNative自体の公式ドキュメントすら私はまともに読まずにいたのですが、結局全体的に読みました(笑)
これは開発者に必要な情報、読まんくてもいいけどできたら読んだら色々考えれるようになる裏側の仕組み的な情報、コントリビューター向けの情報、など読み手のこと考えてる文脈が随所にあり、素敵やんってなりますた。

また、ReactNativeのバージョンあげたときのそこそこ苦労した手順とかも書いてみますね。
では！