HTMLで簡単!リアルタイム年月日表示の究極ガイド – JPSM

HTMLで簡単!リアルタイム年月日表示の究極ガイド

HTMLコードでリアルタイム年月日表示HTML

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

また、理解しにくい説明や難しい問題に躓いても、JPSMがプログラミングの解説に特化してオリジナルにチューニングした画面右下のAIアシスタントに質問していだければ、特殊な問題でも指示に従い解決できるように作ってあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、HTMLでリアルタイムの年月日表示を簡単に実装できるようになります。

初心者の方でもわかりやすく解説しているので、ぜひ最後までお読みください。

●HTMLでのリアルタイム年月日表示とは?

リアルタイム年月日表示とは、ウェブページに訪問者がアクセスした瞬間の年月日を表示する機能のことです。

JavaScriptを使用してHTMLに実装することができます。

●リアルタイム年月日表示の基本的な実装方法

まずは、リアルタイム年月日表示の基本的な実装方法をご紹介します。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リアルタイム年月日表示サンプル</title>
<script>
function displayDate() {
  const today = new Date();
  const year = today.getFullYear();
  const month = today.getMonth() + 1;
  const day = today.getDate();
  document.getElementById("dateDisplay").innerText = `${year}年${month}月${day}日`;
}

window.onload = displayDate;
</script>
</head>
<body>
  <h1>今日の日付は<span id="dateDisplay"></span>です。</h1>
</body>
</html>

このサンプルコードでは、JavaScriptのDateオブジェクトを利用して現在の年月日を取得し、その値をHTMLの<span>要素に表示しています。

window.onloadイベントを使って、ページが読み込まれたタイミングでdisplayDate関数を実行しています。

●カスタマイズ方法

リアルタイム年月日表示をカスタマイズする方法もいくつかあります。

例えば、表示形式を変更したり、曜日を追加したりすることができます。

それぞれのカスタマイズ方法について、サンプルコードを交えながら解説していきます。

○表示形式の変更

表示形式を変更するには、displayDate関数内のテンプレートリテラルを編集します。

例えば、下記のように変更することで、日付の区切りをスラッシュにすることができます。

document.getElementById("dateDisplay").innerText = `${year}/${month}/${day}`;

また、月や日について、1桁の場合に0を補って2桁表示にすることもできます。

その場合は、下記のようにString.prototype.padStart()メソッドを使用してください。

const monthStr = String(month).padStart(2, '0');
const dayStr = String(day).padStart(2, '0');
document.getElementById("dateDisplay").innerText = `${year}/${monthStr}/${dayStr}`;

○曜日の追加

曜日を追加するには、Dateオブジェクトから曜日の情報を取得し、それを日本語に変換します。

下記のサンプルコードを参考にしてください。

function displayDate() {
  const today = new Date();
  const year = today.getFullYear();
  const month = today.getMonth() + 1;
  const day = today.getDate();
  const dayOfWeek = today.getDay();
  const dayOfWeekStr = ['日', '月', '火', '水', '木', '金', '土'][dayOfWeek];
  document.getElementById("dateDisplay").innerText = `${year}年${month}月${day}日(${dayOfWeekStr})`;
}

window.onload = displayDate;

このコードでは、Date.prototype.getDay()メソッドを使って曜日の情報を取得し、日本語の曜日に変換して表示しています。

●注意点

リアルタイム年月日表示を実装する際の注意点をいくつか挙げます。

○JavaScriptが無効になっている場合

JavaScriptが無効になっている場合、表示されない可能性があります。

そのため、JavaScriptが無効であることを考慮した対処法が必要です。

例えば、<noscript>タグを使用して、JavaScriptが無効な場合にメッセージを表示することができます。

<noscript>
  <p>JavaScriptが無効になっているため、日付表示ができません。</p>
</noscript>

○ページの読み込み速度に影響する場合

JavaScriptのコードを最後に配置するか、async属性やdefer属性を使用して、非同期に読み込むようにすることで、読み込み速度を改善できます。

●応用例:カウントダウンタイマーの実装

リアルタタイム年月日表示の知識を応用して、カウントダウンタイマーを実装する方法をご紹介します。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カウントダウンタイマーサンプル</title>
<script>
function updateCountdown() {
  const targetDate = new Date("2023-12-31T00:00:00");
  const now = new Date();
  const remainingTime = targetDate - now;
  
  if (remainingTime > 0) {
    const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
    document.getElementById("countdownDisplay").innerText = `${days}日${hours}時間${minutes}分${seconds}秒`;
  } else {
    document.getElementById("countdownDisplay").innerText = "カウントダウン終了!";
    clearInterval(timer);
  }
}

let timer;
window.onload = function() {
  updateCountdown();
  timer = setInterval(updateCountdown, 1000);
}
</script>
</head>
<body>
  <h1>2023年12月31日まであと<span id="countdownDisplay"></span>です。</h1>
</body>
</html>

このサンプルコードでは、指定した日時までのカウントダウンを表示します。

updateCountdown関数で、目標日時と現在日時の差を計算し、残り時間を日・時間・分・秒に分解して表示しています。

window.onloadイベントで、updateCountdown関数を初回実行し、その後setIntervalで1秒ごとに更新しています。

まとめ

以上で、HTMLでリアルタイム年月日表示の実装方法、カスタマイズ方法、注意点、応用例を徹底解説しました。

これで、あなたも簡単にリアルタイム年月日表示を実装できるようになりましたね。

最後までお読みいただきありがとうございました。

この記事が、あなたのウェブサイト制作に役立てば幸いです。