はじめに
こんにちは、がんがんです。
VueUse の useDateFormat を利用することで日付のフォーマットが非常に簡単に変換できます。
例えば 2025/04/24 22:00 と表示したい場合は以下のように実装します。
<script setup lang="ts">
import { useDateFormat } from '@vueuse/core';
const formatted = useDateFormat('2025-04-24 22:00:00', 'YYYY/MM/DD HH:mm');
</script>
<template>
<div>{{ formatted }}</div>
</template>
useDateFormatを用いることで日付用のフォーマッターをわざわざ用意する必要がなくなります。非常にありがたいです。
日本でフロントエンドエンジニアをしている人であれば 「日付は 2025/04/24(木) と表示してほしい」とデザイナーから要望されることもあります。
しかし、useDateFormatのドキュメントには日本語表示に関する記述はありません。頭を抱えました。
本記事は私のように頭を抱えてしまったVue.jsフロントエンドエンジニアの方に読んでほしい記事となっています。
Ans.
case1: 2025/04/24(木) と表示したい
<script setup lang="ts">
import { useDateFormat } from '@vueuse/core';
const formatted = useDateFormat('2025-04-24 23:29:02', 'YYYY/MM/DD(dd) HH:mm:ss', {
locales: 'ja'
});
</script>
<template>
<div>{{ formatted }}</div>
</template>
case2: 2025/04/24(木曜日) と表示したい
<script setup lang="ts">
import { useDateFormat } from '@vueuse/core';
const formatted = useDateFormat('2025-04-24 23:29:35', 'YYYY/MM/DD(dddd) HH:mm:ss', {
locales: 'ja'
});
</script>
<template>
<div>{{ formatted }}</div>
</template>
なぜこのような設定となるのか
useDateFormat は dayjs をインスパイアしているとドキュメントに記載されています。
Get the formatted date according to the string of tokens passed in, inspired by dayjs.
そのため、dayjsが提供する localesオプションが useDateFormatのオプションとして提供されていました。
日本語記事だと以下の記事でdayjsのlocalesについて紹介されています。
余談： locales設定をすることで 04 → 4月 と表示することは可能です。ただし...
localesオプションはMMM / MMMMにも対応しています。
The locale(s) to used for dd/ddd/dddd/MMM/MMMM format
そのためlocaclesオプションを用いることで 4月 の表示が可能となります。
<script setup lang="ts">
import { useDateFormat } from '@vueuse/core';
// 2025/4月/24(木) と表示されます
const formatted = useDateFormat('2025-04-24 22:00:00', 'YYYY/MMM/DD(dd)', {
locales: 'ja'
});
</script>
<template>
<div>{{ formatted }}</div>
</template>
しかし、これは Month のみの反映であり Day に変化はありません。2025年04月19日(木)と表示したいときは素直に以下のように実装した方が良いです。
<script setup lang="ts">
import { useDateFormat } from '@vueuse/core';
+ // 2025年4月24日(木) と表示されます
+ const formatted = useDateFormat('2025-04-24 22:00:00', 'YYYY年M月DD日(dd)', {
- const formatted = useDateFormat('2025-04-24 22:00:00', 'YYYY/MMM/DD(dd)', {
locales: 'ja'
});
</script>
<template>
<div>{{ formatted }}</div>
</template>
おわりに
今回は VueUse が提供する useDateFormatで日本語の曜日を表示するTipsについて書きました。
「誰かが同じところでハマっているだろう」と思って記事を探してみたら出会えなかったので、同じように困っている日本人Vue.jsエンジニアに届けばいいなと思っています。
Discussion