{t('key')}
; // more details below ``` ### クラスコンポーネント ```js import { withTranslation } from 'react-i18next'; // withTranslation adds the "t" function to props: const { t } = this.props; // call the "t" function with a key from the JSON file:{t('p1')}
// in the JSON file: { "p1": "My paragraph" } // output:My paragraph
``` ### 動的データの使用 ```js // in the component: const username = 'moT';{t('welcome', { username: username })}
// in the JSON file: { "welcome": "Welcome {{username}}" } // output:Welcome moT
``` 上の例では、 `username` 変数を使用して `t` 関数にオブジェクトを渡します。 変数は、`{{username}}` の JSON 値で使用されます。 ## `Trans` コンポーネントを使用した翻訳 一般的なルールは、「t」関数を使うことです。 しかし、それだけでは不十分な場合のための `Trans` コンポーネントがあります。通常、テキストに要素が埋め込まれている場合に使用されます。 どんな型の React コンポーネントでも `Trans` コンポーネントを使用できます。 ### ネストされた基本要素 ```js // in the component: import { Trans } from 'react-i18next'
Welcome to freeCodeCamp
``` 上記の例のように、テキストが属性のない「単純な」タグを含む場合、キーをコンポーネントタグの中に置くことができます。 `br`、`strong`、`i`、および `p` がデフォルトですが、そのリストは、i18n config で拡張できます。 ### ネストされた複雑な要素 別の要素内に特定のテキストを持たせたい場合、アンカータグが良い例です。 ```js // in the component: // in the JSON file: { "check-forum": "Check out <0>our forum." } // output:Check out our forum
``` 上記の例では、キーは `Trans` コンポーネントの属性に設定されています。 JSON の `<0>` と `` はコンポーネントの最初の子要素を表します。 この場合、アンカー要素です。 もっと多くの子要素がある場合、同じ構文を使ってそこから数えるだけです。 React 開発ツールで調べることにより、コンポーネントの子要素を見つけることができます。 `placeholder` は単にそこにあるだけです。なぜなら、リンターが空の `` 要素について不平を言うからです。 ### 変数の使用 ```js // in the component: const email = 'team@freecodecamp.org'; // in the JSON file: { "fcc": { "email": "Send us an email at: <0>{{email}}" } } // output:Send us an email at: team@freecodecamp.org
``` 上記の例では、キーと変数は `Trans` コンポーネントの属性に設定されています。 `{{ email }}` は、`Trans` コンポーネントのどこかにある必要がありますが、どこであっても問題はありません。 ## テキストの変更 クライアント側でテキストを変更するには、関連する `.json ` ファイルで、React コンポーネントで使用されているキーを見つけて、値を新しいテキストに変更します。 そのキーが他の場所で使用されていないことを確認するために、コードベースを検索する必要があります。 他の場所で使用されていた場合、そのすべての場所で変更が実行されます。 ## テキストの追加 クライアントに追加するテキストが、関連する `.json` ファイルに存在する場合は、既存のキーを使用します。 それ以外の場合は、新しいキーを作成します。 英語ファイルは、同じ名前を共有する `.json` ファイルすべてにとって、「真実を語る資料」です。 新しいキーを追加する必要がある場合は、そこに追加します。 そして、そのキーを **すべて** の `translations.json` ファイルに追加します。 > [!NOTE] ファイルが Crowdin で翻訳されている場合は、すべての言語に英語のテキストを使用してください。 そうしないと、テストは失敗します。 すべてのファイルで、キーを同じ順序に保つことをお勧めします。 また、コンポーネントやサーバーファイルではなくJSON ファイルに、すべての句読点、スペース、引用符などを 入れるようにしてください。 > [!NOTE] アンダースコア (`_`) は、クライアント側ファイルのキー用予約文字です。 使用方法については、 [ドキュメント](https://www.i18next.com/translation-function/plurals) を参照してください。 ## 参考ドキュメント - [react-i18next docs](https://react.i18next.com/latest/usetranslation-hook) - [i18next docs](https://www.i18next.com/translation-function/essentials)