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

Transcript

1. Web App created by Vue.js / Firebase (RxFire) VueJS Osaka#2 @TanakaMidnight
2. 自己紹介 ▰ 田中 伸弥 ▰ エンジニア(サーバーサイド, フロントエンド ) ▰ Python, JavaScript, Perl ▰ Firebase Japan UserGroup Osaka Organizer 2
3. アジェンダ 1. Firebaseって何なの 2. VueとFirebaseの相性はいいよーという話 3. 作ってるWebアプリについて & デモ 4. RxFireとは 5. まとめ 3
4. 今日話す内容 4 ▰ なぜその技術を選定したのか ▰ Firebase(Web周り)について ▰ Firestoreについて ▰ RxFireについて
5. 今日話さない内容 5 ▰ Vue.js自体の説明 ▰ Firebaseのモバイル関連機能 ▰ Firebaseの認証周り機能
6. 1. Firebaseって何なの
7. Firebaseとは ▰ Googleが提供している モバイルアプリのバックエンドや、 Webアプリを作るためのサービス ▰ サーバーレスでインフラの管理は よしなにGoogleがやってくれる ▰ ホスティングやストレージなど組合せる 7
8. じゃあWebアプリを作るには 何組み合わせるの? 8 用途 サービス名 ◎ ホスティング Hosting ◦ データベース(NoSQL) Cloud Firestore ◦ ストレージ Cloud Storage △ ログイン認証 Authentication △ バックエンド処理 Cloud Functions
9. ex)会社サイト ・Hosting じゃあWebアプリを作るには 何組み合わせるの? ex)チャットアプリ ・Hosting ・Firestore ・Authentication 9
10. 2. VueとFirebaseの相性は いいよーという話
11. なにがうれしい？ Vueの双方向データバインディングと Firestoreのリアルタイム リスナーを 組み合わせることで、 リアルタイムにデータの取得、更新が 可能になる。 11
12. なにがうれしい？ 12
13. なにがうれしい？ 13
14. 14 →0件
15. 3. 作ってるWebアプリについて & デモ
16. 何つくってんの？ 35495E 16
17. 何つくってんの？ #35495E 17
18. 何つくってんの？ #35495E 18
19. 何つくってんの？ 19 #35495E
20. 何つくってんの？ 20 さっと答えれたら すごくない？
21. 何つくってんの？ 21 色を見たら カラーコードが言えるように 鍛えるアプリ(対戦付)
22. 何つくってんの？ 22 参加者は色を3択で選ぶ。
23. 何つくってんの？ 23 リアルタイムでランキング表示。
24. デモ 24 rgbquiz.web.app
25. ひんと 25 https://note.cman.jp/color/base_color.cgi
26. 使ってる技術 26 ・Vue.js(TypeScript) ・Firebase(Hosting, firestore) ・Buefy(BulmaのVue版) ・RxFire
27. 今後やりたいこと 27 ・いい感じにデザイン直す ・みんな同じ問題でせーので解く（早押し的な） ・不正防止
28. 4. RxFireとは
29. RxFireとは ▰ Reactive Extensions for Firebase ▰ リアクティブ・プログラミング用 ライブラリのRxJSを使っている ▰ 非同期処理を簡潔に書ける 29 https://github.com/firebase/firebase-js-sdk/tree/master/packages/rxfire
30. RxFireを使うメリット ▰ 標準のSDKよりわかりやすく書ける ▰ フロントエンドフレームワークに 依存しない ▰ 複数のデータストリームを処理するのに 向いている ▰ 公式が作ってる 30
31. 個人的に思うRxFireを 使うメリット ▰ pipeでいい感じに加工したのを subscribeで受け取れる ▰ 複数のデータを取ってきて制御するのが いい感じ 31
32. code 32 firebase sdkを使った場合
33. code 33 VueFireを使った場合
34. code 34 RxFireを使った場合
35. code 35 RxFireを使った場合 (idも一緒に返したい時)
36. code 36 RxFireを使った場合 (複数のcollectionをまとめて取得したい時) https://firebase.googleblog.com/2018/09/introducing-rxfire-easy-async-firebase.html
37. まとめ ▰ FirebaseとVue.jsでさくっとWebアプリ が作れる ▰ 複雑なデータ処理を書くにはRxFireを使 うといい感じ ▰ カラーコードから色がわかれば強そうに 見えるけど実務では役に立たない 37
38. おわり