1.1　プロジェクト作成

　まずはじめに、プロジェクトを作成します。create-viteコマンドを利用しますが、事前にインストールする必要はなく、下記のコマンドを実行するとインストールからプロジェクトの作成まで一括して行います。また、ReactとTypeScriptを利用するので、react-tsテンプレートを指定しています。

yarn create vite --template react-ts

　プロジェクト名は自由に設定して構いませんが、ここではtestable-firebase-sample-chatとして進めていきます。

　以下のように、ディレクトリー配下にソースが生成されます。

　作成されたプロジェクトはnode_modulesがまだない状態なので、作成しましょう。

cd testable-firebase-sample-chat
yarn install

　yarn installが完了したら、yarn devでとりあえず動くようになっています。

1.2　Lint の設定

　次に、Lintの設定をしていきます。

　EslintとPrettierをインストールします。

yarn add --dev eslint prettier eslint-config-prettier
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@vitejs/plugin-react": "^1.3.0",
+   "eslint": "^8.19.0",
+   "eslint-config-prettier": "^8.5.0",
+   "prettier": "^2.7.1",
    "typescript": "^4.6.3",
    "vite": "^2.9.9"

　Eslintをインストールしただけでは設定がされていないため、以下のコマンドで設定ファイルを作成していきます。

yarn create @eslint/config

　コンソール上で設定に関する質問がされるので、以下のように指定していきます。

　・How would you like to use ESLint?

　　─To check syntax and find problems

　・What type of modules does your project use?

　　─JavaScript modules (import/export)

　・Which framework does your project use?

　　─React

　・Does your project use TypeScript?

　　─Yes

　・Where does your code run?

　　─Browser

　・What format do you want your config file to be in?

　　─JavaScript

　・The config that you've selected requires the following dependencies:
eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
Would you like to install them now?

　　─Yes

　・Which package manager do you want to use?

　　─yarn

　最後に、以下のライブラリーをインストールするか聞かれますので、インストールしましょう。

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest
@typescript-eslint/parser@latest

　インストールが終わり、.eslintrc.cjsファイルが作成されれば完了です。

// .eslintrc.cjs
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {},
};

1.3　Firebaseのインストール

Firebaseプロジェクトの作成

　Firebaseをアプリに組み込んでいきますが、まずはFirebaseプロジェクトを作成する必要があります。

　Firebaseコンソールにアクセスして、新規プロジェクトを作成しましょう。

　https://console.firebase.google.com

　プロジェクト名は任意ですが、ここでもtestable-firebase-sample-chatで進めていきたいと思います。

　今回Firebase Functionsを利用しますが、これはBlazeプラン(有料プラン)でしか利用できません。
プロジェクトを作成したら、プランをBlazeに上げましょう。

Firebase JavaScript SDKのインストール

　次に、Firebase JavaScript SDKを追加していきましょう。また、ローカルでfirebaseコマンドを利用するためのfirebase-toolsも追加します。firebase-toolsはプロジェクトを横断して利用することが多いので、グローバルにインストールするといいでしょう。

yarn add firebase
yarn global add firebase-tools

　インストールが完了したら、firebase initコマンドで初期化を行います。

firebase init

　ここでも対話形式で進むため、以下の選択をしていきます。

　・Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices.

　　─Firestore

　　─Functions

　　─Hosting

　　─Storage

　　─Emulator

　・Please select an option:

　　─Use an existing project

　　─先程作成したFirebaseプロジェクトを指定します。

　・What file should be used for Firestore Rules?

　　─firestore.rules

　・What file should be used for Firestore indexes?

　　─firestore.indexes.json

　・What language would you like to use to write Cloud Functions?

　　─TypeScript

　・Do you want to use ESLint to catch probable bugs and enforce style?

　　─Yes

　・Do you want to install dependencies with npm now?

　　─Yes

　・What do you want to use as your public directory?

　　─dist

　・Configure as a single-page app (rewrite all urls to /index.html)?

　　─Yes

　・Set up automatic builds and deploys with GitHub?

　　─No

　.firebasercやfirebase.jsonなどの設定ファイルが生成されたら完了です。

1.4　各種設定

import時のシンボル設定

　モジュール等をimportする際、相対パスではなくシンボルを利用した絶対パスを使えるようにします。

tsconfig.json

　compilerOptionsにbaseUrlとpathsを追加します。

  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
+   "baseUrl": "src",
+   "paths": {
+     "@/*": ["*"]
+   }
  },

vite.config.ts

　vite-tsconfig-pathsを使用して、シンボルでのパス解決をできるようにします。vite-tsconfig-pathsを追加して、vite.config.tsに設定します。

yarn add vite-tsconfig-paths
  // vite.config.ts
  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
+ import tsconfigPaths from 'vite-tsconfig-paths';

  // https://vitejs.dev/config/
  export default defineConfig({
-   plugins: [react()],
+   plugins: [react(), tsconfigPaths()],
  })

　これでsrcの代わりに@を指定することで、絶対パスでimportすることができるようになりました。

firebase.tsの作成

　src/lib配下に、Firebaseへの接続情報などを格納するファイルfirebase.tsを作成します。

　ここでは接続情報自体は.envファイルに記載し、Viteの環境変数を通じて設定するようにしています(Firebaseの接続情報は公開して問題ないものなので、必ずしも環境変数で秘匿する必要はありませんが、ここでは環境の切り替えを容易にするなどの目的で.envを利用しています)。

// src/lib/firebase.ts
import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env
    .VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
};

initializeApp(firebaseConfig);

　main.tsxで上記ファイルをimportします。先程設定した@を使うことで、絶対パスによるimportができていますね。

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App';
  import './index.css';
+ import '@/lib/firebase';

  ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
  ).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );

デプロイコマンドの追記

　package.jsonのスクリプトにdeployコマンドを追記しましょう。これでデプロイするとき、コマンドひとつでできるようになります。

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
+   "deploy": "yarn build && firebase deploy --except functions"
  },

　追記したら実際に叩いてみます。

yarn deploy

　実際のFirebase Hosting環境で、アプリの動作が確認できたら作業は完了です。