辞書

辞書の使い方

概要

辞書は、General Translationで文字列コンテンツを翻訳する方法です。 すべてのコンテンツは中央ファイルに保存され、useDict() フックを使用してアクセスできます。

他のi18nライブラリを使用したことがある場合、翻訳ファイル(en.jsonzh.jsonなど)の使用に慣れているかもしれません。 辞書の使用は基本的に構文的に同じですが、ベース言語で1つのファイルのみを維持する必要があります。 すべての翻訳はLLMによって生成されます。

ヒント: 文字列コンテンツを翻訳するためのよりシンプルな方法をお探しの場合は、useGT() フックの使用をお勧めします。


利点と欠点

辞書を使用することにはいくつかの利点があります:

  1. 一元化されたストレージ: 辞書はすべての翻訳可能なコンテンツを単一のファイルに保存するため、管理や更新が容易になります。
  2. 歴史的な先例: 辞書パターンは業界で一般的な設計パターンであり、多くの他のライブラリでも使用されています。

同時に、いくつかの欠点もあります:

  1. 複雑さ: 辞書はインラインで文字列コンテンツを翻訳するよりも、セットアップや使用が複雑です。
  2. 可読性: 辞書はインライン翻訳よりも可読性が低くなります。なぜなら、コンテンツが使用されるコンテキストから分離されているためです。
  3. 保守性: 辞書はインライン翻訳よりも保守が難しくなります。コンテンツが変更された場合、手動で辞書ファイルを更新する必要があるためです。

辞書はインライン翻訳の代替設計パターンですが、これらのパターンは私たちのライブラリでサポートされており、相互に排他的ではありません。 <T> コンポーネントuseGT() フックを使用して、インライン翻訳と一緒に辞書を使用することができます。


辞書ファイル(.jsまたは.json)で文字列コンテンツを指定します。

src/dictionary.json
{
  "greetings": {
    "hello": 'Hello, World!',
  },
} 

次に、キーをd()関数に渡してコンポーネントで参照します。

src/MyComponent
import { GTProvider, useDict } from 'gt-react';
import dictionary from './dictionary.json';
 
export default function MyComponent() {
 
  const d = useDict(); 
 
  return (
    <GTProvider dictionary={dictionary}>
      <div>
        {d('greetings.hello')} // [!code highlight]
      </div>
    </GTProvider>
  );
}

注意点

  • 辞書はGeneral Translationでコンテンツを翻訳する方法です。
  • useDict() フックは辞書パターンで文字列を翻訳するために使用されます。

次のステップ

  • 詳細については、ReactまたはNext.jsの辞書に関するガイドをご覧ください。

このページについて