i18n(ja): Update environment-variables.md and part of configuring-ast…

…ro.md (withastro#2134)

src/pages/ja/guides/configuring-astro.md

@@ -106,6 +106,12 @@ export default defineConfig({
 })
 ```
 
+## 環境変数
+
+Astroは他のファイルをロードする前に設定ファイルを評価します。そのため、`import.meta.env`は使えず、また`.env`ファイルによってセットされた環境変数の取得もできません。
+
+設定ファイルの中で`process.env`を使用して、[CLIによりセットされた](/ja/guides/environment-variables/#cliの利用)ものなど、その他の環境変数の取得は可能です。
+
 ## 設定リファレンス
 
 📚 サポートされているすべての設定オプションの概要については、Astroの[API設定リファレンス](/ja/reference/configuration-reference/)を参照してください。

src/pages/ja/guides/environment-variables.md

@@ -2,66 +2,87 @@
 layout: ~/layouts/MainLayout.astro
 title: 環境変数
 description: Astroプロジェクトでの環境変数の使い方を学ぶ
+setup: import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 i18nReady: true
 ---
 
-Astroは環境変数にViteを使用しています。[Viteのいずれかの方法](https://vitejs.dev/guide/env-and-mode.html)で環境変数の取得や設定ができます。
+Astroは環境変数に関するViteの組み込みのサポートを利用しています。環境変数を扱うために[Viteが備える任意の方式](https://vitejs.dev/guide/env-and-mode.html)を使用できます。
 
 サーバ側のコードでは _すべて_ の環境変数が使えますが、クライアント側のコードではセキュリティのために`PUBLIC_`というプレフィックスを持つ環境変数のみが使えることに注意してください。
 
-ベストプラクティスについては、公式の[環境変数の例](https://github.com/withastro/astro/tree/main/examples/env-vars)をご覧ください。
-
-```ini
+```ini title=".env"
 SECRET_PASSWORD=password123
 PUBLIC_ANYBODY=there
 ```
 
 この例では、`PUBLIC_ANYBODY`（`import.meta.env.PUBLIC_ANYBODY`でアクセス可能）はサーバサイドでもクライアントサイドでも利用でき、`SECRET_PASSWORD`（`import.meta.env.SECRET_PASSWORD`でアクセス可能）はサーバサイドでのみ利用できます。
 
+:::caution
+`import.meta.env`と`.env`ファイルは[設定ファイル](/ja/guides/configuring-astro/#環境変数)の中では利用できません
+:::
+
 ## デフォルト環境変数
 
 Astroでは、いくつかの環境変数をすぐに利用できます。
 
-- `import.meta.env.MODE` (`development` | `production`): サイトが動作しているモードです。これは`astro dev`を実行している場合は`development`で、`astro build`を実行している場合は`production`になります。
-- `import.meta.env.BASE_URL` (`string`): あなたのサイトの配信元のベースURLです。これは、[`base`オプション](/ja/reference/configuration-reference/#base)によって決まります。
-- `import.meta.env.PROD` (`boolean`): あなたのサイトが本番環境で動作しているかどうかです。
-- `import.meta.env.DEV` (`boolean`): 開発中のサイトかどうかです（常に`import.meta.env.PROD`の反対）。
-- `import.meta.env.SITE` (`string`): プロジェクトの`astro.config`で指定された[`site`オプション](/ja/reference/configuration-reference/#site).
+- `import.meta.env.MODE`: サイトが動作しているモードです。これは`astro dev`を実行している場合は`development`で、`astro build`を実行している場合は`production`になります。
+- `import.meta.env.PROD`: あなたのサイトが本番環境で動作している場合は`true`となり、その他の場合は`false`となります。
+- `import.meta.env.DEV`: あなたのサイトが開発環境で動作している場合は`true`となり、その他の場合は`false`となります。常に`import.meta.env.PROD`の反対となります。
+- `import.meta.env.BASE_URL`: あなたのサイトの配信元のベースURLです。これは、[`base`オプション](/ja/reference/configuration-reference/#base)によって決まります。
+- `import.meta.env.SITE`: プロジェクトの`astro.config`で指定された[`site`オプション](/ja/reference/configuration-reference/#site)がセットされます。
 
 ## 環境変数を設定する
 
+### `.env`ファイル
+
 環境変数は、プロジェクトディレクトリの`.env`ファイルから読み込めます。
 
 また、`.env.production`や`.env.development`のように、ファイル名にモード(`production`または`development`)を付けることもできます。この場合、環境変数はそのモードでのみ有効になります。
 
 プロジェクトディレクトリに`.env`ファイルを作成し、そこにいくつかの変数を追加するだけです。
 
-```bash
-# .env
+```ini title=".env"
 # これはサーバー上で実行したときのみ有効です！
 DB_PASSWORD="foobar"
 # これはどこからでも呼び出せます！
 PUBLIC_POKEAPI="https://pokeapi.co/api/v2"
 ```
 
-```ini
-.env                # すべてのケースで読み込まれます。
-.env.local          # すべてのケースで読み込まれ、gitにはignoreされます。
-.env.[mode]         # 指定したモードのみで読み込まれます。
-.env.[mode].local   # 指定したモードのみで読み込まれ、gitにはignoreされます。
-```
+`.env`ファイルについてさらに知りたい場合は、[Viteのドキュメントを参照してください](https://vitejs.dev/guide/env-and-mode.html#env-files)。
+
+### CLIの利用
+
+プロジェクトの実行時に環境変数を追加することも可能です。
+
+<PackageManagerTabs>
+ <Fragment slot="yarn">
+    ```shell
+    POKEAPI=https://pokeapi.co/api/v2 yarn run dev
+    ```
+ </Fragment>
+ <Fragment slot="npm">
+    ```shell
+    POKEAPI=https://pokeapi.co/api/v2 npm run dev
+    ```
+ </Fragment>
+ <Fragment slot="pnpm">
+    ```shell
+    POKEAPI=https://pokeapi.co/api/v2 pnpm run dev
+    ```
+ </Fragment>
+</PackageManagerTabs>
+
+:::caution
+このようにセットされた変数は、クライアントサイドも含め、プロジェクトの任意の箇所から利用可能となります。
+:::
 
 ## 環境変数を取得する
 
 Viteでは`process.env`の代わりに、ES2020で追加された`import.meta`機能を使用した`import.meta.env`を使用します。
 
-:::tip[ブラウザサポートのことは心配しないでください！]
-Viteは`import.meta.env`の記述をすべて静的な値に置き換えます。
-:::
-
 例えば、環境変数`PUBLIC_POKEAPI`を取得するには、`import.meta.env.PUBLIC_POKEAPI`を使用します。
 
-```js
+```js /(?<!//.*)import.meta.env.[A-Z_]+/
 // import.meta.env.SSR === true のとき
 const data = await db(import.meta.env.DB_PASSWORD);
 
@@ -81,7 +102,7 @@ Viteは`import.meta.env`を静的に置き換えるので、`import.meta.env[key
 
 これを実現するには、`src/`に`env.d.ts`を作成し、`ImportMetaEnv`を以下のように設定します。
 
-```ts
+```ts title="src/env.d.ts"
 interface ImportMetaEnv {
   readonly DB_PASSWORD: string;
   readonly PUBLIC_POKEAPI: string;