select

select は、ICU select メッセージのためのコアマクロです。同じロジックには、コンポーネントマクロ形式の Select もあります。

文言が、トーン、役割、状態、文法カテゴリのような名前付きケースによって変わる場合に使ってください。 単独で翻訳済み文字列を生成することもできますし、select がより大きなメッセージの一部であるなら t`...` テンプレートリテラルの中に埋め込むこともできます。

ケースキーは、接頭辞なしの通常の JavaScript オブジェクトキーとして書きます。 たとえば { formal: "Welcome", casual: "Hi", other: "Hello" } のように書きます。 関数形式ではアンダースコアは使いません。 _ 接頭辞の規約が適用されるのは、予約済みプロパティである value や other と区別する必要があるコンポーネントマクロ Select だけです。

フレームワークに依存しない Lingui の意味論については、公式の select リファレンス を参照してください。

ソース

Demo.svelte カタログ

<p>
  {$select(tone, {
    formal: "Welcome",
    casual: "Hi",
    other: "Hello",
  })}
</p>

#: src/demos/macros/select/Demo.svelte
msgid "{tone, select, formal {Welcome} casual {Hi} other {Hello}}"
msgstr "{tone, select, formal {Welcome} casual {Hi} other {Hello}}"

結果

プレビュー 変換されたSvelte コンパイルされたカタログ

Welcome

<p>
  {$__l4s_translate(
  /*i18n*/ {
    id: "JSpkOy",
    values: {
      tone: tone
    }
  })}
</p>

/*eslint-disable*/
import type { Messages } from "@lingui/core";
export const messages = JSON.parse(
  "{\"JSpkOy\":[[\"tone\",\"select\",{\"formal\":[\"Welcome\"],\"casual\":[\"Hi\"],\"other\":[\"Hello\"]}]]}",
) as Messages;

ロケール

EN JA

トーン

フォーマル カジュアル その他

使い方

Svelte

<script lang="ts">
  import { select, t } from "lingui-for-svelte/macro";

  let tone = $state("formal");
</script>

<!-- 単独使用: select 文字列を直接生成する -->
<p>
  {$select(tone, {
    formal: "Welcome",
    casual: "Hi",
    other: "Hello",
  })}
</p>

<!-- 埋め込み: select はより大きな翻訳単位の一部 -->
<p>
  {$t`Greeting: ${select(tone, {
    formal: "Welcome",
    casual: "Hi",
    other: "Hello",
  })}`}
</p>

.svelte ファイルでは、単独でリアクティブに使うなら $select を使います。 $t`...` の中にネストする場合は、$ 接頭辞なしの select を使います。

完全な説明と select.eager というエスケープハッチについては リアクティブマクロ を参照してください。

Astro

---
import { select, t } from "lingui-for-astro/macro";

const tone = "formal";
---

<!-- 単独使用: select 文字列を直接生成する -->
<p>
  {
    select(tone, {
      formal: "Welcome",
      casual: "Hi",
      other: "Hello",
    })
  }
</p>

<!-- 埋め込み: select はより大きな翻訳単位の一部 -->
<p>
  {
    t`Greeting: ${select(tone, {
      formal: "Welcome",
      casual: "Hi",
      other: "Hello",
    })}`
  }
</p>

Official Lingui

import { select, t } from "@lingui/core/macro";

// 単独使用
const label: string = select(tone, {
  formal: "Welcome",
  casual: "Hi",
  other: "Hello",
});

// 埋め込み
const message: string = t`Greeting: ${select(tone, {
  formal: "Welcome",
  casual: "Hi",
  other: "Hello",
})}`;

select が向いている場面

• メッセージが数値以外のケース値に依存する
• ケースをマークアッププロパティより文字列として表すほうが自然である
• 公式 Lingui Core select と同じ意味論を使いたい