TL;DR
業務的にFirebaseを触っていきそうな可能性が高まっているため、とりあえず公式あたりから何か学ぼうということでgoogleの公式チュートリアル？の codelabsよりWeb x Firebase系を受講。
結論的に言えばこれじゃなくても良いかな？という感じです。
やったものはこちら
はじめに
気づいたらfirebase-webをやろうとしていたのにfirestore-webをやっていた…のですが、firebase-web -> firebase-cloud-functions -> firestore-web の順で行うことを激しくオススメします。
また、webとfunctionsは一応個別にもできますが、webの完成状態からfunctionsが始まるので繋がっており、functionsではwebの完成状態が初期コードとして提供されます）
全体の事前準備
特筆すべきものはありませんが、こんな感じです。
Node.jsは現在Cloud Functionsが現在はv6.11.5のため同バージョンを使用することをオススメします。
- Node.js / npm
- IDE/Text editor
- git
- google account
全体の共通事項
基本的にはベースとなるHTML/CSS/Javascriptコードは用意されていて、Firebase周りの実装だけを行う、という形になります。
なので結構写景してるだけ感が強く、自分で学習する時に工夫しないとあまり力にはならなそうです。
学習は大体全て写景ベースでの学習だと1コース1時間以内だと思います。
こちらが受講したコードもgithubにあげていて、番号別で基本はコミットしているので困ったらよかったら使ってください。
（ただ諸々ざっくり行っていますので細かい点はスルーしてください…。）
firebase-web
https://codelabs.developers.google.com/codelabs/firebase-web/
学べること/やること
- Realtime DatabaseとStorageを使用したチャットの実装
- Firebase Authenticationを使用したgoogleアカウントによる認証機能の実装
- Firebase Hostingを使用した静的ファイルのデプロイ
- Firebase Cloud Messagingを使用した通知機能のクライアント側の実装
内容と感想
簡単なGoogleアカウント認証を使用したチャットアプリケーションを作ります。
最初に書いたとおり一通りの表示に対してのイベントの設定や、関数自体は書かれたテンプレートありの状態でスタートします。
ただこのせいか分かりませんが、一通りの「体験」はできるものの「学べた」という経験値は得づらい気がしました。
なんとなくは大体どういうデータの形でこういう感じで保存してこうやって連携して…という全体像は見えてくると思います。
とはいえ、CSSとかも書いて一から…だとそれはそれで「そこは別にやらなくていいんだけど…」って思ってしまうので形式は難しい所ですね。
jsのコードはES5なのでちょっと実務的に使わない形式でコードを書くというのがなんともでした。
firebase-cloud-functions
https://codelabs.developers.google.com/codelabs/firebase-cloud-functions/
学べること/やること
- Firebase SDK を 用いた Cloud Functionsの実装
- Authentication / Cloud Storage / Realtime Database のイベントを検知して処理する実装
- 前回作った通知機能に対して実際に Cloud Messaging を使用して通知を送る実装
内容と感想
firebase-webで作ったアプリにCloud Functionsによる機能を追加します。
途中任意ですが、Storageにアップされた画像がアダルトか暴力表現に当てはまらないかをCLOUD VISION APIで判定して該当する場合ぼかすという処理があります。
ただこれは支払いを有効にする必要があり、無料枠で余裕のはずではあるものの誰かに遊ばれると課金の可能性が発生しますので、スキップしない場合は学習後必ずOFFにしましょう。
今回はNode6系がベースになっているのでES2015辺りの構文で記述します。
かなり同期的な処理が多いので async/awaitが使えるようになるともっと書き味はよくなりそうでした。
firestore-web
https://codelabs.developers.google.com/codelabs/firestore-web/
学べること/やること
- Web上からFirestoreのデータを読み書きする
- Firestoreのデータの変更をリアルタイムに検知する
- Firebase Authenticationを使用した Firestoreのセキュリティ設定について
- 複雑なFirestoreのクエリの書き方
内容と感想
FirebaseにはRealtime Database と Firestoreという2種類のデータベースがあります。
Firestoreは新しく出来たデータベースで現時点ではベータ版です。
今回はFirebaseを勉強するという感じではなく、その新しく出来たFirestoreを勉強する用に作られているためそれしか取り扱いません。
作るものとしてはレストランレビューWebアプリのようなものを作る内容となっていて、
データ自体はモックが用意されているので、それを使用したデータの読み書き、フィルタリング等を勉強できます。
そしてこちらも記述がES5なのでちょっと読みづらさ、書きづらさが結構ありました。
おわりに
短時間で雰囲気を掴むという点では良い物ではありましたが、これだけで実践にはいけるかな…？という印象を持ちました。
もっと実際に使用する形に近いFirebaseを使用する教材があるようでしたら、特別この教材にこだわる必要はないでしょう。
悲しいですが以上です！