Firebase Local Emulator Suiteを使う

# Firebase Local Emulator Suiteについて


firebaseを開発環境で繋げてる時、クレジットカード登録しているし、使いすぎたら怖くない？？
ローカル環境で、firebase使えたらいいなーーーー。
そんな時に使えるのが、``Firebase Local Emulator Suite``です

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/712534/48669c2a-39e4-7913-2f92-0d7a821b6893.png" width="500">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/712534/1904c597-9be7-4e5c-c0e4-79a57e55052f.png" width="500">

>Firebase Local Emulator Suite は、アプリのビルドとテストをローカルで行うことのできる、デベロッパー向けの高度なツールセットです。使用できる機能には、Cloud Firestore、Realtime Database、Cloud Storage for Firebase、Authentication、Firebase Hosting、Cloud Functions（ベータ版）、Pub/Sub（ベータ版）、Firebase Extensions（ベータ版）があります。充実したユーザー インターフェースを備えており、アプリの本稼働やプロトタイピングにかかる時間を短縮できます。
-- <cite>[Firebase ローカル エミュレータ スイートの概要](https://firebase.google.com/docs/emulator-suite?hl=ja)</cite>

>The Firebase Local Emulator Suite is a set of advanced tools for developers looking to build and test apps locally using Cloud Firestore, Realtime Database, Cloud Storage for Firebase, Authentication, Firebase Hosting, Cloud Functions (beta), Pub/Sub (beta), and Firebase Extensions (beta). It provides a rich user interface to help you get running and prototyping quickly.
-- <cite>[Introduction to Firebase Local Emulator Suite](https://firebase.google.com/docs/emulator-suite?hl=en)</cite>

## Get Started
<iframe width="560" height="315" src="https://www.youtube.com/embed/pkgvFNPdiEs?si=bwbYzJ47Vnl276ZM&amp;start=96" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>



## インストールのやり方について
インストール方法については、公式ドキュメントに従ってやっていきます。
[公式ドキュメント](https://firebase.google.com/docs/emulator-suite/install_and_configure?hl=ja#install_the_local_emulator_suite)
>Emulator Suite をインストールする前に、以下が必要です。
>Node.js バージョン 16.0 以降。
Java JDK バージョン 11 以降。

>Emulator Suite をインストールするには:
>1.Firebase CLI をインストールします。Firebase CLI をまだインストールしていない場合は、インストールしてください。Emulator Suite を使用するには、CLI バージョン 8.14.0 以降が必要です。次のコマンドを使用して、インストールしたバージョンを確認できます。

```
firebase --version
```

>2.まだ行っていない場合は、画面の指示に従って使用するサービスを指定し、現在の作業ディレクトリを Firebase プロジェクトとして初期化します。
```
firebase init
```

>3.Emulator Suite を設定します。このコマンドにより構成ウィザードが起動します。目的のエミュレータを選択し、対応するエミュレータのバイナリ ファイルをダウンロードして、デフォルトが適切でない場合はエミュレータ ポートを設定します。
```
firebase init emulators
```
>エミュレータがインストールされると、Firebase CLI のバージョンを更新するまで、アップデートのチェックは行われず、追加の自動ダウンロードも行われません。

## 試しにAuthenticationを使ってみる
まずは、emulatorは無視して、[公式ドキュメント](https://firebase.google.com/docs/web/setup?hl=ja)通りに、firebaseのセットアップをしてください。

- セットアップ時に以下のようにコードを記述しているはずです。
```js
import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
}
```


## ローカルでAuthenticationを使えるようにしよう
```js
import { initializeApp } from 'firebase/app';
import { getAuth, connectAuthEmulator } from "firebase/auth";   // 追加
// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

// 以下を追加
const isEmulating = window.location.hostname === "localhost";
  if (isEmulating) {
    const auth = getAuth(app);
    connectAuthEmulator(auth, "http://localhost:9099/auth");  // port番号は、自身で設定したものを用いる
  }
```

これで準備完了

- 入力フォームを作成(vueで記述しているが、環境に合わせて、書き直してください)
```html:html
<form @submit.prevent="handleRegister">
  <p>新規登録</p>
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" v-model="email" required>

  <label for="password">パスワード:</label>
  <input type="password" id="password" v-model="password" required>

  <button type="submit">新規登録</button>
</form>
```

- javascriptのコードは以下のようになります。
```ts:ts
import { ref } from 'vue';
import { createUserWithEmailAndPassword, getAuth } from "firebase/auth";

const email = ref('');
const password = ref('');


const handleRegister = () => {
  // 新規登録の処理をここに追加
  const auth = getAuth();
  createUserWithEmailAndPassword(auth, email.value, password.value)
  .then((userCredential) => {
    // Signed in
    authUser.value = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });
};

```

以上で、ローカル環境でfirebaseを使えるようになりました。
公式ドキュメントを参考にfirestoreなどもお試しください。

### 快適なfirebase開発を🖐️

## 参考サイト
- [The Local Firebase Emulator UI in 15 minutes](https://www.youtube.com/watch?v=pkgvFNPdiEs&t=96s)
- [Firebase ローカル エミュレータ スイートの概要](https://firebase.google.com/docs/emulator-suite?hl=ja)
- [firebase emulatorインストール公式ドキュメント](https://firebase.google.com/docs/emulator-suite/install_and_configure?hl=ja#install_the_local_emulator_suite)
- [firebase 公式ドキュメント](https://firebase.google.com/docs/web/setup?hl=ja)