こんにちは、NatureでソフトウェアエンジニアをしているTakumiです。
Natureが提供しているモバイルアプリケーションNature RemoはReact Nativeを使って開発をしています。
元々はiOS/Androidともにネイティブで開発をしていましたが、2018年にReact Nativeに移行しています。
当時の詳しいことは次の記事をご覧ください。
Webアプリ開発者、React Nativeに出会う
今年の10月からNatureにジョインした私はWebアプリがメインの開発者でした。 ここ最近はReact、Nextjsを使っていてReact自体には知見がありましたが、モバイル開発は未知の領域。
そんな私が体験したReact Nativeのエピソード5選を共有したいと思います。
今回はコードはほとんど出てこないので安心（？）してください。
Reactを触っている方やReactが気になっている方が少しでもReact Nativeの世界に興味を持っていただければ幸いです。
その1：最新版は御法度？
これはどんな開発環境でも同じなのですが、React Nativeは他よりもだいぶ大変でした。
たとえばReactやNextjsであれば、気にするのはNodeのバージョンくらいでしょうか。基本的には package.json 以上ではないです。
あとは
yarn dev
と叩けば、Hello Worldできます。
React Nativeではそれに加えて、XcodeやAndroid SDKのバージョンなど周辺の様々なツールのバージョンにも気をつける必要があります。そうしないとそもそも動かなかったり、いざリリースビルドを作る時にこけたりすることがあります。
確認しようXCodeのバージョン
参加するプロジェクトでしっかりとXcodeのバージョンを確認しましょう。もし今動く環境にあるのであれば、OSバージョンアップやXCodeのバージョンアップはチームの方達と相談しましょう。
プロジェクト秘伝のたれ、ならぬ設定があるかもしれません。1人で悩まずに聞いてしまいましょう！
バージョン違いが起きる問題
最近の例ですとXcode13から14にアップデートすると、iOSでリリースビルドができないということがありました。
これはXcode14からSigningのプロセスが厳格化されたことの影響です。解決方法はReact Nativeのversion 0.70.3にするか、Podfileに回避用のコードを追加する必要があるということです。
ちなみにモバイルアプリの開発者は複数のXcodeを共存させることが定石です。そのためにもMacの容量管理もしっかりしましょう！（ダウンロードだけでも5GB以上）
確認しようAndroid NDKのバージョン
Android NDKは以下の通り非常に重要なツールです。
Android NDK は、ネイティブ コードのアプリの一部に C や C++ などの言語を使用できるようにするツールセットです。また、アプリの種類によっては、C や C++ で書かれたコード ライブラリの再利用にも役立ちます。
Android NDK | Android Developers
これもバージョンが重要なので、Xcodeだけでもお腹いっぱいですが、それにめげずにAndroid Studioから必要となるNDKを取得して設定しましょう。
環境構築の苦労
これらに限らず初めてプロジェクトにジョインするメンバーは苦労するものです。
十分なドキュメントがあっても環境はマシンそれぞれなので、プロジェクトの先輩とペアで構築することをお勧めします。
基本的には本家のサイト通りに構築すれば問題はありません。
ただし参画するプロジェクトによっては最新版を必ずしも使っているわけではありませんし、利用しているライブラリの対応状況など様々な要因でうまくいかないケースもあります。そのプロジェクト用に用意された構築手順もあるはずですので、まずは忠実に手順通りに実行しましょう。
初めてプロジェクトを作るのであれば、できるだけ最新版を使うようにしましょう。React Nativeのバージョンアップ対応も一苦労するためです。
その2：つながらないAndroid実機
ここ数年でiOS/Androidともにシミュレータのクオリティが上がってきました。ただ最終的には手元にあるデバイスで動作確認をしたいものです。
実機接続はiOS/Androidともに経験がない開発者からすると、正直なところ面倒です。
iOSの場合は、最初の設定さえクリアすれば、あとは簡単です。
MacとiPhoneをつないで、Xcodeで接続したiPhoneを選択するだけです。昔iTunesでiPhoneのバックアップの経験があれば親しみのある方法です。
一方Androidの場合は、最初のステップから驚きです。設定アプリにあるビルド番号を7回連続でタップします。すると開発者向けオプションが有効になります。
スーパーファミコンの裏技みたいな操作ですね。↑↑↓↓・・・。
詳しくは下のリンクを参照してください。
便利なAndroidのワイヤレスデバッグ
Android11（2022/12/14時点の最新版はAndroid13）からワイヤレスデバッグが導入されました。ケーブルで手元のAndroid端末とMacを接続しなくてもWiFi経由で接続できます。
ちょうど今がUSB Type-C統一の過渡期で余計なケーブルを持たなくても良いです。
またAndroid端末をMacに接続するとMacにAndoroid端末の電力を吸い取られることがあります。これを避けられるだけでも嬉しいです。
便利なワイヤレスデバッグだが・・・
つながらないことがあります。
私もそうですが、近年セキュリティを気にしてVPNを導入している企業や個人もいらっしゃると思います。その場合、接続するVPNサーバを同じにしてもつながらなかったり、つながったりする場合があります。リリース前の忙しい時になかなかつながらないとイライラ度はマックスですね。
そういうときは泣く泣くVPNをMacとAndroid両方とも切断しましょう。そして
adb devices
とターミナルで叩けば、大抵はつながります。
それでもダメな場合は、開発者オプションから端末のエンドポイントを探して
adb connect 10.0.5.xxx:xxxxxx
というコマンドを叩いてみましょう。
快適な実機検証ライフを願ってやみません。
その3：次々消える本家のコンポーネント
React Nativeでは便利に使えるコンポーネントが勢揃いしています。
便利に改良・追加されていくコンポーネントもあるなか、去っていくコンポーネントたちもあります。
注目した記事を参考にして、いざそのコンポーネントを確認して工事マークがついていたら悲しい気持ちになります。が、断捨離できずにいつまでも古い仕様を引きずったりしてメンテナンスが行き届かなくなるよりかは全然マシだと考えましょう。
Deprecatedのページには有難いとことに以下のようなリンクが載っており、ライブラリを検索することができます。
https://reactnative.directory/?search=slider
React Nativeのバージョンにもご注意
Alertというアラートダイアログを出すよく見慣れたコンポーネントがあります。
Androidではボタンの種類として、ネガティブ・中立・ポジティブの3種類があります。Alertで表示させるボタンの数で組み合わせが決まります。
1つの場合はポジティブ。OKボタンのことですね。
2つの場合はポジティブとネガティブ。OKボタンとキャンセルボタンですね。
3つの場合はすべてです。たとえばOKボタンとキャンセルボタンに加えて、「あとで」ボタンと言ったものが該当します。
Androidではアラートダイアログの外側をタップすると、ネガティブ（キャンセル）になる機能を有効にすることができます。
Alert.alert(
"おっと、待った！",
"ファイナルアンサー？これでいいんですね？",
[
{
text: "ノープロブレム",
}
{
text: "キャンセル",
style: "cancel",
},
],
{ cancelable: true }
);
もちろんデフォルトはcancelableはfalseなので、ダイアログの枠外をタッチしても消えません。
ところがReact Nativeの過去のバージョンである0.59を見てみるとこの仕様が逆になっています。
By default alerts on Android can be dismissed by tapping outside of the alert box.
https://archive.reactnative.dev/docs/alert#android
怖いですね。アップデートしただけで期待していた動作がしなくなることがあるなんて。 なので、バージョンアップをする際は、しっかりとドキュメントを読み込みましょう。
その4：iOS/Androidバージョンアップ対応
毎年春から夏にかけてはiOS/Androidと新しいOSバージョンが発表される時期です。利用者にとっては新しく追加される機能は何かとワクワクする人もいれば、アップデートの容量が足りないしどうしようと悩む方もいるでしょう。
開発者は新しい機能へのワクワク半分、破壊的変更の有無や互換性がどうか不安半分です。Apple, Googleそれぞれきちんと変更点をドキュメントにまとめてくれています。
私たち開発者はそれぞれの変更点をしらみつぶしに確認し、修正していきます。
Webアプリとモバイルアプリのバージョンアップの違い
Webアプリの世界では基本的には主要なブラウザを並べて機能の低い方に合わせます。昔のIE地獄を味わった開発者にとっては辛い過去ですね。笛の音が聞こえました。IEのお話はここまでです。今はほとんどのブラウザがChromiumベースとなり、とても楽になりました。私個人としてはFirefoxに頑張ってほしいと思っています。
一方でスマートフォンのOSアップデートは毛色が違って、端末を所有しているユーザ自身の判断に任されます。ユーザとしては新しいOSのほうがセキュリティが高く便利なので移行したいという動機があります。また端末を買い換えると今よりも新しいOSになることが多いでしょう。OSの入れ替えは徐々に起きます。そして完全に入れ替わることも完全にはありません。
ではWebアプリ開発であった特定のブラウザのバージョンでしか動かないものがいつまでも残り続けるのか、というとそういうこともありません。
たとえばGoogleでは以下のように、毎年Play storeに載せられるAPI Levelを更新しています。
これによりモバイルの世界は新陳代謝が強制的に行われていて、クリーンな状態が担保されています。
バージョンアップ対応の事例：位置情報
Nature Remoは2022/12/13にホームロケーションをトリガーとするオートメーション機能をリリースしました。
Nature Remoが置いてある家や部屋をホームと定義し、半径200mでジオフェンスを張ります。
ホームには複数のユーザが所属することができます。ジオフェンスの境界をホームのユーザが跨ぐことでトリガーが作動し、以下の条件を満たせばオートメーションが発動します。
- 最初の1名が家に帰った
- 最後の1名が家から出掛けた
ホームロケーション機能開発と同時に必要になったのがAndroidの位置情報権限の対応になります。
Androidの位置情報の権限については以下のように定義されています。
この内容を確認すると、Androidのバージョンが上がるごとに制約が厳しくなっていることがわかります。
ユーザにとってはとても大事なことなので、古いAndroidを使っている方はできるだけ新しいバージョンを利用されることをおすすめします。
React NativeではPlatform APIで、OSの種類やバージョン情報を取得できます。この情報を元にして、ユーザに対してそれぞれのOSが要求する内容でユーザに対して権限要求を行います。
Webアプリでも位置情報やカメラや音声の利用など権限を要求することはありますが、モバイルと比べるとシンプルです。モバイルの中には重要な情報がたくさん詰まっているので考えてみれば当然ですね。師走で忙しい時期になりますが、くれぐれもご自身の端末を無くさないようお気をつけください。
ちなみに私が発売当初から持っていたiPhone6sは水没して年を越せなくなりました。
その5：ネイティブと連携するNative Bridge
ここがWebアプリ開発者にとっての鬼門です。
高度なアプリになればなるほど、iOS/Andoroid双方のネイティブとの連携の重要性が増します。もちろん素敵なライブラリがたくさんあるので、Native Bridgeを明示的に使わなくても良いこともあります。ただ機能を少し高度にしようとするとやはりどうしてもNativeでの実装は必須になります。
React NativeとそれぞれのOSとのBridgeはパターンが決まっているので、慣れれば大丈夫です。
がしかし、それぞれのOSでの実装はこれはもう勉強するしかありません。。。
もうすぐクリスマスに冬休み。靴下の中にはモバイル開発の厚い本が入っているかもしれません。
さいごに
まだリリースという鬼門もありますが、それは置いておきましょう。
Reactを知っていれば、React Nativeを使ってモバイル開発のかなりの部分は実装が可能です。多少の慣れは必要ですが、新しくReactを始めたときに比べれば全く問題にならないレベルです。
「Learn once, write anywhere.」
まさに看板に偽り無しです。
Reactを触っている方は機会があればぜひReact Nativeも触ってみていただければと思います。
またWebアプリ開発で何を使おうか迷っている方もモバイルアプリへの展開という芽を残すという意味でもReactは良い選択肢になるかもしれません。
仲間募集中
Natureでは大きなミッションを達成すべくフロントエンドはもちろん、バックエンドやファームウェアのエンジニアも絶賛募集中です。
少しでも興味を持たれた方はカジュアルに面談もできますので、まずは気軽にご応募をしていただければと思います。
それでは！
