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
Web App created by Vue.js / Firebase (RxFire)
Search
TanakaMidnight
July 26, 2019
Technology
0
400
Web App created by Vue.js / Firebase (RxFire)
TanakaMidnight
July 26, 2019
Tweet
Share
More Decks by TanakaMidnight
See All by TanakaMidnight
APIを使う、作る
tanakamidnight
0
150
Vue.jsで書くAdobe XD Plugin
tanakamidnight
0
540
Firebaseここ最近(2019/01~05)の新機能(Osaka, Web寄り)
tanakamidnight
1
440
Vue.jsで作るAdobeXDプラグイン
tanakamidnight
0
670
できるようになるかもしれないVueNative
tanakamidnight
0
30
ハンズオンを支えた技術
tanakamidnight
0
250
Vue.jsの始め方
tanakamidnight
0
360
Vuesaxを使ってみる
tanakamidnight
0
430
FirebaseでWebサービスを作った(てる)話
tanakamidnight
0
530
Other Decks in Technology
See All in Technology
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
340
Agentic Workflowという選択肢を考える
tkikuchi1002
1
500
HiMoR: Monocular Deformable Gaussian Reconstruction with Hierarchical Motion Representation
spatial_ai_network
0
110
5min GuardDuty Extended Threat Detection EKS
takakuni
0
140
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
180
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
110
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
540
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
11k
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
960
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
140
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
iotcomjpadmin
0
160
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1.1k
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Git: the NoSQL Database
bkeepers
PRO
430
65k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Writing Fast Ruby
sferik
628
61k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Thoughts on Productivity
jonyablonski
69
4.7k
Practical Orchestrator
shlominoach
188
11k
Transcript
Web App created by Vue.js / Firebase (RxFire) VueJS Osaka#2
@TanakaMidnight
自己紹介 ▰ 田中 伸弥 ▰ エンジニア(サーバーサイド, フロントエンド ) ▰ Python,
JavaScript, Perl ▰ Firebase Japan UserGroup Osaka Organizer 2
アジェンダ 1. Firebaseって何なの 2. VueとFirebaseの相性はいいよーという話 3. 作ってるWebアプリについて & デモ 4.
RxFireとは 5. まとめ 3
今日話す内容 4 ▰ なぜその技術を選定したのか ▰ Firebase(Web周り)について ▰ Firestoreについて ▰ RxFireについて
今日話さない内容 5 ▰ Vue.js自体の説明 ▰ Firebaseのモバイル関連機能 ▰ Firebaseの認証周り機能
1. Firebaseって何なの
Firebaseとは ▰ Googleが提供している モバイルアプリのバックエンドや、 Webアプリを作るためのサービス ▰ サーバーレスでインフラの管理は よしなにGoogleがやってくれる ▰ ホスティングやストレージなど組合せる
7
じゃあWebアプリを作るには 何組み合わせるの? 8 用途 サービス名 ◎ ホスティング Hosting ◦ データベース(NoSQL)
Cloud Firestore ◦ ストレージ Cloud Storage △ ログイン認証 Authentication △ バックエンド処理 Cloud Functions
ex)会社サイト ・Hosting じゃあWebアプリを作るには 何組み合わせるの? ex)チャットアプリ ・Hosting ・Firestore ・Authentication 9
2. VueとFirebaseの相性は いいよーという話
なにがうれしい? Vueの双方向データバインディングと Firestoreのリアルタイム リスナーを 組み合わせることで、 リアルタイムにデータの取得、更新が 可能になる。 11
なにがうれしい? 12
なにがうれしい? 13
14 →0件
3. 作ってるWebアプリについて & デモ
何つくってんの? 35495E 16
何つくってんの? #35495E 17
何つくってんの? #35495E 18
何つくってんの? 19 #35495E
何つくってんの? 20 さっと答えれたら すごくない?
何つくってんの? 21 色を見たら カラーコードが言えるように 鍛えるアプリ(対戦付)
何つくってんの? 22 参加者は色を3択で選ぶ。
何つくってんの? 23 リアルタイムでランキング表示。
デモ 24 rgbquiz.web.app
ひんと 25 https://note.cman.jp/color/base_color.cgi
使ってる技術 26 ・Vue.js(TypeScript) ・Firebase(Hosting, firestore) ・Buefy(BulmaのVue版) ・RxFire
今後やりたいこと 27 ・いい感じにデザイン直す ・みんな同じ問題でせーので解く(早押し的な) ・不正防止
4. RxFireとは
RxFireとは ▰ Reactive Extensions for Firebase ▰ リアクティブ・プログラミング用 ライブラリのRxJSを使っている ▰
非同期処理を簡潔に書ける 29 https://github.com/firebase/firebase-js-sdk/tree/master/packages/rxfire
RxFireを使うメリット ▰ 標準のSDKよりわかりやすく書ける ▰ フロントエンドフレームワークに 依存しない ▰ 複数のデータストリームを処理するのに 向いている ▰
公式が作ってる 30
個人的に思うRxFireを 使うメリット ▰ pipeでいい感じに加工したのを subscribeで受け取れる ▰ 複数のデータを取ってきて制御するのが いい感じ 31
code 32 firebase sdkを使った場合
code 33 VueFireを使った場合
code 34 RxFireを使った場合
code 35 RxFireを使った場合 (idも一緒に返したい時)
code 36 RxFireを使った場合 (複数のcollectionをまとめて取得したい時) https://firebase.googleblog.com/2018/09/introducing-rxfire-easy-async-firebase.html
まとめ ▰ FirebaseとVue.jsでさくっとWebアプリ が作れる ▰ 複雑なデータ処理を書くにはRxFireを使 うといい感じ ▰ カラーコードから色がわかれば強そうに 見えるけど実務では役に立たない
37
おわり