React Native + Firebase で超簡単なチャットアプリを作ってみた‼️ (環境構築編)

#はじめに
React Native と Firebase (Firestore) を用いて超簡単なチャットアプリを作りました！！:iphone::speech_balloon:
チャットアプリ、チャットの機能を含んだアプリをReact Nativeで開発したい人は一定数いると思ったので、連載形式でチャットアプリを作っていこうと思います！
全部で4つの記事になると思います！

1. **環境構築編** ← 本記事
2. [Firebaseプロジェクト設定編](https://qiita.com/shintaroa/items/b69362129407c628df07)
3. [データ書き込み編](https://qiita.com/shintaroa/items/4268c0cc2e10a49f4fce)
4. [データ読み取り編](https://qiita.com/shintaroa/items/c9e446cd220b80d619e2)

の4部構成で記事を投稿します！
1週間以内には4記事とも投稿するので、興味のある方はフォローして続編をお見逃しないようにしてください:bangbang:

完成形はこのようになります！！

<img width=300 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/4707a209-4275-65c4-71b6-38eef867c751.png" />

ある程度プログラミングの知識は持っていて、React Native に触り始めたよという方向けに書いています！
だいぶ丁寧に書いているので、 Firebase に触ったことがないという人でも大丈夫です！
記事を呼んでコピペすれば作れると思うので、初学者の方でも最後まで読んで、写経してもらえれば幸いです！

**わからないこと、わかりにくいがあれば是非コメントください！**

#こんな人に読んでほしい

- **アプリ開発に興味がある**よという方
- **チャットアプリを作ってみたい**よという方
- **サーバーを構築するのはしんどい**よという方
- できれば**iOSアプリもAndroidアプリもいっぺんに作ってしまいたいよ**という方
- **Firestoreのリアルタイムアップデートがうまくできない**よという方

この記事にたどり着いた方であれば、おそらくアプリ開発に興味があると思うので、React Native も Firebaseもご存知だとは思いますが、一応説明しておきます！

**React Native**はiOSアプリとAndroidアプリを一つのコードで書けるクロスプラットフォームフレームワークなるものの一種で、**Facebook**製のフレームワークです。JavaScript/TypeScriptで記述します。

**Firebase**は**Google**製のmBaaSです！サーバー構築不要でバックエンドの処理ができるようになります。Googleアカウントさえあれば、誰でも**無料**で利用できます。

#実行環境
今回は**Expo**を用いて開発しています！
**Expo**は React Native による開発の手助けをしてくれるツールです。

また、**TypeScript**を使っている点にも注意が必要です！JavaScriptに簡単な型定義が加わるだけなので、JavaScriptが分かる方であれば、容易に理解できると思います。

また、テキストエディタは **Visual Studio Code** の前提です。
 
OS：macOS Catalina 10.15.7
Expo：39.0.2
expo-cli：3.27.14

#環境構築

以下の要領で環境構築するのが簡単かと思います！
普通にnode.jsを[公式サイト](https://nodejs.org/ja/)からインストールして、コマンドで**expo-cli**をインストールしても問題ないはずです！

1. homebrewのインストール (https://brew.sh/index_ja)
2. nodebrewのインストール `brew install nodebrew`
3. node.jsのインストール `nodebrew install-binary stable`
4. expo-cliをインストール `npm install -g expo-cli`

#プロジェクト作成
それではここからチャットアプリを作る準備に取り掛かりたいと思います！
プロジェクトを作成したいディレクトリに移動し、`expo init ChatApp`を実行します。
プロジェクト名はChatAppでなく任意のもので構いません。

今回はTypeScriptを用いるので、「blank (TypeScript)」を選択してください！
![スクリーンショット 2020-10-14 13.08.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/d3a055a7-2b76-ad3a-4113-ff4e24bd8bab.png)
このようになれば成功です！
![スクリーンショット 2020-10-14 13.10.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/f15fa560-2214-7e37-2692-61a0563fc210.png)
ChatAppというプロジェクト(フォルダ)が作成されているので、VS Codeで開きます。
以下のようなファイル構成になっているはずです。
「ctrl + \`」でターミナルを開き、`expo start`を実行します。
![スクリーンショット 2020-10-14 13.26.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/35b0e267-218a-617e-75e2-9995c7f6c1ff.png)
勝手にブラウザが立ち上がり、このような画面が表示されるはずです。
![スクリーンショット 2020-10-14 13.25.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/e4cd1593-7535-55ac-36e2-cad7441d765f.png)

お手持ちのiPhoneに、AppStoreから**Expo Client**というアプリをインストールし、上記のQRコードを読み取ると、iPhoneでアプリを動かすことができます。

AndroidでもGoogle Playから**Expo Client**をインストールしてもらって、QRコードを読み取ればアプリを動かせると思います。

また、XcodeのiOSシミュレータに`expo client:install:ios`で Expo Client をインストールし、上記の**Run on iOS simulator**を押すと、シミュレータから動かすこともできます。
<img width=300 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/452d848f-f2dd-1b11-d394-b3d7e8acdbf3.png">
上記の画面が表示されていれば成功です！！
お疲れさまでした！！

次回はプロジェクト作成編です！
**Firebaseの設定**や、必要な**パッケージのインストール**、VS Code の**自動整形ツールの導入**などをやっていきます！！