# General Translation React SDKs (gt-react, gt-next): loadTranslations
URL: https://generaltranslation.com/ja/docs/react/reference/functions/load-translations.mdx
---

title: loadTranslations
description: General Translation の gt-react で、本番環境における翻訳の読み込み方法をカスタマイズします。loadTranslations の API リファレンス。

---

`loadTranslations` は、本番環境で `gt-react` が翻訳をどこから読み込むかをカスタマイズするために、自分で定義する loader 関数です。デフォルトの General Translation CDN 以外の取得元から翻訳を読み込むには、これを[初期化呼び出し](/docs/react/reference/config#initialization)に渡します。

*`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` に適用されますが、組み込み方法は異なります。`loadTranslations` はエクスポートされるシンボルではなく、自分で定義する loader です。`gt-react` と `gt-tanstack-start` では、これを初期化呼び出し (以下) に渡します。`gt-next` では `withGTConfig` プラグイン (Next.js セクションで説明) を通じてこれを解決し、`gt-react-native` では provider のセットアップを通じて翻訳を読み込みます。このページで説明する loader の仕様は、どの環境でも共通です。*

## 概要 [#overview]

ロケールを受け取り、そのロケールの翻訳を返す関数を定義し、[`initializeGT`](/docs/react/reference/config#initialize) の `loadTranslations` オプションに渡します。シングルページアプリの場合は、代わりに [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) に渡します。

```tsx
const loadTranslations = (locale: string) =>
  import(`./_gt/${locale}.json`).then((m) => m.default);

initializeGT({ ...gtConfig, loadTranslations });
```

*注: `gt-react` では、`loadTranslations` は初期化呼び出しの設定オプションであり、[`<GTProvider>`](/docs/react/reference/components/gt-provider) のpropsではありません。デフォルトでは、翻訳は General Translation CDN から読み込まれます。*

## 仕組み [#how-it-works]

本番環境では、翻訳は実行時に読み取れる場所に保存されている必要があります。デフォルトでは、General Translation CDN から読み込まれます。別の場所から読み込むには、`loadTranslations` を指定します。たとえば、次のようなものです。

* アプリのバンドル (最も一般的) 。
* データベース。
* API。
* 別の CDN。

`gt-react` には、バンドル内のローカルファイルから翻訳を読み込むためのサポートが組み込まれています。詳しくは、[翻訳をローカルに保存する](/docs/react/guides/storing-translations) を参照してください。

## パラメーター [#parameters]

| パラメーター              | 説明                | 型        | 任意  | デフォルト |
| ------------------- | ----------------- | -------- | --- | ----- |
| [`locale`](#locale) | 翻訳の読み込み対象となるロケール。 | `string` | いいえ | —     |

### `locale` [#locale]

**型** `string` · **必須**

翻訳を読み込むロケールです。

## 戻り値 [#returns]

**型** `Promise<unknown>`

指定されたロケールの翻訳に解決される Promise。

## 例 [#examples]

```js title="loadTranslations.js"
export default async function loadTranslations(locale) {
  const translations = await import(`./_gt/${locale}.json`);
  return translations.default;
}
```

```js title="loadTranslations.js"
export default async function loadTranslations(locale) {
  try {
    const response = await fetch(`https://your-cdn.com/translations/${locale}.json`);
    return await response.json();
  } catch (e) {
    console.error(e);
    return {};
  }
}
```

## メモ [#notes]

* `loadTranslations` は、本番環境で翻訳をどのように読み込むかをカスタマイズします。主な用途は、[ローカル翻訳](/docs/react/guides/storing-translations)です。
* 人手で作成した翻訳を独自に持ち込み、スタンドアロンの i18n ライブラリとして使う場合は、代わりに [`loadDictionary`](/docs/react/reference/functions/load-dictionary) を使用してください。