React Native + EXPO 触ってみた #reactnative

アプリについて何も知らないですが、以下の記事を参考に React Native + EXPO を触ってみました。補足(2024/1/22)など記載しています。
https://zenn.dev/izuchy/articles/6d6f7970a77aa203396c

React Nativeとは

Facebook社が開発しているオープンソースのアプリケーションフレームワーク(2015年オープン)。クロスプラットフォームに対応しており、ワンソースで複数のプラットフォーム(iOS, Android, Web)に対応したアプリケーションを開発することができます。

Reactベースに開発されており、JS,JSX,CSSを使用して開発します。

特徴

クロスプラットフォーム : 1つのコードベースでiOSとAndroidの両方に対応したアプリケーションを開発することができます。
ネイティブコンポーネント：ネイティブコンポーネントを使用してUIをレンダリングするため、フルネイティブアプリケーションと同様のパフォーマンスと外観を提供します。
ホットリローディング：ホットリロードをサポートしているため、ソースコードの変更を即時にプレビューすることができます。

EXPO とは

React Native アプリを開発するための便利機能を集めたプラットフォーム。素の React Native プロジェクトより少し制約がありますが、 Expo SDK が提供する機能を使えたり開発環境の整備が簡単というメリットがあります。

Expo SDKは、React Nativeをベースにしたモバイルアプリケーション開発のためのフレームワークで、Expoプロジェクトで使うソフトウェア開発キット（SDK）のことです。いろんなモジュールやコンポーネントが事前に組み込まれており、アプリを容易に構築できます。例えば、Expo SDKにはカメラ、地図、通知、センサーなどの機能をサポートするAPIが含まれています。

動作環境

Mac OS X 14.0
Xcode 15.2
EXPO 6.3.10

事前準備

1. EXPO アカウントを登録

公式サイトでアカウント登録します。

2. Expo Go をインストール

Expo Goを使うと実機で簡単に確認することができます。
手元の実機からインストールします。

iOS
https://apps.apple.com/jp/app/expo-go/id982107779

Android
https://play.google.com/store/apps/details?id=host.exp.exponent&pli=1

3. Expo CLI をインストールする

$ bun i -g expo-cli
$ expo --version
6.3.10

速いという理由でbunを使っています。npmへ置き換えください。

4. `expo init` コマンドでプロジェクトの雛形を作成する

$ expo init ExpoExample

参考を元に Managed workflow + TypeScript を選択します。

※マネージドワークフローは、React Nativeでの "Create React App" のようなものです。Expo CLI とモバイルデバイス上の開発クライアントを使用して、マネージドワークフローアプリを構築します。プッシュ通知、ビルド、更新など、1 つ以上の Expo サービスを使用します。アプリ構築の複雑さをできる限り管理するように努めており、これがマネージドワークフローと呼ばれる理由だそうです。

workflowについて公式ドキュメント。

動かす

$ cd ExpoExample
$ yarn start

yarn start で package.json に記述されている expo start コマンドが実行されます。

ポイント

・Expo CLIの新しいバージョン（v6以降：2022/7/25~）ではweb UIが削除されており起動しません。
・QRコードを読み込むか、アプリの "Recently opend" から開発途中のアプリケーションの動作確認ができます。
・実機の Expo Go で Expo のアカウントにログインしておくと、 QR コード読み込まさなくても開発中のアプリケーションが一覧に同期されます。

App.tsxを触ってみる

container のスタイルの背景を白を灰色にして文字を変更してみます。

保存するとわかると思いますが、ホットリロードのおかげで実機への結果が即時反映されます。ネイティブコードで開発する場合は、都度コードをビルドしてアプリをインストールし直さないといけないようです。 React Native , Expo の場合はこのホットリロードがあるおかげで、 web アプリのように高速に開発できます。

ディレクトリ

expo init で作られた初期ディレクトリやファイルを上から確認していきます。

.expo : expo start 実行時に生成されるコミット対象にならないフォルダ。基本触らない。
App.tsx : アプリケーション本体。
babel.config.js : Babelの設定ファイル。アプリのソースコードを変更する時に使うプリセットを指定。abel-preset-expo は、React Nativeの metro react native babel preset というプリセットをExpo用に拡張したもの。

metro react native babel preset について、React Native自体は、アプリのソースコードを変換する際にデフォルトでこのBabelプリセットを使用します。

Expo を使った開発の流れ

基本的には CLI で開発サーバーを起動し、 SDK の機能を使ってアプリを書き、 Expo Go で動作確認するようです。

感想

「モバイルアプリってどう作るんだろう」とふと興味が湧いたため、実際に立ち上げまでやってみました。自身はwebアプリを作成するためにReactやTypescriptを少し触ったことがある程度です。記事を読んだだけでわかったつもりになるのも勿体ないのでこうして書いています。「とにかく立ち上げてみたい」のなら簡単にできると思いますので参考になりましたら幸いです。

React Native + EXPO 触ってみた