0Pricing
Angular Academy · レッスン

複数形とSelect(ICU)

複数形と性別に応じたテキストを処理します

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

単純なプレースホルダーだけでは不十分な理由

「You have 1 messages」は正しい英語ではありません。言語によって複数形の規則が異なり、複数の形式を持つ言語もあります。また、性別やカテゴリに応じて表現が変わる場合もあります。Angularでは、ICUメッセージ形式のplural式とselect式を使ってこれに対応します。

plural式

ICUのpluralは、数値に基づいて表現を選択します。複数形のカテゴリごとにケースを列挙し、それぞれのテキストを指定します。

<p i18n>{count, plural,
  =0 {No messages}
  =1 {One message}
  other {{{count}} messages}
}</p>

複数形のカテゴリ

カテゴリには、完全一致(=0、=1)と、CLDRキーワードであるzero、one、two、few、many、必須のotherがあります。ロケールごとに異なるサブセットが自動的に使用されます。

ハッシュプレースホルダー

pluralのケース内では、#は照合対象の数値を表す省略記法です。そのため、バインディングを繰り返す必要はありません。

<p i18n>{count, plural,
  =1 {You have one item}
  other {You have # items}
}</p>

select式

selectは文字列値に基づいてテキストを選択します。性別、ステータス、種類などのカテゴリに適しています。

<p i18n>{gender, select,
  male {He replied}
  female {She replied}
  other {They replied}
}</p>

otherは必須

pluralとselectのどちらにもother分岐が必要です。これは具体的なケースが一致しない場合のフォールバックであり、欠落しているとAngularはエラーになります。

周囲のテキストとの組み合わせ

ICU式は通常の翻訳テキストの中に配置できます。翻訳者が語順を調整できるよう、文全体を1つのi18nブロックに含めます。

<p i18n>Hi {{ name }}, {count, plural,
  =0 {you have no notifications}
  other {you have # notifications}
}.</p>

plural内でのselectのネスト

ICU式はネストできるため、文法上必要な場合に数量とカテゴリの両方を組み合わせて表現できます。

{count, plural,
  =0 {No guests}
  other {# {type, select, vip {VIP} other {regular}} guests}
}

翻訳者によるカテゴリの調整

翻訳時には、ロケールが文法上必要とする複数形を追加できます(例:ロシア語ではone、few、manyを使用します)。ICUユニットのXLIFF targetには、ローカライズされた各分岐が含まれます。

$localizeを使ったTypeScript内のICU

ICU構文は$localizeを付けた文字列内でも使用できるため、コンポーネントコード内の複数形ロジックも翻訳可能な状態に保てます。

const label = $localize('{count, plural, =1 {1 file} other {{{count}} files}}');

ICUが手動のif/elseより優れている理由

count === 1 ? 'message' : 'messages'をハードコードすると、英語のような2種類だけの複数形を前提にしてしまいます。ICUは各ロケールのCLDRデータに規則を委ねるため、3種類や6種類の複数形を持つ言語でも、コードを変更せずに正しく表示できます。

クイックチェック

常に必要なICUの分岐はどれですか?

まとめ

ICUのpluralは、#で数値を表し、カテゴリ(=0、one、other)に基づいてテキストを選択します。一方、selectは文字列値に基づいて選択します。どちらもother分岐が必要で、自由にネストでき、$localizeで使用でき、各ロケール独自の複数形規則を適用できます。

よくある質問

「複数形とSelect(ICU)」レッスンは無料ですか?

はい。「複数形とSelect(ICU)」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「複数形とSelect(ICU)」で何を学びますか?

複数形と性別に応じたテキストを処理します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「複数形とSelect(ICU)」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか?

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 翻訳対象テキストのマーキング
  2. メッセージの抽出と翻訳
  3. 複数形とSelect(ICU)
  4. ローカライズ済みバンドルの構築
← Angular Academyに戻る