React Academy · レッスン

複数形とInterpolation

Q: 「複数形とInterpolation」で何を学びますか？

数に応じた複数形を扱い、翻訳済み文字列に動的な値を挿入します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

数に応じた複数形を扱い、翻訳済み文字列に動的な値を挿入します。

「複数形とInterpolation」はCoddyKit上の無料React Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、i18nextの補間機能と複数形サポートを使用して、数量に基づく複数形を扱い、翻訳された文字列に動的な値を挿入します。

補間の基本

翻訳文字列内で二重中括弧をプレースホルダーとして使用します。変数の値を含むオブジェクトをt()の2番目の引数として渡します。

// JSON: "greeting": "Hello, {{name}}!"
t('greeting', { name: 'Alice' }); // Hello, Alice!

複数の補間変数

1つの文字列内で、必要な数だけ補間変数を使用できます。

// JSON: "summary": "You have {{count}} messages in {{folder}}"
t('summary', { count: 5, folder: 'Inbox' });
// You have 5 messages in Inbox

HTMLのエスケープ

デフォルトでは、i18nextは補間された値に含まれるHTML文字をエスケープします。補間された値内でHTMLをレンダリングするには、初期化設定で`escapeValue: false`を設定します（ReactではJSXがエスケープされるため、すでに安全です）。

複数形

i18nextは複数形を自動的にサポートします。単数形には`key`、複数形には`key_other`（または`key_plural`）を定義します。補間用オブジェクトに`count`を渡します。

// JSON:
// "item": "{{count}} item"
// "item_other": "{{count}} items"

t('item', { count: 1 }); // 1 item
t('item', { count: 5 }); // 5 items

言語固有の複数形ルール

複数形のルールは言語によって異なります。ロシア語には4種類、アラビア語には6種類の複数形があります。i18nextは各言語のUnicode CLDRルールを自動的に使用します。翻訳ファイルには必要な形式をすべて定義します。

// Russian (ru):
// key_one, key_few, key_many, key_other

ゼロ形式

i18nextは、countが0の場合に使用する特別な`key_zero`形式もサポートしています。これにより、「0個」ではなく「該当する項目はありません」のように異なる表現を使用できます。

// JSON:
// "messages_zero": "No messages"
// "messages_one": "{{count}} message"
// "messages_other": "{{count}} messages"

t('messages', { count: 0 }); // No messages

複数形を含むネストしたキー

ネストしたオブジェクト内に複数形のキーを定義することもできます。通常のネストしたキーと同じように、ドット記法でアクセスします。

// JSON: { "cart": { "items_one": "item", "items_other": "items" } }
t('cart.items', { count: 3 }); // items

日付と数値のフォーマット

i18nextはIntl APIと連携して、ロケールに応じた日付と数値のフォーマットに対応します。i18n.format()またはintlifyプラグインを使用すると、翻訳の一部として日付をフォーマットできます。

t('lastSeen', { date: new Date(), formatParams: {
  date: { month: 'long', day: 'numeric' }
}});

コンテキストに基づく翻訳

文脈によって文法上の形が異なる場合（性別による単語など）は、`context`オプションを使用します。翻訳ファイルに`key_male`と`key_female`のバリエーションを定義します。

// JSON: { "hero_male": "Hero", "hero_female": "Heroine" }
t('hero', { context: 'female' }); // Heroine

確認

i18nextで、'username'という名前の動的な値を翻訳文字列に渡すにはどうすればよいですか？

まとめ

補間には{{variable}}、複数形にはkey_other/key_one、ゼロ形式にはkey_zeroを使用します。i18nextは言語ごとにUnicode CLDRの複数形ルールを自動的に適用します。文法上のバリエーションにはcontextを使用します。

次のレッスン：**言語スイッチャーと翻訳の遅延読み込み** — ロケールの切り替え機能を作成し、必要なときに翻訳バンドルを読み込みます。

よくある質問