【JavaScript】現在時刻の取得とフォーマットをしよう！【サンプル多数】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

JavaScriptの解説シリーズです。

今回は現在時刻を取得して任意にフォーマットするについて学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

現在時刻を取得できる
一般的な表示形式YYYYMMDD等への変換コードがコピペで使える

1から書くと意外と面倒なので、コピペしよう！

現在時刻の取得とフォーマット

現在時刻の取得とフォーマット

yyyyMMdd形式

// クラスのインスタンス化
const currentDate = new Date();
// 年
const year = currentDate.getFullYear();
// 月
const month = currentDate.getMonth() + 1;
// 日
const day = currentDate.getDate();
// 曜日のリスト
const dayOfWeek = ["日", "月", "火", "水", "木", "金", "土"];
// 曜日の番号を取得
const weekNumber = currentDate.getDay();
// 時間
const hour = currentDate.getHours();
// 分
const min = currentDate.getMinutes();
// 秒
const sec = currentDate.getSeconds();
// ミリ秒
const msec = currentDate.getMilliseconds();

const yyyyMMdd = () => {
  const date =
    year + String(month).padStart(2, "0") + String(day).padStart(2, "0");
  console.log(date);
};
yyyyMMdd();

20230304

yyyyMMdd形式※区切りあり

// クラスのインスタンス化
const currentDate = new Date();
// 年
const year = currentDate.getFullYear();
// 月
const month = currentDate.getMonth() + 1;
// 日
const day = currentDate.getDate();
// 曜日のリスト
const dayOfWeek = ["日", "月", "火", "水", "木", "金", "土"];
// 曜日の番号を取得
const weekNumber = currentDate.getDay();
// 時間
const hour = currentDate.getHours();
// 分
const min = currentDate.getMinutes();
// 秒
const sec = currentDate.getSeconds();
// ミリ秒
const msec = currentDate.getMilliseconds();

const yyyyMMdd_delimitate = () => {
  const date =
    year +
    "/" +
    String(month).padStart(2, "0") +
    "/" +
    String(day).padStart(2, "0");
  console.log(date);
};
yyyyMMdd_delimitate();

2023/03/04

yyyyMMddHHmmss形式

// クラスのインスタンス化
const currentDate = new Date();
// 年
const year = currentDate.getFullYear();
// 月
const month = currentDate.getMonth() + 1;
// 日
const day = currentDate.getDate();
// 曜日のリスト
const dayOfWeek = ["日", "月", "火", "水", "木", "金", "土"];
// 曜日の番号を取得
const weekNumber = currentDate.getDay();
// 時間
const hour = currentDate.getHours();
// 分
const min = currentDate.getMinutes();
// 秒
const sec = currentDate.getSeconds();
// ミリ秒
const msec = currentDate.getMilliseconds();

const yyyyMMddHHmmss = () => {
  const date =
    year +
    String(month).padStart(2, "0") +
    String(day).padStart(2, "0") +
    String(hour).padStart(2, "0") +
    String(min).padStart(2, "0") +
    String(sec).padStart(2, "0");
  console.log(date);
};
yyyyMMddHHmmss();

20230304094326

yyyyMMddHHmmss形式※区切りあり

// クラスのインスタンス化
const currentDate = new Date();
// 年
const year = currentDate.getFullYear();
// 月
const month = currentDate.getMonth() + 1;
// 日
const day = currentDate.getDate();
// 曜日のリスト
const dayOfWeek = ["日", "月", "火", "水", "木", "金", "土"];
// 曜日の番号を取得
const weekNumber = currentDate.getDay();
// 時間
const hour = currentDate.getHours();
// 分
const min = currentDate.getMinutes();
// 秒
const sec = currentDate.getSeconds();
// ミリ秒
const msec = currentDate.getMilliseconds();

const yyyyMMddHHmmss_delimitate = () => {
  const date =
    year +
    "/" +
    String(month).padStart(2, "0") +
    "/" +
    String(day).padStart(2, "0") +
    "_" +
    String(hour).padStart(2, "0") +
    ":" +
    String(min).padStart(2, "0") +
    ":" +
    String(sec).padStart(2, "0");
  console.log(date);
};
yyyyMMddHHmmss_delimitate();

2023/03/04_09:46:06

yyyyMMddHHmmssfff形式

// クラスのインスタンス化
const currentDate = new Date();
// 年
const year = currentDate.getFullYear();
// 月
const month = currentDate.getMonth() + 1;
// 日
const day = currentDate.getDate();
// 曜日のリスト
const dayOfWeek = ["日", "月", "火", "水", "木", "金", "土"];
// 曜日の番号を取得
const weekNumber = currentDate.getDay();
// 時間
const hour = currentDate.getHours();
// 分
const min = currentDate.getMinutes();
// 秒
const sec = currentDate.getSeconds();
// ミリ秒
const msec = currentDate.getMilliseconds();

const yyyyMMddHHmmssfff = () => {
  const date =
    year +
    String(month).padStart(2, "0") +
    String(day).padStart(2, "0") +
    String(hour).padStart(2, "0") +
    String(min).padStart(2, "0") +
    String(sec).padStart(2, "0") +
    String(msec).padStart(3, "0");
  console.log(date);
};
yyyyMMddHHmmssfff();

20230304094657098

yyyyMMddHHmmssfff形式※区切りあり

// クラスのインスタンス化
const currentDate = new Date();
// 年
const year = currentDate.getFullYear();
// 月
const month = currentDate.getMonth() + 1;
// 日
const day = currentDate.getDate();
// 曜日のリスト
const dayOfWeek = ["日", "月", "火", "水", "木", "金", "土"];
// 曜日の番号を取得
const weekNumber = currentDate.getDay();
// 時間
const hour = currentDate.getHours();
// 分
const min = currentDate.getMinutes();
// 秒
const sec = currentDate.getSeconds();
// ミリ秒
const msec = currentDate.getMilliseconds();

const yyyyMMddHHmmssfff_delimitate = () => {
  const date =
    year +
    "/" +
    String(month).padStart(2, "0") +
    "/" +
    String(day).padStart(2, "0") +
    "_" +
    String(hour).padStart(2, "0") +
    ":" +
    String(min).padStart(2, "0") +
    ":" +
    String(sec).padStart(2, "0");
  "." + String(msec).padStart(3, "0");
  console.log(date);
};
yyyyMMddHHmmssfff_delimitate();

2023/03/04_09:47:23

カレンダー風

// クラスのインスタンス化
const currentDate = new Date();
// 年
const year = currentDate.getFullYear();
// 月
const month = currentDate.getMonth() + 1;
// 日
const day = currentDate.getDate();
// 曜日のリスト
const dayOfWeek = ["日", "月", "火", "水", "木", "金", "土"];
// 曜日の番号を取得
const weekNumber = currentDate.getDay();
// 時間
const hour = currentDate.getHours();
// 分
const min = currentDate.getMinutes();
// 秒
const sec = currentDate.getSeconds();
// ミリ秒
const msec = currentDate.getMilliseconds();

const calendar = () => {
  const date =
    year +
    "/" +
    String(month).padStart(2, "0") +
    "/" +
    String(day).padStart(2, "0") +
    " " +
    dayOfWeek[weekNumber] +
    "曜日_" +
    hour +
    "時" +
    min +
    "分";

  console.log(date);
};
calendar();

2023/03/04 土曜日_9時43分

様々な形式での時刻表示ができたよ！

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram