6
Help us understand the problem. What are the problem?

posted at

updated at

【Firebase】ReactプロジェクトでFirebaseを扱う

概要

Reactのプロジェクトで、Firebaseを扱う方法をまとめます。
※ 処理をいくつかピックアップして記載していますが、ドキュメントが充実しているので、そちらを参照したほうがいいかもしれないです。

この記事は、以下のコースの受講に伴って、備忘録として書いています。詳しく知りたい方は、是非受講してみてください。

環境

  • Windows10
  • VSCode
  • npm

セットアップ

Firebaseプロジェクトの作成

  1. Firebaseのコンソールから、プロジェクトを追加します。
  2. アプリの種類を選択します。Webサービスを作成する場合は </> を選択します。 無題.png
  3. ⚙ - [プロジェクトを設定]で、SDKの設定と構成を確認しておきます。 無題1.png

インストール

VSCodeでアプリケーションのプロジェクトを開き、ターミナルで以下を実行します

Reactプロジェクトの作成
npx create-react-app . --template typescript
firebaseのインストール
npm i firebase

設定ファイルの作成

  1. プロジェクト直下に、環境変数ファイル.envを作成します。

無題2.png

.env
REACT_APP_FIREBASE_APIKEY="apiKey"
REACT_APP_FIREBASE_DOMAIN="authDomain"
REACT_APP_FIREBASE_DATABASE="https://PROJECT_ID.firebaseio.com"
REACT_APP_FIREBASE_PROJECT_ID="projectId"
REACT_APP_FIREBASE_STORAGE_BUCKET="storageBucket"
REACT_APP_FIREBASE_SENDER_ID="messagingSenderId"
REACT_APP_FIREBASE_APP_ID="appId"

Reactプロジェクトの場合、REACT_APP_としていすることで、自動的に環境変数として扱われます。
値は、FirebaseコンソールのSDKの設定と構成で確認したものを入力します。
REACT_APP_FIREBASE_DATABASE はコンソールに表示されていないので、アドレスの PROJECT_ID を置き換えた値を入力します。

  1. src配下に、環境変数を読み込んで、使用するインスタンスを返すファイルを作成します。
firebase.ts
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';

const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
    authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID
};

const firebaseApp = firebase.initializeApp(firebaseConfig);

export const db = firebaseApp.firestore();
export const auth = firebaseApp.auth();
export const storage = firebaseApp.storage();
export const provider = new firebase.auth.GoogleAuthProvider();

ここでは、データベース(db)、認証(auth)、ストレージ(storage)、googleアカウント認証(provider)のインスタンスをexportしています。

認証

認証の設定

Firebaseコンソールの [Authentication] で、使用する認証方法を有効にします。
無題3.png

ログイン・ログアウトの処理

ログイン
const signInEmail = async () => {
    await auth.signInWithEmailAndPassword(email, password);
};

ドキュメント:ログイン

新規登録してログイン(レジスター)
const signUpEmail = async () => {
    await auth.createUserWithEmailAndPassword(email, password);
};

ドキュメント:レジスター

Googleアカウントでログイン
const signInGoogle = async () => {
    // ポップアップでgoogleのサインインを表示する
    await auth.signInWithPopup(provider).catch(err => alert(err.message));
};

ドキュメント:Googleログイン

ログアウト
auth.signOut()

ドキュメント:ログアウト

ユーザーに関する処理(あれこれ)

こちらの ドキュメント では、以下の操作をする場合の説明があります。

  • ユーザーを作成する(上記のレジスター)
  • 現在ログインしているユーザーを取得する
  • ユーザーのプロフィールを取得する
  • ユーザーのプロバイダ別のプロフィール情報を取得する
  • ユーザーのプロフィールを更新する
  • ユーザーのメールアドレスを設定する
  • ユーザーに確認メールを送信する
  • ユーザーのパスワードを設定する
  • パスワードの再設定メールを送信する
  • ユーザーを削除する
  • ユーザーを再認証する

ストレージ

ストレージの設定

Firebaseコンソールの [Storage] から、デフォルトストレージを作成します。
無題4.png

アップロード・保存したファイルのパスの取得

アップロード
// testフォルダに画像を保存する(フォルダがない場合は自動で作成される)
await storage.ref(`test/${fileName}`).put(inputImage);

こちらの例では、ストレージのtestフォルダを参照し(ない場合は作成し)、fileNameという名前でinputImageをアップロードします。
fileNameのファイルがすでにストレージに存在する場合は上書きされるので、一意な名前をつける必要があります。(Tips参照)

URL取得
url = await storage.ref('test').child(fileName).getDownloadURL();

Tips

疑似的な一意な文字列を作成する

let S = [...Array(26)].map((_, i) => String.fromCharCode(i + 97)).join(''); // a-z
S += S.toUpperCase(); // A-Z
S += '0123456789'; // 0-9
const N = 16; // 文字数
const randomChar = Array.from(crypto.getRandomValues(new Uint32Array(N)))
        .map(n => S[n % S.length])
        .join('');

この例では、a-z A-Z 0-9の文字列に対し、ランダムに16個を連結した文字列を作成します。

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
6
Help us understand the problem. What are the problem?