戻る

gt@2.11.3

Ernest McCarter avatarErnest McCarter
gt-clideriveobjectsarrays

概要

derive() がオブジェクトや 配列 へのアクセスをサポートするようになりました。以前の derive() で解決できたのは関数呼び出しだけでしたが、現在はオブジェクト、配列、辞書から値を解決できるため、ルックアップ pattern をより簡単に扱えるようになりました。

これは、gt-react@10.15.0 でリリースされた derive() in tagged templates をベースにした機能です。

新機能

オブジェクトアクセス

オブジェクトのプロパティ参照では derive() を使用します。CLI は抽出時に、取り得るすべての値を静的に特定します。

const statusMessages = {
  success: "Your order has been placed.",
  pending: "Your order is being processed.",
  error: "Something went wrong with your order.",
} as const;

export default function OrderBanner({ status }: { status: string }) {
  return <p>{t`Thanks for shopping! ${derive(statusMessages[status])}`}</p>;
}

CLI は、取り得る各値に対して個別の翻訳を抽出します。

  • "ご購入ありがとうございます。ご注文を受け付けました。"
  • "ご購入ありがとうございます。ご注文を処理中です。"
  • "ご購入ありがとうございます。ご注文の処理中に問題が発生しました。"

静的なアクセス (statusMessages.success) と動的なアクセス (statusMessages[status]) の両方に対応しています。

配列へのアクセス

配列も同様です:

const steps = [
  "Create your account",
  "Verify your email",
  "Start your first project",
] as const;

export default function Onboarding({ step }: { step: number }) {
  return <h2>{t`Step ${step + 1}: ${derive(steps[step])}`}</h2>;
}

抽出されたエントリ:

  • "ステップ {step + 1}: アカウントを作成"
  • "ステップ {step + 1}: メールアドレスを確認"
  • "ステップ {step + 1}: 最初のプロジェクトを開始"

ネストされたアクセス

オブジェクトや配列へのアクセスを、任意の深さまで連鎖できます。

const content = {
  greetings: {
    formal: "Good morning.",
    casual: "Hey!",
  },
} as const;

// derive(content[category][style]) は動作します

Python サポート

Python でも、同じパターンを t() と一緒に使えます。derive() は、第1引数として渡すか、f-string 内で使用します。

badges = {
    "admin": "Administrator",
    "mod": "Moderator",
    "user": "Member",
}

# 単独のderive
t(derive(badges[role]))

# 周囲のコンテキストを付与するf-string内のderive
t(f"Logged in as {derive(badges[role])}")

抽出されたエントリ:

  • "管理者としてログイン中"
  • "モデレーターとしてログイン中"
  • "Memberとしてログイン中"

リンク