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. おわり