# vue: 数値と日付のフォーマット
URL: https://generaltranslation.com/ja/docs/vue/guides/formatting-variables.mdx
---

title: 数値と日付のフォーマット
description: 動的な値を保持し、Vue の各ロケールに合わせて数値、通貨、日付をフォーマットする方法。
related:
  links:
    - /docs/vue/guides/translating-content
    - /docs/vue/guides/handling-plurals-and-branches
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/managing-locales

---

動的な値は、翻訳者が並べ替え可能な静的テキストとは分離しておく必要があります。変更せずにレンダリングする値には [`<Var>`](/docs/vue/reference/components/var) を使用し、ロケールの慣習に従って表示する値にはフォーマットコンポーネントを使用します。

## 適切なコンポーネントを選択する [#choose]

* [`<Var>`](/docs/vue/reference/components/var) は、ランタイム値を翻訳やフォーマットせずにそのまま保持します。
* [`<Num>`](/docs/vue/reference/components/num) は、数値、パーセンテージ、単位をフォーマットします。
* [`<Currency>`](/docs/vue/reference/components/currency) は、通貨コードを指定して金額をフォーマットします。金額の換算は行いません。
* [`<DateTime>`](/docs/vue/reference/components/datetime) は、日付、時刻、またはその両方をフォーマットします。

3つのフォーマットコンポーネントはいずれも `value` prop が必要です。React の対応コンポーネントとは異なり、スロットコンテンツから値を取得しません。

## `<Var>` で値を保持する [#var]

ランタイム値は、[`<Var>`](/docs/vue/reference/components/var) のデフォルトスロットに配置します。

```vue
<script setup lang="ts">
import { T, Var } from 'gt-vue';

defineProps<{ accountName: string }>();
</script>

<template>
  <T>Welcome back, <Var>{{ accountName }}</Var>!</T>
</template>
```

[`<Var>`](/docs/vue/reference/components/var) は意図的に子要素専用となっています。React スタイルの `name` や `value` props は受け付けません。値は翻訳対象から除外され、翻訳後のフレーズ内で参照される箇所に再挿入されます。

ユーザー名、識別子、プライベート情報など、指定どおりに正確に表示する必要がある値に使用します。

## 数値と通貨をフォーマットする [#numbers]

ランタイムの数値は `:value` に渡します。[`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) のオプションは `options` で指定します。

```vue
<script setup lang="ts">
import { Currency, Num, T } from 'gt-vue';

const completion = 0.72;
const total = 1299.5;
</script>

<template>
  <T>
    Your profile is
    <Num :value="completion" :options="{ style: 'percent' }" />
    complete.
  </T>

  <T>
    Your total is <Currency :value="total" currency="USD" />.
  </T>
</template>
```

[`<Currency>`](/docs/vue/reference/components/currency) は、`currency` を省略した場合、デフォルトで `USD` になります。金額が別の通貨のものである場合は、通貨コードを明示的に指定してください。

フォーマットによって変わるのは表示だけです。区切り文字や通貨記号の位置が変わっても、`1299.5` は同じ金額を表します。

## 日付と時刻をフォーマットする [#dates]

[`<DateTime>`](/docs/vue/reference/components/datetime) は、`Date`、エポック数値、日付文字列、または `null` を受け取ります。表示するフィールドとタイムゾーンを指定するには、[`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) のオプションを渡します。

```vue
<script setup lang="ts">
import { DateTime, T } from 'gt-vue';

const publishedAt = new Date('2026-08-12T17:30:00Z');
</script>

<template>
  <T>
    公開日時
    <DateTime
      :value="publishedAt"
      :options="{
        dateStyle: 'medium',
        timeStyle: 'short',
        timeZone: 'UTC',
      }"
    />.
  </T>
</template>
```

同じ時点をサーバーとクライアントで一貫してレンダリングする必要がある場合は、タイムゾーンを固定します。固定しないと、各環境のローカルタイムゾーンにより、hydration 時に異なる出力が生成される可能性があります。

## フォーマットに使用するロケールを制御する [#locales]

通常、フォーマットにはアクティブな翻訳ロケールが使用されます。スタンドアロンのフォーマッターには、優先順位を付けた `locales` を指定できます。

```vue
<Num :value="total" :locales="['fr-CA', 'fr']" />
```

アクティブなロケールがデフォルトロケールと異なる場合、スタンドアロンのフォーマッターはまず明示的に指定された `locales` を使用し、次にアクティブなロケール、最後にデフォルトロケールを使用します。デフォルトロケールでは、ソースのフォーマットにはデフォルトロケールが使用され、オーバーライドは無視されます。

[`<T>`](/docs/vue/reference/components/t) 内では、リッチ翻訳パイプラインがロケールの選択を制御します。ソースのフォールバックコンテンツにはデフォルトロケールが使用され、翻訳済みコンテンツにはアクティブなロケール、次にデフォルトロケールが使用されます。値に特定の外部ロケール要件がある場合を除き、アクティブなロケールを優先してください。
## Next steps

- /docs/vue/guides/translating-content
- /docs/vue/guides/handling-plurals-and-branches
- /docs/vue/guides/translating-strings
- /docs/vue/guides/managing-locales