Select

Select は、コアマクロ select に対応するコンポーネントマクロです。

同じケース分岐ベースの ICU 選択ロジックを表しますが、ネストした関数呼び出しより、マークアップファイル内で自然に読める形で記述できます。

独自ケース値（other 以外）は、value のような予約済みコンポーネントプロパティと区別するため、_ 接頭辞を付けます。 たとえば formal ケースは _formal="..." になります。 other は ICU の必須キーワードであって独自値ではないため、接頭辞は付きません。

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

ソース

Demo.svelte カタログ

<p>
  <Select value={tone} _formal="Welcome" _casual="Hi" other="Hello" />
</p>

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

結果

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

Hi

<p>
  <L4sRuntimeTrans {.../*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 } from "lingui-for-svelte/macro";

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

<Select value={tone} _formal="Welcome" _casual="Hi" other="Hello" />

Astro

---
import { Select } from "lingui-for-astro/macro";

const tone = "casual";
---

<Select value={tone} _formal="Welcome" _casual="Hi" other="Hello" />

Official Lingui

import { Select } from "@lingui/react/macro";

function Component() {
  return <Select value={tone} _formal="Welcome" _casual="Hi" other="Hello" />;
}

Select が向いている場面

• すでにファイル全体がマークアップ寄りである
• select の分岐をコンポーネントプロパティとして書くほうが読みやすい
• 基本の Lingui 意味論はそのままに、コンポーネント形式で書きたい