はじめに

はじめに

多くの人気のあるReactフレームワーク向けのクイックスタートガイドをご用意しています。

General Translationとは？

General Translationは、多言語アプリを迅速かつ簡単に提供できる完全な国際化（i18n）スタックです。

General Translationには以下が含まれています：

• ReactとNext.js向けのオープンソース開発者ライブラリ
• AI翻訳サービス
• 翻訳コンテンツを提供するための完全なインフラストラクチャパッケージ

独自の翻訳プロバイダーでGTライブラリを使用したい場合は、スタンドアロンドキュメントをご覧ください。

独自のi18nライブラリを使用しながらもGeneral TranslationのAI翻訳サービスを利用したい場合は、CLIツールのドキュメントをご覧ください。

特徴

⚛️ Reactコンポーネント全体をインラインで翻訳

• 開始と終了の<T>コンポーネント一つだけで、Reactコンポーネント全体を翻訳できます。
  • 複雑なリファクタリングや煩雑な関数呼び出しは必要ありません。
• コンテンツはインラインでコードと同じ場所にあります。
  • キー、文字列、追加ファイルは必要ありません！
• ライブラリがすべてのi18nロジックを裏で管理するので、あなたが気にする必要はありません。
• 翻訳は常にソースコードと同期が保たれます。
• 翻訳にはコンテンツに関する文脈情報が含まれているため、より正確です。

export default function Page() {
  return (
    <T>
      <p>You can write any JSX as children of the {"<T>"} component.</p>
      <p>
        For example, you could write a <a href="/">link</a> and have the text be
        translated in context.
      </p>
      <div>
        <div>
          <p>Even deeply nested components are translated in context.</p>
          <button>Click me!</button>
        </div>
      </div>
    </T> 
  );
}

🔎 既存ライブラリと同等の機能

• GTライブラリはi18next、react-intl、next-intlなどの既存ライブラリと同じ機能もサポートしています。
• 辞書、複数形、通貨、自動ルーティングなどの機能もすべてサポートされています。

🧠 無料のAI翻訳サービス

• 無料のAI翻訳サービスを使用すると、数秒でアプリの翻訳を作成できます。
• 翻訳ホットリロード機能により、翻訳を書き込むと自動的に更新されます。
• HTMLコンテンツは言語に応じて再配置およびカスタマイズされます。

🔧 開発者フレンドリー

• セットアップは簡単で、数分で完了します。
• すべてのGTライブラリはオープンソースでスタンドアロンで動作します。
  • 独自の翻訳プロバイダーを使用するか、無料のAI翻訳サービスを使用できます。
• t('menu.header.title')のような翻訳キーの管理に時間を無駄にする必要はもうありません。
  • すべてをインラインで書くだけです！

ソースコードといくつかのサンプルプロジェクトについては、Githubリポジトリをご覧ください。

なぜGeneral Translationを選ぶのか？

General Translationは完全なi18nスタックであり、開発者ライブラリ、AI翻訳、多言語アプリ用の完全なインフラストラクチャパッケージを含んでいます。

独自の翻訳プロバイダーと当社のライブラリを組み合わせることも、独自のi18nライブラリと当社の無料AI翻訳サービスを使用することもできます。

シームレスなエンドツーエンドのi18n体験のために、当社のライブラリと翻訳サービスを一緒に使用することをお勧めします。

gt-reactやgt-nextなどのGTライブラリを使用すると、以下のことができます：

1. 文字列だけでなく、Reactコンポーネント全体を翻訳

<T>コンポーネントの子要素として渡されるUIは、JSXツリーがどれほど複雑でも翻訳されます。例えば：

import { T } from "gt-next";
 
export default function Page() {
  return (
    <T>
      <p>Any children of <b>the {`<T>`} component</b> will be translated.</p>
      <p>
        Things like <a href="/">links</a>{', '}
        <button>buttons</button>{', '}
        and even <div> <div> <div> deeply nested components </div> </div> </div>  are translated.
      </p>
    </T> 
  );
}

2. クライアントとサーバーの両方のコンポーネントを翻訳する

Next.jsのApp Routerと React Server Componentsの一級サポートにより、 クライアントとサーバーの両方のコンポーネントを翻訳できます。

import getName from "@/getName";
import { T, Var } from "gt-next";
 
export default async function MyServerComponent() {
  const name = await getName();
 
  return (
    <T>
      Hello, <Var>{name}</Var>
    </T>
  );
}

"use client";
 
import { useState } from "react";
import { T, Var } from "gt-next";
 
export default function MyClientComponent() {
  const [name, setName] = useState("Alice");
 
  return (
    <T>
      Hello, <Var>{name}</Var>
    </T>
  );
}

3. コンテンツをインラインまたは辞書に記述する

<T>コンポーネント内に配置されたJSXコンテンツは翻訳対象としてマークされます：

import { T } from "gt-next";
 
export default function Page() {
  return (
    <T>
      <p>Hello, World!</p>  {/* translates <p>Hello, World!</p> */}
    </T>
  )
}

あるいは、従来の辞書アプローチを使用したい場合は、辞書ファイルにコンテンツを記述できます：

{
  "greeting": "Hello, World!"
}

import { useDict } from "gt-next";
 
export default function Page() {
  const d = useDict();
  return d('greeting'); // translates "Hello, World!"
}

4. 開発中に翻訳されたコンテンツを確認する

異なる言語でUIがどのように見えるかを心配する必要はありません。 General Translationはコンテンツを書いている間、リアルタイムで自動的に翻訳します。

本番環境でUIを何度も修正する必要はなく、 英語でコンテンツを一度書くだけで、あとはGeneral Translationにお任せください。

デプロイ前にUIエレメントがドイツ語でどのように見えるか確認したいですか？問題ありません、General Translationが自動的に翻訳します！

5. オンデマンドでコンテンツを翻訳する

アプリは実行時にのみ判明するコンテンツを翻訳する必要がよくあります。 Next.jsでは、GTライブラリはオンデマンドでコンテンツを翻訳する機能をサポートしています。

一般的な例としては：

• ユーザー固有の情報
• リモートに保存されたコンテンツ
• 動的に生成されるコンテンツ

翻訳がロードされると、新しい翻訳コンテンツでコンポーネントがリアルタイムに書き換えられます。

はじめましょう

npm i gt-next

グローバル展開の準備はできていますか？数分でアプリの翻訳を開始し、世界中のユーザーにリーチしましょう！