Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

TanakaMidnight

July 26, 2019
Tweet

More Decks by TanakaMidnight

Other Decks in Technology

Transcript

  1. Web App created by
    Vue.js / Firebase (RxFire)
    VueJS Osaka#2 @TanakaMidnight

    View full-size slide

  2. 自己紹介
    ▰ 田中 伸弥
    ▰ エンジニア(サーバーサイド,
    フロントエンド
    )
    ▰ Python, JavaScript, Perl
    ▰ Firebase Japan UserGroup Osaka
    Organizer
    2

    View full-size slide

  3. アジェンダ
    1. Firebaseって何なの
    2. VueとFirebaseの相性はいいよーという話
    3. 作ってるWebアプリについて & デモ
    4. RxFireとは
    5. まとめ
    3

    View full-size slide

  4. 今日話す内容
    4
    ▰ なぜその技術を選定したのか
    ▰ Firebase(Web周り)について
    ▰ Firestoreについて
    ▰ RxFireについて

    View full-size slide

  5. 今日話さない内容
    5
    ▰ Vue.js自体の説明
    ▰ Firebaseのモバイル関連機能
    ▰ Firebaseの認証周り機能

    View full-size slide

  6. 1.
    Firebaseって何なの

    View full-size slide

  7. Firebaseとは
    ▰ Googleが提供している
    モバイルアプリのバックエンドや、
    Webアプリを作るためのサービス
    ▰ サーバーレスでインフラの管理は
    よしなにGoogleがやってくれる
    ▰ ホスティングやストレージなど組合せる
    7

    View full-size slide

  8. じゃあWebアプリを作るには
    何組み合わせるの?
    8
    用途 サービス名
    ◎ ホスティング Hosting
    ○ データベース(NoSQL) Cloud Firestore
    ○ ストレージ Cloud Storage
    △ ログイン認証 Authentication
    △ バックエンド処理 Cloud Functions

    View full-size slide

  9. ex)会社サイト
    ・Hosting
    じゃあWebアプリを作るには
    何組み合わせるの?
    ex)チャットアプリ
    ・Hosting
    ・Firestore
    ・Authentication
    9

    View full-size slide

  10. 2.
    VueとFirebaseの相性は
    いいよーという話

    View full-size slide

  11. なにがうれしい?
    Vueの双方向データバインディングと
    Firestoreのリアルタイム リスナーを
    組み合わせることで、
    リアルタイムにデータの取得、更新が
    可能になる。
    11

    View full-size slide

  12. なにがうれしい?
    12

    View full-size slide

  13. なにがうれしい?
    13

    View full-size slide

  14. 3.
    作ってるWebアプリについて
    & デモ

    View full-size slide

  15. 何つくってんの?
    35495E
    16

    View full-size slide

  16. 何つくってんの?
    #35495E
    17

    View full-size slide

  17. 何つくってんの?
    #35495E
    18

    View full-size slide

  18. 何つくってんの?
    19
    #35495E

    View full-size slide

  19. 何つくってんの?
    20
    さっと答えれたら
    すごくない?

    View full-size slide

  20. 何つくってんの?
    21
    色を見たら
    カラーコードが言えるように
    鍛えるアプリ(対戦付)

    View full-size slide

  21. 何つくってんの?
    22
    参加者は色を3択で選ぶ。

    View full-size slide

  22. 何つくってんの?
    23 リアルタイムでランキング表示。

    View full-size slide

  23. デモ
    24 rgbquiz.web.app

    View full-size slide

  24. ひんと
    25 https://note.cman.jp/color/base_color.cgi

    View full-size slide

  25. 使ってる技術
    26
    ・Vue.js(TypeScript)
    ・Firebase(Hosting, firestore)
    ・Buefy(BulmaのVue版)
    ・RxFire

    View full-size slide

  26. 今後やりたいこと
    27
    ・いい感じにデザイン直す
    ・みんな同じ問題でせーので解く(早押し的な)
    ・不正防止

    View full-size slide

  27. 4.
    RxFireとは

    View full-size slide

  28. RxFireとは
    ▰ Reactive Extensions for Firebase
    ▰ リアクティブ・プログラミング用
    ライブラリのRxJSを使っている
    ▰ 非同期処理を簡潔に書ける
    29 https://github.com/firebase/firebase-js-sdk/tree/master/packages/rxfire

    View full-size slide

  29. RxFireを使うメリット
    ▰ 標準のSDKよりわかりやすく書ける
    ▰ フロントエンドフレームワークに
    依存しない
    ▰ 複数のデータストリームを処理するのに
    向いている
    ▰ 公式が作ってる
    30

    View full-size slide

  30. 個人的に思うRxFireを
    使うメリット
    ▰ pipeでいい感じに加工したのを
    subscribeで受け取れる
    ▰ 複数のデータを取ってきて制御するのが
    いい感じ
    31

    View full-size slide

  31. code
    32
    firebase sdkを使った場合

    View full-size slide

  32. code
    33
    VueFireを使った場合

    View full-size slide

  33. code
    34
    RxFireを使った場合

    View full-size slide

  34. code
    35
    RxFireを使った場合
    (idも一緒に返したい時)

    View full-size slide

  35. code
    36
    RxFireを使った場合
    (複数のcollectionをまとめて取得したい時)
    https://firebase.googleblog.com/2018/09/introducing-rxfire-easy-async-firebase.html

    View full-size slide

  36. まとめ
    ▰ FirebaseとVue.jsでさくっとWebアプリ
    が作れる
    ▰ 複雑なデータ処理を書くにはRxFireを使
    うといい感じ
    ▰ カラーコードから色がわかれば強そうに
    見えるけど実務では役に立たない
    37

    View full-size slide