Chapter 01

この本について

masalib
masalib
2020.12.26に更新

はじめまして、masalibと言います。普段はバックエンドの開発をメインにやっています。
フロントエンドエンジニアとしては初心者の私が勉強した内容を記載した本になります。

初心者(バックエンドエンジニア)が書いた入門書です。  
・FirebaseAuth  
・FirebaseStorage  
・Firestore  
・Realtime Database  
・Hosting  
・Cloud Functions  
の説明です。

ガチ勢のフロントエンドエンジニア様がみると

このソース・・・プークスクス

みたいな所があると思います。すいません。

元ネタは自分のブログ

https://masalib.hatenablog.com/
をもとに作られています。

ブログだとわかりにくいのでzenn.dev 用に見直し再編集を行ってみました。
なお、調べてもわからない所はわからないと記載しています。価格が無料なので勘弁してほしいです。

前提

  • Googleのアカウントはもっているとします。ない人は作ってください。
  • githubのアカウントはもっているとします。ない人は作ってください。
  • Twitterのアカウントはもっているとします。Twitterのアカウントをもっていない人はTwitter認証部分を飛ばしてください。
  • functionsを使用するためには有料化が必要です。その為、クレジットカードはもっているとします。ない人はバンドルカードみたいなサービスで作ってください。有料化してもらほぼ0円(Fucntionのアラート設定は必須)で構築できます。もしどうしても有料化したくない人はfunctionの部分を飛ばしてください。

注意事項

環境について

私の環境はWindowsです。MaxOSでも動くと思いますが検証していません。

create-react-appでコケて進まない人がいるのですが、もしどうしてもわからない場合は
codesandboxとgitpod.ioがオススメです。ブラウザがあれば開発できます。

codesandboxは環境変数を設定できないのでFirebaseのを使う場合は環境変数を作業後に消す必要があります。ただし無料プランで使うなら問題ないです。記事内ではcodesandboxで実際に作っている部分もあります。もしForkして使う場合はAPIキーは修正してください。
gitpod.ioは月に使える時間は決まっていますが.envファイルが記載できるのでこちらの方がオススメです。

gitpod.ioの環境作成手順

  1. gitpod.ioにアクセスしてSignUpする。Githubのアカウントがあれば一瞬でできます。

  2. gitpodがで動くリポジトリをfockする

  3. ワークスペースを作成するURLにアクセスする

起動に1分ぐらいかかります。以後は以下のURLにアクセスしてワークスペースを開けば30秒ぐらいで開きます

https://gitpod.io/workspaces/

14日以上アクセスしないとワークスペースが消されます。作業が一段落したらgithubにpushをする事をオススメします。githubにあげていればワークスペースが消されても再構築する事は可能です。

想定する読者層

  • Reactを少し理解している人。
  • ポートフォリオサイトを作っていて会員サービスを作りたい人

価格設定について

0円です。無料なのでできればブログに来てほしいです。

更新について

メインのブログを更新しながらなので遅いです。
アップする順番がちぐはぐですがご了承してください。あとで並べ替えします

1-1・ ReactとFirebaseの初期設定
1-2-1・ Auth:ユーザー作成処理(SignUp):ステップ1
1-2-2・ Auth:ユーザー作成処理(SignUp):ステップ2
1-2-3・ Auth:ユーザー作成処理(SignUp):ステップ3
1-3 ・ Authのログイン処理
1-4 ・ Authのログイン認証とログアウト処理
1-5 ・ Authのパスワード初期化処理
1-6 ・ Authのメールアドレスの有効化2020/12/25更新
1-7 ・ Authのメールアドレスとパスワード変更2020/12/26更新
1-8 ・ Authの表示名変更2020/12/27更新
1-9 ・ Authのアバター変更
1-10 ・ Authの拡張項目追加
1-11-1 ・AuthのTwitter認証
1-11-2 ・AuthのTwitter認証(既存ユーザー向け)と解除
1-12 ・ AuthのGoogle認証(既存ユーザー含む)と解除
1-13 ・ AuthのToken(jwt)の発行と認証
2-1・ FirebaseStorageのファイルアップ:基礎2020/12/27更新
2-2・ FirebaseStorageのファイルアップ前に画像の切り抜き2020/12/27更新
2-3・ FirebaseStorageのファイルの移動
2-4・ FirebaseStorageのファイル圧縮
3-1・FirestoreのCRUD
3-2・Firestoreのデータ取得補足
3-3・Firestoreのページネーション処理
3-4・Firestoreのコレクション(テーブル)のJOIN
4-1・Realtime Databaseでchatアプリ(書き込み)
4-2・Realtime Databaseでchatアプリ(一覧取得)
5・ FirebaseのHosting(デプロイ)
6-1・ Cloud FunctionsでHello,world
6-2・ Cloud Functions(エミュレータ)でHello,world
6-3・ ユーザーの作成時にCloud Functionsを実行
6-4・ Cloud Functionsでメール送信
6-5・ Cloud Functionsでslackに通知する

参考URL

Authの部分に関しては下記の動画をもとに作っています。

https://youtu.be/PKwu15ldZ7k?list=PLvJKM3pIcpVK2M8SaT1LUvEUmpg7zzrdJ