【ReactNative】環境構築

## はじめに
iOSアプリの個人開発を主にSwiftで行ってきた私は、クロスプラットフォーム開発の経験がありませんでした。しかし、今後業務で利用することになったため、公式チュートリアルに従い、React Nativeを使用して環境構築を行い、簡単なカウンターアプリの開発を試みることにしました。まずは、環境構築について記載します。

https://reactnative.dev/

# ReactNative　とは
まず最初にReactNativeとはなにかについて引用を交えて説明する。

### React Nativeの特徴
React Nativeは、ネイティブ開発の良い部分とReact（ユーザーインターフェイスを構築するためのJavaScriptライブラリ）の良い部分を組み合わせたツールです。React Nativeを使用すると、既存のAndroidおよびiOSプロジェクトに部分的に導入することも、ゼロから全く新しいアプリを作成することもできます。

### JavaScriptによるネイティブ開発
JavaScriptで記述され、ネイティブコードでレンダリングされる点にあります。これにより、アプリは他のアプリと同じネイティブプラットフォームAPIを使用します。さらに、異なるプラットフォームに特有のコンポーネントバージョンを作成することにより、単一のコードベースから複数のプラットフォームにわたってコードを共有することが可能です。これにより、複数のプラットフォームを維持し、共通の技術であるReactを共有することができます。

### ネイティブ開発のアクセス可能性
React Nativeは、ネイティブなアプリを作成することを可能にし、ユーザー体験を損なうことはありません。View、Text、Imageなどのプラットフォームに依存しない核となるネイティブコンポーネントを提供し、これらは直接プラットフォームのネイティブUIビルディングブロックにマッピングされます。

### シームレスなクロスプラットフォーム
Reactコンポーネントは既存のネイティブコードをラップし、Reactの宣言的UIパラダイムとJavaScriptを介してネイティブAPIと対話します。これにより、ネイティブアプリ開発が新しい開発チームに開かれ、既存のネイティブチームもはるかに迅速に作業できるようになります。

### 高速リフレッシュ機能
React Nativeのもう一つの特徴は「高速リフレッシュ」です。変更を保存するとすぐに結果を確認できます。JavaScriptの力を活用して、ネイティブビルドの完了を待つ必要はもうありません。保存して、確認して、繰り返し行うことができるのです。

上記のような特徴の記載がありました。私はFlutterの経験はありませんが、クロスプラットフォームツールであり、いくつかの共通点がありそうだと感じました。

## チュートリアル開始

環境構築方法には、２つのアプローチ方法がある。
- Expo Go
- React Native CLI

### 初心者向けアプローチ: Expo Go

Expo Goは、React Nativeを使ったモバイルアプリ開発の簡単な方法です。Node.jsの最新バージョンとスマートフォンまたはエミュレーターがあれば利用可能です。ExpoのSnackを使用すると、ウェブブラウザ上でReact Nativeを試すことができます。初心者にとって、Expo Goは数分でReact Nativeアプリを作成でき、素早くプロトタイプを作成できます。

### 経験者向けアプローチ: React Native CLI
 React Native CLIは、モバイル開発に慣れた開発者向けのツールです。開始するには、XcodeまたはAndroid Studioが必要です。これらがすでにインストールされている場合、プロジェクトのセットアップに数分で立ち上げられます。これらのツールが未インストールの場合、インストールと設定に約1時間かかることがあります。

今回は初学者向けのExpo Goで作成を試してみる。

## Expo Goでの環境構築

### プロジェクトファイルの生成
コマンドを実行すると、
```
npx create-expo-app AwesomeProject
```
以下の出力が得られる。

```
added 1247 packages, and audited 1248 packages in 1m

84 packages are looking for funding
  run `npm fund` for details

5 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

✅ Your project is ready!

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

- cd AwesomeProject
- npm run android
- npm run ios
- npm run web
```
![スクリーンショット 2024-01-18 6.09.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/799713/85041afe-973a-4b15-a41e-c2e1208862df.png)
上記のディレクトリーが作成され、以下のファイル構成で生成されている。

![スクリーンショット 2024-01-18 6.10.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/799713/5079c566-c180-86ca-9320-2314cfbad0b4.png)

### ローカルで開発環境の立ち上げ

プロジェクトフォルダに入り、
```
cd AwesomeProject
```

開発環境の立ち上げ
```
npx expo start
```

以下の出力が得られる。

```
Starting project at /Users/ryomuranaka/ReactNativeProject/AwesomeProject
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▄▀▀▄▄ ██▄█ ▄▄▄▄▄ █
█ █   █ ███▄█   ▀▀█ █   █ █
█ █▄▄▄█ ██▄▀▄▀ ████ █▄▄▄█ █
█▄▄▄▄▄▄▄█ █ ▀▄▀ █▄█▄▄▄▄▄▄▄█
█  ▀▄▄█▄█▀ ▄▄▀▀█ ▀█▄█▀█▀▀▄█
█▄▀ █▄▀▄  ▀  ▀█▄▄ ▀███▄▀▀ █
█  ▄  ▀▄▀▀ █▄▄▀▄ █ ▄▀▀█▀ ██
█ ▄█▀█ ▄▄█   ▄▄▀ ▄▀ ██▄▀  █
█▄█▄▄██▄█ █▄▀▀  █ ▄▄▄  ▄▀▄█
█ ▄▄▄▄▄ ██▀█▄▀  █ █▄█ ██▀▄█
█ █   █ █   █▄██▄ ▄  ▄ █  █
█ █▄▄▄█ █▀▀▄█▄█  ▄█▀▀▄█   █
█▄▄▄▄▄▄▄█▄█▄█▄▄▄▄▄▄█▄▄███▄█

› Metro waiting on exp://192.168.11.5:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Using Expo Go
› Press s │ switch to development build

› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu
› Press o │ open project code in your editor

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.
```
全てのコマンドを知りたいので、「？」を入力すると、

```
› Using Expo Go
› Press s │ switch to development build

› Press a │ open Android
› shift+a │ select a device or emulator
› Press i │ open iOS simulator
› shift+i │ select a simulator
› Press w │ open web

› Press r │ reload app
› Press j │ open debugger
› Press m │ toggle menu
› shift+m │ more tools
› Press o │ open project code in your editor
› Press c │ show project QR
```
- `a` でAndroidで起動させ、`shift+a`　でAndroidで起動させる際にデバイスを設定することが可能である。
- `i` でiOSで起動させ、`shift+i`　でiOSで起動させる際にデバイスを設定することが可能である。
- `w`　でWebで起動することが可能である。 


私はxcode Androidstudioをすでにインストールしており、シミュレーター・エミュレータを立ち上げることが可能だったので、コマンドを実行していく。インストールされていない方は、下記URLからインストールして、シミュレーター、エミュレータの環境を整えてください。

https://developer.apple.com/jp/xcode/

https://developer.android.com/studio/install?hl=ja

### iOSのシミュレーター起動
`i`と入力した際の出力結果
```
› Opening on iOS...
Error: xcrun exited with non-zero code: 60
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=60):
Unable to boot the Simulator.launchd failed to respond.
Underlying error (domain=com.apple.SimLaunchHostService.RequestError, code=4):
	Failed to start launchd_sim: could not bind to session, launchd_sim may have crashed or quit responding
```
上記のようなエラーが出力されました。下記のLinkを参考にエラー修正しました。

https://stackoverflow.com/questions/65172944/when-running-on-older-ios-simulator-error-failed-to-start-launchd-sim-could-n

iPhone 15 Proで起動しようとしたため、参考URLと状況は違うものの、シミュレーターのキャッシュを削除することによって起動しました。


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/799713/03f954b4-19bb-6a72-006d-030c6019f6e9.png" width=27%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/799713/5b0ed95b-a44c-4039-2015-80794818c54b.png" width=30%>

### Android　のエミュレータ起動
`a`と入力した際の出力結果
```
› Opening on Android...
› Opening exp://192.168.11.5:8081 on Pixel_3a_API_34_extension_level_7_arm64-v8a
› Press ? │ show all commands
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/799713/fa354512-e180-9d6a-4c12-780ba1c28327.png" width=30%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/799713/ac84b092-6c29-64ef-7dee-797c6e6cb22a.png" width=30%>

### Web画面の表示

`w`と入力した際の出力結果
```
 
It looks like you're trying to use web support but don't have the required dependencies installed.

Please install react-native-web@~0.19.6, react-dom@18.2.0, @expo/webpack-config@^19.0.0 by running:

npx expo install react-native-web@~0.19.6 react-dom@18.2.0 @expo/webpack-config@^19.0.0

If you're not using web, please ensure you remove the "web" string from the platforms array in the project Expo config.
```

以下のコマンドにより、ExpoプロジェクトにReact Native Webのサポートが追加され、React NativeコードをWebアプリケーションに展開できるようになります。
```
npx expo install react-native-web@~0.19.6 react-dom@18.2.0 @expo/webpack-config@^19.0.0
```

以下が出力結果であり、モジュールのインストールが完了しました。
```
› Installing 3 SDK 49.0.0 compatible native modules using npm
> npm install
npm WARN deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility

added 348 packages, and audited 1596 packages in 34s

121 packages are looking for funding
  run `npm fund` for details

7 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
```

再度、expoを立ち上げ、
```
npx expo start
```

`w`を入力すると、ローカルでReactNativeWebを表示することができました。
![スクリーンショット 2024-01-18 21.01.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/799713/66280357-aedb-488f-ed30-701dd4c3b02b.png)


## まとめ
まずは、HelloWorldまで実行することを目的に実行しました。初めてクロスプラットフォームのツールを触ったため、環境構築だけでもエラー出力が多いのかと感じていました。ですが、少しのエラー出力はあったものの、iOS・Android・Webの起動がすぐに行えました。クロスプラットフォームを扱えると同時にWebとAppを作成することができるのか、、と感動しました。ですがバージョン管理であったり、ビルド周りのエラー出力に関する記事が多いように感じたので、プロジェクトの実装・運用面では苦労しそうだという印象を受けました。次回は、簡単なUI実装をしていきたいと思います。

## 最後に
他にも良い方法があれば、コメントいただけると大変うれしいです。
良かったと思ったら、いいねやTwitterのフォローよろしくお願いいたします！

https://sites.google.com/view/muranakar

個人でアプリを作成しているので、良かったら覗いてみてください！