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
320
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
120
Vue.jsで書くAdobe XD Plugin
tanakamidnight
0
520
Firebaseここ最近(2019/01~05)の新機能(Osaka, Web寄り)
tanakamidnight
1
390
Vue.jsで作るAdobeXDプラグイン
tanakamidnight
0
560
できるようになるかもしれないVueNative
tanakamidnight
0
27
ハンズオンを支えた技術
tanakamidnight
0
230
Vue.jsの始め方
tanakamidnight
0
300
Vuesaxを使ってみる
tanakamidnight
0
380
FirebaseでWebサービスを作った(てる)話
tanakamidnight
0
430
Other Decks in Technology
See All in Technology
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
AOAI Dev Day - Opening Session
yoshidashingo
2
470
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.4k
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
36
13k
The Language of Interfaces
destraynor
151
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Rails Girls Zürich Keynote
gr2m
93
13k
Thoughts on Productivity
jonyablonski
64
4.1k
Docker and Python
trallard
37
2.9k
Done Done
chrislema
179
15k
Side Projects
sachag
451
42k
Speed Design
sergeychernyshev
9
270
Designing with Data
zakiwarfel
96
5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
KATA
mclloyd
20
13k
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
おわり