【2023最新版】Vue3 & Firebase連携方法(create-vueからFirebase連携まで完全解説👏)

はじめに

「Vue３のプロジェクト作成方法が分からない🥺」
「プロジェクト作成時の英語の意味が分からない！」
「Firebaseとの適切な連携方法が分からない😭」

そんな悩みはないでしょうか?

今回は、Vue3プロジェクト作成からFirebase連携方法までを画像付きで解説させていただきます！
この記事の方法を真似することで、プロジェクト作成時のルーティン作業が楽になります；）

npm init vue@latestで作成すると、プロジェクトにViteが標準搭載されるので、Viteでの環境での.envの使用方法も一緒に、firebaseとの連携方法まで解説させていただきます🙇‍♂️

この記事を見るメリット

Vue3のプロジェクト作成方法が理解できる
Firebaseのプロジェクト作成・連携方法がわかる
Vite使用時の.envの使用方法が理解できる

対象者

この記事は下記のような人を対象にしています。

プログラミング初学者
駆け出しエンジニア
Vue.js学習中の方
フロントエンドエンジニア
Firebaseでバックエンドは楽をしたい方

結論

Githubで公開することも想定して、Firebaseのキーなどの値は.envで管理するようにしよう！

解説

それではVueのプロジェクト作成から、Firebase連携までを解説していきます！

Vueプロジェクト作成

ターミナルを開き、cdコマンドでVueのプロジェクトを作成したいフォルダまで移動し、以下のコマンドを実行します。

npm init vue@3

もしくは

npm init vue@latest

すると以下の質問が順に表示されるので、一つずつ答えていきます。
ここではプロジェクト名や、最初からインストールしておくライブラリなどを選択することができます。

? Project name: › 
? Add TypeScript? › No / Yes
? Add JSX Support? › No / Yes
? Add Vue Router for Single Page Application development? › No / Yes
? Add Pinia for state management? › No / Yes
? Add Vitest for Unit Testing? › No / Yes
? Add an End-to-End Testing Solution? › - Use arrow-keys. Return to submit.
❯   No
    Cypress
    Playwright
? Add ESLint for code quality? › No / Yes

また初回作成時にcreate-vueのパッケージをインストールしていない場合、以下の質問が表示されますが、yでインストールしましょう。

Need to install the following packages:
  create-vue@3
Ok to proceed? (y)

質問内容について

質問内容についても解説します！
質問について特に疑問などがない方は次のステップに進んで大丈夫です。

? Project name: ›

プロジェクト名を入力します。
ここで入力した名前がプロジェクト作成時のフォルダ名にもなります。
ここで半角英数字以外を入力すると、パッケージの名前をどうするかを聞かれるので、統一のため半角英数字だけを入力するようにしましょう！

? Add TypeScript?

TypeScriptを導入するかを選択できます。

? Add JSX Support?

JSXを導入するかどうかを選択出来ます。

? Add Vue Router for Single Page Application

Vue Routerを導入するかどうかを選択できます。
SPAを使用したアプリを作成する場合は始めから導入できるので楽ですね。

? Add Pinia for state management?

VueXとはまた別のGlobal State ManagementライブラリであるPiniaを導入するかどうかを選択できます。(任意)
プロジェクトが大規模になり、propsやemitで値の管理が難しくなる場合は、入れておくと楽できます。

? Add Vitest for Unit Testing?

Jestとは別の、ViteベースのテスティングフレームワークであるVitestを導入するかを選択できます。

Add an End-to-End Testing Solution?

どのE２Eテストフレームワークを使用するかを選択できます。
E2Eテストとは、エンドユーザーが実際に指定した動作をした場合に、どういった処理になるかをテストすることができます。
導入しない場合はNoで大丈夫です。

? Add ESLint for code quality?**

ESLintを導入するかを選択できます。
チーム開発や、コードのフォーマットを統一したい場合は、初期設定のままでも導入した方がいいと思います。
ESLintエラーにうんざりしている人はNoでも大丈夫です。
Yesを選択すると以下のPrettierのインストールをするかどうかも質問されます。
? Add Prettier for code formatting? › No / Yes

Firebaseのプロジェクト作成

Firebaseコンソールに移動し、プロジェクトを追加をクリックします。

プロジェクト名

Firebaseで管理する際のプロジェクト名を入力します。
Vueで作成した際のプロジェクト名を統一するとわかりやすいと思います。

アナリティクス設定

Googleアナリティクスを設定できます。
とりあえず設定しておけば、本番運用した際に、アナリティクスのレポートを確認できるので便利です！

アナリティクスの構成設定

アナリティクスの設定をONにした場合に表示されます。
各アプリごとに管理したい場合は、新しく構成を作成してもいいですが、学習目的であればデフォルトでも大丈夫です！

Webとの連携

今回はVueで使用するので、以下画像の通りに</>のマークであるウェブを選択します。

アプリのニックネーム

Firebase コンソールでアプリを表す名称として使用されます。
ユーザーにニックネームは表示されないので、自分やチームにわかりやすい名称であれば自由に設定して問題ないです！

Firebase SDK追加用のscriptを確認

以下の値が連携の際、特に重要です。
赤枠内の値はFirebase側がプロジェクトをを識別するために発行した値です。
いつでもコピーできますが、Vueとの連携の際に使用するのでどこかにコピーしておきましょう！

ここまできたら、コンソールに進むボタンを押すなどして、前画面へ戻っても大丈夫です。

VueプロジェクトからFirebaseへ連携

ここからは先ほど作成したFirebaseプロジェクトへVueから適切に連携する方法を解説します。

.envの作成

安全に管理するためにプロジェクトのディレクトリ直下に.envファイルを作成します。

セキュリティ上APIキーを公開すると第三者からFirebaseにアクセスできてしまうので、githubに上げる場合や、チームで開発するなら、必ずAPIキーなどは環境変数として管理した方が安全といえます。

作成できたら、先ほどコピーした以下画像の値を、プロジェクト識別用の値を環境変数として定義します。
前の項目の際にコピーしていなくても、Firebaseのプロジェクト内のトップページで、プロジェクト名下のアプリのニックネームをタップすると、値を確認することができます。

作成した.envへ以下の通りに記述します。

VITE_API_KEY="ここにapiKeyの値をコピー"
VITE_AUTH_DOMAIN="ここにauthDomainの値をコピー"
VITE_PROJECT_ID="ここにprojectIdの値をコピー"
VITE_STORAGE_BUCKET="ここにstorageBucketの値をコピー"
VITE_MESSAGING_SENDER_ID="ここにmessagingSenderIdの値をコピー"
VITE_APP_ID="ここにappIdの値をコピー"
VITE_MEASUREMENT_ID="ここにmeasurementIdの値をコピー"

create-vueでプロジェクトを作成した場合、Viteが既に導入されているので、Viteのルールとして環境変数定義時に必ずMARKDOWN_HASH2df53b6df925df1b4caaccb891c04e8eMARKDOWNHASHをつける必要があります。
理由としては、環境変数が誤ってクライアントに漏れてしまうことを防ぐために、VITE から始まる変数のみが Viteで処理されるようになっています。

※githubなどにコードを上げる場合は.gitignoreに.envを追加することで、git上に上がらなくなります。

firebaseパッケージインストール

firebase関連のプロパティを使用するために、パッケージをインストールします。
ターミナルからプロジェクトのディレクトリへcdで移動し、以下のコマンドを実行することで、プロジェクト内にインストールされます。

npm install firebase --save

firebase.jsの作成

.envの値を使用してVueからFirebaseへ連携するためのscriptを以下のように記述します。
プロジェクトディレクトリ内のsrc直下にfirebaseディレクトリを作成し、firebase.jsを作成します。
.envの値はimport.meta.envで取得することができます！

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_APP_ID,
  measurementId: import.meta.env.VITE_MEASUREMENT_ID,
};

// firebaseConfigの値を元にfirebaseの初期化
const app = initializeApp(firebaseConfig);
// アナリティクスの初期化
getAnalytics(app);

連携の確認

VueとFirebaseが連携できているかを確認します。
使用するコンポーネント内や汎用クラスファイルなどで読み込むのが適切ですが、今回は連携のテストということで、src/main.jsでfirebase.jsをインポートします。

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

import "./assets/main.css";
import "./firebase/firebase"; // ⇦ここ追加

const app = createApp(App);

app.use(router);

app.mount("#app");

記述を追加したらプロジェクト内のコンソールで、以下のコマンドを実行してローカル環境で動作を確認します。

npm run dev

以下のように、Vueプロジェクト作成時の画面が表示され、consoleにfirebaseのエラーなどが特になければ連携成功です！！！
![](https://storage.googleapis.com/zenn-user-upload/71c71b077b17-20221023.png =1000x)