React + TypeScriptで Firestoreを使ったアプリケーションを開発する

Reactを勉強するにあたり、どうしてもTypeScriptを使用したかった筆者が勉強するのに結構苦労したところです。参考記事が少なく、結構苦労しました。firebaseとReactの連携に関してはこのやり方が絶対正しいというわけではないと思いますので、手段の１つだと思って読んでいただきたいです。

本記事はReactがなんとなくわかっていて、Reduxなどもだいたいわかるよって人向けだと思います。さらに本記事で触れるのはFirestoreとReactアプリケーションの接続部分になりますので細かい設定の説明は吹っ飛ばしてます

Reactのセットアップ

以下のコマンドでアプリを作ります。
（この辺りの仕組みを筆者はあまりよく理解していないですが、このコマンド打てばReactのTypeScriptベースのアプリケーションの雛形が作れるんだなーって思ってます。）

npx create-react-app {作成するアプリケーション名} --typescript

Firebaseのセットアップ

FirebaseのFirestoreというRDB（リレーショナルデータベース）のサービスを利用します。大量に使わない限りは基本無料なので良いです。
firebaseに関しての設定は以下の記事を参考に進めてみてください。
React + TypeScript + Firebase環境を超高速で作る
※ この記事はyarnでインストールしてますが、npmでも問題なくできます。

React と Firebase どうやってデータやり取りするの問題

かなり悩んだところです。この記事に出会っていなければわからずじまいだったでしょう。
React/Redux/redux-saga/TypeScript/Cloud Firestore/Cloud Functionあたりを使ってブログを作った！

なんとこの記事、GitHubリポジトリを公開しています。（ありがたすぎました）
GitHubのコードを苦労しながら時間をかけて読み解いていくと、こんな感じの流れになっているんだなーというのがつかめてきました。

1. APIと名の付いたファイルでfirebaseとの通信を実行するプログラムを書いておく
2. redux-sagaを利用してユーザーの特定のアクションを待ち構える
3. アクションを検知したredux-sagaがAPIを呼び出してFirebaseとStoreデータを更新する
4. ReactのStoreデータが更新されるのでビューも更新される

ざっくりこのような流れです。
なので、
APIファイル群 → sagaファイル群 の順でみてもらうと大体の流れが掴めると思います。

お前この記事で何もやってねーじゃん

すみませんやってません。とりあえず、投稿したかったので。
ただこの辺りに関しては参考記事が少ないので、近いうちにしっかりパートを分けて記事化しようと思います。
TypeScript + React + Redux + Firebaseの記事が少ないので勉強するのに困った経験があるので。

TypeScript + React + Redux + Firebaseを勉強したい方におすすめの記事を最後に貼って終わりにします。

1. React + Redux + TypescriptでサンプルWebアプリ
   これでTypeScriptベースのReactアプリケーション作成の基礎を学びます

2. たぶんこれが一番分かりやすいと思います React + Redux のフロー図解
   Reduxというものを学びます（Reactというフレームワークが提供しているデータフロー）

3. TypeScript で Redux DevTools extension を使う
   Reduxも使えるようになってきたらデバッグできるようにしておきましょう。開発が捗ります。

4. React+Redux+typescript+firebaseで認証機能作るのが辛い①
   Fireabseを利用して、アプリケーションに必須なログイン機能をつけてみましょう。
   同時期にFirestoreとかもさわれたら尚良いです。

5. redux-sagaで非同期処理と戦う
   firebaseを利用できるようになったらログインだけでなく、CRUDな処理をFirestoreを利用して実装するために必要です。redux-sagaとはアプリケーション上の処理（タスク）の概念をReduxに持ち込むためのもの（MiddleWare)です。
   ここを理解するのに少し時間がかかるかもしれませんが、わかってしまえばパターンなので頑張りましょう。

6. Material-UI と styled-components を組み合わせて、React のサイトを怠惰にスタイリングする。
   なるべく簡単にレイアウトを作成する方法ですmaterial-uiを利用してスタイリングの手間を省きながら、綺麗なUI、レイアウトを目指しましょう