チャット機能構築チュートリアル
見出し画像

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

自己紹介

プログラミング講師の飼鳥晴康(@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);

この続きをみるには

この続き: 10,935文字 / 画像1枚

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

飼鳥 晴康 / プログラミング講師

500円

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
飼鳥 晴康 / プログラミング講師

最後まで読んでいただきありがとうございました😃 サポートは、プログラミングチュートリアル開発の手助けとなります。 シェアもして頂くと嬉しいです。 Twitterのフォローもお願いします。 https://twitter.com/hathle

「スキ」がとても励みになります😍ありがとうございます。
日本で組み込みエンジニア、Webエンジニアとして働いた後、バンクーバー、モントリオールのVFX業界でPipeline TDとして映画を作っていました。 帰国後、独立しプログラミング講師として、Django、Vue.jsのチュートリアル教材を開発しています。 宜しくお願いします。