# react-native: 辞書
URL: https://generaltranslation.com/ja/docs/react-native/guides/dictionaries.mdx
---
title: 辞書
description: 従来型の辞書ベース翻訳パターンの使い方
---

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

辞書は、キーと値のペアからなるネストしたオブジェクトで翻訳を整理する、従来型の方法です。[`<T>` コンポーネント](/docs/react-native/guides/t) が推奨されるアプローチですが、辞書は他の i18n ライブラリから移行する場合や、翻訳を一元的に管理したい場合に便利です。

<Callout>
  **推奨:** 新規プロジェクトでは [`<T>` コンポーネント](/docs/react-native/guides/t) を使用してください。辞書のサポートは主に、既存の翻訳ワークフローからの移行と互換性確保のために提供されています。
</Callout>

## 辞書翻訳とコンポーネント翻訳

### 辞書方式

```tsx
// dictionary.ts
export default {
  greetings: {
    hello: 'Hello, world!',
    welcome: 'Welcome, {name}!'
  }
};

// コンポーネントの使用例
function MyComponent() {
  const t = useTranslations();
  return <div>{t('greetings.hello')}</div>;
}
```


### コンポーネント方式

```tsx
// コンポーネントの直接使用 - 推奨
function MyComponent() {
  return <T><div>Hello, world!</div></T>;
}
```


## トレードオフ

### 辞書の利点

* **一元管理** - すべての翻訳を1か所で管理
* **業界標準** - 他の i18n ライブラリでも一般的なパターン
* **移行しやすい** - 既存の翻訳を簡単に移行できる

### 辞書方式のデメリット

* **複雑さ** - より多くのセットアップと設定が必要になる
* **保守性** - コンテンツが使用箇所から分離されるため、更新しづらい
* **デバッグのしやすさ** - 翻訳元のコンポーネントを特定しにくい
* **可読性** - キーを見ても実際の内容がわからない

## クイックスタート

### ステップ1: 辞書を作成する

プロジェクトのルートまたは `src` ディレクトリに、辞書ファイルを作成します。

```ts title="dictionary.ts"
const dictionary = {
  greetings: {
    hello: 'Hello, world!',
    welcome: 'Welcome to our app!'
  },
  navigation: {
    home: 'Home',
    about: 'About',
    contact: 'Contact'
  }
};

export default dictionary;
```

または、JSON形式を使用します:

```json title="dictionary.json"
{
  "greetings": {
    "hello": "Hello, world!",
    "welcome": "Welcome to our app!"
  },
  "navigation": {
    "home": "Home", 
    "about": "About",
    "contact": "Contact"
  }
}
```

次に、[`<GTProvider>`](/docs/react-native/api/components/gtprovider)コンポーネントに渡します。

```jsx title="index.js" copy
import dictionary from "./dictionary.js";
import config from "./gt.config.json";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    {/* [!code highlight] */}
    <GTProvider {...config} dictionary={dictionary}>
      <App />
    </GTProvider>
  </StrictMode>
);
```


### ステップ 2: コンポーネントで使う

[`useTranslations`](/docs/react-native/api/dictionary/use-translations) フックを使うと、辞書のエントリにアクセスできます。

```tsx
import { useTranslations } from 'gt-react-native';

function MyComponent() {
  const t = useTranslations();
  
  return (
    <div>
      <h1>{t('greetings.hello')}</h1>
      <p>{t('greetings.welcome')}</p>
    </div>
  );
}
```


## 変数を使う

辞書エントリに変数を追加するには、`{variable}` 構文を使用します。

```ts title="dictionary.ts"
const dictionary = {
  user: {
    greeting: 'Hello, {name}!',
    itemCount: 'You have {count} items',
    orderTotal: 'Total: ${amount}'
  }
};
```

```tsx
function UserDashboard() {
  const t = useTranslations();
  
  return (
    <div>
      <h1>{t('user.greeting', { name: 'Alice' })}</h1>
      <p>{t('user.itemCount', { count: 5 })}</p>
      <p>{t('user.orderTotal', { amount: 99.99 })}</p>
    </div>
  );
}
```


## プレフィックスの使用

プレフィックスを使って、辞書へのアクセスを特定のセクションに限定します。

```ts title="dictionary.ts"
const dictionary = {
  dashboard: {
    header: {
      welcome: 'Welcome back!',
      lastLogin: 'Last login: {date}'
    },
    stats: {
      totalUsers: 'Total Users: {count}',
      activeUsers: 'Active Users: {count}'
    }
  }
};
```

```tsx
function DashboardHeader() {
  // プレフィックスにより 'dashboard.header' へのアクセスを制限
  const t = useTranslations('dashboard.header');
  
  return (
    <header>
      <h1>{t('welcome')}</h1> {/* -> dashboard.header.welcome */}
      <p>{t('lastLogin', { date: 'Today' })}</p> {/* -> dashboard.header.lastLogin */}
    </header>
  );
}

function DashboardStats() {
  // stats セクション用の別プレフィックス
  const t = useTranslations('dashboard.stats');
  
  return (
    <div>
      <p>{t('totalUsers', { count: 1000 })}</p> {/* -> dashboard.stats.totalUsers */}
      <p>{t('activeUsers', { count: 150 })}</p> {/* -> dashboard.stats.activeUsers */}
    </div>
  );
}
```


## 多言語対応

### 自動翻訳 (推奨) 

ほとんどのユーザーは、ベース辞書から翻訳を自動生成するために [`loadTranslations`](/docs/react-native/api/config/load-translations) を使用することをおすすめします。

```ts title="dictionary.ts"  
const dictionary = {
  common: {
    save: 'Save',
    cancel: 'Cancel',
    delete: 'Delete'
  },
  forms: {
    required: 'This field is required',
    email: 'Please enter a valid email'
  }
};

export default dictionary;
```

次に、生成された翻訳ファイルを読み込む `loadTranslations` 関数を作成します。

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

これを `<GTProvider>` に渡してください:

```tsx title="src/index.tsx"
import loadTranslations from './loadTranslations';
import dictionary from './dictionary';

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider
      {...config}
      dictionary={dictionary}
      loadTranslations={loadTranslations}
    >
      <App />
    </GTProvider>
  </StrictMode>
);
```

GT は、ベース辞書をもとに他の言語の翻訳を自動生成します。設定されたすべての言語の翻訳を生成するには、`npx gt translate` を実行してください。


### 手動の翻訳ファイル (移行) 

他のi18nライブラリから移行する場合や、翻訳を手動で管理する場合は、[`loadDictionary`](/docs/react-native/api/config/load-dictionary)を使用します。

```ts title="src/loadDictionary.ts"
export default async function loadDictionary(locale: string) {
  const translations = await import(`../public/locales/${locale}.json`);
  return translations.default;
}
```

これにより、`public/locales/` ディレクトリから JSON の翻訳ファイルが読み込まれます。

<Files>
  <Folder name="my-app" defaultOpen={true}>
    <Folder name="public" defaultOpen={true}>
      <Folder name="locales" defaultOpen={true}>
        <File name="es.json" />

        <File name="fr.json" />

        <File name="de.json" />
      </Folder>
    </Folder>

    <Folder name="src">
      <File name="loadDictionary.ts" />
    </Folder>
  </Folder>
</Files>

<Callout>
  **適切な方法を選んでください:** 自動翻訳生成を使う新規プロジェクトでは [`loadTranslations`](/docs/react-native/api/config/load-translations) を、既存の翻訳ファイルを移行する場合は [`loadDictionary`](/docs/react-native/api/config/load-dictionary) を使用してください。
</Callout>


## 本番環境のセットアップ

### ビルドプロセス

ビルドパイプラインに翻訳処理を組み込みます。

```json title="package.json"
{
  "scripts": {
    "build": "npx gt translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```


### 開発環境と本番環境での動作の違い

* **Development**: 辞書エントリは dev API key を使用して、必要に応じて翻訳されます
* **Production**: すべての辞書翻訳はビルド時に事前生成されます

## コンポーネントと組み合わせる

辞書と[`<T>` コンポーネント](/docs/react-native/guides/t)は組み合わせて使用できます。

```tsx
function MixedApproach() {
  const t = useTranslations();
  
  return (
    <div>
      {/* シンプルな文字列には辞書を使用 */}
      <h1>{t('page.title')}</h1>
      
      {/* 複雑なJSXにはTコンポーネントを使用 */}
      <T>
        <p>This is a <strong>complex message</strong> with <a href="/link">links</a>.</p>
      </T>
      
      {/* フォームラベルには辞書を使用 */}
      <label>{t('forms.email')}</label>
    </div>
  );
}
```


## 次のステップ

<Callout>
  **実際の動作を見る:** 実際に動作するデモとして、[辞書方式 のサンプルアプリ](https://github.com/gt-examples/dictionary-pattern)をご覧ください — [ライブプレビュー](https://dictionary-pattern.generaltranslation.dev)。
</Callout>

* [Languages Guide](/docs/react-native/guides/languages) - サポートする言語とロケールの設定を行う
* [Dynamic Content Guide](/docs/key-concepts/dynamic-content) - runtime での翻訳に対応する
* API リファレンス:
  * [`useTranslations` フック](/docs/react-native/api/dictionary/use-translations)