React強化月間　19日目

今日も朝から何も進まず気づけば17時。
Firebaseにホスティングは出来たけどFirestoreの紐づけがうまくいかず絶望していましたが・・・なんとかうまくいきました！

.env

もうenvファイルが大っ嫌いなんですが、envファイルが原因でした。

環境変数直接入力　→　読み取れる
envで隠す　→　読み取れない

gptに聞いたVITE_FIREBASE_API_KEYという書き方でやってもうまくいかず、途方に暮れていましたが、原因はファイル名を「firebase.env」にしていたことでした。

`firebase.env` という名前の環境ファイルを使用すること自体は問題ありませんが、Vite はデフォルトで `.env` または `.env.*` 形式のファイルを探します。そのため、Vite が `firebase.env` ファイルを自動的に読み込むことはありません。

環境変数を Vite に読み込ませるためには、ファイル名を変更するか、Vite の設定で明示的に指定する必要があります。以下にその方法を説明します。

### 方法 1: ファイル名を `.env` に変更する

最も簡単な方法は、環境変数ファイルの名前を Vite が自動的に読み込む形式に変更することです。例えば、`.env`、`.env.local`、`.env.production` などの名前を使用します。

`firebase.env` ファイルを `.env` に名前を変更します：

### 方法 2: Vite の設定で環境ファイルを指定する

もしファイル名を変更したくない場合、Vite の設定ファイルで `dotenv` パッケージを使用して環境変数ファイルを読み込むことができます。

まず、`dotenv` パッケージをインストールします：

```bash
npm install dotenv
```

次に、`vite.config.ts` ファイルを編集して `dotenv` を使用して `firebase.env` ファイルを読み込むようにします：

```typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import dotenv from 'dotenv';
import { resolve } from 'path';

// 環境変数ファイルを読み込む
dotenv.config({ path: resolve(__dirname, 'firebase.env') });

export default defineConfig({
plugins: [react()],
});
```

このようにすることで、`firebase.env` ファイルに記述された環境変数が `import.meta.env` でアクセスできるようになります。

### まとめ

1. `firebase.env` ファイルの名前を `.env` に変更するのが最も簡単です。
2. 名前を変更したくない場合、`vite.config.ts` で `dotenv` パッケージを使用して環境変数を読み込むように設定します。

これらの手順に従うことで、環境変数が正しく読み込まれ、`import.meta.env` を使用してアクセスできるようになります。

自分が今までパソコンを触ってきた中でファイル名を「.env」という拡張子のみのファイル名をつけるという発想が頭にありませんでした。
そんなファイル存在するんですね・・・

上記のように.envにしたらうまくenvをviteが自動読み込みして上手くいきました。

誰かに聞けばすぐの話かもしれませんが、なぜかと順を追って一つ一つ原因をつぶしてたどり着くことに意味があると思うのでまた一歩成長出来てたらいいな、と思います。

これでやっと先に進める・・・

無料分＼(^o^)／

1日の読み取りの無料限界に達しました。
恐らくuseEffectの条件で無限読み取りが発生したのでしょう。

従量課金プランだったらどうなっていたのか・・・

これもまた勉強ですね。