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
Nuxt.js x Firebase で非同期に開発する
Search
mikakane
January 19, 2019
Technology
0
2.1k
Nuxt.js x Firebase で非同期に開発する
mikakane
January 19, 2019
Tweet
Share
More Decks by mikakane
See All by mikakane
NestJS で始める怖くないバックエンド開発
mikakane
1
1.3k
コーディングがわからない
mikakane
0
130
Web制作現場のディレクションを支えるGitHub
mikakane
0
560
nuxt.js で plugins を作る
mikakane
0
780
@ionic/vue で Web アプリを作ってみる
mikakane
0
2.9k
Laravel Package Development
mikakane
16
6.5k
フロントエンドで作る理由
mikakane
1
1.3k
Firebase で作る Web アプリケーション
mikakane
1
150
技術顧問の現場から - 制作と教育、学習と生産
mikakane
0
700
Other Decks in Technology
See All in Technology
ヒューリスティック評価を用いたゲームQA実践事例
gree_tech
PRO
0
480
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
1
580
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
1.1k
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
750
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
290
「魔法少女まどか☆マギカ Magia Exedra」の必殺技演出を徹底解剖! -キャラクターの魅力を最大限にファンに届けるためのこだわり-
gree_tech
PRO
0
490
LLM翻訳ツールの開発と海外のお客様対応等への社内導入事例
gree_tech
PRO
0
490
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
150
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
120
フィンテック養成勉強会#56
finengine
0
110
TypeScript入門
recruitengineers
PRO
35
12k
ガチな登山用デバイスからこんにちは
halka
1
210
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.6k
How GitHub (no longer) Works
holman
315
140k
Docker and Python
trallard
45
3.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
We Have a Design System, Now What?
morganepeng
53
7.8k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Building an army of robots
kneath
306
46k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Code Reviewing Like a Champion
maltzj
525
40k
Transcript
chatbox.inc 後藤 知宏 Firebase で非同期に開発する
chatbox.inc 後 藤 知 宏 株式会社chatbox 代表取締役 関西フロントエンドUG代表 Twitter :
@_mikakane エンジニア / 技術顧問
chatbox.inc Firebase Google の提供する BaaS Service めっちゃ便利
chatbox.inc Firebase Authentication Firebase を利用した 認証機構 Web GUI 操作で 簡単な認証機構を用意することが可能
Mail 認証のほか、Google / Github などのサービス認証、 匿名認証にも対応で Oauth2 の 設定も簡単 認証のためのフローは JS を数行記述するだけ ポップアップ認証で、画面遷移も不要の Promise ベース認証
chatbox.inc Firebase Database Realtime DatabaseとCloud Firestore どちらも NoSQL ベースで柔軟な利用が可能 Realtime
Database は 大きなJSON ツリーに データを追加していく形式 Cloud Firestore は コレクションと呼ばれる単位で、 JSON ライクにデータを管理する形式
chatbox.inc vuexfire Vue.js の ストア Vuex と Firebase Database を
同期させるツール vuexfire Realtime Database 上の任意のパスと、 任意の state を紐付ける事ができる。 もちろん、 node の firebase モジュールを利用した、 任意の Read / Write 操作も可能
chatbox.inc Firebase で バックエンド構築 コードを記述すること無く、 柔軟に利用可能なバックエンド基盤を構築できる フロントエンジニアに力を!
chatbox.inc Web アプリケーション開発 frontend backend swagger Swagger を利用した REST API
Schema の共有 フロントとバックエンド開発は 二人三脚
chatbox.inc フロント開発の課題 バックエンドと二人三脚 API 仕様書をともにメンテしていく必要性 些細なデータでも、永続化のために バックエンドに 都度 API を作成・管理していかなければならない
API の開発スケジュールにフロントが引きずられる 統合テスト、API のバグなど
chatbox.inc Firebase を使った開発 frontend firebase Web GUI Firebase の管理画面を利用して Backend
基板を構築 フロントエンドの実装担当者が、 アプリケーションの全機能を実装できる。
chatbox.inc Really? システム利用データの集計、出力、管理機能など…
chatbox.inc Firebase Admin 管理者権限で Realtime Database の 読み書きを実行したり、認 証のための ID
トークンを確認したりできる。 Node.js / Java / Python / Go / C# で提供されている他、 REST API の実装で非公式に PHP や Ruby などの実装も 管理者権限で Database 全体を操作したり、 ユーザの認証を行ったりするのに便利
chatbox.inc Firebase Admin frontend firebase backend REST API as Event
auth with uid touch whole database uid as token
chatbox.inc Firebase Anywhere フロントで完結させたい 業務ロジック関心外のデータを すべて Firebase で巻き取る。 DB 構成を「本当に必要な業務データ」のみに
小規模向けのイメージが強いが、 大規模向けの REST API + SPA の開発でも、 REST API 開発規模を 削減するために…など利用場面は多い 後々、Firebase 上のデータを 管理部門で活用したくなったら Firebase Admin で簡単に巻き取れる。
chatbox.inc Firebase で 変わる開発フロー バックエンドは より シンプルに 開発はより独立して、分割された責務を全うする形に
chatbox.inc Firebase を使った開発依頼 お待ちしております。
chatbox.inc FJUG Osaka
chatbox.inc Lec Cafe
chatbox.inc Lec Cafe
chatbox.inc Thanks!