PWA導入を楽にするFirebase

PWA導入を楽にする Firebase 株式会社ソニックガーデン高谷大樹

自己紹介高谷大樹(たかやだいき) 埼玉在住 24歳 2018年新卒でソニックガーデンに入社夢: 「おじいさんになってもお酒とプログラミングは現役でいること」

普段の活動まかない食堂

Firebaseって? 1. サーバーレス => googleさんのサーバーと fastlyのCDN 2. クライアントだけでデータの永続化 3. 超簡単なデプロイ作業

今までのweb

Firebase デプロイ! googleサーバ Fastly製

Firebaseはなにが嬉しいのか？

全部セットアップされてるぜ WEBサーバー, APPサーバーを入れなくても大丈夫！ nginx, unicorn, MySQLなにそれ？うまいの？から始められる。

基本は無料 PWAを試すぐらいには十分! 外部APIを叩く, データのバックアップなどしなければ、無料で利用できる。

セットアップ方法 1. まずは登録 2. CDNで読み込み 3. Firebase Toolsをnpmでインストール

辛いサーバーセットアップからの解放

{ "hosting": { "public": "dist", "rewrites": [ { "source": "**",
"destination": "/index.html" } ] } } firebase.json

Vue CLIしてプロジェクトの雛形作成 https://qiita.com/567000/items/dde495d6a8ad1c2 5fa43 $ npm install -g vue-cli $
vue init webpack my-project

1. npm install -g firebase-tools 2. $ cd ~/my-project(作業dir) 3.
$ firebase init 4. $ firebase deploy

どうやってデータ保存? Cloud Fire Store Real Time Database

データの追加方法 var admin = require("firebase-admin"); var db = admin.database(); var
usersRef = db.ref.child("users"); usersRef.set({ { name: “高谷”, age: 24, email: “takaya@sonicgarden.jp” });

データのCRUD 1. set(データ作成, すでにデータがあると上書き) 2. update(そのまま) 3. add(JSONツリーにデータを追加) 4.
transaction(そのまま)

どれもkey value形式

正規化は捨てよう！(1) データはフラットに！深いネストは悪

正規化は捨てよう！(2) { "chats": { "room01": { "title": "チャットルーム01", "messages": {
"message01": { "sender": "Fumihiko Shiroyama", "message": "こんにちは。誰かいますか？ " }, "message02": { ... }, "message03": { ... } } }, "room02": { ... } } }

正規化は捨てよう！(3) { "users": { "shiroyama": { "name": "Fumihiko Shiroyama" },
}, "rooms": { "room01": {} }, "room02": { ... } }, "messages": { "room01": { "message01": { "sender": "shiroyama", "message": "こんにちは。誰かいますか？" }, } }

まとめ 1. サーバー管理からの解放 2. CDNで簡単な導入 3. 無料

ご静聴ありがとうございました。

PWA導入を楽にするFirebase

PWA導入を楽にするFirebase

Daiki Takaya

Other Decks in Programming

Featured

Transcript