プログラミングに役立つ情報をメモしています

FIrebaseとVue.jsを利用した簡易掲示板アプリ

Firebaseを試してみたいと思いたち、Vue.jsを使って簡易的な掲示板アプリを作ってみました。

サンプルのため機能は限定的ですが、ソーシャルゲームのマルチ募集掲示板ぐらいには使えるかもしれません。

こんな感じです。
scr

デモサイト
ソースコード

実装について

構成要素

  • Firebase Firestore
  • Firebase Functions
  • Vue
  • Vue-Router

ソースコード抜粋

Firebaseを初期化する部分

src/App.vue

スレッドを作成する部分

Firebase FunctionをHTTP経由で呼び出すだけです。

Components/Main.vue

スレッドの一覧を取得する部分

最近更新があったスレッド100件を取得するようにしています。

src/Components/Main.vue

コメントの一覧を取得し、subscribeを開始する部分

最新1000件のコメントを取得し、その後、コメントに更新があったときに通知されるようsubscribeを登録します。
Firestoreの便利なところは、全てのキーに対して自動的にインデックスが作成されるところですね。

Components/Comments.vue

コメントを投稿する部分

スレッド作成同様、Firebase FunctionをHTTP経由で呼び出すだけです。

Components/Comments.vue

Cloud Functions

Functionは2つです。

  • AddComment
    コメントを投稿するFunctionですコメント投稿時に、スレッドのコメント件数をインクリメントするようにしています。
    また、スレッドのupdateTimeを更新することにより、最新のコメントがあったスレッドが上位に表示されるようにしています。
  • CreateThread
    スレッドを作成するFunctionです。

functions/index.js