0Pricing
TypeScript Academy · レッスン

型による複数形処理

複数形を型安全な方法でモデル化します。

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

型安全な複数形処理

言語には複数形が必要です。たとえば「1 個のアイテム」と「2 個のアイテム」は異なります。型安全な i18n では、カテゴリ(one / other など)として複数形をモデル化し、count 引数を必須にすることで、指定し忘れを防ぎます。

複数形カテゴリ

Intl の複数形ルールでは、zero、one、two、few、many、other などのカテゴリが定義されています。英語で使うのは one と other だけですが、より多くのカテゴリを使うロケールもあります。

type PluralCategory = "zero" | "one" | "two" | "few" | "many" | "other";

複数形メッセージの形

複数形のメッセージは、カテゴリをキーとするオブジェクトとして表現します。other は必須のフォールバックです。

type PluralMessage = {
  other: string;
} & Partial<Record<Exclude<PluralCategory, "other">, string>>;

const items: PluralMessage = {
  one: "{count} item",
  other: "{count} items",
};

複数形と通常のメッセージの判別

カタログには通常の文字列と複数形オブジェクトが混在します。必要な引数はそれぞれ異なるため、型レベルで形状を判別します。

type IsPlural<M> = M extends { other: string } ? true : false;

count を必須にする

メッセージが複数形の場合、translate の args には数値の count を含める必要があります。条件付きで args 型を計算します。

type PluralArgs<M> = IsPlural<M> extends true
  ? { count: number }
  : {};

type A = PluralArgs<typeof items>; // { count: number }

複数形用の型付き t

カタログの検索と条件付きの args を組み合わせることで、複数形のメッセージには count を要求し、通常のメッセージには要求しないようにします。

declare const cat: {
  items: { one: string; other: string };
  hello: string;
};

declare function t<K extends keyof typeof cat>(
  key: K,
  args: PluralArgs<(typeof cat)[K]>
): string;

t("items", { count: 3 }); // ok
t("items", {});           // Error: count required
t("hello", {});           // ok

実行時に形式を選択する

実行時には Intl.PluralRules が count からカテゴリを選び、対応する文字列を読み取ります(other にフォールバックします)。

function plural(msg: { other: string; [k: string]: string }, count: number, locale: string) {
  const cat = new Intl.PluralRules(locale).select(count);
  return (msg[cat] ?? msg.other);
}

補間との組み合わせ

複数形の文字列には通常 {count} も含まれます。args 型では、複数形に必要な引数と、選択した形式から抽出した補間変数を交差型で組み合わせられます。

type FullArgs<M> = PluralArgs<M> & ExtractVars<M>;
// count plus any {placeholders} in the message

より豊富な形式を持つロケール

一部のロケール(ポーランド語やロシア語など)では、few と many を使います。PluralCategory にはこれらがすでに含まれているため、カタログでこれらのキーを指定すれば、同じ仕組みで処理できます。

const ruItems = {
  one: "{count} товар",
  few: "{count} товара",
  many: "{count} товаров",
  other: "{count} товара",
};

other フォールバックを強制する

PluralMessage では other が必須なので、型システムによってフォールバックの存在が保証されます。これにより、どの複数形にも一致しない形式が実行時に発生するのを防げます。

これが重要な理由

型付けされていない i18n では、複数形のバグ(「1 個のアイテム」ではなく「1 個のアイテムズ」になるなど)や count の指定忘れがよく起こります。カテゴリを型としてモデル化し、count を必須にすることで、正しい複数形処理がデフォルトになり、count の不足はコンパイルエラーになります。

クイックチェック

型安全な複数形処理についての理解度を確認します。

まとめ

複数形カテゴリをキーとし、other フォールバックを必須とするオブジェクトとして複数形をモデル化しました。また、型レベルで複数形メッセージを判別し、条件付き型によって数値の count 引数を必須にしました。実行時には Intl.PluralRules が形式を選択し、同じ仕組みをより多くの形式を持つロケールにも拡張できます。

よくある質問

「型による複数形処理」レッスンは無料ですか?

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

「型による複数形処理」で何を学びますか?

複数形を型安全な方法でモデル化します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「型による複数形処理」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

  1. 翻訳キーの型付け
  2. 補間の型安全性
  3. 型による複数形処理
  4. ロケール対応の型推論
← TypeScript Academyに戻る