Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PWA導入を楽にするFirebase
Search
Daiki Takaya
April 17, 2018
Programming
0
1.9k
PWA導入を楽にするFirebase
Daiki Takaya
April 17, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
NEWT Backend Evolution
xpromx
1
110
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
240
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
460
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
470
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
160
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.2k
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
1
310
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
12k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
810
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
340
Porting a visionOS App to Android XR
akkeylab
0
660
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
20k
Featured
See All Featured
It's Worth the Effort
3n
185
28k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Writing Fast Ruby
sferik
628
62k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
The Language of Interfaces
destraynor
158
25k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Transcript
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でインストール
None
None
None
<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script> <script> const config = { apiKey: "<API_KEY>", authDomain:
"<PROJECT_ID>.firebaseapp.com", databaseURL: "https://<DATABASE_NAME>.firebaseio.com", storageBucket: "<BUCKET>.appspot.com", messagingSenderId: "<SENDER_ID>", }; firebase.initializeApp(config); </script>
辛いサーバーセットアップからの 解放
{ "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: “
[email protected]
” });
データの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. 無料
ご静聴ありがとうございました。