React Native の Android用・Web用アプリを公式ドキュメントを見つつ Expo で サクッと試す（Mac）

## 今回の記事の内容
「React Native」を少し試してみようかと情報を検索していたところ、「[Expo](https://expo.dev/)」の無料版でサクッと試せそうというのを見かけたので、実際に試してみました。

![2025-01-02_11-35-14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/775b1fa3-3f4f-ac48-1ab3-4fde7c33b62b.jpeg)

## 試した内容
今回、自分が持っている MacBook Pro（Intel版）と Androidスマホ（Pixel 6a）で試しました。

### スマホアプリの準備
今回、スマホでの動作確認を簡単に行えるようになる「[Expo Go](https://expo.dev/go)」アプリを Androidスマホにインストールします。

以下の[公式ドキュメント内](https://docs.expo.dev/)で、「Quick Start」を選ぶと出てくる画面でも動線があります。

![2025-01-02_11-31-28.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2d227c90-3871-98db-42ad-c44b97f1f61f.jpeg)

以下で Androidデバイス・Expo Go の選択肢を選ぶと、その下にアプリをダウンロードできるストアのページの QRコードが表示されます。

![2025-01-02_11-32-54.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5fe80eda-29cb-9fca-831e-2e33d3b86253.jpeg)

それ以外に、以下のページなどからたどっても大丈夫です。

●Expo Go - Expo
　https://expo.dev/go

![2025-01-02_19-50-18.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/84e55982-e117-9622-b4fc-9851bd0fbe76.jpeg)

#### Androidアプリ
Androidアプリのストアの画面と、そのアプリを起動した時の様子は以下の通りです。

![467478154_3911631335726078_8548360898933551522_n.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/365067bf-4ff5-f522-d733-d779f2034912.jpeg)

![467487245_911414654455441_1646349883732156954_n.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/28948764-60df-428f-cb0c-a79f8ebfd0f6.jpeg)

#### 余談：iOSアプリ
今回の記事の主題ではないですが、iOSアプリもインストールしてみたのでストア・アプリ起動後の画面を掲載してみます。

![467827860_1109554844213439_36361556146901860_n.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/de83b262-7686-23f2-1a3e-ef1026f91d08.jpeg)

![467483510_1794846081270550_4304344443949518392_n.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/917defe9-b8e6-17e2-d4d6-87fe5fc2d21d.jpeg)


### PC側の準備
今度は PC側の準備です。

以下の手順を試していくのですが、自分の環境では Node.js・npme を使える状態だったので、適当な作業フォルダで以下をそのまま実行します。

●Create a project - Expo Documentation
　https://docs.expo.dev/get-started/create-a-project/

```zsh
npx create-expo-app@latest
```

![2025-01-02_16-59-29.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/542b2598-5859-f792-f522-98a5409a46a6.jpeg)

プロジェクト名を聞かれる部分があったのですが、とりあえず「test」という名前にしました。

![2025-01-02_17-01-14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0b56f21a-b834-8cd1-adf9-fb3b69e4b467.jpeg)

そうすると、以下の情報が出てきました。

```
To run your project, navigate to the directory and run one of the following npm commands.

- cd test
- npm run android
- npm run ios
- npm run web
```

ここから、Androidスマホでのサンプルアプリの実行を進めていきます。

#### 追加の準備
詳細は後で補足しますが、以下の「[Watchman](https://facebook.github.io/watchman/)」の導入も行いました。
（自分の環境には既に入っていた Homebrew を使いました）

▼ Watchman のインストール

```zsh
brew install watchman
```

### 実機でのテスト
以下のコマンドで実機を使ったテストを行います。

```zsh
cd test
npm run android
```

[Androidアプリの USBデバッグを有効化した](https://developer.android.com/studio/debug/dev-options?hl=ja) Androidスマホを、PC に接続してから実行してください。
それを行わないで実行すると、以下のエラーメッセージが表示されます。

![2025-01-02_17-02-58.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5d551817-a5f4-f385-6cc3-476dd4cfc32a.jpeg)

実機でサンプルアプリを動かしてみた結果は以下のとおりです。
（あと、この時に提示された説明を見て、ブラウザでの表示切り替えも試してみました）

https://x.com/youtoy/status/1874738866940441033

けっこう少ない手順で、実機での動作テストを行うことができました。

### 補足
#### Watchman を追加した背景
上で [Watchman](https://facebook.github.io/watchman/) を追加する手順を書きましたが、それを行った背景です。

それを行ったのは、Watchman がない状態で上の手順を進めたところ、以下のようなエラーが出て Watchman を導入する必要が出てきたためです。

![2025-01-02_17-09-08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ecde2392-8132-5e6f-ea25-3dcf717c89d9.jpeg)

Watchman を追加する際は、以下の公式の手順に書かれた方法を用いました。

 ●Installation | Watchman
　https://facebook.github.io/watchman/docs/install

▼ 参考情報

●React Native 入門
　https://zenn.dev/t_yng/scraps/55f0f041c87cc5


## その他
### チュートリアルなど
今回の内容を進めている中で以下のページも見かけて気になったので、ひとまずメモとして残しておきます。

●Start developing - Expo Documentation
　https://docs.expo.dev/get-started/start-developing/

![2025-01-02_16-49-32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/25fa192e-c929-8c3a-73dc-396cf5de3f06.jpeg)










●Tutorial: Using React Native and Expo - Expo Documentation
　https://docs.expo.dev/tutorial/introduction/
 
![2025-01-02_11-33-57.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d2d031a8-f3b0-4c94-81a5-847c93dcdf4f.jpeg)