本コラムでは、日付(Date)オブジェクトから取得した日付と時刻、曜日をフォーマット(format)する方法について解説します。日付(Date)オブジェクトの基本については、「JavaScriptで日付や時刻を表示する方法」で説明していますのでご参考下さい。
目次
1.1. 年月日(Year, Month, Date)を「YYYY/MM/DD」でフォーマット(format)する
●年(Year)を取得するgetFullYear()メソッド
●月(Month)を取得するgetMonth()メソッド
●日(Date)を取得するgetDate()メソッドド
1.2. N年後の日付を表示する方法 - setYear() + getFullYear()メソッド
2.1. 時分秒(hours, minutes, seconds)を「hh:mm:ss」でフォーマット(format)する
2.2. 「時分秒(hh:mm:ss)」に0をつけて桁合わせする方法
2.3. 時刻の桁合わせを関数で処理する方法
3.1. 日付(Date)オブジェクトから「曜日」データーを取得する - getDay()メソッド
3.2. getDay()で取得した曜日を日本語でフォーマット(format)する
1. 日付(Date)オブジェクトで年月日を表示する方法
1.1. 年月日(Year, Month, Date)を「YYYY/MM/DD」でフォーマットする
JavaScriptの日付(Date)オブジェクトを使って、現在の日付を西暦４桁の「YYYY」、月「MM」、日「DD」の「YYYY/MM/DD」形式でフォーマットしてブラウザーに表示する方法をみてみましょう。
「年月日」のフォーマット(format)に使う日付(Date)オブジェクトのメソッドは以下の通りです。
●年(Year)を取得するgetFullYear()メソッド
getFullYear()メソッドの詳細は以下ページをご確認下さい。
「日付(Date)オブジェクトから「年」を取得する」
●月(Month)を取得するgetMonth()メソッド
getMonth()メソッドの詳細は以下ページをご確認下さい。
「日付(Date)オブジェクトから「月」を取得する」
●日(Date)を取得するgetDate()メソッド
getDate()メソッドの詳細は以下ページをご確認下さい。
「日付(Date)オブジェクトから「日」を取得する」
「date011.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●date011.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Introduction to JavaScript</title>
</head>
<body>
<h1>JavaScript 入門</h1>
<p>ボタンをクリックすると日付を表示します。</p>
<button onclick="dateFunction011()">日付を表示</button>
<p id="date011">ここに現在の「年月日」が表示されます。</p>
<script>
function dateFunction011() {
//日付オブジェクトを作成する
var dd = new Date();
//「年」を取得する
var YYYY = dd.getFullYear();
//「月」を取得する
var MM = dd.getMonth()+1;
//「日」を取得する
var DD = dd.getDate();
//段落タグ("date011")の中身を置き換える
var pelem011 = document.getElementById("date011");
pelem011.innerHTML = YYYY + "/" + MM + "/" + DD;
}
</script>
</body>
</html>
オブジェクト変数、「dd」に「new Date()」を代入し、Dateオブジェクトを作成します。
「年」を「getFullYear()メソッド」、「月」を「getMonth()メソッド」、「日」を「getDate()メソッド」で取得し、各々の数値を変数の「YYYY」、「MM」、「DD」に代入しています。
「document.getElementById("date011")」でHTMLのid属性が「date011」である段落（p）タグを取得し、「pelem011.innerHTML」で現在の日付を「スラッシュ（/）」を追加したフォーマットで置き換えて表示しています。
以下に「date011.html」のコードをそのまま埋め込んでいますので、ボタンをクリックして現在の「年月日」が表示されるか確認してみて下さい。
ボタンをクリックすると日付を表示します。
ここに現在の「年月日」が表示されます。
ボタンを押した日付が「2017年8月8日」の場合、「2017/8/8」と表示されます。
1.2. N年後の日付を表示する方法 - setYear() + getFullYear()メソッド
JavaScriptの日付(Date)オブジェクトで、日付を加算する方法を確認してみましょう。 「date012.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●date012.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Introduction to JavaScript</title>
</head>
<body>
<h1>JavaScript 入門</h1>
<p>ボタンをクリックして下さい。</p>
<button onclick="dateFunction012()">西暦を表示</button>
<p id="date012">ここに今から５年後の西暦が表示されます。</p>
<script>
function dateFunction012() {
//日付オブジェクトを作成する
var dd = new Date();
//取得した年に５を足して日付オブジェクトにセットする
dd.setYear(dd.getFullYear() + 5);
//５年後の日付データーから「年」を取得する
var year = dd.getFullYear();
//段落タグの中身を置き換える
var pelem012 = document.getElementById("date012");
pelem012.innerHTML = "5年後は[" + year + "]年です。";
}
</script>
</body>
</html>
現時点から５年後の日付を表示するコードを書いてみましょう。のボタンタブにonclickイベントを指定していますので、ボタンをクリックすると「dateFunction012」が実行されます。
「new Date()」で、Dateオブジェクトを生成し、現在の日付データーをオブジェクト変数である「dd」に代入しています。
setYear()メソッドで現在の日付に５を加算します。５を加算するのは「年」になりますので、引数の計算式には「年」を取得する「getFullYear()メソッド」に「５」を足しています。オブジェクト変数の「dd」には、ボタンをクリックした時点から５年後の日付データーがセットされています。例えば現在の「年」が「2017年」の場合は「Mon Aug 22 2022 16:52:37 GMT+0900 (東京 (標準時))」といったフォーマットで。
５年後の日付データーから「年」データーを取得するgetFullYear()メソッドを「year」に代入し25、26行目でブラウザーに表示します。
以下に「date012.html」のコードをそのまま埋め込みましたので、ボタンをクリックして現在の日付から「５年後の年」が表示されるか確認してみて下さい。
ボタンをクリックして下さい。
ここに今から５年後の西暦が表示されます。
ボタンを押した日付が「2017年」の場合、「5年後は[2022]年です。」と表示されます。
2. 日付(Date)オブジェクトで時刻を表示する方法
2.1. 時分秒(hours, minutes, seconds)を「hh:mm:ss」でフォーマット(format)する
時刻も日付と同じようにフォーマットしてみましょう。JavaScriptで現在の時刻を時「hh」、分「MM」、秒「ss」の「hh:mm:ss」形式でブラウザーに表示する方法を確認してみましょう。
「date021.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●date021.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Introduction to JavaScript</title>
</head>
<body>
<h1>JavaScript 入門</h1>
<p>ボタンをクリックすると時刻を表示します。</p>
<button onclick="dateFunction021()">時刻を表示</button>
<p id="date021">ここに現在の「時刻」が表示されます。</p>
<script>
function dateFunction021() {
//日付オブジェクトを作成する
var dd = new Date();
//「時」を取得する
var hh = dd.getHours();
//「分」を取得する
var mm = dd.getMinutes();
//「秒」を取得する
var ss = dd.getSeconds();
//段落タグ（"date021"）の中身を置き換える
var pelem021 = document.getElementById("date021");
pelem021.innerHTML = hh + ":" + mm + ":" + ss;
}
</script>
</body>
</html>
19行目でオブジェクト変数、「dd」に「new Date()」を代入してDateオブジェクトを作成したら「年月日」と同様に、時刻を取得するメソッドを使います。
「時」を「getHours()メソッド」、「分」を「getMinutes()メソッド」、「秒」を「getSeconds()メソッド」で取得します。それぞれの値を変数の「hh」、「mm」、「ss」に代入し、２７、２８行目のJavaScriptで現在の時刻を「コロン（:）」で区切ったフォーマットで置き換えてブラウザーに表示しています。
ボタンをクリックすると時刻を表示します。
ここに現在の「時刻」が表示されます。
ボタンを押した日付が「13時4分56秒」の場合、「13:4:56」と表示されます。
2.2. 「時分秒(hh:mm:ss)」に0をつけて桁合わせする方法
「getHours()」、「getMinutes()」、「getSeconds()」メソッドで取得した値の桁を合わせて表示する場合は、文字列のフォーマート(format)をしてブラウザーに表示します。時刻表示の桁数を２桁に揃えて表示するコードを記述してみましょう。
「date022.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●date022.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Introduction to JavaScript</title>
</head>
<body>
<h1>JavaScript 入門</h1>
<p>ボタンをクリックして下さい。</p>
<button onclick="dateFunction022()">時刻を表示</button>
<p id="date022">ここに指定の「時刻」が表示されます。</p>
<script>
function dateFunction022() {
//日付オブジェクトを作成する
var dd = new Date(2017, 8, 8, 6, 7, 8);
//「時」を取得する
var hh = dd.getHours();
//「分」を取得する
var mm = dd.getMinutes();
//「秒」を取得する
var ss = dd.getSeconds();
//「時」が10未満の場合時間に"0"を追加する
if (hh < 10) {
hh = "0" + hh;
}
//段落タグ（"date022"）の中身を置き換える
var pelem022 = document.getElementById("date022");
pelem022.innerHTML = hh + ":" + mm + ":" + ss;
}
</script>
</body>
</html>
日付(Date)オブジェクトの作成で、「2017年8月8日、6時7分8秒」の日付・時刻を指定しました。まずは「時」のみを２桁で表示するコードを追加してみます。
ifから始まる条件文で時間データーの入っている「hh」が10未満の場合に時刻の前に文字列の"0"をつけています。以下「date022.html」と同じコードを記述していますので、ボタンをクリックして動作を確認して下さい。
ボタンをクリックして下さい。
ここに指定の「時刻」が表示されます。
条件文をつけない場合は「6:7:8」と表示されますが、桁合わせのコードを追加していますので、「06:7:8」と表示されます。
2.3. 時刻の桁合わせを関数で処理する方法
2.2の時刻に0を付けるJavaScriptのコードでは「時」の処理のみ条件文を使って２桁にしていました。その他の「分」や「秒」も０をつけて2桁に合わせてみましょう。コードの書き方は、以下のコードのように条件文を増やすなど幾つかの方法がありますが、本節では、同じような処理をまとめて処理できる「関数」を使って処理する方法を学習します。
<script>
function dateFunction022() {
//日付オブジェクトを作成する
var dd = new Date(2017, 8, 8, 6, 7, 8);
・・・省略・・・
//「時」が10未満の場合時間に"0"を追加する
if (hh < 10) {
hh = "0" + hh;
}
//「分」が10未満の場合時間に"0"を追加する
if (mm < 10) {
mm = "0" + mm;
}
・・・省略・・・
}
</script>
二つのif文を見比べてみると、変数の「hh」と「mm」が異なるだけで、それ以外の処理は同じ計算をしています。
このような場合は処理をまとめて「関数」を作成するとソースコードがスッキリします。
「date023.html」をPC上の任意の場所に保存して下さい。
●date023.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Introduction to JavaScript</title>
</head>
<body>
<h1>JavaScript 入門</h1>
<p>ボタンをクリックして下さい。</p>
<button onclick="dateFunction023()">時刻を表示</button>
<p id="date023">ここに指定の「時刻」が表示されます。</p>
<script>
//１桁の数字の前に０を付けて２桁にする
function toDoubleDigits(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function dateFunction023() {
//日付オブジェクトを作成する
var dd = new Date(2017, 5, 6, 7, 8);
//「時」を取得する
var hh = toDoubleDigits(dd.getHours());
//「分」を取得する
var mm = toDoubleDigits(dd.getMinutes());
//「秒」を取得する
var ss = toDoubleDigits(dd.getSeconds());
//段落タグ（"date023"）の中身を置き換える
var pelem023 = document.getElementById("date023");
pelem023.innerHTML = hh + ":" + mm + ":" + ss;
}
</script>
</body>
</html>
「functionから始まるJavaScriptが「数字を２桁に揃える」処理を記述した「toDoubleDigits」関数です。取得した時間の内、「時」が入っている変数の「hh」や「分」データーが入っている「mm」を関数の引数「i」として受け取って、処理後の値(i)を返します。
「toDoubleDigits」関数を呼び出して、「getHours()メソッド」や「getMinutes()メソッド」で取得した値を渡します。 プログラムを記述する時は、なるべく同じような処理はまとめ、コードも短くできるのであればなるべく短く書くように心がけるとよいでしょう。
ボタンをクリックして下さい。
ここに指定の「時刻」が表示されます。
ボタンをクリックすると「時」、「分」、「秒」の前に０がついて２桁になり「07:08:00」と表示されます。
3. 日付(Date)オブジェクトで曜日を表示する
3.1. 日付(Date)オブジェクトから「曜日」データーを取得する - getDay()メソッド
Dateオブジェクトから「曜日」データーを取得するにはgetDay()メソッドを使います。
●date031.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Introduction to JavaScript</title>
</head>
<body>
<h1>JavaScript 入門</h1>
<p>ボタンをクリックして「曜日」データーを取得します。</p>
<button onclick="dateFunction031()">曜日を表示</button>
<p id="date031">ここに、本日の曜日データーが表示されます。</p>
<script>
function dateFunction031() {
//日付オブジェクトを作成する
var date031 = new Date();
//日付オブジェクトから「曜日」を取得する
var day = date031.getDay();
//段落タグの中身を置き換える
var pelem031 = document.getElementById("date031");
pelem031.innerHTML = "曜日データー：" + day;
}
</script>
</body>
</html>
getDay() で取得できる「曜日」データーは「０～６」になります。「日曜日」が「０」、「月曜日」が「１」、、、「土曜日」が「６」を表しています。
サンプルコードでは、ボタンをクリックすると現在の「曜日」データーがブラウザーに表示されます。サンプルボタンをクリックして、今日の「曜日」データーが表示されるか確認してみて下さい。
ボタンをクリックして「曜日」データーを取得します。
ここに、本日の曜日データーが表示されます。
ボタンを押した曜日が「月曜日」の場合は、ブラウザーに「曜日データー：1」、「火曜日」の場合は「曜日データー：2」、土曜日の場合は「曜日データー：6」と表示されます。
3.2. getDay()で取得した曜日を日本語でフォーマット(format)する
次に、getDay()メソッドで取得した「曜日」データーを元に、日本語の曜日にフォーマットするJavaScriptを記述してみましょう。
「date032.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●date032.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Introduction to JavaScript</title>
</head>
<body>
<h1>JavaScript 入門</h1>
<p>ボタンをクリックすると曜日を表示します。</p>
<button onclick="dateFunction032()">曜日を表示</button>
<p id="date032">ここに今日の「曜日」が表示されます。</p>
<script>
function dateFunction032() {
//日本語の曜日データを入れる配列を作成する
var w_day = new Array(7);
w_day[0] = "日";
w_day[1] = "月";
w_day[2] = "火";
w_day[3] = "水";
w_day[4] = "木";
w_day[5] = "金";
w_day[6] = "土";
//日付オブジェクトを作成する
var dd = new Date();
//Dateオブジェクトの曜日データを代入する
var day = w_day[dd.getDay()];
//段落タグの中身を置き換える
var pelem032 = document.getElementById("date032");
pelem032.innerHTML = "今日は" + day + "曜日です。";
}
</script>
</body>
</html>
まず、日本語の曜日を入れる配列の「w_day」を作成します。
配列変数の角括弧の中の数字を添え字と呼びます。「添え字」は、０から始まりますので、getDay()メソッドで取得する曜日の数字と照らし合わせると分かり安いと思います。
日付(Date)オブジェクトのgetDay()メソッドで取得した曜日データーを配列の「添え字」として指定します。getDay()メソッドの値が「３」だった場合は、「 w_day[3] 」となりますので、変数「day」には、「"水"」が入ります。
「id属性」が「"date032"」の段落に、作成した文字列を置き換えて表示します。
ボタンをクリックすると曜日を表示します。
ここに今日の「曜日」が表示されます。
ボタンを押した日付が「月曜日」の場合、ブラウザーには、「今日は月曜日です。」と表示されます。
当サイトプロエンジニアのコンサルタントが厳選したおすすめのフリーランス案件特集はこちら
特集ページから案件への応募も可能です！
実際にフリーランスエンジニアとして活躍されている方のインタビューはこちら
