はじめに
React Nativeを触っていると、MetroやHermesみたいな単語が普通に出てきます。
最初の頃は、エラーログやドキュメントで見かけても、何をしているものなのか分かりづらいと思います。
React Nativeは、単にJavaScriptを書くだけではなく、ネイティブアプリ側の仕組みや開発ツールも含めて動いています。
この記事では、その周辺でよく出てくる用語を整理します。
React Native
React Nativeは、JavaScript / TypeScriptでiOS・Androidアプリを作るためのフレームワークです。
import { View, Text } from "react-native";
export default function App() {
return (
<View>
<Text>Hello</Text>
</View>
);
}
Reactっぽい書き方ですが、ブラウザで動いているわけではありません。
例えば、
<Text>Hello</Text>
は、iOSならUILabel、AndroidならTextViewのようなネイティブUIとして描画されます。
そのため、WebViewベースではなく、本物のネイティブアプリとして動作します。
Expo
最近のReact Nativeでは、Expoを使うケースがかなり増えています。
Expoは、React Native開発を簡単にするための仕組みです。
React Native単体でも開発できますが、最初はXcodeやAndroid Studioの設定、ビルド設定など、準備がかなり多くなります。
Expoを使うと、そのあたりをまとめて扱いやすくできます。
npx create-expo-app
だけでプロジェクトを作れるのも特徴です。
以前は「簡易版」みたいな扱いをされることもありましたが、最近は普通に本格開発でも使われています。
Expo Go
Expo Goは、開発中アプリをスマホで確認するためのアプリです。
npx expo start
を実行するとQRコードが表示されます。
それをExpo Goで読み込むと、そのままスマホでアプリを確認できます。
React Nativeを触り始めた頃は、ここで初めて「実機で動いた」という体験をする人もかなり多いと思います。
ただし、Expo Goは共通環境なので、独自ネイティブコードなどは追加できません。
そのため、開発が進むとDevelopment Buildを使うケースもあります。
EAS
EAS（Expo Application Services）は、Expoのクラウドサービスです。
React Native開発では、
- iOSビルド
- Androidビルド
- ストア提出
あたりがかなり面倒です。
特にiOSはMac環境が必要になることも多く、環境依存が強くなります。
EASを使うと、そのあたりをクラウド側で処理できます。
eas build
でiOS / Androidアプリをビルドできます。
EAS Update
EASにはOTAアップデート機能もあります。
JavaScript部分だけなら、ストア審査なしで更新を反映できます。
例えば、
テキスト修正や軽微なUI修正などをすぐ反映したいときに使われます。
ただし、ネイティブコード変更までは反映できません。
Expo Router
Expo Routerは、React Native向けのルーティングライブラリです。
以前はReact Navigationを直接設定することが多かったですが、最近はExpo Routerを使うケースもかなり増えています。
以前は、
<Stack.Navigator>
<Stack.Screen name="users" component={UsersScreen} />
</Stack.Navigator>
みたいにルーティングを書いていました。
Expo Routerでは、
app/
├ index.tsx
├ users.tsx
└ settings.tsx
みたいに、ファイル配置ベースで画面管理できます。
Next.jsにかなり近い感覚です。
Metro
React Nativeを起動すると、
Metro waiting on...
みたいなログが出ます。
Metroは、React Native用のバンドラーです。
JavaScriptコードをまとめて、アプリ側で実行できる形へ変換しています。
Web開発でいうWebpackやViteに近いです。
React Nativeを触っていると、エラー画面やログでかなり頻繁に見ることになります。
Hermes
Hermesは、React Native向けJavaScriptエンジンです。
React Nativeアプリ内でJavaScriptを実行しています。
以前はJavaScriptCoreを使うケースも多かったですが、最近はHermesが標準に近くなっています。
Hermesを使うことで、
アプリ起動速度やメモリ使用量の改善が期待できます。
おわりに
React Native周辺は、最初の頃がかなりややこしいと思います。
MetroやHermesみたいに、名前だけ見ても何をしているのか分かりづらいものが普通に出てきます。
ただ、開発を続けていると、エラー画面や設定ファイル、ログなどで自然に目に入ってくるので、少しずつ繋がっていきます。
最初から全部を理解しようとするより、「今どこで出てきた単語なのか」を追いながら触るくらいの方が入りやすいと思います。