JavaScriptで現在の時刻を取得、表示する場合は、new Date()にてDateオブジェクトを作成し、
getHours() getMinutes() メソッドなどを呼び出すことで時刻や日付の要素を取得できます。
また、今日の日付を表示する場合は、new Date()にてDateオブジェクトを作成し、
getFullYear() getMonth() getDate()メソッドなどを呼び出すことで日付の要素を取得できます。
Dateオブジェクトのインスタンスを作成すると、現在の時刻を示すDateオブジェクトが作成されます。
Dateオブジェクトが示す時刻や日付の要素を取得するには下記のメソッドを利用します。
| 項目 | メソッド名 |
|---|---|
| 年 | getFullYear() |
| 月 | getMonth() |
| 日 | getDate() |
| 時 | getHours() |
| 分 | getMinutes() |
| 秒 | getSeconds() |
| ミリ秒 | getMilliseconds() |
| 曜日 | getDay() |
| getMonth()の値 | 意味 | 月 |
|---|---|---|
| 0 | January | 1月 |
| 1 | February | 2月 |
| 2 | March | 3月 |
| 3 | April | 4月 |
| 4 | May | 5月 |
| 5 | June | 6月 |
| 6 | July | 7月 |
| 7 | August | 8月 |
| 8 | September | 9月 |
| 9 | October | 10月 |
| 10 | Nobember | 11月 |
| 11 | December | 12月 |
getDay()で取得できる曜日の数値の意味は下記になります。
| getDay()の値 | 意味 | 曜日 |
|---|---|---|
| 0 | Sunday | 日曜日 |
| 1 | Monday | 月曜日 |
| 2 | Tuesday | 火曜日 |
| 3 | Wednesday | 水曜日 |
| 4 | Thursday | 木曜日 |
| 5 | Friday | 金曜日 |
| 6 | Saturday | 土曜日 |
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function LoadProc() {
var now = new Date();
var YearValue = now.getFullYear();
var MonthValue = now.getMonth()+1;
var DateValue = now.getDate();
var HourValue = now.getHours();
var MinValue = now.getMinutes();
var SecValue = now.getSeconds();
var target = document.getElementById("DateTimeDisp");
target.innerHTML = YearValue + "年" + MonthValue + "月" + DateValue + "日" + HourValue + ":" + MinValue + ":" + SecValue;
}
</script>
</head>
<body onload="LoadProc();">
現在の時刻:
<div id="DateTimeDisp"></div>
</body>
</html>
Dateオブジェクトを新規に作成し、"DateTimeDisp"のIDを持つDIVタグの要素を取得し現在の時刻を表示します。
getMonth()は1月が0、12月が11となるため、1を加算することに注意してください。
function LoadProc() {
var now = new Date();
var YearValue = now.getFullYear();
var MonthValue = now.getMonth()+1;
var DateValue = now.getDate();
var HourValue = now.getHours();
var MinValue = now.getMinutes();
var SecValue = now.getSeconds();
var target = document.getElementById("DateTimeDisp");
target.innerHTML = YearValue + "年" + MonthValue + "月" + DateValue + "日" + HourValue + ":" + MinValue + ":" + SecValue;
}
onload="LoadProc();" を忘れずに。HTMLファイルを表示します。下図の画面が表示されます。現在の時刻が表示されます。
ページをリロードすると時刻表示も更新されます。
今日の日付を取得する場合のコードです。
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function LoadProc() {
var now = new Date();
var YearValue = now.getFullYear();
var MonthValue = now.getMonth()+1;
var DateValue = now.getDate();
var target = document.getElementById("DateTimeDisp");
target.innerHTML = YearValue + "年" + MonthValue + "月" + DateValue + "日";
}
</script>
</head>
<body onload="LoadProc();">
<h2>今日の日付を取得するデモ</h2>
<div>
今日の日付:<span id="DateTimeDisp"></span>
</div>
</body>
</html>
ページロード時に以下の LoadProc() 関数を呼び出し実行します。
Dateオブジェクトを作成しgetFullYear() getMonth() getDate() メソッドを呼び出し、今日の日付の要素の値を取得し、
画面に表示します。
function LoadProc() {
var now = new Date();
var YearValue = now.getFullYear();
var MonthValue = now.getMonth()+1;
var DateValue = now.getDate();
var target = document.getElementById("DateTimeDisp");
target.innerHTML = YearValue + "年" + MonthValue + "月" + DateValue + "日";
}
HTMLファイルをWebブラウザで表示します。下図のページが表示されます。
実行時の日付がページに表示されることが確認できます。
var MonthValue = now.getMonth()+1;
var MonthValue = Number(now.getMonth())+1;
target.innerHTML = YearValue + "年" + MonthValue+1 + "月" + DateValue + "日" + HourValue + ":" + MinValue + ":" + SecValue;
2017年111月16日15:30:24
テラス席に差し込む初夏の光が、真っ白なテーブルクロスに水面のような反射をつくっていた。
噴水の涼やかな音が遠くに混じり、ミントの葉と温かなフォカッチャの匂いが風に乗る。
ウェブコーダーの弘美は、細い指でノート PC の蓋を開けると、隣に座る女子プログラマーの都へいたずらっぽく笑いかけた。
「ねえ都、ランチセットって十三時ちょうどで終わりらしいよ。時計見るより JavaScript に聞いたほうが確実じゃない？」
都は軽く頷き、カフェラテ色の瞳をテーブル脇の時計台に向けた。長針は十二時五十八分を回ったばかり。
「間に合うか微妙ね。じゃあ――」
カチャ、とキーボードが鳴る。
const now = new Date();
const timeStr = now.toLocaleTimeString('ja-JP', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
timeZone: 'Asia/Tokyo'
});
console.log(timeStr);
弘美がブラウザの DevTools を開き、エンターキーを押す。コンソールに浮かび上がった時刻は、12:58:47。
「あと七十三秒！」弘美が声を上げた。
都は慌てて手を挙げ、近くのウェイターを呼ぶ。
「ランチセット二つ、急ぎでお願いします！」
だが昼休み終盤の店内は混雑していた。注文端末を操作するウェイターが戻ってきたのは、秒針が十三時を過ぎた頃だった。
「申し訳ございません。ランチセットは十三時〇〇分〇〇秒をもって終了いたしました」
淡々とした声とは裏腹に、端末の画面に映るのはレストラン専用の注文アプリ。その片隅で JavaScript のログが小さく瞬いている。
「秒単位で締め切るなんて、なかなかシビアだね」弘美が肩をすくめる。
「非同期処理がレイテンシに負けた感じ」都も苦笑いした。
結局、二人は通常メニューのカルボナーラとアラビアータを頼むことにした。皿が運ばれてくるまでのあいだ、
風がテラスのパラソルを揺らし、ミントのグリーンが光を透かす。
ふと弘美が、ウェイターの端末から目を離さずにつぶやく。
「秒単位で値段も変動したら面白いのにね。ランチあと一秒、ディスカウント一円とか」
「秒殺割引？」都は吹き出し、すぐにスマホを取り出した。
「じゃあコードに書き足してみる？」
const limit = new Date();
limit.setHours(13, 0, 0, 0); // 13:00:00.000
const diff = limit - new Date(); // 残りミリ秒
const price = diff > 0 ? 1200 : 1800; // 秒殺割引（仮）
「理論上はこれで値段が動くはずだけど、現実は動かないわね」
皿がテーブルに置かれ、バジルとチーズの香りがふわりと立つ。
ウェイターは申し訳なさそうに会釈したあと、端末を確認して戻っていく。その背中を見送りながら、都はふっと目を丸くした。
「ねえ弘美、あの端末のロゴ……私たちが作った決済 UI のライブラリじゃない？」
「あ、本当だ」弘美も身を乗り出す。
二人がかつて徹夜続きで仕上げた OSS の小さなライブラリ。秒単位の締め切りロジックは、まさにそれに含まれていた。
「自分で書いたコードにランチを締め切られるとは思わなかったな」
「開発者の特権か、業（カルマ）か――」
カルボナーラを巻き取りながら、都は茶目っ気のある笑みを浮かべた。
「ま、いいじゃない。コードで時間を測れば測るほど、ランチタイムは短くなる。――これ、今日の教訓ね」
弘美はフォークを置き、深く頷く。
「秒殺されたっていいさ。プログラムと胃袋にバグはないって証明できたんだから」
頭上のパラソルがサラサラと鳴り、時計台のベルが十三時一分を告げた。風は相変わらずミントの香りを運び、二人の笑い声に混ざって小さく弾んだ。
