Web App created by Vue.js / Firebase (RxFire)

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, ﬁrestore) ・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 ﬁrebase 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

おわり

Web App created by Vue.js / Firebase (RxFire)

Web App created by Vue.js / Firebase (RxFire)

More Decks by TanakaMidnight

Other Decks in Technology

Featured

Transcript