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
290
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
110
Vue.jsで書くAdobe XD Plugin
tanakamidnight
0
520
Firebaseここ最近(2019/01~05)の新機能(Osaka, Web寄り)
tanakamidnight
1
360
Vue.jsで作るAdobeXDプラグイン
tanakamidnight
0
520
できるようになるかもしれないVueNative
tanakamidnight
0
27
ハンズオンを支えた技術
tanakamidnight
0
220
Vue.jsの始め方
tanakamidnight
0
280
Vuesaxを使ってみる
tanakamidnight
0
350
FirebaseでWebサービスを作った(てる)話
tanakamidnight
0
400
Other Decks in Technology
See All in Technology
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
670
2024/4/26 コンピュータ歴史博物館解説告知
toshi_atsumi
0
190
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
0
250
強みを伸ばすキャリアデザイン
yug1224
0
200
【SORACOM UG】SIM Deep Dive セキュアエレメント編
soracom
PRO
0
240
反実仮想機械学習とは何か
usaito
PRO
6
1.3k
Aurora MySQL v3(MySQL8.0互換)の オンラインDDLの罠挙動を全バージョンで検証した
yutakikai
0
150
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
2
100
株式会社EventHub・エンジニア採用資料
eventhub
0
1.9k
OpenTelemetry を使ったトレースエグザンプラーの活用 / otel-trace-exemplar
k6s4i53rx
2
630
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
24
4.8k
WebアプリケーションにおけるPDOの使い方入門 / phpcon odawara 2024
meihei3
2
420
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
30
12k
Designing for humans not robots
tammielis
247
25k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
The Pragmatic Product Professional
lauravandoore
24
5.8k
The Language of Interfaces
destraynor
151
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
10 Git Anti Patterns You Should be Aware of
lemiorhan
645
57k
The Cult of Friendly URLs
andyhume
73
5.7k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
Building Effective Engineering Teams - LeadDev
addyosmani
26
1.8k
Code Review Best Practice
trishagee
54
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
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
おわり