[超簡単] Reactからfirestoreにアクセスするデモ！

firebase初心者のアクマちゃん([@akumachanit](https://twitter.com/akumachanit))デモ！

firebaseめちゃくちゃ簡単で楽しいからみんなもやってみるデモ！
今日はReactからfirestoreにアクセスする手順を説明するデモ〜〜〜！

#今回やること
 1. firebaseをReactアプリに**インストール**する
 2. **firebaseプロジェクト**を作成する
 3. **データベース**を作成する
 3. **接続用コンポーネント**を作成する
 4. データを**出し入れ**してみる

1と2はすでにやってある人は飛ばしていいデモよ！

#firebaseをReactアプリにインストールする
Reactアプリのディレクトリで`npm install`するデモ

```terminal
npm install firebase@latest
```

#firebaseプロジェクトを作成する
説明しなくてもわかると思うけど、コンソール入ってプロジェクトを追加！
![プロジェクト作成](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542817/73400149-27ac-9b9e-71d4-29389c7ea4b4.png)
あとは適当に名前をつけて続行すれば大丈夫デモ(適当)

#データベースを作成する
サイドバーからDatabaseを選択するとデータベースの作成ボタンが現れるのでクリックデモ！
![データベース作成](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542817/12c85352-de7e-8750-662d-77a6e8885884.png)

「本番環境で開始」「テスト環境で開始」があるデモ。
![テスト環境で開始](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542817/ca840c85-5a78-db83-337e-508955a37308.png)

「本番環境で開始」を選ぶと**ルールで設定**したクライアントからしかアクセスできなくなるデモ。
「テスト環境で開始」を選ぶと**どこからでも**アクセスできるデモ。

**今回はテスト環境を選択**するデモ。
これはリリースするまでに本番環境に設定し直す必要があるんだけど、30日後に自動的に本番環境に移行してくれるみたいデモ。
開発中にいきなりアクセスできなくなるので、はやめに本番環境用に設定しておいた方が良いデモね。（今回はやらないけど）

リージョンはasia-northeast1（東京）にとりあえず設定。
![リージョン](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542817/ba79f570-2a0c-a202-ec67-ce03a566bd87.png)
![アジア](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542817/23e0bf03-8fad-1dff-6577-9664108c0495.png)
*アジアリージョンのロケーションはこんな感じ*

#接続用コンポーネントを作成する
サイドバーから`Overview`→`</>`アイコン（わかりづらい）
![Overview](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542817/a216104c-d232-4820-b3a7-e5db177b31a0.png)

アプリ名を登録（プロジェクト名じゃなくてアプリ名デモ。複数のクライアントから呼ぶ予定がある場合はReactAppとかWebAppとか適当につけたらいいと思うデモ）したら次に埋め込むためのコードが表示されるデモ。
設定があらかじめ埋め込んであるデモ。

```js
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxx.firebaseapp.com",
    databaseURL: "https://xxxxxxxxxxxxxxx.firebaseio.com",
    projectId: "xxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxx.appspot.com",
    messagingSenderId: "xxxxxxxxxxxxxxx",
    appId: "?????????????????????????????????????",
    measurementId: "xxxxxxxxxxxxxxx"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>
```

このうち今回使うのは`// Your web app's Firebase configuration`以下だけデモ。

適当な名前（firebase.jsとか）でこんな感じでコンポーネントを作成するデモ。

```react
import firebase from 'firebase';
// Your web app's Firebase configuration
var firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxxxxx.firebaseapp.com",
  databaseURL: "https://xxxxxxxxxxxxxxx.firebaseio.com",
  projectId: "xxxxxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxxxxx.appspot.com",
  messagingSenderId: "xxxxxxxxxxxxxxx",
  appId: "?????????????????????????????????????",
  measurementId: "xxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

export default firebase;
```
*`export default firebase`を忘れずに*

#データを出し入れしてみる

####入れ

```react
import './さっき作ったfirebase.jsのパス'

firebase.firestore().collection('test').add({id: 'testid', name: 'test'})
  .then(function (docRef) {
    console.log("Document written with ID: ", docRef.id);
  })
  .catch(function (error) {
    console.error("Error adding document: ", error);
  });
```
####出し
```react
firebase.firestore().collection('test').get().then((querySnapshot) => {
  querySnapshot.forEach((doc) => {
      console.log(doc.data());
  });
});;
```
 *出し入れっていうけど入れてから出すもんだよね...*

#まとめ
**簡単！！！！**



Twitterやってるデモ！仲良くしてくださいデモ！[@akumachanit](https://twitter.com/akumachanit)