Vue Academy · レッスン

数値・日付・通貨のフォーマット

数値用のn()、日付用のd()、日時フォーマット、ロケールごとのnumberFormats

「数値・日付・通貨のフォーマット」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

数値と日付はロケールによって異なる

米国での1,000.50は、ヨーロッパの多くの地域では1.000,50と表記されます。日付や通貨も異なります。Vue I18nはブラウザーのIntl APIをラップし、ロケールに応じて数値、日付、金額を正しく表示します。

numberFormatsの設定

createI18nのnumberFormatsオプションで、ロケールごとに名前付きの数値フォーマットを定義します。各名前付きフォーマットは、Intl.NumberFormatのオプションオブジェクトです。

const i18n = createI18n({
  locale: "en",
  numberFormats: {
    en: {
      currency: { style: "currency", currency: "USD" },
      decimal: { style: "decimal", minimumFractionDigits: 2 },
    },
  },
})

n()関数

useI18n()から取得したn(value, formatName)で数値をフォーマットします。テンプレートでは$nを使います。アクティブなロケールの名前付きフォーマットが適用されます。

const { n } = useI18n()

n(1234.5, "decimal") // "1,234.50" in en

通貨のフォーマット

currencyスタイルは、適切な通貨記号と桁区切りを追加します。フォーマット設定の通貨コードによって、表示される記号が決まります。

const { n } = useI18n()

n(49.99, "currency") // "$49.99" in en

ロケールに応じた通貨表示

各ロケールに、ロケールに適した設定で同じ名前付きフォーマットを追加します。localeを切り替えると、桁区切り、小数点記号、記号の位置が自動的に変わります。

numberFormats: {
  en: { currency: { style: "currency", currency: "USD" } },
  tr: { currency: { style: "currency", currency: "TRY" } },
}
// n(49.99, "currency") => "$49.99" (en) or "TRY 49,99" style (tr)

パーセンテージ

percentスタイルは値を100倍し、ロケールに応じたパーセント記号を付けます。

numberFormats: {
  en: { percent: { style: "percent", maximumFractionDigits: 1 } },
}

n(0.256, "percent") // "25.6%"

datetimeFormatsの設定

日付のフォーマットも数値と同じ方法で設定します。datetimeFormatsの下に名前付きフォーマットを定義します。各フォーマットはIntl.DateTimeFormatのオプションオブジェクトです。

const i18n = createI18n({
  locale: "en",
  datetimeFormats: {
    en: {
      short: { year: "numeric", month: "short", day: "numeric" },
      long: { dateStyle: "full", timeStyle: "short" },
    },
  },
})

d()関数

d(value, formatName)でDateをフォーマットします。テンプレートでは$dを使います。Dateオブジェクトまたはタイムスタンプを渡します。

const { d } = useI18n()

d(new Date("2026-05-29"), "short") // "May 29, 2026" in en

ロケールに応じた日付表示

数値と同様に、ロケールごとに名前付きの日付フォーマットを用意します。同じ呼び出しでも、ロケールを変更すると日付の順序や月名がローカライズされます。

datetimeFormats: {
  en: { short: { year: "numeric", month: "short", day: "numeric" } },
  tr: { short: { year: "numeric", month: "short", day: "numeric" } },
}
// d(date, "short") => "May 29, 2026" (en) / "29 May 2026" (tr)

テンプレートでフォーマットヘルパーを使う

テンプレートでは、値と名前付きフォーマットを指定して$nと$dを使います。

<template>
  <p>Total: {{ $n(total, "currency") }}</p>
  <p>Updated: {{ $d(updatedAt, "short") }}</p>
</template>

その場限りのインラインオプション

名前付きフォーマット以外にも、設定で定義せず、その場限りのフォーマットを適用するために、2番目の引数としてインラインのオプションオブジェクトを渡せます。

const { n, d } = useI18n()

n(0.5, { style: "percent" })           // "50%"
d(new Date(), { weekday: "long" })     // "Friday"

確認テスト

ロケール対応フォーマットについての理解度を確認しましょう。

まとめ

ロケール対応フォーマットについて学びました。

ロケールごとにnumberFormatsとdatetimeFormatsの下へ名前付きフォーマットを設定します。
n(value, name) / $nは、10進数、通貨、パーセントなどの形式で数値をフォーマットします。
d(value, name) / $dは日付をフォーマットします。
localeを切り替えると、桁区切り、少数点記号、通貨記号、日付の順序が自動的に変わります。
その場限りのフォーマットには、インラインのオプションオブジェクトも渡せます。

よくある質問

「数値・日付・通貨のフォーマット」レッスンは無料ですか？

はい。「数値・日付・通貨のフォーマット」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「数値・日付・通貨のフォーマット」で何を学びますか？

数値用のn()、日付用のd()、日時フォーマット、ロケールごとのnumberFormats ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「数値・日付・通貨のフォーマット」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る