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

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

**前提条件:**

* Expo プロジェクト (SDK 49+) 
* Node.js 18+

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

<Callout type="info">
  **自動セットアップを使いたいですか？** `npx gt@latest` を実行すると、[セットアップウィザード](/docs/cli/init)ですべてを設定できます。このガイドでは手動セットアップについて説明します。
</Callout>

<Callout type="info">
  React Native CLI の bare プロジェクトをお探しの場合は、[React Native クイックスタート](/docs/react-native/tutorials/quickstart)をご覧ください。
</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
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add gt-react-native
    yarn add --dev gt
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add gt-react-native
    bun add --dev gt
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add gt-react-native
    pnpm add --save-dev gt
    ```
  </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 runtime には、`gt-react-native` に必要な `Intl` API が含まれていません。最も簡単な解決策は、同梱の Babel プラグインを使うことです。

これを Babel の設定に追加します:

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

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        gtPlugin,
        {
          locales: [gtConfig.defaultLocale, ...gtConfig.locales],
          entryPointFilePath: require.resolve('expo-router/entry'),
        },
      ],
    ],
  };
};
```

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

    完全な一覧は、[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 (Expo のバンドラー) は動的インポートをサポートしていないため、各ロケールを対応する翻訳ファイルに明示的にマッピングする必要があります。

```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/_layout.tsx"
import { Slot } from 'expo-router';
import { GTProvider } from 'gt-react-native';
import gtConfig from '../gt.config.json';
import { loadTranslations } from '../loadTranslations';

export default function RootLayout() {
  return (
    <GTProvider
      config={gtConfig}
      loadTranslations={loadTranslations}
      projectId={process.env.EXPO_PUBLIC_GT_PROJECT_ID}
      devApiKey={process.env.EXPO_PUBLIC_GT_DEV_API_KEY}
    >
      <Slot />
    </GTProvider>
  );
}
```

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

***


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

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

```tsx title="app/index.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`** フックを使って言語ピッカーを作成します。`gt-react` とは異なり、`gt-react-native` にはあらかじめ用意された `<LocaleSelector>` コンポーネントがないため、このフックを使って独自に UI を構築します。

```tsx title="app/index.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.local`** ファイルを作成します。Expo では、公開用の環境変数に `EXPO_PUBLIC_` プレフィックスを付ける必要があります。

```bash title=".env.local"
EXPO_PUBLIC_GT_DEV_API_KEY="your-dev-api-key"
EXPO_PUBLIC_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 expo start --dev-client
```

<Callout type="warn">
  `gt-react-native` にはネイティブモジュールが含まれているため、**Expo Go は使えません**。[開発ビルド](https://docs.expo.dev/develop/development-builds/introduction/) が必要です。

  ```bash
  npx expo run:ios
  # または
  npx expo run:android
  ```
</Callout>

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

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

***


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

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

```tsx title="app/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 で **production** 用の環境変数を設定してください (これらはサーバー側でのみ使用され、`EXPO_PUBLIC_` ではありません) :

```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.]
    ```

    これは、ネイティブモジュールがリンクされていないことを示しています。主な原因は次のとおりです。

    1. **開発ビルドではなく Expo Go を使用している**。dev build に切り替えてください。

    ```bash
    npx expo run:ios
    # または
    npx expo run:android
    ```

    2. **Pods が最新ではない (iOS)&#x20;**。再インストールを試してください。

    ```bash
    cd ios && rm -rf build Pods Podfile.lock && pod install && cd ..
    ```
  </Accordion>

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

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

    ```bash
    npx expo start --clear
    ```
  </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 のセットアップ、キャッシュ、パフォーマンス最適化