はじめに

はじめに

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

一般翻訳とは何ですか？

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

一般翻訳には以下が含まれています：

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

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

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

JSON、Markdown、またはMDXファイルの翻訳に一般翻訳を使用したい場合は、CLIツールのドキュメントをご覧ください。

npx gtx-cli@latest init

セットアップウィザードを実行して始めましょう！

機能

⚛️ 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翻訳、そして多言語アプリのための完全なインフラストラクチャパッケージを含んでいます。

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

シームレスなエンドツーエンドの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

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