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
420
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
450
Vue.jsで作るAdobeXDプラグイン
tanakamidnight
0
680
できるようになるかもしれないVueNative
tanakamidnight
0
31
ハンズオンを支えた技術
tanakamidnight
0
250
Vue.jsの始め方
tanakamidnight
0
360
Vuesaxを使ってみる
tanakamidnight
0
440
FirebaseでWebサービスを作った(てる)話
tanakamidnight
0
550
Other Decks in Technology
See All in Technology
Reflections of AI: A Trilogy in Four Parts (GOTO; Copenhagen 2025)
ondfisk
0
110
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
240
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.3k
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
6
1.2k
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
210
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
530
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
0
170
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
130
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
130
Adapty_東京AI祭ハッカソン2025ピッチスライド
shinoyamada
0
280
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
140
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
4
790
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
Building Applications with DynamoDB
mza
96
6.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Thoughts on Productivity
jonyablonski
70
4.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Side Projects
sachag
455
43k
How GitHub (no longer) Works
holman
315
140k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
870
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
おわり