JavaScriptで日付や時刻を表示する方法。
コードや注意点と実際に使われる事例なども紹介

2023.07.11
2020.04.22

JavaScript・jQuery

サイトを運営していると、とある条件下や状況に応じて、現在の日付や現在の日付などを表示したいというケースが時折出てきます。

マーケティング視点から言うと、ページ上に「今日」と記載されるよりも「」と表示された方が印象に残りやすいというのもあり、ランディングページや期限を区切ったりする際などに使われる機会もあるかと思います。

JavaScriptを使う事で割と簡単に実装することが可能ですので、今回はそんな今日の日付や時間を表示するという点についてまとめてみたいと思います。

この記事の目次

JavaScriptで今日の日付と時間を取得する方法

まずはやり方をまとめておき、後で1つ1つどう使っていくかについて見ていきましょう。
実際に日付や時刻を表示するJavaScriptの書き方は様々なやり方があり、紹介する方法はその中の1つになります。

本格的なJavaScriptをコードでゴリゴリ書くという方でなければ、そこまで変数の書き方や細かいところは気にしすぎずに目をつむって、サイト上に日付や時間の取得という点に焦点を当ててやっていくのが良いのではないかと思います。（自分もJavaScriptはゴリゴリ書けないので…）

<span id="showtoday"></span>

<script>
  document.getElementById("showtoday").innerHTML = showtoday();
  function showtoday() {
    const now = new Date();
    const month = now.getMonth() + 1;
    const date = now.getDate();
    const showtoday = month + "月" + date + "日";
    return showtoday;
  }
</script>

実際に表記してみると、今日の日付は「」です。となります。

年月日、曜日、時間などまで取得が可能

あまり実務でそこまで使う機会はないですが、先ほどのnew Date();というので、月日だけではなく年、月、日、曜日、時、分、秒などまで取得して表示することは可能です。

<span id="showtoday2"></span>

<script>
  document.getElementById("showtoday2").innerHTML = showtoday2();
  function showtoday2() {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const date = now.getDate();
    const day = now.getDay();
    const week = [ "日", "月", "火", "水", "木", "金", "土" ];
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();
    const showtoday2 = year + "年" + month + "月" + date + "日" + hours + "時" + minutes + "分" + seconds + "秒" + "（" + week[day] + "）";
    return showtoday2;
  }
</script>

実際に年月日全てを表記してみると、
今（ページを開いた瞬間）は「」です。

とはいえ、何月何日というのは表示することはあったとしても、年や何時何分何秒といったところまで表示するというのは、カウントダウンタイマーなどのような使い方以外では、そこまで使うケースというのは無いかもしれません。

実務での実際の使われ方の事例など

あまりこれだけだと、どういうシーンで使うか？というのがわからなかったりすることもあります。実際にどういうシーンで使われるか？を少しだけ紹介してみたいと思います。

リアルタイム更新の表示などに使用する

例えば、サービスサイトなどを運営していたり、通販サイトなどを運営している場合、今現在の注文という表示や、今現在の資料請求の状況を表示する、にぎわい表示といったようなものが、行列効果を目的に使われたりする事があります。

多くはデータベースなどと連動させて使われたりするものですが、その表示の枠のところに、ページを表示したタイミングの今現在の資料請求状況として見せたりする表示方法があります。

実際にやっていたイメージはこういう感じですね。

「」現在でのお申し込み状況
・○月○日○時○分：○○県の方から資料請求のお申し込みをいただきました。
・○月○日○時○分：○○県の方から資料請求のお申し込みをいただきました。
・○月○日○時○分：○○県の方から資料請求のお申し込みをいただきました。
・○月○日○時○分：○○県の方から資料請求のお申し込みをいただきました。

常に決まった月や日を表示しておきたいケースで

通販サイトなどやサービスサイトなどで、常に更新している風を見せるため、最終更新日などを表記したりしたいという場合があったりします。過去に受けた案件では、更新頻度は高いサイトじゃないけど、見せかけ上は更新を頻繁にしてるようにユーザーに見せたいという相談がありました。

ただプログラムなどが入っているサイトなどではなかったため、JavaScriptで必ず見た日の前日に更新してる風を装った表示をしておりました。

実際にやっていたのはこういう感じ。
最終更新日：「」（今日の日付が入ります）

また、同じようにランキングなどの表示で、○月度のランキングを表示する際、決まっているのであれば月を固定で表示しておくと多少は楽かもしれませんし、実績などを毎月更新する場合、○月現在といった表示をするなら、自動更新にしておくと忘れたりもせず楽かもしれません。
例：「月度ランキング」（今月の月が自動で入ります）

今日から○日後までなどの表示に使う（要注意）

よくランディングページなどに煽るわけではないかもしれませんが、有効期限や○日以内といったような書き方をしたりすることがありますが、これを今日の日付を取得して、そこにプラス○日という使い方をすることで、今見ているユーザーに、今日から○日間といった見せ方ができます。

<p>有効期限「<strong id="showtoday6"></strong>」まで</p>

<script>
  document.getElementById("showtoday6").innerHTML = showtoday6();
  function showtoday6() {
    const now = new Date();
    const month = now.getMonth() + 1;
    const date = now.getDate() + 3;
    const showtoday6 = month + "月" + date + "日";
    return showtoday6;
  }
</script>

これを実際にやってみるとこうなります。
有効期限「」まで（今日から1日後の日付を表示していますが後述も要確認）

実際有効期限などを表示する際は、ページの有効期限なども合わせて使ったりしないといけないかもしれませんが、お客様に期限があるという事を知らせるために使ったりなども可能です。

実際はもっと条件分岐を使わないと使えないことも多い

ただこの手の利用をやろうとした場合、あくまでも日付にプラス・マイナスをするだけなので、プラス20日とかにするとわかりますが、35日や45日といったありえない日付が表示されたりもします。

実際に、今日の日付から+30日とした場合、自動的に翌月になったりなどはありません。
「」（今日の日付に+30をしてるのでおかしな日になる）

そのため、実際にプラスやマイナスを使う際には条件分岐をして、今日が何月何日なので、月をまたぐ際には月を翌月に表示を変えて…といったような条件分岐を組み合わせて作らなければいけないので、あまり使い勝手が良いとは言えないかもしれません。

単にこれだけで使う場合は実際は「今日」や「今」の日付や時間の表示をするという使われ方がほとんどかなとも思います。

また、実際には今の日付や時刻をただ表示するというよりかは、カウントダウンタイマーであったり、先ほどの今の日付や時間を基準に、+○日が有効期限などのように、何か他の機能などと合わせて使うという事が多いのではないかなとも思います。

使う時の注意点

実際に使う時の注意点を少しだけ書いておきます。

書く際は順序に注意

使う時の注意点としては、JavaScriptとHTMLタグを呼び出す順番に注意をしましょう。

実際のコードを見てみると分かりますが、HTMLタグのIDで呼び出した後に、<script>が記載されています。これが逆の<script>を書いた後に、HTMLタグでIDを呼び出した場合、動きませんので、必ず<script>は後に書くという事を覚えておくと良いかなと思います。

ユーザー環境に依存する

どういう事かというと、今の時刻というのは何をもって今の時刻なのか？という点です。

当然ながら、世界で今の時刻と言えど、時間は異なります。
アメリカの今と日本の今では、時差の影響などで当然時刻どころか日付が変わってしまうこともあります。

そのため、あくまでも日付・時間の表示というのは、JavaScriptで表示する際は、今使っているパソコンやスマホの時間が表示される形になります。

とはいえ、あえて日付や時間をずらして使っている方はほとんどいないかと思いますので、よほどの事がない限りは影響はないかとは思いますが、知識として把握はしておくようにしましょう。

あくまでもページを開いた瞬間で見ている今ではない

また、日付などであれば特に問題になることはないのですが、日付だけでなく時間などを使う場合は、少し注意が必要で、今の時刻というのは、ページが開かれた時の時刻が表示されます。

そのため、例えばランディングページなど縦長ページで最後の方に何かしらで今の時刻などを記載するといったケースだと、ページを読んでいる間に多少の時間が過ぎているため、記載されている時間と、実際の今の時間にはズレが出てしまう可能性もあります。

ページの下部などユーザーがすぐに見る場所でないところで利用する際にはそういった事も頭の片隅に入れておくようにした方が良いかもしれません。

ソースを見れば実際の日時でないのが一目瞭然

JavaScriptで日付や時刻を表示する場合、あくまでも見た目上の表示になっています。
そのため、ソースを見られたりすると、実際にその日付が書かれているわけではなく、JavaScriptの構文がそのまま表示されてしまうので、実際の日時で無いというのは一目瞭然でバレてしまいます。

IT系のユーザーが対象などのサービスでやってしまえば、全部嘘というのもばれてしまうので注意が必要ですし、そういった偽装など使わず真っ当にやることを考えましょう。

まとめ

日付や時刻の取得をJavaScriptで取得する方法を紹介してきましたが、実際にそこまで頻度高く使うかというと使わないかもしれませんが、意外とランディングページなどで煽りなどや何か日付を自動的に更新できるようにしたいといったところで使う機会はあったりします。

ランディングページなどを作る際、フォーム一体型ですとPHPで作ったりするかもしれませんが、フォームを外部に飛ばす場合、HTMLとCSSのいわゆる静的サイトで制作すると、日付の表示などはJavaScriptでというパターンも多かったりします。

ちょっとしたワンポイントなどで使う機会もあるかもしれないですし、予想外な要望で使い道があったりもするので、どう使ってどう表示させれば良いかというのくらいは覚えておいて損はないのではないでしょうか。

記事のシェアにご協力お願いします

2023.07.11
2020.04.22