【JavaScript】ボタンクリックで現在の日時を取得して表示する

ホーム

JavaScript

この記事にはプロモーションが含まれています。

投稿：2023・01・20

更新：2023・01・20

メモ帳アプリやToDoアプリなど、データを作成して保存することができるアプリでは、データの保存日時を表示させたいことも多いかと思います。

そのためにはまず、【保存する】ボタンをクリックした時の日時を取得して、画面に表示させる機能が必要になりそうですね。

そしてメモやToDoリストのデータは一度保存したら終わりというものではなく、保存した内容を編集して更新することも多いです。

であれば、２回目以降の保存（更新時）には、保存日時とは別に更新日時を表示・記録しておけるようにした方が便利であることが予想されます。

というわけで今回は、以下の機能を実装できることを目標にしてJavaScriptへの理解を深めていきたいと思います！

・『保存』ボタンをクリックすると初回保存時の日時を取得→表示
・2回目以降はボタンがクリックされた更新日時を取得→表示

なお、日時を表示させるだけでなくサーバーやローカルストレージに保存するには、また別の処理が必要になります。

この記事ではデータの保存（記録）に関しては扱いませんので、あらかじめご了承ください！

この記事を読むことで分かること

・現在の日時の取得方法
・取得した日時を見やすくする方法
・日時情報をボタンクリックで表示させる方法
・初回と２回目以降で表示させる日時を分ける方法

– 目次 –

▼現在の日時を取得する
Date()コンストラクター
年月日・時間の取得

▼クリックイベントを設定する
ボタンクリックで日時を表示
更新日時を表示させる

▼動画解説は下のサムネイルから（YouTubeに飛びます）

Date()コンストラクター

現在の日時を取得するにはまず、DateクラスのDate()コンストラクターを用いて、新しいDateオブジェクトインスタンスを作成する必要があります。

逆に言えば、それだけで現在の日時を取得できます。

JavaScriptにはビルトインオブジェクト（組み込みオブジェクト）と呼ばれる、プログラムに標準で備わっているオブジェクトがいくつかありますが、Dateオブジェクトもその一つです。

つまり、現在の日時を取得するのに煩わしい手間暇はいらないということですね。

Date()コンストラクターを使ってDateインスタンスを作成するには、以下のようにプログラムを書きます。

JavaScript

const now = new Date();
console.log(now);

表示結果（コンソール画面）は次のようになります。

表示結果

コンソールに表示された内容からこのブログを執筆していた日時がバレてしまいますが笑、その時点での日時が取得できていることがわかりますね。

なお、現在の日時を取得するにはDate()コンストラクターの引数を空にしておく必要があります。

もし、特定の地点の日時をDateオブジェクトとして生成したい場合は、Date()コンストラクターに引数を指定すると良いです。

JavaScript

const past = new Date('1995-12-17T09:30:00');

console.log(past); //Sun Dec 17 1995 09:30:00 GMT+0900 (日本標準時)

表示結果

未来のある日時までのカウントダウンを表示させたい場合などは、このようにDate()コンストラクターに引数を指定して特定の地点の日時情報を取得すると良いです。

POINT!

・Date()コンストラクタでDateオブジェクトをインスタンス化しよう！
・現在の日時を取得したい場合は、Date()コンストラクターの引数は空にしておこう！
・特定の日時を取得したい場合は、コンストラクターに引数を指定しよう！

年月日・時間の取得

new Date()だけでも現在の日時を取得することができますが、コンソールに表示された内容は以下のようなものでした。

コンソールに表示される情報: Mon Jan 16 2023 10:58:10 GMT+0900 (日本標準時)

確かに現在の日時は取得できていますが、このままでは情報として見づらいですよね。

できれば、『2023/1/16 10:58』のように、普段私たちが見慣れた形にして表示させたいところです。

そこでこの章では、年・月・日・時間別に情報を分割し、表示方法や順番を変えてみたいと思います。

年を取得する

年を取得するには、getFullYear()メソッドを用います。

現在の日時を取得した上で【年】を取得する場合、以下のようになります。

JavaScript

const now = new Date();
const nowYear = now.getFullYear();

console.log(nowYear);  //2023（現在の西暦）

なお、取得した西暦のデータ型は文字列（string）ではなく数値（number）です。

なので、たとえば【2023】ではなく、【23】というふうに下二桁だけ表示させたい場合、単純に2000を引けばOKです。

JavaScript

...
const nowYear = now.getFullYear() - 2000;

console.log(nowYear);  //23（西暦の下二桁になる）

上のように計算式で数値を調整することが可能なので、他にも令和○年などの和暦に変換することもできます。

JavaScript

...
const nowYear = now.getFullYear() - 2018;  //令和○年に変換するため2018を引く

console.log(nowYear);  //5（令和に変換した年）

ただ、保存したデータの日時を表示させる場合は一般的な４桁の数値で問題ないと思うので、この記事ではgetFullyear()メソッドで取得できる西暦をそのまま使うこととします。

月を取得する

月を取得するには、getMonth()メソッドを用います。

ただし、取得できるデータは1月を0とした場合の数値になります。

なので現在の月を正確に表示させるには、下の例のように取得した数値に１を足さなければなりません。

JavaScript

const now = new Date();
const nowMon = now.getMonth() + 1;

console.log(nowMon);  //1（現在の月）

１を足し忘れた場合、１月であれば０と表示されるためミスに気づきやすいのですが、その他の月では問題なく表示されているように見えてしまうので注意が必要です。

日を取得する

月を取得するには、getDate()メソッドを用います。

getMonth()と違い、1日目を0と数えるような仕組みにはなっていないので、こちらはそのまま表示させて大丈夫です。

JavaScript

const now = new Date();
const nowDate = now.getDate();

console.log(nowDate);  //16（現在の日付）

時を取得する

時間（hour）を取得するには、getHours()メソッドを用います。

getHoursと、複数形になっている点に注意が必要です。

この後で紹介する分（minute）も同様なのですが、時間を取得する系のメソッドは複数形になっているので、月や日付と区別しておきましょう！

JavaScript

const now = new Date();
const nowHour = now.getHours();

console.log(nowHour);  //10（現在の時）

分を取得する

分を取得するには、getMinutes()メソッドを用います。

JavaScript

const now = new Date();
const nowMinute = now.getMinutes();

console.log(nowMinute);  //58（現在の分）

以上をまとめると、現在の日時を次のようにわかりやすく表示させることができます。

JavaScript

console.log(`${nowYear}/${nowMon}/${nowDate} ${nowHour}:${nowMinute}`);  //2023/1/16 10:58（現在の日時）

より詳細に保存日時を記録させたい場合は【秒】まで取得・表示させることもできますが、今回は分まで記録することとして、先へ進みたいと思います。

POINT!

・Dateオブジェクトをインスタンス化し、getFullYear()などを使って年月日を取得しよう！
・時間に関するメソッドはgetHours()、getMinutes()というふうに複数形になるので注意！
・より詳細に時刻を取得したい場合は、getSeconds()で秒を取得することも可能！

ボタンクリックで日時を表示

現在の日時情報を年・月・日・時刻別に取得できたら、次は【保存する】ボタンをクリックするとその日時が表示されるような機能を作ってみましょう。

まず、HTMLにbutton要素とテキストを表示させるためのdiv要素を用意しておきます。
※div要素は、p要素やその他の要素に置き換えても良いでしょう

HTML

<button type="button" class="save_btn">保存する</button>
<div class="save_date"></div>

HTMLの準備ができたら、JavaScriptでプログラムを書いていきます。

まずbutton要素を取得した後、イベントリスナーでクリック時のイベント処理を書きます。

今回はボタンがクリックされた時にイベントを発火させたいので、イベントはclickで良いですね。

また、日時の取得はページが開かれた時ではなく、ボタンがクリックされた時のものを取得したいのでイベント内で処理が実行されるようにします。

日時を表示させる処理はとりあえず後回しにして、とりあえずここまでの処理を書いてみましょう。

JavaScript

//button要素を取得
const saveBtn = document.querySelector('.save_btn');
//buttonがクリックされた時点の日時情報を取得
saveBtn.addEventListener('click', () => {
    const now = new Date();
    const nowYear = now.getFullYear(); 
    const nowMon = now.getMonth() + 1;
    const nowDate = now.getDate();
    const nowHour = now.getHours();
    const nowMinute = now.getMinutes();
    //ボタンをクリックした時点の日時をコンソールに表示
    console.log(`${nowYear}/${nowMon}/${nowDate} ${nowHour}:${nowMinute}`);
});

下の画像のようにボタンをクリックするまではコンソールに何も表示されません。

表示結果

しかしボタンをクリックすると、下のようにコンソールにボタンをクリックした時点の日時が表示されます。

表示結果

あとはこの日時情報をテキストとして表示させるだけですね。

テキストを表示させるためのdiv要素を取得して、日時をinnerTextを使って表示させてみましょう。

JavaScript

//button要素を取得
const saveBtn = document.querySelector('.save_btn');
//div要素を取得
const saveDate = document.querySelector('.save_date');
//buttonがクリックされた時点の日時情報を取得
saveBtn.addEventListener('click', () => {
    const now = new Date();
    const nowYear = now.getFullYear(); 
    const nowMon = now.getMonth() + 1;
    const nowDate = now.getDate();
    const nowHour = now.getHours();
    const nowMinute = now.getMinutes();
    //div要素のテキストとして表示
    saveDate.innerText = `初回保存 ${nowYear}/${nowMon}/${nowDate} ${nowHour}:${nowMinute}`;
});

下のボタンは、上のサンプルコードを実行できるサンプルです。

【保存する】と書かれたボタンですが、実際に何かが保存されるわけではないので安心してお試しください。

ということで、無事にボタンクリックでクリック時の日時を表示させることができました！

しかしながら、このままではボタンをクリックするたびに初回保存日時がそのまま更新されてしまいます。

2回目以降は更新日時として表示されるように改良を加えてみましょう。

POINT!

・保存日時を表示するには、まずボタンクリックでイベントが発火するようにしよう！
・ボタンがクリックされた時点の日時を取得しよう！
・innerTextなどで取得した日時を表示させよう！

更新日時を表示させる

更新日時を表示させるにあたり、まずはHTMLを編集して更新日時を表示させるための要素を用意します。

ここでは、update_dateというclass名を付けたdiv要素を新しく用意しました。

HTML

<button type="button" class="save_btn">保存する</button>
<div class="save_date"></div>
<div class="update_date"></div>

そして次にJavaScriptの処理に手を加えていきます。

新しく用意したdiv要素（更新日時を表示させるための要素）を取得し、if分（条件分岐）を使って初回保存日時の表示がまだ行われていない時と、そうでない時で処理を分けます。

初回の保存であるかどうかを判定するには色々な方法が考えられますが、今回は初回保存を表示する要素のテキストが空であるかどうかで判定してみました。

if(saveDate.innerText === ”)という部分でそれを判定しています。

saveDate（初回保存を表示するための要素）にテキストが何も含まれていない空の状態であれば、初回保存時であると判定できます。

そうでない場合、すなわちsaveDateにテキストが含まれている場合は2回目以降であると判定できるので、elseの方に2回目以降の処理を書いています。

JavaScript

//button要素を取得
const saveBtn = document.querySelector('.save_btn');

//div要素を取得
const saveDate = document.querySelector('.save_date');
const updateDate = document.querySelector('.update_date');


saveBtn.addEventListener('click', () =< {

    //buttonがクリックされた時点の日時情報を取得
    const now = new Date();
    const nowYear = now.getFullYear(); 
    const nowMon = now.getMonth() + 1;
    const nowDate = now.getDate();
    const nowHour = now.getHours();
    const nowMinute = now.getMinutes();

    //saveDateのテキストが空（初回保存がまだ）の場合の処理
    if(saveDate.innerText === '') {
        //div要素（初回保存日時）のテキストとして表示
        saveDate.innerText = `初回保存 ${nowYear}/${nowMon}/${nowDate} ${nowHour}:${nowMinute}`;
    }
    //2回目以降の処理
    else { 
        //div要素（更新日時）のテキストとして表示
        updateDate.innerText = `更新日時 ${nowYear}/${nowMon}/${nowDate} ${nowHour}:${nowMinute}`;
    }
});

上のコードを追加して改良を加えたサンプルを下に用意しました。

▼こちらのサンプルも、ボタンをクリックしても何かが保存されるわけではないのでご安心ください！

無事に2回目以降のクリックでは更新日時として表示させることができましたね！

今回は日時を表示させるだけでしたが、保存・更新日時を変数に格納して保存しておくような仕組みを加えることで、より実際のアプリケーションに近いものを作ることもできます。

いきなり高機能・多機能なアプリを作ろうとしてしまうと挫折の原因になりかねないので、まずはこういったシンプルな機能をサクッと実装できるようになると良いと思います。

POINT!