Format
Formatは、日付・数値・バイトなどを特定のロケールに合わせてフォーマットするために使用されます。
1.23 MB1,234,567.89
<VStack gap="0">
<Format.Byte value={1234567} />
<Format.Number value={1234567.89} />
</VStack>
使い方
import { Format } from "@yamada-ui/react"
import { Format } from "@/components/ui"
import { Format } from "@workspaces/ui"
<Format.Byte />
<Format.Number />
日付
Format.DateTimeは、内部でIntl.DateTimeFormatを使用しています。ロケールを変更する
ロケールを変更する場合は、localeに値を設定します。
英語
11/4/2025日本語
2025/11/4ドイツ語
4.11.2025フランス語
04/11/2025中国語
2025/11/4<Grid templateColumns="auto 1fr" gap="sm">
<Text fontWeight="semibold">英語</Text>
<Format.DateTime value={new Date()} locale="en-US" />
<Text fontWeight="semibold">日本語</Text>
<Format.DateTime value={new Date()} locale="ja-JP" />
<Text fontWeight="semibold">ドイツ語</Text>
<Format.DateTime value={new Date()} locale="de-DE" />
<Text fontWeight="semibold">フランス語</Text>
<Format.DateTime value={new Date()} locale="fr-FR" />
<Text fontWeight="semibold">中国語</Text>
<Format.DateTime value={new Date()} locale="zh-CN" />
</Grid>
年に変換する
年に変換する場合は、yearに値を設定します。
2025年
<Format.DateTime value={new Date()} year="numeric" />
月に変換する
月に変換する場合は、monthに値を設定します。
11月
<Format.DateTime value={new Date()} month="long" />
日に変換する
日に変換する場合は、dayに値を設定します。
04日
<Format.DateTime value={new Date()} day="2-digit" />
曜日に変換する
曜日に変換する場合は、weekdayに値を設定します。
火曜日
<Format.DateTime value={new Date()} weekday="long" />
数値
Format.Numberは、内部でIntl.NumberFormatを使用しています。ロケールを変更する
ロケールを変更する場合は、localeに値を設定します。
英語
1,234,567.89日本語
1,234,567.89ドイツ語
1.234.567,89フランス語
1 234 567,89中国語
1,234,567.89<Grid templateColumns="auto 1fr" gap="sm">
<Text fontWeight="semibold">英語</Text>
<Format.Number value={1234567.89} locale="en-US" />
<Text fontWeight="semibold">日本語</Text>
<Format.Number value={1234567.89} locale="ja-JP" />
<Text fontWeight="semibold">ドイツ語</Text>
<Format.Number value={1234567.89} locale="de-DE" />
<Text fontWeight="semibold">フランス語</Text>
<Format.Number value={1234567.89} locale="fr-FR" />
<Text fontWeight="semibold">中国語</Text>
<Format.Number value={1234567.89} locale="zh-CN" />
</Grid>
通貨に変換する
通貨に変換する場合は、styleに"currency"を設定します。
米ドル
$1,234,567.89ユーロ
1.234.567,89 €円
￥1,234,568<Grid templateColumns="auto 1fr" gap="sm">
<Text fontWeight="semibold">米ドル</Text>
<Format.Number
value={1234567.89}
style="currency"
currency="USD"
locale="en-US"
/>
<Text fontWeight="semibold">ユーロ</Text>
<Format.Number
value={1234567.89}
style="currency"
currency="EUR"
locale="de-DE"
/>
<Text fontWeight="semibold">円</Text>
<Format.Number
value={1234567.89}
style="currency"
currency="JPY"
locale="ja-JP"
/>
</Grid>
単位に変換する
単位に変換する場合は、styleに"unit"を設定します。
100 kg摂氏 100 度100km/h
<VStack gap="sm">
<Format.Number value={100} style="unit" unit="kilogram" />
<Format.Number value={100} style="unit" unit="celsius" unitDisplay="long" />
<Format.Number
value={100}
style="unit"
unit="kilometer-per-hour"
unitDisplay="narrow"
/>
</VStack>
パーセントに変換する
パーセントに変換する場合は、styleに"percent"を設定します。
45%45.00%
<VStack gap="sm">
<Format.Number value={0.45} style="percent" />
<Format.Number value={0.45} style="percent" minimumFractionDigits={2} />
</VStack>
表記に変換する
表記に変換する場合は、notationに値を設定します。
1,234,567.891.235E61.235E6123万
<VStack gap="sm">
<Format.Number value={1234567.89} notation="standard" />
<Format.Number value={1234567.89} notation="scientific" />
<Format.Number value={1234567.89} notation="engineering" />
<Format.Number value={1234567.89} notation="compact" />
</VStack>
小数点以下の桁数を制御する
小数点以下の桁数を制御する場合は、minimumFractionDigitsとmaximumFractionDigitsを使用します。
1,234.501,234.5671,234.0000
<VStack gap="sm">
<Format.Number
minimumFractionDigits={2}
maximumFractionDigits={2}
value={1234.5}
/>
<Format.Number
minimumFractionDigits={0}
maximumFractionDigits={3}
value={1234.567}
/>
<Format.Number
minimumFractionDigits={4}
maximumFractionDigits={4}
value={1234}
/>
</VStack>
グループ化を無効にする
グループ化を無効にする場合は、useGroupingをfalseに設定します。
1234567.89
<Format.Number value={1234567.89} useGrouping={false} />
符号の表示を変更する
符号の表示を変更する場合は、signDisplayに値を設定します。
+1,234.5-1,234.5
<VStack gap="sm">
<Format.Number value={1234.5} signDisplay="always" />
<Format.Number value={-1234.5} signDisplay="exceptZero" />
</VStack>
バイト
Format.Byteは、内部でIntl.NumberFormatを使用しています。自動単位選択
Format.Byteは、バイト値の大きさに基づいて最適な単位（byte、kB、MB、GB、TB）を自動的に選択します。
512 byte1.02 KB1.05 MB1.07 GB1.1 TB
<VStack gap="sm">
<Format.Byte value={512} />
<Format.Byte value={1024} />
<Format.Byte value={1024 * 1024} />
<Format.Byte value={1024 * 1024 * 1024} />
<Format.Byte value={1024 * 1024 * 1024 * 1024} />
</VStack>
ロケールを変更する
ロケールを変更する場合は、localeに値を設定します。
en-US
1.02 kilobytesja-JP
1.02 キロバイトde-DE
1,02 Kilobytefr-FR
1,02 kilooctetzh-CN
1.02千字节<Grid templateColumns="auto 1fr" gap="sm">
<Text fontWeight="semibold">en-US</Text>
<Format.Byte value={1024} locale="en-US" unitDisplay="long" />
<Text fontWeight="semibold">ja-JP</Text>
<Format.Byte value={1024} locale="ja-JP" unitDisplay="long" />
<Text fontWeight="semibold">de-DE</Text>
<Format.Byte value={1024} locale="de-DE" unitDisplay="long" />
<Text fontWeight="semibold">fr-FR</Text>
<Format.Byte value={1024} locale="fr-FR" unitDisplay="long" />
<Text fontWeight="semibold">zh-CN</Text>
<Format.Byte value={1024} locale="zh-CN" unitDisplay="long" />
</Grid>
単位を変換する
単位を変換する場合は、unitに"byte"または"bit"を設定します。デフォルトでは、"byte"が設定されています。
バイト
1.02 KBビット
1.02 kb<Grid templateColumns="auto 1fr" gap="sm">
<Text fontWeight="semibold">バイト</Text>
<Format.Byte value={1024} unit="byte" />
<Text fontWeight="semibold">ビット</Text>
<Format.Byte value={1024} unit="bit" />
</Grid>
単位の表示を変更する
単位の表示を変更する場合は、unitDisplayに値を設定します。
Short
1.02 KBNarrow
1.02KBLong
1.02 キロバイト<Grid templateColumns="auto 1fr" gap="sm">
<Text fontWeight="semibold">Short</Text>
<Format.Byte value={1024} unitDisplay="short" />
<Text fontWeight="semibold">Narrow</Text>
<Format.Byte value={1024} unitDisplay="narrow" />
<Text fontWeight="semibold">Long</Text>
<Format.Byte value={1024} unitDisplay="long" />
</Grid>
アプリケーション全体のロケールを設定する
アプリケーション全体のロケールの設定をする場合は、UIProviderのlocaleに値を設定します。
import { UIProvider } from "@yamada-ui/react"
const App = () => {
return (
<UIProvider locale="ja-JP">
<Format.Byte value={1024} />
<Format.Number value={1234567.89} />
</UIProvider>
)
}