# react-native: 本番環境と開発環境
URL: https://generaltranslation.com/ja/docs/react-native/concepts/environments.mdx
---
title: 本番環境と開発環境
description: 本番環境と開発環境の違い
---

{/* 自動生成: 直接編集しないでください。代わりに、content/docs-templates/ 内のテンプレートを編集してください。 */}


## 概要

`gt-react-native` の動作は、React アプリケーションの実行環境によって異なります。

環境は、`NODE_ENV` 環境変数を確認して判定します。

## 本番環境での挙動

### 環境変数

本番環境で許可される環境変数は、`GT_PROJECT_ID` のみです (`NEXT_PUBLIC_GT_PROJECT_ID` のような接頭辞付きのものを含みます) 。

API キーが環境変数として指定されている場合、`gt-react-native` はエラーをスローします。これは、API キーがクライアントに露出するのを防ぐためです。

### 翻訳の読み込み挙動

本番環境では、`gt-react-native` のプロバイダーはデフォルトで General Translation CDN から翻訳を読み込みます。

`loadTranslations` 関数を使ってローカル翻訳などのカスタムの翻訳読み込み挙動を設定している場合、`gt-react-native` は代わりにそちらを使用します。

本番環境では、翻訳のホットリロードは無効です。

## 開発時の動作

### 環境変数

開発環境はローカルで動作し、外部ユーザーに公開されないため、`gt-react-native` は `NEXT_PUBLIC_` や `VITE_` (または同様のプレフィックス) が付いたものも含め、任意の General Translation 環境変数を受け入れます。

### 翻訳の読み込み挙動

開発環境では、`gt-react-native` のプロバイダーはまず本番環境と同じ方法で翻訳の読み込みを試みます。
これらの翻訳はメモリに読み込まれます。

デフォルト言語とは異なる言語で (`useGT`、`<T>`、または `useTranslations` を使用する) コンポーネントをレンダリングする際、`gt-react-native` のプロバイダーは次の処理を行います。

1. 指定されたコンテンツに対して有効な保存済み翻訳が見つかれば、その翻訳をレンダリングします。
2. 翻訳が見つからない場合は、General Translation API を通じてコンテンツの動的翻訳を試みます。
3. 翻訳後、その結果をレンダリングし、今後の利用に備えてメモリに保存します。
4. 翻訳がタイムアウトした場合は、フォールバックして元のコンテンツをレンダリングします。

<Callout type="info">
  API 側でも開発用翻訳を内部的に短時間キャッシュしているため、同じ翻訳が再度リクエストされた場合はキャッシュから返されます。

  これらの翻訳はプロジェクト単位で分離されているため、他のプロジェクトの翻訳と混在することはありません。
  また、このキャッシュは開発セッションごとに固有であるため、キャッシュされた翻訳が本番環境で使われることはありません。
</Callout>

`gt-react-native` は、`useGT`、`<T>`、または `useTranslations` を使用するコンポーネントの変更を検出し、変更されたコンテンツを API 経由で動的に翻訳します。

## 本番用 API キーと開発用 API キー [#api-keys]

`gt-react-native` の本番環境と開発環境での挙動を区別しやすくするため、「本番用 API キー」と「開発用 API キー」という概念があります。

### 本番用 API キー

本番用 API キーは、`gtx-api-` で始まる API キーです。

本番用 API キーを指定すると、`gt-react-native` は [本番環境での挙動](#production-behavior) セクションで説明しているとおりに動作します。

つまり、React アプリケーションを開発モードで実行していても、本番用 API キーを指定した場合、`gt-react-native` は本番環境で実行されているかのように動作します。
翻訳のホットリロードは無効になり、翻訳がないコンポーネントは元の内容をレンダリングします。

この挙動を除けば、`gt-react-native` が本番用 API キーを利用することはありません。

<Callout type="info">
  本番環境にデプロイする際に別の本番用 API キーを作成していただくのは、CLI ツールが本番用 API キーにしかアクセスしないためです。

  CLI ツールは、「production」カテゴリとして課金とレート制限を適用します。
</Callout>

### 開発用 API キー

開発用 API キーは、`gtx-dev-` で始まる API キーです。

開発用 API キーを指定すると、`gt-react-native` は [開発時の動作](#development-behavior) セクションで説明しているとおりに動作します。

開発用 API キーを使用する場合、課金とレート制限は「development」カテゴリとして適用されます。

<Callout type="warn">
  開発用 API キーで作成された翻訳は保存されず、本番環境では利用できません。

  開発用翻訳は、本番環境にリリースする前にアプリケーションをテストできるようにするためのものです。
</Callout>