今、React Nativeがアツいらしい
なんだか最近React Nativeに関する投稿が増えている気がしますね。
筆者も本投稿を準備していたところ、先に投稿が増えてきたので二番煎じ感が否めませんが、少し俯瞰的な整理としてご覧いただければと思います。
React Native界隈は近年盛り上がってきていて、特にExpo関連の進化を中心に、パフォーマンスも開発効率も大幅に改善されてきています🔥
具体的にどのように盛り上がっているのか、
React Conf 2024のKeynote（Day 2） がYoutubeで公開されており、非常に分かりやすくまとまっていました。
本記事はこの動画の流れに沿って、見どころをチャプターで切るように紹介しながら、関連情報やその後のアップデートの話もできればと思います。
※React Conf 2024は5/15・16に開催されたものです
動画前半： React Nativeがいかに盛り上がっているか
動画の前半は、近年のReact Nativeの状況に関してでした。
（熱のある良いプレゼンだったので是非動画で見ることをオススメします！）
2分01秒: State of React Native
ダウンロード数
2015年に公開されたReact Nativeですが、動画の中ではWeeklyのDL数が2Mを超えたと語られていました。
今はさらに伸びて2.7M程になってるようです🎉
採用事例
React Nativeは有名企業でも多く採用されています。
開発元のMetaはもちろん、
- Amazonのショッピングアプリ（本体と呼んでも良いかもしれません）やKindle
- Microsoftのオフィス系アプリ
- Shopify、Pinterest、Discord、Wixなど
先日は、Expo製のBlueskyがアメリカのAppStoreで1位になったらしく、盛り上がっていました🥳
以下の公式ドキュメントにアプリ一覧が掲載されています
5分52秒: 各社での使われ方の詳細
コミュニティ・ライブラリ
コミュニティも活発で、強力なライブラリがたくさんあり、例えば、表現豊かなアニメーション（react-native-reanimated）やモーションキャプチャを含むカメラ機能（react-native-vision-camera）などが簡単に実現できるようになっていることが、動画内で紹介されていました。
11分10秒: アニメーションやカメラ機能のデモ映像
パフォーマンスの改善
「React Nativeはパフォーマンスに懸念がある」というのはReact Native登場以来ずっと、技術選定時のネックの1つでした。
React Nativeチームはこれに対して、NewArchitectureという名前で設計を刷新することで大幅な改善を見込んでいます。
具体的には、JSIによってネイティブ層とメモリを共有しながら処理を行えるようになったり、Concurrent Reactを使うことで描画のパフォーマンスが改善されたりするようです。
16分24秒: JSIやConcurrent Reactのデモ映像
NewArchitectureの詳細は以下のドキュメントにまとまっています
動画の中ではBeta版リリースが発表されていましたが、
11/13にリリースされたExpo SDK 52で、このNewArchitectureがデフォルトになりました 🎉
動画後半: Expoの近年の進化
動画の後半はExpoが進化して開発しやすくなっているよ、という話でした。
ネイティブアプリ開発とExpoについて
21分30秒: ネイティブアプリ開発のあるべき姿について
=====
動画の内容をすごくざっくり超訳すると、、、
- ネイティブアプリの開発は多くの要素が絡んでいて難しい。
- しかし、もっと本質的なユーザーへの価値提供にフォーカスできるようにすべきだ。
- そこでReact Nativeでは「Framework」の使用を推奨する。
（現時点で、React NativeのFrameworkと呼べるものは実質Expoのみ）
と言った話でした。
GitHub上では、以下のページでFrameworkという概念の導入が議論され、 その後、公式ドキュメントもExpoを使うことを前提としたような内容に更新されていました。
Expoについて
（動画では紹介されていませんが、）ExpoもReact Native同様に年を追うごとにDL数は伸びていて、直近はReact Nativeの1/3程になっています🎉
ネイティブ機能の開発
Expoチームは、ネイティブの基本的な機能を利用するためのライブラリも70以上開発しているようです。
以下のライブラリが動画で紹介されていました。
- Auth（expo-auth-session, expo-apple-authentication, expo-local-authentication）
- Push通知（expo-notifications）
- モーションセンサー（expo-sensors）
- 画像（expo-image）
32分25秒: それぞれどのようなことができるかが分かりやすく紹介されています
また、Expo Modules APIによって、必要に応じてネイティブの処理をSwift / Kotlinで書くことができます。
React Native自体にもNative Modulesという仕組みが有り、ネイティブのコードを書くことができますが、Expo Modules APIはそれを簡単に実現できるようにしたものです。
（Native Modulesだと一部Objective-Cを書く必要が有ったので、それが不要になるのも嬉しいポイントです）
Navigation
複雑になりがちなNavigationもExpo Routerを使えば、Next.jsのようにfile-basedな形式でシンプルに定義が可能です。
35分53秒: ネイティブのNavigationについて
動画内ではサンプルとしてReact Conf 2024のアプリが紹介されていました。
動画冒頭でも触れられていますが、React ConfのExpo製アプリが公開されていて、誰でもインストールして触れるようになっています。
ソースコードも公開されているので学習用にもオススメです。
CNG（Continuous Native Generation）
React Nativeでは、アプリのアイコンなどの設定のために、iOSとAndroid用のディレクトリを用意して、それぞれの設定ファイルを編集する必要があります。
ExpoではCNGというコンセプトで、各OSのファイルを編集する必要は無く、専用のjsonファイルを編集してprebuildコマンドを実行することで、各OSに必要なファイルは自動生成されます。
これによって、基本的なアプリの設定がネイティブレイヤーの設定ファイルを触らずに完結するようになるため、開発のハードルが大きく下がりました。
40分11秒: React Nativeの構成とCNG
EAS（Expo Application Service）
EASはビルドやリリースをスムーズにするクラウドサービスです。（という説明で良いのか自信が無いですが…）
XcodeやAndroid Studioを使った設定周りは複雑になりがち（特にReact Nativeでは両方の設定が必要なので）ですが、
それらのプロセスを簡単にしてくれるのがEASです。
動画の中では、GitHubのPull RequestからEASのプラットフォームを経由して、数クリックするだけで手元のシミュレーター上で起動できる様子が紹介されていました。
そして何より、ストアを介さず（=審査無しで）アプリをアップデートできる、EAS Updateが便利です。
（昔はOTA（Over The Air） Updateと呼ばれていましたが、今は呼ばないみたいですね）
49分58秒: Pull Requestから数クリックでシミュレーターを起動する様子
動画おわり
以上で動画の紹介は終わりですが、React Native（とExpo）の進化と盛り上がりの様子が伝わったでしょうか。
早速触ってみたい、という人には、Expoのチュートリアルがオススメです！
ここからは動画外での盛り上がりについても簡単にご紹介したいと思います。
動画外①: 未来に向けて実験中の機能
React NativeとExpoには他にもワクワクするような（実験中の）機能が色々とあります。
React Server Components
Next.jsのApp Routerとセットで話題のReact Server Componentsですが、
Expoでも使えるようになりそうです。
React Conf 2024内のプレゼン動画も上がっています。
（界隈では有名人なBaconさんです）
DOM Components
上記のBaconさんが最近推しているのがDOM Componentsです。
ReactのDOM要素、つまりWeb用に開発したコンポーネントが、そのままReact Nativeでも表示できるというものです。
内部的にはWebViewになっているようなので、それで全て実装が完結するというわけではなく、
Web用の既存資産があれば活用して実装しつつ、徐々にネイティブのコードの置き換えていく
という選択肢が持てるのがウリのようです。
SwiftUI / Jetpack Compose
も、React Nativeから呼び出せるようになりつつあるようです。
動画外②: React Nativeに興味が湧いたら
最後に、次に読むのにおすすめの記事を紹介します。
Expo周りの詳細に入門したい方にはコチラ
実際に選定する際のポイントはコチラの記事が非常に参考になります
数年前のReact Nativeを知っている方が認識をアップデートするのにコチラがよさそうでした
Discussion
紹介あざます！（codezine連載著者）
コメントありがとうございます！連載非常に楽しみにしております！
（今読み返すと雑な紹介になってしまっていて恐縮です）