チャット機能構築チュートリアル

自己紹介

プログラミング講師の飼鳥晴康(@hathle)です。

エンジニア歴は10年以上で海外(カナダ)就労も経験しています。

カナダでは、映画を作っていました。

現在は、独立して、Python、Djangoをメインにオンラインでマンツーマンレッスンをしています。

お問い合わせなどは、Twitter(@hathle)からお願いいたします。

プログラミングは人生を変えることができます。

目標に向かって、一緒に頑張っていきましょう！！

はじめに

Vue.js + Firebaseを使用して、チャット機能構築しましょう。

目標

・Firebaseのデータベース(Firestore)を使用する方法を学習
・リアルタイムチャット機能を構築

機能

・リアルタイムチャット

前提知識

Vue.jsを始める前に、JavaScriptは学習しておいて下さい。

・JavaScript

では、始めて行きましょう！！

準備

認証機能を使用しますので、認証機能チュートリアルを済ませて、サインアップ、ログイン、ログアウト機能を構築しておいてください。

インストール

チャット機能で使用するプラグインをインストールします。

$ npm install vue-chat-scroll moment

Firebase設定

Firebaseのデータベース(Firestore)を使用するので、init.jsを変更します。

Firebaseの設定はまとめて、init.jsファイルに記載することにします。

src/firebase/init.js

import firebase from "firebase/app";
import "firebase/firestore";

var firebaseConfig = {
  apiKey: "xxx",
  authDomain: "xxx",
  databaseURL: "xxx",
  projectId: "xxx",
  storageBucket: "xxx",
  messagingSenderId: "xxx",
  appId: "xxx"
};

const firebaseApp = firebase.initializeApp(firebaseConfig);

export default firebaseApp.firestore();

コード解説

firebaseの設定は、init.jsにまとめておきます。

スクロールプラグイン設定

チャット画面のスクロールで便利なプラグインvue-chat-scrollを使用できるようにしておきます。

vue-chat-scrollは自動的にスクロールしてくれるプラグインです。

src/main.js

import Vue from "vue";
import App from "./App";
import router from "./router";
import vuetify from "./plugins/vuetify";
import firebase from "firebase";
import VueChatScroll from "vue-chat-scroll"; // 追加

Vue.use(VueChatScroll); // 追加

Vue.config.productionTip = false;

let app = null;

firebase.auth().onAuthStateChanged(() => {
  if (!app) {
    app = new Vue({
      router,
      vuetify,
      render: h => h(App)
    }).$mount("#app");
  }
});

コード解説

Vue.use関数を使用することでVueでプラグインが使用できるようになります。

Vue.use(VueChatScroll);