# react-native: React Native クイックスタート
URL: https://generaltranslation.com/ja/docs/react-native/tutorials/quickstart.mdx
---
title: React Native クイックスタート
description: 10分以内で React Native アプリに複数の言語を追加
---

このガイドを終えるまでに、React Native アプリで複数言語のコンテンツを表示し、ユーザーが操作できる言語切り替え機能も実装できるようになります。

**前提条件:**

* React Native CLI アプリ (Expo は対象外です。Expo プロジェクトについては [Expo quickstart](/docs/react-native/tutorials/quickstart-expo) を参照してください) 
* Node.js 18+

<Callout type="warn">
  `gt-react-native` は現在も実験的な機能であり、すべてのプロジェクトで動作するとは限りません。
  問題が発生した場合は、[GitHub で issue を作成](https://github.com/generaltranslation/gt/issues)してお知らせください。
</Callout>

<Callout type="info">
  **自動でセットアップしたい場合** は、`npx gt@latest` を実行して [Setup Wizard](/docs/cli/init) ですべて設定できます。このガイドでは手動セットアップを説明します。
</Callout>

***

## ステップ1: パッケージをインストール

`gt-react-native` は、アプリで翻訳を実行するためのライブラリです。`gt` は、翻訳を本番環境用に準備する CLI ツールです。

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm i gt-react-native
    npm i -D gt
    cd ios && pod install
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add gt-react-native
    yarn add --dev gt
    cd ios && pod install
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add gt-react-native
    bun add --dev gt
    cd ios && pod install
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add gt-react-native
    pnpm add --save-dev gt
    cd ios && pod install
    ```
  </Tab>
</Tabs>

***

## ステップ2: 翻訳設定ファイルを作成する

プロジェクトのルートに **`gt.config.json`** ファイルを作成します。このファイルで、サポートする言語をライブラリに指定します。

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr", "ja"],
  "files": {
    "gt": {
      "output": "content/[locale].json"
    }
  }
}
```

* **`defaultLocale`** — アプリの記述に使う言語 (ソース言語) 。
* **`locales`** — 翻訳先の言語です。[サポートされているロケール一覧](/docs/platform/supported-locales)から任意に選択します。
* **`files.gt.output`** — CLI が翻訳ファイルを保存する場所です。`[locale]` は各言語コード (例: `content/es.json`) に置き換えられます。

***


## ステップ3: ポリフィルを設定する

React Native の JavaScript ランタイムには、`gt-react-native` が必要とする `Intl` API が含まれていません。最も簡単な解決策は、同梱の Babel プラグインを使うことです。

これを Babel の設定に追加し、`entryPointFilePath` がアプリのエントリファイルを指すようにしてください (`package.json` の `"main"` フィールドを確認してください) :

```js title="babel.config.js"
const path = require('path');
const gtPlugin = require('gt-react-native/plugin');
const gtConfig = require('./gt.config.json');

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      gtPlugin,
      {
        locales: [gtConfig.defaultLocale, ...gtConfig.locales],
        entryPointFilePath: path.resolve(__dirname, 'App.tsx'),
      },
    ],
  ],
};
```

<Accordions>
  <Accordion title="Babel プラグインが動作しない場合は、代わりに手動でポリフィルを追加してください">
    FormatJS のポリフィルをインストールし、エントリファイルの先頭で import してください。基本のポリフィルに加えて、サポートする各言語向けのロケール固有データも必要です。

    完全な一覧については、[FormatJS のポリフィルドキュメント](https://formatjs.github.io/docs/polyfills)を参照してください。最低限必要なのは次のとおりです。

    ```tsx title="index.js"
    import '@formatjs/intl-getcanonicallocales/polyfill';
    import '@formatjs/intl-locale/polyfill';
    import '@formatjs/intl-pluralrules/polyfill-force';
    import '@formatjs/intl-numberformat/polyfill';
    import '@formatjs/intl-datetimeformat/polyfill';
    import '@formatjs/intl-datetimeformat/add-all-tz';

    // 各言語のロケールデータも追加します:
    import '@formatjs/intl-pluralrules/locale-data/en';
    import '@formatjs/intl-pluralrules/locale-data/es';
    import '@formatjs/intl-numberformat/locale-data/en';
    import '@formatjs/intl-numberformat/locale-data/es';
    // ... 各ロケールとポリフィルごとに繰り返します
    ```
  </Accordion>
</Accordions>

***

## ステップ 4: 翻訳ローダーを作成する

Metro (React Native のバンドラー) は動的インポートをサポートしていないため、各ロケールを対応する翻訳ファイルに明示的に紐付ける必要があります。

```ts title="loadTranslations.ts"
const translations: Record<string, any> = {
  es: require("./content/es.json"),
  fr: require("./content/fr.json"),
  ja: require("./content/ja.json"),
};

export function loadTranslations(locale: string) {
  return translations[locale] ?? {};
}
```

これらのファイルは、`npx gt translate` を実行すると CLI によって生成されます。

***


## ステップ5: アプリにGTProviderを追加する

**`GTProvider`** コンポーネントを使うと、アプリ全体で翻訳を利用できるようになります。アプリをルートレベルでラップします:

```tsx title="App.tsx"
import { GTProvider } from 'gt-react-native';
import gtConfig from './gt.config.json';
import { loadTranslations } from './loadTranslations';

export default function App() {
  return (
    <GTProvider
      config={gtConfig}
      loadTranslations={loadTranslations}
      projectId={process.env.GT_PROJECT_ID}
      devApiKey={process.env.GT_API_KEY}
    >
      {/* アプリのコンテンツ */}
    </GTProvider>
  );
}
```

`GTProvider` はロケールの状態を管理し、すべての子コンポーネントで翻訳を利用できるようにします。`devApiKey` プロパティを指定すると、開発中にオンデマンド翻訳を有効にできます。

***


## ステップ6: コンテンツを翻訳対象として指定する

翻訳したいテキストを **`<T>`** コンポーネントで囲みます:

```tsx title="screens/Home.tsx"
import { Text, View } from 'react-native';
import { T } from 'gt-react-native';

export default function Home() {
  return (
    <View>
      <T>
        <Text>Welcome to my app</Text>
      </T>
      <T>
        <Text>This content will be translated automatically.</Text>
      </T>
    </View>
  );
}
```

`<T>` の中の内容は、すべてひとまとまりで翻訳されます。

***


## ステップ7: 言語切り替え機能を追加する

**`useLocaleSelector`** フックを使って、言語選択 UI を作成します。`gt-react` とは異なり、`gt-react-native` にはビルド済みの `<LocaleSelector>` コンポーネントは用意されていません。代わりに、このフックを使って独自に UI を実装します。

```tsx title="screens/Home.tsx"
import { Text, View, Pressable } from 'react-native';
import { T, useLocaleSelector } from 'gt-react-native';

export default function Home() {
  const { locales, locale, setLocale } = useLocaleSelector();

  return (
    <View>
      <View style={{ flexDirection: 'row', gap: 8, marginBottom: 16 }}>
        {locales.map((l) => (
          <Pressable key={l} onPress={() => setLocale(l)}>
            <Text style={{ fontWeight: l === locale ? 'bold' : 'normal' }}>{l}</Text>
          </Pressable>
        ))}
      </View>
      <T>
        <Text>Welcome to my app</Text>
      </T>
    </View>
  );
}
```

`useLocaleSelector` は、利用可能なロケール、現在のロケール、および setter を返すため、UI を完全に制御できます。

***

## ステップ 8: 環境変数を設定する (任意) 

開発中に翻訳を確認するには、General Translation の API キーが必要です。これにより、**オンデマンド翻訳**が有効になり、開発しながらアプリ内のコンテンツをリアルタイムで翻訳できるようになります。

**`.env`** ファイルを作成します。

```bash title=".env"
GT_API_KEY="your-api-key"
GT_PROJECT_ID="your-project-id"
```

無料のキーを取得するには、[dash.generaltranslation.com](https://dash.generaltranslation.com/signup) にアクセスするか、次を実行してください:

```bash
npx gt auth
```

<Callout type="warn">
  開発時は、`gtx-dev-` で始まるキーを使用してください。本番環境キー (`gtx-api-`) は CI/CD 専用です。

  本番環境 API キーは、アプリのバンドルに含めたり、ソースコード管理にコミットしたりしないでください。
</Callout>

<Accordions>
  <Accordion title="API キーなしで gt-react-native は使えますか？">
    はい。API キーがなくても、`gt-react-native` は標準的な i18n ライブラリとして使用できます。開発時のオンデマンド翻訳は利用できませんが、次のことは可能です。

    * 独自の翻訳ファイルを手動で用意する
    * すべてのコンポーネント (`<T>`、`<Var>`、`LocaleSelector` など) を使用する
    * `npx gt generate` を実行して翻訳ファイルのテンプレートを作成し、自分で翻訳する
  </Accordion>
</Accordions>

***


## ステップ9: 実際に動かしてみる

アプリをビルドして実行します:

```bash
npx react-native run-ios
# または
npx react-native run-android
```

言語ピッカーで言語を切り替えてください。コンテンツが翻訳されて表示されるはずです。

<Callout type="info">
  開発環境では、翻訳はオンデマンドで行われます。新しい言語に初めて切り替えるときは、最初に短時間の読み込み表示が出ることがあります。本番環境では、翻訳は事前生成されているため、すぐに読み込まれます。
</Callout>

***


## ステップ10: 文字列も翻訳する (JSXだけでなく) 

`placeholder` 属性や `accessibilityLabel` の値のような通常の文字列には、**`useGT`** フックを使用します。

```tsx title="screens/Contact.tsx"
import { TextInput, View } from 'react-native';
import { useGT } from 'gt-react-native';

export default function Contact() {
  const gt = useGT();

  return (
    <View>
      <TextInput
        placeholder={gt('Enter your email')}
        accessibilityLabel={gt('Email input field')}
      />
    </View>
  );
}
```

***


## ステップ11: 本番環境にデプロイする

本番環境では、翻訳はビルド時に事前生成されるため、リアルタイムの API 呼び出しは発生しません。ビルドスクリプトに `translate` コマンドを追加します。

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

CI/CDで **本番環境** 環境変数を設定します:

```bash
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```

<Callout type="warn">
  本番環境キーは `gtx-api-` で始まります (`gtx-dev-` ではありません) 。[dash.generaltranslation.com](https://dash.generaltranslation.com) で取得してください。本番環境キーをアプリのバンドルに絶対に含めないでください。
</Callout>

以上で完了です。アプリはこれで多言語対応になりました。🎉

***


## トラブルシューティング

<Accordions>
  <Accordion title="'GtReactNative' が見つかりません">
    ```
    ERROR  [Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'GtReactNative' could not be found.]
    ```

    これは、ネイティブモジュールがリンクされていないことを示しています。`cd ios && pod install` を実行し、アプリを再ビルドしてください。
  </Accordion>

  <Accordion title="無効なロケールコード エラー">
    ```
    Error: You are using invalid locale codes in your configuration.
    ```

    これは通常、ポリフィル が正しく設定されていないことを示します。Babel プラグインが設定されていること (または ポリフィル を手動で import していること) を確認し、Metro のキャッシュをクリアしてください。

    ```bash
    npx react-native start --reset-cache
    ```
  </Accordion>

  <Accordion title="開発環境では翻訳に時間がかかる">
    これは想定どおりの動作です。開発環境では、翻訳はオンデマンドで実行されます (コンテンツは API 経由でリアルタイムに翻訳されます) 。この遅延は**本番環境では発生しません**。すべての翻訳は `npx gt translate` によって事前生成されます。
  </Accordion>

  <Accordion title="一部の翻訳が不正確">
    あいまいなテキストは、不正確な翻訳の原因になることがあります。たとえば、&quot;apple&quot; は果物を指す場合もあれば、企業を指す場合もあります。判断しやすくするために、`context` prop を追加してください。

    ```jsx
    <T context="the technology company">Apple</T>
    ```

    `<T>` と `useGT()` はどちらも `context` オプションに対応しています。
  </Accordion>
</Accordions>

***

## 次のステップ

* [**`<T>` コンポーネントガイド**](/docs/react-native/guides/t) — 変数、複数形、高度な翻訳パターンについて学びます
* [**文字列翻訳ガイド**](/docs/react-native/guides/strings) — `useGT` を詳しく解説します
* [**変数コンポーネント**](/docs/react-native/guides/variables) — `<Var>`、`<Num>`、`<Currency>`、`<DateTime>` を使って動的なコンテンツを扱います
* [**本番環境へのデプロイ**](/docs/react-native/tutorials/quickdeploy) — CI/CD の設定、キャッシュ、パフォーマンスの最適化