ExpoなしのReact Nativeアプリケーションを作成するためのチュートリアル (windows)

# はじめに
Windows環境下でReact NativeアプリケーションをExpoなしで作成するチュートリアルが見当たらなかったため共有します。
基本的にはReact Native公式のドキュメント([環境構築](https://reactnative.dev/docs/set-up-your-environment), [アプリ作成](https://reactnative.dev/docs/getting-started-without-a-framework))に従います。
改善点や間違い等ありましたらコメントの方を何卒...。
# 対象
1. Windowsユーザ
1. Expoを利用したくない人
1. Androidでデバッグする予定の人
# 環境構築
以下の4つが必要となります。(エディタはお好みで)
| 名称 | バージョン |
|:-:|:-:|
| Node.js  |  >= 18.0.0 |
| JDK (Java SDK)  | 17 (推奨)  |
| Android Studio  | 最新のもの  |
| Android SDK | 34 |
| Android 仮想デバイス | APIバージョン : 34 |

※ React Native v0.76.1時点での構成
※インストール済みの方は[こちら](#アプリ作成)まで。
## Node.js インストール
※Chocolateryを利用してのインストールも可(`choco install -y nodejs-lts`)

:::note
Chocolateryについては@@NaoyaOuraさんの[記事](https://qiita.com/NaoyaOura/items/1081884068fe3ea79570)を引用させていただきます
:::

### 1. インストーラをダウンロード
[公式サイト](https://nodejs.org/en)からLTSインストーラをダウンロード
![2024-11-02 17.40.34 nodejs.org 70ed427de41d.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/2bd7c463-54c2-3df0-181d-5cd103686dcf.jpeg)
`Download Node.js (LTS)`をクリック

### 2. インストール
ダウンロードしたファイル(`node-v<version>-×64.msi`)を実行

![nodeJs 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/f5d47f8e-7f37-bb6c-55ec-610596fd50a2.png)
`Next`

![nodeJs 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/3ecabdfb-a19d-b6f9-835f-2b8b39f8b53d.png)
ライセンス条項に同意
`Next`

![nodeJs 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/e767683d-34b7-537c-8119-288d8b64ec18.png)
インストール先ディレクトリを選択 (デフォルトのままでOK)
`Next`

![nodeJs 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/ef947159-299b-f552-bc2e-529c8da82918.png)
インストール内容を設定 (デフォルトのままでOK)
`Next`

![nodeJs 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/81ff0fb5-46cb-be0e-fac6-e4dd11d738bc.png)
チェックボックス未選択で`Next`
※選択するとネイティブ拡張モジュールに必要な開発ツールやChocolateryがインストールされます。

![nodeJs 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/6ba426b7-5dfe-a9c2-12bc-b1cff09da1ed.png)
`Install`クリック (ユーザーアカウント制御が開く)

![nodeJs 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/4b79f9c3-325a-1a7e-a749-fe654653cb44.png)
`Finish`

### 3. 確認
PowerShell等ターミナルで
 - `node -v`
 - `npm -v`
 - `npx -v`
 
の出力を確認

:::note warn
```shell
npm: このシステムではスクリプトの実行が無効になっているため、...
```
といったエラーが出る場合は、[トラブルシューティング: Node.js_npm](#nodejs-npmエラー)をご覧あれ
:::

## JDK-17 インストール
React Native ではJava SDK 17を推奨しており、最新バージョンのJDKではビルドツールであるGradleのバージョンを変更する必要があります。
> If you already have a JDK on your system, we recommend JDK17. You may encounter problems using higher JDK versions.
>
> If you're using the latest version of Java Development Kit, you'll need to change the Gradle version of your project so it can recognize the JDK. You can do that by going to `{project root folder}\android\gradle\wrapper\gradle-wrapper.properties` and changing the `distributionUrl` value to upgrade the Gradle version. You can check out [here the latest releases of Gradle](https://gradle.org/releases/).
>
> (https://reactnative.dev/docs/set-up-your-environment)

※Chocolateryを利用してインストールも可(`choco install -y microsoft-openjdk17`)

### 1. インストーラをダウンロード
[Oracle 公式サイト](https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html)からインストーラをダウンロード
![2024-11-02 19.11.23 www.oracle.com 32a03405534c.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/496582c0-bb61-9186-e9d2-dcd813bf02b5.jpeg)
`Windows x64 Installer`をダウンロード

### 2. インストール
ダウンロードしたファイル(jdk-17.0.12_windows-×64_bin.exe)を実行

![JDK 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/822b6d94-1ce8-aa75-6416-837a8b233107.png)
`次(N)`

![JDK 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/20857691-5325-272f-67b6-e8cad5f1ff7a.png)
インストール先ディレクトリを選択 (デフォルトのままでOK)
※このときのディレクトリを覚えておいてください。
`次(N)`をクリックでインストール開始

![JDK 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/3ee7fc9e-f4c5-6e2b-9a27-b3c38ec1f887.png)
`閉じる(c)`

### 2. 環境変数の設定
windowsの設定アプリを開き、`システム > バージョン情報`に進みます。
![JDK env 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/daae338a-8967-cba9-02aa-9484523a3b22.png)
`システムの詳細設定`

![JDK env 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/5a745a54-600c-4af8-6a3b-01bfa50253e2.png)
`環境変数(N)`

![JDK env 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/33140267-5c8c-8ca1-4545-d049805a5a05.png)
`新規(N)`

![JDK env 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/12a45fd0-c266-47c3-52cc-35b36f9ea662.png)
変数名に`JAVA_HOME`、変数値に`<JDKをインストールしたディレクトリ>\bin (デフォルトでは 
C:\Program Files\Java\jdk-17\bin )`を入力してOKクリック

### 3. 確認
PowerShell等ターミナルで
```shell
PS > java -version
# java version "17.0.12" 2024-07-16 LTS
# Java(TM) SE Runtime Environment (build 17.0.12+8-LTS-286)
# Java HotSpot(TM) 64-Bit Server VM (build 17.0.12+8-LTS-286, mixed mode, sharing)
```
を実行し出力を確認

## Android Studio インストール
### 1. インストーラをダウンロード
[公式サイト](https://developer.android.com/studio/install?hl=ja)からインストーラをダウンロード
![2024-11-02 22.19.07 developer.android.com 88f9219b3a73.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/b26125a7-69fb-beb7-4dc9-7a97714434d3.jpeg)
`Android Studio の最新バージョンをダウンロード`をクリック

![2024-11-02 22.22.59 developer.android.com ce82a87262bb.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/96e13f07-9a93-7b18-a4b0-4adfe0e632b1.jpeg)
`Android Studio Koala Feature Drop をダウンロードする`をクリックしてダウンロード

### 2. インストール
ダウンロードしたファイル(`android-studio-2024.1.2.12-windows`)を実行

![android studio 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/1edc221f-4050-ec57-1c8c-4c6850491d5a.png)
`Next`

![android studio 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/c29203f1-727b-529f-57fc-a412daf4b4f2.png)
`Next`

![android studio 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/d7ee342f-2435-670d-c1a9-9463c329170e.png)
インストール先ディレクトリを選択 (デフォルトのままでOK)
`Next`

![android studio 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/61e3b838-b7aa-aa4b-25d6-2c084c61b386.png)
ショートカットが格納されるスタートメニューフォルダを選択 (デフォルトのままでOK)
`Install`

![android studio 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/36ae1d59-1576-946d-6bb0-61a3a49c883c.png)
`Next`

![android studio 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/cc27ee5b-7e98-f607-af39-fac8ac4b4da8.png)
`Finish`

## Android SDK 34 インストール
### 1. Android Studioを起動
![android sdk 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/900def90-f4c3-e458-60bf-ab917607ea8f.png)
初回起動時、使用状況データをGoogleに提供するか聞かれますが、お好みでどうぞ。

![android sdk 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/be7beedb-5d49-7fcc-337b-6f717b0fc165.png)
`Next`

![android sdk 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/02d6f358-efa2-906f-b2a2-0a902bae5c4b.png)
`standard`を選択し`Next`

![android sdk 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/0c019689-6373-d12b-076a-e06b906add0b.png)
`Next`

![android sdk 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/a8dea809-15e3-d1b5-286e-3340e7f3c73d.png)
ライセンス条項に同意して`Finish`

![android sdk 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/447ead81-da77-5a6b-b218-402f5d375599.png)
インストールが開始されます。かなり時間がかかりますが辛抱強くお待ちあれ。

![android sdk 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/454c19d7-4371-61e0-c22b-00ef273cae9b.png)
`More Actions`から`SDK Manager`

![android sdk 8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/95f41f96-0fa8-47a5-73fa-2eba0ecc922a.png)
`SDK Platforms`内の`Android 14.0("UpsideDownCake")`にチェック

![android sdk 9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/6dbd5cac-993d-2258-1f82-bd2771b5bc73.png)
`Show Package Details`にチェックを入れ、`Android 14.0("UpsideDownCake")`セクション内の
`Intel x86 Atom_64 System Image`または`Google APIs Intel x86 Atom System Image`にチェック
`OK`

![android sdk 10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/ba6f4358-61b8-dc95-67c5-2d9264ccbec5.png)
確認画面が出てくるので`OK`

![android sdk 11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/ebd3c643-b683-6b60-2d98-ea253967f57e.png)
`Finish`

## Android Virtual Device 作成
開発用の仮想Androidデバイスを構成します。
### 1. Android StudioのVirtual Device Managerを開く
![android vDevice 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/3c13cacf-a72a-4d59-8bf1-24ace8b72742.png)
`More Actions`から`Virtual Device Manager`

### 2. Virtual Deviceを追加
![android vDevice 0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/577a9091-79a8-4f6d-8d16-2996c1bec9a4.png)
ファイアウォール設定がでてきたら`許可`

![android vDevice 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/151e7baf-5f8d-171f-b316-67f00964e052.png)
左上の`+`マークをクリック

![android vDevice3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/a51b234b-ec33-57f0-079f-c388b5a8a1de.png)
デバイス一覧から希望のデバイスを選択
`Next`

![android vDevice 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/7c9a8dd5-356c-8509-13d1-bfc8190e67e4.png)
`Release Name: UpsideDownCake, API: 34`を選択し、Release Name横のダウンロードマークをクリック

![android vDevice 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/6596cb68-7aba-9987-2e66-627c1a666f44.png)
ライセンス条項に同意して`Next`

![android vDevice 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/dbe0939d-78a5-166e-5d98-284e22755d4b.png)
インストールが完了したら`Finish`

![android vDevice 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/1993838b-e228-9f35-84b8-45d58d3ce361.png)
インストールした`UpsideDownCake`イメージを選択して`Next`

![android vDevice 8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/fc90f137-ec66-d17b-db60-4a74697087b9.png)
(デフォルトのままで)`Finish`

![android vDevice 9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/f8785496-16ed-a15f-cf47-2998bfe00520.png)
仮想デバイスが追加されます

### 3. 環境変数の設定
windowsの設定アプリを開き、`システム > バージョン情報`に進みます。
![JDK env 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/daae338a-8967-cba9-02aa-9484523a3b22.png)
`システムの詳細設定`

![JDK env 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/5a745a54-600c-4af8-6a3b-01bfa50253e2.png)
`環境変数(N)`

![JDK env 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/33140267-5c8c-8ca1-4545-d049805a5a05.png)
`新規(N)`

![android vDevice 10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/82374849-6f0d-7245-9f73-e841009bf12b.png)
変数名に`ANDROID_HOME`、変数値に`<Android SDKがインストールされているディレクトリ> (デフォルトでは 
C:\Users\<ユーザー名>\AppData\Local\Android\Sdk )`を入力して`OK`

:::note
Android SDK のインストールディレクトリはAndroid Studio の`SDK Manager`から確認できます。
![android vDevice 11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/270a668a-d80e-f302-7450-22ebc669b2ff.png)
:::

これで環境構築は完了です。

# アプリ作成
PowerShell等ターミナルで目的の(アプリケーションのフォルダを作りたい)ディレクトリに移動し、
```shell
PS dir > npx @react-native-community/cli@latest init <アプリ名>
```
を実行
(`OK to proceed?`と聞かれたら`y`を入力しエンター)

![react native run 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/3c2e23ba-a50a-9065-19a6-703b5afb434c.png)
インストールが進行・完了

![react native run 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/779754f3-1c32-467f-af3f-845f35d93115.png)
実行したディレクトリ配下(画像では`dir`下)に<アプリ名>(画像では`Test`)フォルダが作成されます。

```shell
  Test
    ├── App.tsx
    ├── Gemfile
    ├── README.md
    ├── __tests__
    ├── android
    ├── app.json
    ├── babel.config.js
    ├── index.js
    ├── ios
    ├── jest.config.js
    ├── metro.config.js
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    └── tsconfig.json
```
フォルダ構成はこのようになります。

![react native run 0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/e97cb40e-613b-e833-330a-447cea6ff3e2.png)
Android Studioの`Device Manager`から先程作成した仮想デバイスの再生ボタンをクリック (別ウィンドウで仮想デバイスが起動します)

アプリフォルダに移動して、
```shell
PS dir/Test > npm run android  
```
を実行

![react native run 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/a8276bc0-6513-1d29-9ca3-9ed7358278a6.png)
Metroバンドラーサーバーが開き、ビルドが始まります。
※アプリケーションからのログ・警告はここに出力

![react native run 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/a1fbb6b7-6555-9bbf-f469-72f33078942e.png)
完了すると、アプリケーションが起動します。

:::note
二度目以降の起動では仮想デバイスが起動していなくとも
```shell
PS dir/Test > npm start
```
![react native run 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/3c93496f-f68b-6f86-4526-fcfc791c5ec7.png)
を実行するとMetroバンドラーが起動します。
ここで`a`(android)を入力することで仮想デバイス・アプリケーション起動が自動的に行われます。

![react native run 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/65d56d4a-fcdd-f577-13b6-7cf6d9817f61.png)
なお、↑のように仮想デバイスの起動中にビルドが始まってしまった場合`BUILD FAILD`となってしまうことがあります。
デバイスが起動したのち再び`a`(android)を入力することで再度ビルドを行えます。
:::

# トラブルシューティング
### Node.js npmエラー
Windows PowerShellにおいて、`npm`や`npx`を実行しようとすると以下のようなエラーが発生することがあります。
![trb npm 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/d2403ded-a73d-d04e-319f-f547e101eb94.png)
エラーログの通り、シェルスクリプトの実行が許可されていないことが原因です。
PowerShellのスクリプト実行ポリシーには以下の7つの状態が存在します。
| 名称 | 備考 |
|:-:|:-:|
| AllSigned  | すべてのスクリプトと構成ファイルにデジタル署名が必要  |
| Bypass  | 何もブロックしない  |
| Default  | デフォルト実行ポリシーを使用(Windows: Restricted, WindowsServer: RemoteSigned)  |
| RemoteSigned  | インターネットからダウンロードしたスクリプト・構成ファイルにはデジタル署名が必要  |
| Restricted  | すべてのスクリプトファイルの実行をブロック  |
| Undefined  | 現在の[スコープ](https://learn.microsoft.com/ja-jp/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.4#execution-policy-scope)に実行ポリシーが設定されていない  |
| Unrestricted  | 符号なしのスクリプトは実行可能  |
> [about_Execution_Policies](https://learn.microsoft.com/ja-jp/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.4) : Microsoft PowerShell 7.4 (LTS)

今回のエラーは、実行ポリシーが`AllSigned`もしくは`Restricted`に設定されている場合に表示されるため、`RemoteSigned`または`Bypass`に設定する必要があります。
ただし`Bypass`では警告なしにすべてのスクリプトが実行されてしまうため、`RemoteSigned`を推奨します。
```shell
PS > Set-ExecutionPolicy RemoteSigned
```
また、一時的に権限を付与したい場合は`-Scope`オプションに`Process`を指定することで現在のプロセスのみに適用される実行ポリシーを設定できます。
```shell
PS > Set-ExecutionPolicy RemoteSigned -Scope Process
```
> 特定の scopeでのみ有効な実行ポリシーを設定できます。
Scope の有効な値はMachinePolicy、UserPolicy、Process、CurrentUser、LocalMachine です。 LocalMachine は、実行ポリシーを設定するときの default です。
Scope の値は、優先順位順に一覧表示されます。 優先されるポリシーは、より制限の厳しいポリシーがより低い優先レベルで設定されている場合でも、現在のセッションでは有効です。
>
> ([実行ポリシー scope](https://learn.microsoft.com/ja-jp/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.4#execution-policy-scope) : Microsoft PowerShell 7.4 (LTS))

:::note
現在の実行ポリシーは`Get-ExecutionPolicy`コマンドで確認できます。
```shell
PS > Get-ExecutionPolicy
# 例: RemoteSigned
```
:::
![trb npm 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/04897c3d-6649-f6d6-434c-03ae5cb8a4f5.png)
実行ポリシーの変更により`npm`,`npx`が利用できるようになっていることが確認できます。

# おまけ
## ベクターアイコンの表示
`react-native-paper`など、ベクター形式のアイコンを使用するUIライブラリを利用すると、デフォルトでは以下のようにアイコン表示ができません。

![omake icon 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/881ed910-7996-fe79-4bf1-e398f8aaadf4.png)

これはReact Nativeでベクター画像表示をするには`react-native-vector-icons`パッケージが必要なためであり、これはデフォルトではインストールされていません。
※Expoで作成したアプリケーションにはインストールされている

以下にAndroid向けのセットアップを示します。
1. アプリケーションディレクトリ内でnpmを利用し、パッケージをインストール
    ```shell
    PS dir/Test > npm install --save react-native-vector-icons
    ```
2. `android/app/build.gradle`ファイルに以下を追記
    ※`android/build.gradle`ではないことに注意
    ```
    apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")
    ```
3. アプリケーションを起動

    ```shell
    PS dir/Test > npm start
    ```
    ![omake icon 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925204/0464bf13-8d31-6744-4478-cc103b79103c.png)
    ベクターアイコンが表示できました。

iOS等への適用方法は`react-native-vector-icons`のGitHubページ([Installation](https://github.com/oblador/react-native-vector-icons?tab=readme-ov-file#installation))をご参照あれ

# おわりに
React NativeアプリをExpoの利用なしで作成する方法を紹介しました。
私自身React Nativeを学んでいる最中ですので、不足等あるかもしれませんがどなたかのお役に立てれば幸いです。

# ひとこと
欲望のままに具材盛りまくったホットドッグたべたい