概要

はじめに

General Translation React SDKは、Reactのためのオープンソース国際化（i18n）ライブラリです。

他の人気のあるi18nライブラリと同等の機能を持ちながら、Reactアプリケーションを簡単かつ保守しやすい方法で国際化するためのツールセットを提供します。

React SDKはGeneral Translationプラットフォームなしでも使用でき、他のi18nライブラリと非常に似た動作をします。

ただし、当社のプラットフォームとも統合されており、以下のような追加機能を提供しています：

• 開発環境での翻訳のホットリロード
• 自動AI翻訳
• General Translationプラットフォームとの翻訳の同期
• 当社の翻訳CDNとのネイティブ統合

コンセプト

SDKについて理解すべき主要なコンセプトが4つあります。

<GTProvider> コンポーネント

import { GTProvider } from 'gt-react';

<GTProvider> コンポーネントは、アプリケーションに追加する必要がある主要なコンポーネントです。

このコンポーネントは、アプリケーション全体にコンテキストを提供するために使用されます。

このコンテキストには、現在の言語とその言語に対応する翻訳が含まれます。

重要な注意点

• プロバイダーはアプリケーション全体をラップする必要があります。
• 理想的には、ルートコンポーネントなど、ツリーのできるだけ高い位置に配置してください。

詳細については、GTProvider ページをご覧ください。

<T> コンポーネント

<T> コンポーネントは、アプリケーション内のコンテンツを翻訳するための推奨方法です。

これは React コンポーネントであり、任意の JSX 要素をラップするために使用でき、その要素の内容をサポートされている言語に自動的にレンダリングします。

例

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

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

<T>
  Formatting can be done easily with the `<T>` component.
  <Num>{1000}</Num>
  <DateTime>{new Date()}</DateTime>
  <Currency>{1000}</Currency>
</T>

<T> コンポーネントのさまざまな使い方については、translating JSX ガイドをご覧ください。

<T> コンポーネントの API については、T API Reference を参照してください。

useGT フック

useGT フックは、<T> コンポーネントと同様に使用できる React フックですが、いくつかのトレードオフがあります。

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

const translate = useGT();

translate('Hello, world!');

<T> コンポーネントと比較して、useGT フックはコードベースでより柔軟に利用できます。

たとえば、ネストされた文字列を含む複雑なデータ構造がある場合、<T> コンポーネントを使うのはより難しくなります。

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

useGT フックの詳細については、strings ガイドをご覧ください。

さらに詳しい情報は、useGT API Reference をご参照ください。

useTranslations フック

useTranslations フックは、指定されたキーの翻訳を取得するために使用できる関数を返すReactフックです。

const dictionary = {
  hello: {
    world: 'Hello, world!',
  },
};

const translate = useTranslations();
translate('hello.world');

この動作は、react-i18nextやnext-intlなどの他の翻訳ライブラリと似ています。

useTranslationsフックについて詳しく学ぶには、辞書ガイドをご覧ください。

詳細については、useTranslations APIリファレンスをご覧ください。

次のステップ

• SDK を使って React プロジェクトをセットアップする方法について学びましょう: プロジェクト クイックスタート
• useGT フックを使って文字列を翻訳する方法について学びましょう: 文字列の翻訳
• <T> コンポーネントを使って JSX コンテンツを翻訳する方法について学びましょう: JSX の翻訳