# General Translation React SDKs (gt-react, gt-next): プラグイン
URL: https://generaltranslation.com/ja/docs/react/react-native/plugin.mdx
---
title: プラグイン
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` を渡した場合は、そちらから解決されます。

*注: このプラグインが現在のセットアップで動作しない場合は、エントリファイルの先頭で ポリフィル を手動で import してください。詳しくは [FormatJS の polyfill ドキュメント](https://formatjs.github.io/docs/polyfills)を参照してください。*

## オプション [#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'),
      },
    ],
  ],
};
```