VueJS, Vuex, Firestoreでリアルタイムチャットを実装

7 min readJan 21, 2018

最近VueJSでPWAを実装するにあたり調べていて、Lachlan Millerの良さげな記事を見つけたので紹介します。彼はVueJS coreのコミッターでVueJSに関するいろいろなな記事を書いているのでチェックしてみるといいですね。

Build a realtime chat app with VueJS, Vuex and Firestore

Last week Google’s Firebase platform released a new product, Cloud Firestore. Much like the Firebase real-time…

medium.com

先週GoogleのFirebaseがCloud Firestoreという新製品をリリースしました。 Cloud FirestoreはFirebaseのリアルタイムデータベースとよく似ており、リアルタイムアプリケーションを構築するためのNoSQLベースのクラウドデータベースです。Firebaseへのクエリは複雑になりがちな問題などをCloud Firestoreを使うことで解決することができます。機能についての詳細ははこちらをみてください。

この記事ではVueとVuexとCloud Firestoreを使ってFirechatという簡単なリアルタイムチャットアプリケーションを実装します。 FirestoreをVue.jsアプリケーションで使う方法やVuexのベストプラクティスを見ていきます。 Githubでこの記事のソースコードを入手できます。

注：この記事は最初、Vue.js Developersのブログ（2017/10/16）に掲載されました。

インストール

vue-cliを使って新しいVueアプリケーションを足場で始めましょう。ここではwebpack-simpletemplateを使います。

$ vue init webpack-simple firechat

この後普及した演算子… async / awaitを使います。またステート管理のためにVuexを使用し、ランダムIDを生成するためにuuidを使用しますので、それらをインストールしておきましょう。 Firebaseモジュールも必要です。

$ npm install babel-plugin-transform-async-to-generator babel-plugin-transform-object-rest-spread Firebase babel-polyfill vuex uuid --save

次にプロジェクトのルートディレクトリで、.babelrcを次のように編集します。

これでスプレッド演算子の…とawait/asyncを使う事ができるようになります。ここから先に行く前にFirebaseに行き、アカウントを持っていない場合はサインアップしてください。作業を終えたら、[プロジェクトの追加]をクリックして名前を入力します。

そして「FirebaseをWebアプリケーションに追加」をクリックします。

configオブジェクトを取得し、以下のようにsrcの下にconfig.jsというファイルを作成します。 “test mode”を選択してください。これはFirestoreの学習用に使えます。これはあなたのデータベースが公開されることを意味するのでインターネット上にリンクを共有しないでください。

const config = {
  apiKey: "...",
  authDomain: "...",
  databaseURL: "...",
  projectId: "...",
  storageBucket: "",
  messagingSenderId: "..."
};export default config

Firebaseに戻ってデータベースタブの下にある”Try Firestore Beta”と”Start in Test Mode”をクリックすると、データベースへの更新をリアルタイムで見ることのできるUIに遷移します。

VuexにFirestoreのセットアップ

次にVuexとFirestoreのセットアップを行います。 srcフォルダの下にstoreと呼ばれるフォルダを作成し、index.jsを次のようにします：

次にmain.jsに行って、storeをインポートしてアプリ内にインポートします。

最後にApp.vue内のコンテンツを全て以下で置き換え、データベースにconsole.logを追加して、動作を確認します。

そしてnpm run devを叩いてサーバーを実行します。間違いがなければ、Firestore {__ob__：Observer}がコンソールに表示されます。これでFirestoreが設定され動作しているのが確認できました。

最初のデータをFirestoreに書き込む

初期データを作成しましょう。ここではFirestore APInのaddメソッドを使って書き込む事ができます。まず、srcにInitialize.vueというコンポーネントを作成します。このコンポーネントは、データを書き込むためのインタフェースを提供します。データの実際の作成はVuexストアで行われます。

後でデータを取得する時に使うget（）のメソッドのスタブも作りました。このアプリケーションには、conversations.jsとusers.jsの2つのVuexモジュールがあります。メッセージはconversations.jsの配列に保存されます。アプリケーションがますます大きくなる場合はmessages.js用のモジュールも作成しますが、この段階では不要です。

store内にconversations.jsとusers.jsを作成してください。

ユーザーのデータの書き込み

users.js内に次の行を追加します。

stateは単に状態を宣言するので、Vueがリアクティビティを追加することができます。 currentUserは誰かがログインしたことをシミュレートし、メッセージのsendプロパティを設定するために使用されます。

db.collection（ ‘users’）はFirestore APIの一部です。 Firestoreデータベースのコレクションへの参照を返します。存在しない場合作成されます（または文書を挿入するときに作成されます）。詳細はこちら：https://firebase.google.com/docs/firestore/data-model

Firestoreは新しいデータを追加するset（）メソッドを提供しています。ユニークな識別子を指定する必要があります。この場合、私は通常usernameと呼ばれるものを使用しています — mr_a, mr_bなど。ユーザーがfirstNameまたはlastNameを変更したとしても、識別されたユニークは同じままです。上記のコードでは、私もcurrentUserを状態に設定しました。これは後でメッセージを送信するときにsenderフィールドを設定するために使用されます。簡単です。

最初の会話のデータの書き込み

conversations.jsからいくつかのデータを書き込んで、もう少しFirestore APIを見てみましょう。

users storeに比べてもうちょっといろんな事が起こってますね。all にこのアプリの全ての会話が含まれています。

allIds には conversation.id の配列が入っています。最後に allMsgIds に