# General Translation React SDKs (gt-react, gt-next, gt-react-native): プラグイン
URL: https://generaltranslation.com/ja/docs/react/react-native/plugin.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: React Native に必要な Intl の ポリフィル を注入する、General Translation の gt-react-native Babel プラグインのリファレンス。gt-react-native プラグインの API リファレンス。

`gt-react-native/plugin` は、`gt-react-native` に必要な `@formatjs` の `Intl` ポリフィル を注入する Babel プラグインです。React Native の JavaScript ランタイムには、数値、日付、複数形、ロケール名の書式設定に使われる `Intl` API が一通り揃っていないため、このプラグインがそれらをアプリのエントリポイントに追加します。

`babel.config.js` で設定します。これは標準的な React Native の [セットアップ](/docs/react/react-native/setup) の一部です。このページでは、このプラグインの動作とオプションについて説明します。

## 概要 [#overview]

Babel の設定にプラグインを追加し、`entryPointFilePath` でアプリのエントリファイルを指定したうえで、ポリフィルするロケールを渡します。このプラグインは**名前付きエクスポート**なので、モジュールオブジェクトを直接使うのではなく、分割代入して取り出してください (`const { plugin } = require('gt-react-native/plugin')`) 。

```js title="babel.config.js"
const { plugin: 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'),
        },
      ],
    ],
  };
};
```

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

ビルド時に Babel が `entryPointFilePath` のファイルを変換すると、プラグインは次の `import` 文を先頭に追加します。

* 基本の `@formatjs` ポリフィル — `getcanonicallocales`、`locale`、`displaynames`、`listformat`、`pluralrules`、`numberformat`、`relativetimeformat`、`datetimeformat` (すべてのタイムゾーンを含む) 。ただし、`excludePolyfills` に指定されているものは除きます。
* 解決された各ロケールのロケールデータ。対象となるポリフィルは `displaynames`、`listformat`、`pluralrules`、`numberformat`、`relativetimeformat`、`datetimeformat` です。

変更するのはエントリファイルのみで、すでに追加されているポリフィルの import はスキップします。ロケールは `locales` から解決されます。代わりに `config`/`configFilePath` を渡した場合は、それらから解決されます。

<Callout type="warn">
  **リージョン別ロケール:** プラグインは、設定された各ロケールコードを変更せずに
  すべてのロケールデータ import に使用します。FormatJS はすべてのポリフィルに対して
  すべてのリージョンコードを提供しているわけではありません。たとえば、`Intl.PluralRules` は `es` を提供しますが、
  `es-US` モジュールは提供しません。生成された import が存在しない場合は、以下でポリフィルを手動で追加し、
  アプリではリージョン別ロケールを維持したまま、各 import で利用可能なロケールデータコードを使用してください。
</Callout>

<Accordions>
  <Accordion title="ポリフィルを手動で追加">
    Babel プラグインを使用しない場合は、FormatJS パッケージをアプリに直接インストールしてください。

    <Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
      <Tab value="npm">
        ```bash
        npm install @formatjs/intl-getcanonicallocales @formatjs/intl-locale @formatjs/intl-displaynames @formatjs/intl-listformat @formatjs/intl-pluralrules @formatjs/intl-numberformat @formatjs/intl-relativetimeformat @formatjs/intl-datetimeformat
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn add @formatjs/intl-getcanonicallocales @formatjs/intl-locale @formatjs/intl-displaynames @formatjs/intl-listformat @formatjs/intl-pluralrules @formatjs/intl-numberformat @formatjs/intl-relativetimeformat @formatjs/intl-datetimeformat
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bun add @formatjs/intl-getcanonicallocales @formatjs/intl-locale @formatjs/intl-displaynames @formatjs/intl-listformat @formatjs/intl-pluralrules @formatjs/intl-numberformat @formatjs/intl-relativetimeformat @formatjs/intl-datetimeformat
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm add @formatjs/intl-getcanonicallocales @formatjs/intl-locale @formatjs/intl-displaynames @formatjs/intl-listformat @formatjs/intl-pluralrules @formatjs/intl-numberformat @formatjs/intl-relativetimeformat @formatjs/intl-datetimeformat
        ```
      </Tab>
    </Tabs>

    アプリケーションを import する前に、エントリファイルの先頭で基本ポリフィルとロケールデータを追加してください。この例では `en` と `es-US` を読み込みます。

    ```js title="index.js"
    // 基本 Intl ポリフィル
    import '@formatjs/intl-getcanonicallocales/polyfill';
    import '@formatjs/intl-locale/polyfill';
    import '@formatjs/intl-displaynames/polyfill';
    import '@formatjs/intl-listformat/polyfill';
    import '@formatjs/intl-pluralrules/polyfill-force';
    import '@formatjs/intl-numberformat/polyfill';
    import '@formatjs/intl-relativetimeformat/polyfill';
    import '@formatjs/intl-datetimeformat/polyfill';
    import '@formatjs/intl-datetimeformat/add-all-tz';

    // 英語のロケールデータ
    import '@formatjs/intl-displaynames/locale-data/en';
    import '@formatjs/intl-listformat/locale-data/en';
    import '@formatjs/intl-pluralrules/locale-data/en';
    import '@formatjs/intl-numberformat/locale-data/en';
    import '@formatjs/intl-relativetimeformat/locale-data/en';
    import '@formatjs/intl-datetimeformat/locale-data/en';

    // 米国スペイン語のロケールデータ
    import '@formatjs/intl-displaynames/locale-data/es-US';
    import '@formatjs/intl-listformat/locale-data/es-US';
    import '@formatjs/intl-pluralrules/locale-data/es';
    import '@formatjs/intl-numberformat/locale-data/es-US';
    import '@formatjs/intl-relativetimeformat/locale-data/es-US';
    import '@formatjs/intl-datetimeformat/locale-data/es-US';
    ```

    アプリのロケールには `es-US` を使用してください。`@formatjs/intl-pluralrules` には `es-US` のロケールデータモジュールが含まれていないため、`PluralRules` データの import には `es` のみを使用します。他のロケールやポリフィルについては、[FormatJS のポリフィルドキュメント](https://formatjs.github.io/docs/polyfills)を参照してください。
  </Accordion>
</Accordions>

## オプション [#options]

| オプション                                          | 説明                                           | 型          | 任意 | デフォルト         |
| ---------------------------------------------- | -------------------------------------------- | ---------- | -- | ------------- |
| [`locales`](#locales)                          | ロケールデータを読み込むロケールコード。                         | `string[]` | はい | `config` から   |
| [`entryPointFilePath`](#entry-point-file-path) | ポリフィルを追加するエントリファイルのパス。                       | `string`   | はい | `src/App.tsx` |
| [`config`](#config)                            | ロケールの読み取り元となる General Translation の設定オブジェクト。 | `object`   | はい | —             |
| [`configFilePath`](#config-file-path)          | ロケールの読み取り元となる `gt.config.json` のパス。          | `string`   | はい | —             |
| [`excludePolyfills`](#exclude-polyfills)       | スキップするベースポリフィル。                              | `string[]` | はい | `[]`          |

### `locales` [#locales]

**型** `string[]` · **任意**

`@formatjs` のロケールデータを読み込むロケールコードを指定します。デフォルトロケールと、対象となるすべてのロケールを含めてください。たとえば `[gtConfig.defaultLocale, ...gtConfig.locales]` のように指定します。省略した場合、ロケールは `config` または `configFilePath` から解決されます。

### `entryPointFilePath` [#entry-point-file-path]

**型** `string` · **任意** · **デフォルト** `src/App.tsx`

ポリフィル の import を挿入するファイルの絶対パスです。これは、アプリの実際のエントリポイントである必要があります。一般的な値は、Expo では `require.resolve('expo-router/entry')`、bare React Native CLI では `path.resolve(__dirname, 'index.js')` です。

### `config` [#config]

**型** `{ defaultLocale: string; locales: string[] } & Record<string, unknown>` · **任意**

`locales` を直接渡す代わりに、ロケールの解決元として使用する General Translation の設定オブジェクトです。

### `configFilePath` [#config-file-path]

**Type** `string` · **任意**

`locales` または `config` を渡す代わりに、ロケールの解決元として使用する `gt.config.json` ファイルへのパス。

### `excludePolyfills` [#exclude-polyfills]

**型** `string[]` · **省略可能** · **デフォルト** `[]`

独自に polyfill を提供する場合に、スキップするベース ポリフィル のインポートパスです。値は、`@formatjs/intl-datetimeformat/add-all-tz` のような、プラグインのベース ポリフィル のインポートパスと一致している必要があります。

## 例 [#example]

`index.js` を指定する素の React Native CLI の場合:

```js title="babel.config.js"
const path = require('path');
const { plugin: 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, 'index.js'),
      },
    ],
  ],
};
```

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.