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
450
Vue.jsで作るAdobeXDプラグイン
tanakamidnight
0
670
できるようになるかもしれないVueNative
tanakamidnight
0
31
ハンズオンを支えた技術
tanakamidnight
0
250
Vue.jsの始め方
tanakamidnight
0
360
Vuesaxを使ってみる
tanakamidnight
0
430
FirebaseでWebサービスを作った(てる)話
tanakamidnight
0
540
Other Decks in Technology
See All in Technology
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
3
550
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
140
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
290
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
1
270
CDK Vibe Coding Fes
tomoki10
1
450
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
330
shake-upを科学する
rsakata
7
900
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
510
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
2
300
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
ロールが細分化された組織でSREは何をするか?
tgidgd
1
160
Featured
See All Featured
Practical Orchestrator
shlominoach
189
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
GitHub's CSS Performance
jonrohan
1031
460k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
A better future with KSS
kneath
238
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Raft: Consensus for Rubyists
vanstee
140
7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Scaling GitHub
holman
460
140k
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
おわり