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

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

F38f6a8424ffd84d7869989856d90c6f?s=128

TanakaMidnight

July 26, 2019
Tweet

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