Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
18
Help us understand the problem. What is going on with this article?
@torahack

Firebase+React+Reduxで多機能チャットを実装しよう【環境準備編】

More than 1 year has passed since last update.

Firebase+React+Reduxで多機能チャットを実装しよう【環境準備編】

ガイド

TL;DR

FirebaseとReactを使って、メッセージを送り合う簡単なチャットアプリの解説記事はいくつか見かけますよね。

だけど、実務で使うチャットアプリならもっと複雑なはず。

そこで以下7つの機能を持つチャットアプリを実装しました。

  1. リアルタイムチャット
  2. ログイン機能
  3. チャットルームの作成
  4. チャットルームの削除
  5. チャットルームから退出
  6. チャットルームメンバー変更(追加/削除)
  7. チャットルーム名とアイコンの設定

デザインは、イケてるアプリ風にできるMaterial-uiにお任せした。

デモ動画

FirebaseとReactで開発するための環境構築

Firebase、React、Reduxを使って開発していくための環境を構築します。

Node.jsとnpmのインストール

create-react-appを使うためには以下のバージョンが必要です。

  • Node.js 8.10 以上
  • npm 5.6 以上

上記を満たしていない方は、以下記事を参考にインストール or アップデートしておいてください。

macOSにHomebrewをインストール
Node.js / npm をインストール (Mac環境)
Node.jsとnpmをアップデートする方法

React関連モジュールのインストール

Reactの環境をイチから構築するのは面倒です。
そこでcreate-react-appを使います。

create-react-app

以下のコマンドでcreate-react-appしてください。

npx create-react-app react-chat

※npmでグローバルインストールしたcreate-react-appは非推奨になりました。
過去にインストールしたことがある場合は、以下コマンドでアンインストールしておきましょう。

npm uninstall -g create-react-app

"react-chat"というフォルダが作成されます。
Reactの開発環境が作られています。(簡単すぎて感激)

npm startしてブラウザ画面が表示されることを確認しましょう。

npm start

スクリーンショット 2019-12-09 15.44.13.png

その他モジュールのインストール

Reduxとmaterial-uiに必要なモジュールをインストールします。

npm install --save redux react-redux redux-actions immer  @material-ui/core @material-ui/icons

Firebaseとの紐付け

Firebaseとの紐付けを行なっていきます。

1. Firebaseプロジェクトの作成

Firebase Consoleからプロジェクトを作成します。
今回は"react-chat"という名前にしました。
スクリーンショット 2019-12-06 16.36.37.png
Analyticsを使うかどうか聞かれますが、どちらでも良いです。
使う場合はGoogle Analyticsのアカウントが必要になります。

次へ次へと進めてプロジェクトを作成。
スクリーンショット 2019-12-06 16.37.04.png
プロジェクトが作成されたら、</>マークをクリックしてWebアプリを追加しましょう。
スクリーンショット 2019-12-06 16.54.01.png
アプリ名はなんでも良いです。

「このアプリのFirebase Hostingも設定します。」にチェック。
スクリーンショット 2019-12-06 16.55.02.png

次へ次へと進めてデプロイ完了させてください。

※モジュールインストールやログインなど基本的なところは割愛。
公式ドキュメントが詳しいです。

2. configファイルの作成

まず、Firebaseモジュールをインストールします。

npm install firebase --save

Firebaseコンソールから[歯車ボタン] > [プロジェクトと設定] > [全般]の下部 [Firebase SDK snippet] > [構成]をチェック
で以下のような構成をコピーできます。

firebaseフォルダとconfig.jsファイルを作成してペーストしてください。

src/firebase/config.js
export const firebaseConfig = {
    apiKey: "YOUR-API-KEY",
    authDomain: "YOUR-PROJECT-ID.firebaseapp.com",
    databaseURL: "https://YOUR-PROJECT-ID.firebaseio.com",
    projectId: "YOUR-PROJECT-ID",
    storageBucket: "YOUR-PROJECT.appspot.com",
    messagingSenderId: "xxxxxxxxxx",
    appId: "x:xxxxxxxxxxx:web:xxxxxxxxxxxxxxxxxx",
    measurementId: "G-XXXXXXXXX"
};

index.jsファイルを作成して、設定をexportします。

src/firebase/index.js
import firebase from 'firebase';
import { firebaseConfig } from './firebase/config.js';

export const firebaseApp = firebase.initializeApp(firebaseConfig);
export const database = firebaseApp.database();

3. Firebase init

initする前に、デフォルトリソースロケーションを選択しましょう。
(これ設定しておかないと、後から怒られます。)

設定ボタンから[プロジェクトの設定]をクリックします。
スクリーンショット 2019-12-06 17.40.12.png

スクリーンショット 2019-12-06 17.38.56.png

コンソールでfirebase initを実行します。

どのプロダクトを使うか選択。
今回はDatabase, Hosting, Storageの3つです。
スクリーンショット 2019-12-06 17.44.49.png

プロジェクトの選択では、[Use an existing project] > [react-chat]を選択。

基本はEnterで進めていきます。

public directoryは"build"に変更してください。
また、single-page appとして設定しましょう。
スクリーンショット 2019-12-06 17.45.25.png

これでFirebaseの設定は完了です。

4. Firebase Hostingにデプロイ

ビルドしてデプロイします。

npm run build
firebase deploy

Firebase Hostingの公開先URLにアクセスしてnpm startの時と同じ画面が表示されることを確認しましょう。

スクリーンショット 2019-12-09 15.44.13.png

次はFirebaseとReactとReduxで多機能チャットを実装しよう【メッセージ編】です。
(現在編集中)

参考記事

React & Firebaseで簡単なChatアプリを作ってみた

『React』 +『Redux』 + 『Firebase』でLINE風のChat機能を作ろう! 【準備編】

新しい React アプリを作る – React

18
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
torahack
インフラエンジニア3年→Webフロントエンジニア1年目 Python(スクレイピング, Flask, Django) Javascript(Node.js/React) AWS(Lambda, DynamoDB, API Gatewayなどサーバーレス) Firebase全般

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
18
Help us understand the problem. What is going on with this article?