React Native(Expo CLI)の環境構築を公式ドキュメントにそってやってみる

本記事は、[React Native公式ドキュメント](https://reactnative.dev/docs/environment-setup) の手順に沿って、環境構築をするものです。英語に抵抗ない方は、公式ドキュメントを読んで環境構築してみてください。

## 動作環境
* Mac OS X 10.14.6
* React Native 0.62
* Node v12.8.0

## はじめに
React Nativeには２種類の開発ツールが用意されており、公式ドキュメントでは以下のように勧められています。

* Expo CLI 　　　　　 モバイル開発経験が初めての方におすすめ
* React Native CLI　　モバイル開発経験がある方におすすめ

詳細な違いは、こちらの[react-native初学者が学習を始める前に知っておくべき6のtips](https://qiita.com/kaba/items/03053d3b9ab356e00557)で取り扱っているので、興味ある方は一読してみてください！

今回は、筆者本人もモバイル開発経験が無いため、`Expo CLI`で環境構築を行ってみます。

## 開発環境構築(Expo CLI)
1. Expo CLI コマンドラインのインストール

```console
$ npm install -g expo-cli
```

```
Unhandled rejection Error: EACCES: permission denied

npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR!     <https://npm.community>
```

エラーだと、、、このエラーになった方は[こちら](https://npm.community/t/unhandled-rejection-errors/5296/2)を参考に `sudo chown -R $(whoami) ~/.npm` を実行してから、再度installを実行してみてください。

インストールが完了できたか確認してみましょう。

```console
$expo --version
ERROR: Node.js version 11.12.0 is no longer supported.

expo-cli supports following Node.js versions:
* >=10.13.0 <11.0.0 (Active LTS)
* >=12.0.0 <13.0.0 (Active LTS)
* >=13.0.0 <14.0.0 (Current Release)
```
またエラーだと、、、どうやらバージョンに問題があるらしい。

```console
$ nodebrew use v12.8.0
use v12.8.0

$ nodebrew ls
v8.9.4
v11.12.0
v12.8.0

current: v12.8.0
```
よし！あとは次のコマンドを打つだけです。

```console
$ expo init AwesomeProject
zsh: command not found: expo
```

なぜだ、、、
どうやらPATHが通ってなかったみたいです。筆者は`zsh`ですが、`bash`の方は`~/.bash_profile`にPATHを通しておいてください。
[react-native: command not found](https://stackoverflow.com/questions/37189081/react-native-command-not-found?noredirect=1&lq=1)

```console
$ echo 'export PATH="/usr/local/Cellar/node/13.5.0/bin/:$PATH"' >> ~/.zshrc
```

再度、`expo init AwesomeProject`を実行すると・・・

```console
$ expo init AwesomeProject
? Choose a template: (Use arrow keys)
  ----- Managed workflow -----
❯ blank                 a minimal app as clean as an empty canvas
  blank (TypeScript)    same as blank but with TypeScript configuration
  tabs                  several example screens and tabs using react-navigation
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started
  minimal (TypeScript)  same as minimal but with TypeScript configuration
```

やっとうまくいきましたね！！

[Managed WorkflowとBare Workflowの違い](https://docs.expo.io/versions/latest/introduction/managed-vs-bare/) はドキュメントに記載されています。

| 特徴       | Managed workflow | Bare workflow |
|:-----------------|:------------------|:------------------|
| JavaScript / TypeScriptのみでユニバーサルアプリを開発する             | ✔ ||
| Expoを使用してiOSおよびAndroidをビルドをする            　　　　　　　　 | ✔ ||
| Expoのプッシュ通知サービスを使用する                                  | ✔ | ✔|
| Expoの無線アップデート機能を使用する                                  | ✔ | ✔|
| Expoクライアントアプリで開発す                                        | ✔ | ✔|
| Expo SDKへのアクセス                                             | ✔ | ✔|
| カスタムのネイティブコードを追加し、ネイティブの依存関係を管理する             || ✔|
| XcodeとAndroid Studioで開発する                                  || ✔|

ドキュメントで説明されているように、初心者はManaged workflowの仕様が勧められています。

あとはディレクトリを移動し、起動させるだけです。

```console
$ cd AwesomeProject
$ yarn web // yarn ios or yarn android
```

成功すると画面が表示されるはずです。
<img width="419" alt="スクリーンショット 2020-04-12 2.47.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486623/928774ff-4897-4094-e1fa-c6b6fbf6d716.png">


## 参考記事
以下の記事を本記事執筆時に参考にさせていただきました。先人の知識様様です！！

* [react-native初学者が学習を始める前に知っておくべき6のtips](https://qiita.com/kaba/items/03053d3b9ab356e00557)