# react-native: 概要
URL: https://generaltranslation.com/ja/docs/react-native/introduction.mdx
---
title: 概要
description: General Translation の React Native SDK の概要
---

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


## はじめに

General Translation React Native SDK は、React Native アプリ向けのオープンソースの国際化 (i18n) ライブラリです。

React Native アプリを簡単かつ保守しやすい形で国際化できる包括的なツール群を提供しており、主要な i18n ライブラリと同等の機能を備えています。

この SDK は General Translation プラットフォームを使わずに単体で利用することもでき、その場合も他の i18n ライブラリと同様に動作します。

一方で、以下の拡張機能を利用するために General Translation プラットフォームと統合することもできます。

* 開発中の翻訳のホットリロード
* AI による自動翻訳
* General Translation プラットフォームとの翻訳の同期
* 翻訳 CDN とのネイティブ統合

## 概要

SDK について理解しておくべき主要な概念は 5 つあります。

<Steps>
  <Step>
    [`<GTProvider>`](/docs/react-native/api/components/gtprovider) コンポーネント
  </Step>

  <Step>
    [`<T>`](/docs/react-native/api/components/t) コンポーネント
  </Step>

  <Step>
    [`useGT`](/docs/react-native/api/strings/use-gt) フック
  </Step>

  <Step>
    共有文字列用の [`msg`](/docs/react-native/api/strings/msg) 関数
  </Step>

  <Step>
     (省略可) [`useTranslations`](/docs/react-native/api/dictionary/use-translations) フック
  </Step>
</Steps>

## `<GTProvider>` コンポーネント

[`<GTProvider>`](/docs/react-native/api/components/gtprovider) コンポーネントは、現在の言語や必要な翻訳データを含む翻訳コンテキストをアプリケーションに提供します。

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

function App() {
  return (
    <GTProvider>
      <div>
        {/* アプリケーションのコンテンツ */}
      </div>
    </GTProvider>
  );
}
```

**重要:** provider はアプリケーション全体をラップし、ルートの App コンポーネントなど、コンポーネントツリーのできるだけ上位に配置してください。

詳しくは、[`GTProvider`](/docs/react-native/api/components/gtprovider) の API リファレンスを参照してください。


## `<T>` コンポーネント

[`<T>`](/docs/react-native/api/components/t) コンポーネントは、アプリケーション内のコンテンツを翻訳するための推奨手段です。

これは任意の JSX 要素をラップできる React コンポーネントで、要素の内容を対応言語で自動的にレンダリングします。

<Callout type="info">
  可能な限り [`<T>`](/docs/react-native/api/components/t) コンポーネントを使用することを推奨します。翻訳の柔軟性を最も高く保てるためです。

  [`<T>`](/docs/react-native/api/components/t) コンポーネントは文字列とは異なり、HTML コンテンツの翻訳にも使用できるため、文字列翻訳よりもはるかに強力です。
</Callout>

### 例

```tsx
<T>
  <div>Hello, world!</div>
</T>
```

```tsx
<T>
  <div>
    <h1> Here is an image </h1>
    <img src="https://example.com/image.png" alt="Example" />
  </div>
</T>
```

```tsx
<T>
  `<T>` コンポーネントを使えば、簡単にフォーマットできます。
  <Num>{1000}</Num>
  <DateTime>{new Date()}</DateTime>
  <Currency currency="USD">{1000}</Currency>
</T>
```

[`<T>`](/docs/react-native/api/components/t) コンポーネントは、動的なコンテンツを書式設定するために、[`<Num>`](/docs/react-native/api/components/num)、[`<DateTime>`](/docs/react-native/api/components/datetime)、[`<Currency>`](/docs/react-native/api/components/currency) などの[変数コンポーネント](/docs/react-native/guides/variables)と組み合わせて使用できます。

[`<T>` コンポーネントガイド](/docs/react-native/guides/t)では、[`<T>`](/docs/react-native/api/components/t) コンポーネントのさまざまな使い方を紹介しています。


## `useGT` フック

[`useGT`](/docs/react-native/api/strings/use-gt) は React フックで、いくつかのトレードオフはありますが、[`<T>`](/docs/react-native/api/components/t) コンポーネントと同様の使い方ができます。

このフックは、文字列を翻訳するための関数を返します。

```tsx
const gt = useGT();

gt('Hello, world!');
```

[`<T>`](/docs/react-native/api/components/t) コンポーネントと比べると、[`useGT`](/docs/react-native/api/strings/use-gt) フックのほうが、コードベース内でより柔軟に扱えます。

たとえば、ネストされた文字列を含む複雑なデータ構造がある場合、[`<T>`](/docs/react-native/api/components/t) コンポーネントでは扱いにくくなります。

```tsx
const gt = useGT();
const data = {
  title: gt('Hello, world!'),
  description: gt('This is a description'),
};
```

[`useGT`](/docs/react-native/api/strings/use-gt) フックの詳細は、[strings](/docs/react-native/guides/strings) ガイドを参照してください。


## `msg` 関数

[`msg`](/docs/react-native/api/strings/msg) 関数は、複数のコンポーネントで共通して使う文字列や、設定オブジェクトに保存する文字列を翻訳対象としてマークするために使用します。

これは、ナビゲーションラベル、フォームメッセージ、またはアプリケーション内の複数の場所に表示されるテキストなど、共通コンテンツを扱う場合に特に便利です。

```tsx
// 翻訳対象の文字列をマークする
import { msg } from 'gt-react-native';

const navItems = [
  { label: msg('Home'), href: '/' },
  { label: msg('About'), href: '/about' },
  { label: msg('Contact'), href: '/contact' }
];
```

```tsx
// マークされた文字列をデコードして使用する
import { useMessages } from 'gt-react-native';

function Navigation() {
  const m = useMessages();
  
  return (
    <nav>
      {navItems.map(item => (
        <a key={item.href} href={item.href}>
          {m(item.label)}
        </a>
      ))}
    </nav>
  );
}
```

[`msg`](/docs/react-native/api/strings/msg) 関数は、文字列を翻訳メタデータ付きでエンコードし、[`useMessages`](/docs/react-native/api/strings/use-messages) はそれをデコードします。

<Callout type="info">
  アプリケーション全体で一貫して翻訳したい共有コンテンツには [`msg`](/docs/react-native/api/strings/msg) を使用してください。コンポーネント固有のコンテンツには、[`<T>`](/docs/react-native/api/components/t) または [`useGT`](/docs/react-native/api/strings/use-gt) の使用をおすすめします。
</Callout>

詳しくは、[共有文字列](/docs/react-native/guides/shared-strings) ガイドの `msg` 関数の説明を参照してください。


## `useTranslations` フック

[`useTranslations`](/docs/react-native/api/dictionary/use-translations) は、指定したキーの翻訳を取得するための関数を返す React フックです。

```tsx title="dictionary.ts"
const dictionary = {
  hello: {
    world: 'Hello, world!',
  },
};
```

```tsx title="App.tsx"
const translate = useTranslations();
translate('hello.world');
```

この挙動は、[`react-i18next`](https://react.i18next.com/) や [`next-intl`](https://next-intl-docs.vercel.app/) などの他の翻訳ライブラリと似ています。

<Callout type="warn">
  アプリケーションで [`useTranslations`](/docs/react-native/api/dictionary/use-translations) フックを使用することは推奨していません。[`useTranslations`](/docs/react-native/api/dictionary/use-translations) フックを頻繁に使うと、コードベースの保守性が低下し、
  技術的負債が大きくなります。

  代わりに、[`<T>`](/docs/react-native/api/components/t) コンポーネントまたは [`useGT`](/docs/react-native/api/strings/use-gt) フックの使用を推奨します。

  他の i18n ライブラリから移行している場合、[`useTranslations`](/docs/react-native/api/dictionary/use-translations) フックはそのまま置き換えて使えるため、コードベースを段階的に移行する際に便利です。
</Callout>

[`useTranslations`](/docs/react-native/api/dictionary/use-translations) フックの詳細については、[dictionaries](/docs/react-native/guides/dictionaries) ガイドを参照してください。

詳細は、[useTranslations API リファレンス](/docs/react-native/api/dictionary/use-translations) を参照してください。

***


## 次のステップ

* SDK を使って React Native プロジェクトをセットアップする: [Quickstart](/docs/react-native)
* [`<T>`](/docs/react-native/api/components/t) コンポーネントを使って JSX コンテンツを翻訳する: [JSX Translation Guide](/docs/react-native/guides/t)
* [`useGT`](/docs/react-native/api/strings/use-gt) フックを使って文字列を翻訳する: [String Translation Guide](/docs/react-native/guides/strings)
* [`msg`](/docs/react-native/api/strings/msg) 関数を使った共有文字列について学ぶ: [Shared Strings Guide](/docs/react-native/guides/shared-strings)