FirebaseではじめるサーバレスSPA開発を公開  ※ 株式会社GIGでは毎月社内勉強会を実施しています  GIG inc.  Good is good.  We provide opportunities to the SEKAI by fusing technology and ideas.  テクノロジーとクリエイティブでセカイをより良くする。小さなチームからスタートした多くの先人達が、世界をより豊かなモノに変革してきました。通信、UX、デバイス、技術の変化と共に世界はまだまだ加速度的に変わります。  Good is good. いいものはいい。GIGは、関わったユーザーやクライアントが前に進める“きっかけ”をつくりつづけます。  ■ お問い合せ  https://giginc.co.jp/contact/

1. Firebaseではじめる
サーバレスSPA開発

2. 話すこと
1. Firebaseとは？
2. 実際に使ってみた
3. 仕事での活用シーン

3. Firebaseとは？

4. 概要
Googleが提供する「Mobile Backend as a Service(mBaaS)」と呼ばれるモ
バイルアプリ開発者向けのサービス。
ざっくりいうと、
「インフラ環境構築やサーバーサイドの処理をぜんぶGoogleがやってく
れるので、フロントだけ頑張れば誰でもアプリが作れてしまう」
というサービスです。
無料プラン、定額プラン、従量課金プランがあります。

5. 提供されるサービス（抜粋）
● Authentication（認証/ユーザー管理）
● Realtime Database / Cloud Firestore（データベース）
● Cloud Storage（ファイルストレージ）
● Hosting（レンタルサーバーのようなもの）
● Cloud Functions（イベントの監視、backgroundで処理実行）
ほかにも便利なサービスがたくさんありますが、
とりあえずこれだけ知っていればWebサービスが作れます 🎉

6. 提供されるサービス（抜粋）
● Authentication（認証/ユーザー管理）
● Realtime Database / Cloud Firestore（データベース）
● Cloud Storage（ファイルストレージ）
● Hosting（レンタルサーバーのようなもの）
● Cloud Functions（イベントの監視、backgroundで処理実行）
データベース周りについて少し掘り下げます。

7. データベース
Firebaseには2種類のDBが存在します。
従来の「Realtime Database」
と
次世代の「Firestore」

8. Realtime Databaseの特徴
● 接続されているすべてのクライアントでデータの保存と同期を
リアルタイムで実行
● データを一つのJSONツリーとして保存するため非常にシンプル
● 動作が安定しており、頻繁な状態同期にも耐えうる設計
● データ構造がシンプルすぎるため、複雑なデータ保存には不向き
● クエリ（データのソートなど）が貧弱
● スケーリングは手動で設定する必要がある
シンプルかつ頻繁に書き込みが行われるプロダクト向き

9. Firestoreの特徴
● データのリアルタイム同期機能はそのまま、パフォーマンス向上
● データを「コレクション」「ドキュメント」という親子関係で保存できるた
め、階層的なデータ構造を組みやすい
● 複雑なクエリ（複合クエリ）も実行可能
● スケーリングは自動で行われる
● ベータ版のため安定性は保証できない
● データ書き込みが1秒間に2回までという制限が設けられている
データ同期が頻繁に発生しなければ、基本的にこちらを採用したほうが良い

10. Realtime Database

11. Firestore

12. セキュリティルール
FirebaseのDBを利用するうえで重要になってくる機能。
DBへの書き込み/読み取り権限を設定できたり、
特定の条件下でしかアクセスできないように設定することができる。
例：
ユーザーが認証を完了している
場合のみ書き込みを許可する
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if request.auth.uid != null;
}
}
}

13. 各種サービスの連携イメージ
ユーザー
OAuth認証 Realtime Database
Cloud Firestore
Cloud Functions
認証結果を返す
DB内のデータを配信する
メディア（画像や動画など）を配信する
Cloud Storage

14. 実際に使ってみた

15. https://tapbox.app/

16. 使った技術
Authentication ... Twitter認証、ユーザー管理
Firestore ... データ保存、読み取り
Cloud Storage ... メディア保存、読み取り
Hosting ... アプリの配信
Vue.js + Vuex + Vue-router ... アプリの構築

17. 感想
● フロント実装だけに集中できるので開発スピード爆速（実働2日くらい）
● FirebaseのCLIツールが優秀なので導入もデプロイも割とラク
● 問題が発生しても日本語ドキュメント(公式)が充実しているので、読めばだ
いたい解決できた
● セキュリティルールを理解するのに時間がかかった
● DBが単独のツリー構造なので大規模なアプリケーションを作るのには苦労し
そうな感じ
● プロトタイプの開発などに向いているかも？

18. 仕事での活用シーン

19. 例えば...
オンラインチャット
- リアルタイム性、プッシュ通知、ログインの状態管理など主要機能は揃って
いるので相性抜群！
ブログシステム
- 簡易的なものであればサクッと作れる！
- Cloud Functionsを使えばNode.jsも動かせるので、Nuxt.jsなどSSR（サー
バーサイドレンダリング）も可能。

20. Firebase案件ありましたらぜひ@kokushinまで🙇

21. Good is good.
We provide opportunities to the SEKAI by fusing technology and ideas.
テクノロジーとクリエイティブでセカイをより良くする
のこと