msg と defineMessage

msg と defineMessage は、すぐに翻訳せず、メッセージ記述子だけを定義します。 msg は defineMessage の別名であり、機能は同一です。

メッセージを保存したい場合、エクスポートしたい場合、複数ファイルで再利用したい場合、あるいは別のレンダラーやランタイム境界であとから翻訳したい場合に適しています。

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

ソース

Demo.svelte カタログ

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

  const submitLabel = defineMessage({
    id: "form.submit",
    message: "Submit",
  });
  let welcome = $derived(msg`Welcome back, ${name}`);
</script>

<p class="mb-2">
  {$t(welcome)}
</p>

<button
  type="button"
  class="rounded bg-blue-500 px-4 py-2 text-white enabled:hover:bg-blue-600"
>
  {$t(submitLabel)}
</button>

#. js-lingui-explicit-id
#: src/demos/macros/msg-and-define-message/Demo.svelte
msgid "form.submit"
msgstr "Submit"

#: src/demos/macros/msg-and-define-message/Demo.svelte
msgid "Welcome back, {name}"
msgstr "Welcome back, {name}"

結果

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

Welcome back, Lingui

Submit

<script lang="ts">
  import { createLinguiAccessors as createLinguiAccessors } from "lingui-for-svelte/runtime";
  const __l4s_ctx = createLinguiAccessors();
  const __l4s_getI18n = __l4s_ctx.getI18n;
  const __l4s_translate = __l4s_ctx._;

  const submitLabel = /*i18n*/ {
    id: "form.submit"
  };
  let welcome = $derived(/*i18n*/ {
    id: "CaB_-I",
    values: {
      name: name
    }
  });

  __l4s_ctx.prime();
</script>

<p class="mb-2">
  {$__l4s_translate(welcome)}
</p>

<button
  type="button"
  class="rounded bg-blue-500 px-4 py-2 text-white enabled:hover:bg-blue-600"
>
  {$__l4s_translate(submitLabel)}
</button>

/*eslint-disable*/
import type { Messages } from "@lingui/core";
export const messages = JSON.parse(
  "{\"form.submit\":[\"Submit\"],\"CaB_-I\":[\"Welcome back, \",[\"name\"]]}",
) as Messages;

ロケール

EN JA

名前

使い方

Svelte

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

  const welcome = msg`Welcome back`;

  const submitLabel = defineMessage({
    id: "form.submit",
    message: "Submit",
  });
</script>

<p>{$t(welcome)}</p>

Astro

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

const welcome = msg`Welcome back`;

const submitLabel = defineMessage({
  id: "form.submit",
  message: "Submit",
});
---

<p>{t(welcome)}</p>

Official Lingui

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

const welcome = msg`Welcome back`;

const submitLabel = defineMessage({
  id: "form.submit",
  message: "Submit",
});

const label = t(welcome);

ヒント

記述子は別ファイルで定義してエクスポートすることもできます。 素の JavaScript または TypeScript で使う場合は次のとおりに行います。

• @lingui/core/macro からマクロをインポートする
• unplugin-lingui-macro で変換する

完全なセットアップと推奨される記述パターンは プレーンな JS/TS でのセットアップ を参照してください。

向いている場面

• 翻訳は定義時ではなく、あとで行いたい
• 同じ記述子を複数ファイルや複数レンダラーで再利用する
• 素の TypeScript / JavaScript を公式 Lingui Core の書き方に近づけたい

推奨ルール

素の .js と .ts ファイルでは、公式の @lingui/core/macro パッケージからインポートしてください。 フレームワーク固有パッケージはフレームワーク構文向けであり、汎用的な記述子定義のためのものではありません。