【初心者向け】JavaScriptで現在の日付を取得する5つの方法
2024-04-02
JavaScriptで現在の日付を取得する
Date オブジェクトを使用する
最も一般的な方法は、Date オブジェクトを使用する方法です。Date オブジェクトは、現在の日時を含む様々な情報を提供します。
コード例:
// 現在の日付を取得
const now = new Date();
// 年を取得
const year = now.getFullYear();
// 月を取得 (0始まりなので、1を加算する)
const month = now.getMonth() + 1;
// 日付を取得
const date = now.getDate();
// 曜日を取得 (0=日曜日)
const day = now.getDay();
// 時を取得
const hour = now.getHours();
// 分を取得
const minute = now.getMinutes();
// 秒を取得
const second = now.getSeconds();
// ミリ秒を取得
const millisecond = now.getMilliseconds();
// 出力例
console.log(`現在の日時: ${year}/${month}/${date} ${hour}:${minute}:${second}.${millisecond}`);
出力例:
現在の日時: 2024/3/30 12:34:56.789
Date.now() 関数を使用する
もう一つの方法は、Date.now() 関数を使用する方法です。Date.now() 関数は、現在の日時をミリ秒単位で取得します。
// 現在の日時をミリ秒単位で取得
const timestamp = Date.now();
// 日付に変換
const date = new Date(timestamp);
// 年を取得
const year = date.getFullYear();
// 月を取得 (0始まりなので、1を加算する)
const month = date.getMonth() + 1;
// 日付を取得
const date = date.getDate();
// 出力例
console.log(`現在の日付: ${year}/${month}/${date}`);
現在の日付: 2024/3/30
日付のフォーマット
上記の方法で取得した日付は、そのまま出力すると、YYYY-MM-DD HH:MM:SS.sss のような形式になります。
この形式を変換したい場合は、Date オブジェクトの様々なメソッドを使用することができます。
例:
toLocaleDateString(): 地域と言語に合わせた形式に変換toString(): 標準的な形式に変換toUTCString(): UTC協定時で表示
// 日本語の標準的な形式に変換
const formattedDate = now.toLocaleDateString('ja-JP');
// 出力例
console.log(`現在の日付: ${formattedDate}`);
現在の日付: 2024年3月30日
JavaScriptで現在の日付を取得するには、Date オブジェクトまたは Date.now() 関数を使用できます。
取得した日付は、Date オブジェクトの様々なメソッドを使用して、様々な形式に変換することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptで現在の日付を取得する</title>
</head>
<body>
<h1>現在の日付</h1>
<p>デフォルトの形式:</p>
<p id="default-date"></p>
<p>日本語の標準的な形式:</p>
<p id="ja-jp-date"></p>
<p>UTC協定時:</p>
<p id="utc-date"></p>
<script>
// 現在の日付を取得
const now = new Date();
// デフォルトの形式
const defaultDate = now.toString();
// 日本語の標準的な形式
const jaJpDate = now.toLocaleDateString('ja-JP');
// UTC協定時
const utcDate = now.toUTCString();
// 各要素に表示
document.getElementById('default-date').textContent = defaultDate;
document.getElementById('ja-jp-date').textContent = jaJpDate;
document.getElementById('utc-date').textContent = utcDate;
</script>
</body>
</html>
このコードを実行すると、以下のように表示されます。
現在の日付
デフォルトの形式:
Sat Mar 30 2024 12:34:56 GMT+0900 (JST)
日本語の標準的な形式:
2024年3月30日
UTC協定時:
Sat, 30 Mar 2024 03:34:56 GMT
- 上記のコードは、ブラウザ上で実行することができます。
- 日付のフォーマットは、様々な方法で変更することができます。
- 詳細については、JavaScriptのドキュメントを参照してください。
JavaScriptで現在の日付を取得するその他の方法
moment.js ライブラリを使用する
moment.js は、日付と時間の処理を簡単にできるライブラリです。
// moment.js を読み込む
import moment from 'moment';
// 現在の日付を取得
const now = moment();
// フォーマットを変換
const formattedDate = now.format('YYYY/MM/DD HH:mm:ss');
// 出力例
console.log(`現在の日付: ${formattedDate}`);
現在の日付: 2024/03/30 12:34:56
Luxon ライブラリを使用する
Luxon は、moment.js と同様の機能を持つライブラリです。
// Luxon を読み込む
import { DateTime } from 'luxon';
// 現在の日付を取得
const now = DateTime.now();
// フォーマットを変換
const formattedDate = now.toFormat('yyyy-MM-dd HH:mm:ss');
// 出力例
console.log(`現在の日付: ${formattedDate}`);
現在の日付: 2024-03-30 12:34:56
Intl APIは、ブラウザに組み込まれた国際化 APIです。
// 現在の日付を取得
const now = new Date();
// オプションを設定
const options = {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
};
// フォーマットを変換
const formattedDate = now.toLocaleDateString('ja-JP', options);
// 出力例
console.log(`現在の日付: ${formattedDate}`);
現在の日付: 2024年3月30日 12時34分56秒
JavaScriptで現在の日付を取得するには、様々な方法があります。
それぞれの方法にはメリットとデメリットがあるので、状況に合わせて適切な方法を選択する必要があります。
javascript date date-formatting
![React Router v6 で発生するエラー: [PrivateRoute] は コンポーネントではありません。 のすべてのコンポーネントの子は または である必要があります。](/thumbnail/96.webp)
