本コラムでは、JavaScriptのDateオブジェクトで取得した日付をフォーマット(format)する方法について解説します。日付をISOフォーマットで取得する方法の他、「YYYY/MM/DD」のようなフォーマットで文字列を取得する方法について説明します。
JavaScriptで日付オブジェクトを作成する方法については、「JavaScript - Dateオブジェクトで日付や時刻を表示する方法」で説明していますのでご参考下さい。
目次
1.1. 日付オブジェクトの標準フォーマットで表示する
1.2. 日付オブジェクトを協定世界時(UTC)の文字列で取得する
1.3. 日付オブジェクトを ISOフォーマットの文字列で取得する
1.4. 日付オブジェクトの日付部分の文字列を取得する-
2. 日付オブジェクトの日付を東京標準時フォーマットで取得する
2.1. 東京標準時の日付・時刻を取得する
2.2. 東京標準時の日付を取得する
2.3. 東京標準時の時刻を取得する
1. 日付オブジェクトで年月日を表示する方法
1.1. 日付オブジェクトの標準フォーマットで表示する - new Date() -
まずは、JavaScriptの日付オブジェクトを作成して、日付をブラウザーで表示するコードを確認してみましょう。
サンプルコードの「format_date011.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●format_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="dateFormatJ011()">日付を表示012/button>
<p id="date011">ここに標準フォーマットの日付が表示されます。</p>
<script>
function dateFormatJ011(){
//日付オブジェクトの作成（現在の日付けを設定）
var rightNow = new Date();
//現在の日付をDatオブジェクトの標準フォーマットでブラウザーに表示する
var pelem011 = document.getElementById("date011");
pelem011.innerHTML = rightNow;
}
</script>
</body>
</html>
「new Date()」で、現時点の日付オブジェクトを作成（生成）します。変数「pelem011」の初期化で、HTMLのid属性が「date011」の要素を設定し、作成したJavaScriptの日付オブジェクト変数である「rightNow」変数を代入して現時点の日付をブラウザーに表示します。
「buttonタグ」の「onclickイベント」でJavaScriptの「dateFormatJ011」関数が実行されます。以下にサンプルコードを埋め込みましたので、実際にボタンをクリックして動作を確認してみて下さい。
ボタンをクリックすると日時を表示します。
ここに標準フォーマットの日付が表示されます。
ボタンをクリックするとクリックした日付が「2017年11月20日 19時57分10秒」の場合、「Mon Nov 20 2017 19:57:10 GMT+0900 (東京 (標準時))」と表示されます。
1.2. 日付オブジェクトを協定世界時(UTC)の文字列で取得する - toUTCString() メソッド -
次に、日付オブジェクトの「toUTCString メソッド」を使って、ローカルの時間ではなく、日付を「協定世界時(UTC)」のフォーマットで表示するコードを見てみましょう。
「format_date012.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●format_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="dateFormatJ012()">日付を表示</button>
<p id="date012">ここにUTCフォーマットの日付が表示されます。</p>
<script>
function dateFormatJ012(){
//日付オブジェクトの作成（現在の日付けを設定）
var rightNow = new Date();
//日付(Date)オブジェクトの協定世界時（UTC）フォーマットを取得する
var format_date = rightNow.toUTCString();
//協定世界時（UTC）フォーマットした日付をブラウザーに表示する
var pelem012 = document.getElementById("date012");
pelem012.innerHTML = format_date;
}
</script>
</body>
</html>
日付オブジェクトの「rightNow」変数を「toUTCString()」メソッドで、協定世界時（UTC:Coordinated Universal Time）のフォーマットに変換しています。以下サンプルコードのボタンをクリックして、UTCフォーマットの日付を表示してみましょう。
ボタンをクリックすると日時を表示します。
ここにUTCフォーマットの日付が表示されます。
ボタンを押した日付が「2017年11月20日20時09分18秒」の場合、ブラウザーには東京標準時よりも９時間前の「Mon, 20 Nov 2017 11:09:18 GMT」が表示されます。
1.3. 日付オブジェクトを ISOフォーマットの文字列で取得する - toISOString() メソッド -
日付オブジェクトから「ISOフォーマット」の文字列を取得する「toISOString メソッド」をご紹介しましょう。
「format_date013.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●format_date013.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="dateFormatJ013()">日付を表示</button>
<p id="date013">ここにISOフォーマットの日付が表示されます。</p>
<script>
function dateFormatJ013(){
//日付オブジェクトの作成（現在の日付けを設定）
var rightNow = new Date();
//現在の日付けをISOフォーマットの文字列で取得する
var format_date = rightNow.toISOString();
//ISOフォーマットした日付をブラウザーに表示する
var pelem013 = document.getElementById("date013");
pelem013.innerHTML = format_date;
}
</script>
</body>
</html>
「new Date()」でオブジェクト変数の「rightNow」を生成します。
「toISOString()」メソッドで、日付と時刻とISOフォーマットで取得する事ができます。「ISOフォーマット」は基本フォーマットと拡張フォーマットがあり、基本フォーマットは、「YYYYMMDDThhmmssZ」の表記になり、拡張フォーマットは、「YYYY-MM-DDThhmmssZ」の表記になり、年月日（YYYYMMDD）の間に「ハイフォン記号」が入ります。また、日付と時刻は「T」記号で区切られます。
「toISOString()」メソッドで取得するフォーマットは、「拡張フォーマット」になります。以下のサンプルコードのボタンをクリックして、日付と時刻の表記を確認して下さい。
ボタンをクリックすると日時を表示します。
ここにISOフォーマットの日付が表示されます。
ボタンを押した日付が東京標準時の「2017年11月21日11時53分25秒」の場合、ブラウザーには東京標準時よりも９時間前の「2017-11-21T02:53:25.132Z」と表示されます。
1.4. 日付オブジェクトの日付部分の文字列を取得する - toDateString() メソッド -
日付オブジェクトから日付部分を取得する「toDateString メソッド」のサンプルコードを確認してみましょう。
「format_date014.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●format_date014.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="dateFormatJ014()">日付を表示</button>
<p id="date014">ここに日付部分のみが表示されます。</p>
<script>
function dateFormatJ014(){
//日付オブジェクトの作成（現在の日付けを設定）
var rightNow = new Date();
//日付(Date)オブジェクトの日付部分を取得する
var format_date = rightNow.toDateString();
//日付部分のみをブラウザーに表示する
var pelem014 = document.getElementById("date014");
pelem014.innerHTML = format_date;
}
</script>
</body>
</html>
作成した日付オブジェクト（rightNow）の「toDateString()」メソッドを使うと、日付・時刻表記の内、時刻部分を除いた「日付」部分のみを取得する事ができます。
ボタンをクリックすると日時を表示します。
ここに日付部分のみが表示されます。
ボタンを押した日付が「2017年11月21日（火曜日）」の場合、ブラウザーには「Tue Nov 21 2017」と表示されます。
2. 日付オブジェクトの日付を東京標準時フォーマットで取得する
2.1. 東京標準時の日付・時刻を取得する - toLocaleString() メソッド -
日付オブジェクトの「toDateString メソッド」や「toDateString メソッド」で取得する日時は、協定世界時(UTC)を基準とした文字列でしたが、ローカルタイムの東京標準時の日時を取得できるのが、「toLocaleStringメソッド」です。
「format_date021.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●format_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="dateFormatJ021()">日付を表示</button>
<p id="date021">ここに東京標準時の日付と時刻が表示されます。</p>
<script>
function dateFormatJ021(){
//日付オブジェクトの作成（現在の日付・時刻を設定）
var rightNow = new Date();
//日付(Date)オブジェクトの日付・時刻を取得する
var format_date = rightNow.toLocaleString();
//日付・時刻をブラウザーに表示する
var pelem021 = document.getElementById("date021");
pelem021.innerHTML = format_date;
}
</script>
</body>
</html>
「toLocaleString()」メソッドでは、JavaScriptでを表示している環境に合わせて、東京標準時にフォーマットされた日付と時刻を取得します。
ボタンをクリックすると日時を表示します。
ここに東京標準時の日付と時刻が表示されます。
ボタンを押した日付と時刻が「2017年11月22 17時37分02秒」の場合、ブラウザーには「2017/11/22 17:37:02」と表示されます。
2.2. 東京標準時の日付を取得する - toLocaleDateString() メソッド -
日付オブジェクトから東京標準時の日付部分のみを取得する「toLocaleDateStringメソッド」のサンプルコードを確認してみましょう。
「format_date022.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●format_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="dateFormatJ022()">日付を表示</button>
<p id="date022">ここに東京標準時の日付部分のみが表示されます。</p>
<script>
function dateFormatJ022(){
//日付オブジェクトの作成（現在の日付・時刻を設定）
var rightNow = new Date();
//日付(Date)オブジェクトの日付部分を取得する
var format_date = rightNow.toLocaleDateString();
//東京標準時の日付部分のみをブラウザーに表示する
var pelem022 = document.getElementById("date022");
pelem022.innerHTML = format_date;
}
</script>
</body>
</html>
「toLocaleDateString()」メソッドでは、日付・時刻表記の内、時刻部分を除いた「日付」部分を東京標準時を基準として文字列に変換します。
ボタンをクリックすると日時を表示します。
ここに東京標準時の日付部分のみが表示されます。
ボタンを押した日付の東京標準時が「2017年11月22日（水曜日）」の場合、ブラウザーには「Tue Nov 22 2017」と表示されます。
2.3. 東京標準時の時刻を取得する
日付オブジェクトを作成して、東京標準時の時刻部分のみを取得する「toLocaleTimeStringメソッド」をご紹介しましょう。
「format_date023.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●format_date023.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Introduction to JavaScript</title>
</head>
<body>
<h1>JavaScript 入門</h1>
<p023ボタンをクリックすると日時を表示します。</p>
<button onclick="dateFormatJ023()">日付を表示</button>
<p id="date023">ここに東京標準時の時刻部分のみが表示されます。</p>
<script>
function dateFormatJ023(){
//日付オブジェクトの作成（現在の日付・時刻を設定）
var rightNow = new Date();
//日付(Date)オブジェクトの東京標準時の時刻部分を取得する
var format_date = rightNow.toLocaleTimeString();
//時刻部分のみをブラウザーに表示する
var pelem023 = document.getElementById("date023");
pelem023.innerHTML = format_date;
}
</script>
</body>
</html>
「toLocaleTimeString()」メソッドを使うと、東京標準時の日付・時刻の内、日付を除く「時刻」部分のみを文字列に変換することができます。サンプルコードのボタンをクリックして、現在の時刻が表示されるか確認して下さい。
ボタンをクリックすると日時を表示します。
ここに東京標準時の時刻部分のみが表示されます。
ボタンを押した東京標準時が「2017年11月24日（金曜日）の12時02分08秒」の場合、ブラウザーには日付を除いた時刻部分の「12:02:08」が表示されます。
3. JavaScriptライブラリを使って日付をフォーマットする方法
3.1. YYYY/MM/DDフォーマット
JavaScriptのライブラリ「date-fns」を使って日付をフォーマットしてみましょう。
「format_date031.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●format_date031.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Introduction to JavaScript</title>
<script src="https://cdn.date-fns.org/v1.9.0/date_fns.min.js"></script>
</head>
<body>
<h1>JavaScript 入門</h1>
<p>ボタンをクリックすると日時を表示します。</p>
<button onclick="dateFormatJformat()">日付を表示</button>
<p id="date031">ここにYYYY/MM/DD形式の日付が表示されます。</p>
<script>
var format = dateFns.format
function dateFormatJ031(){
//日付オブジェクトの作成（現在の日付・時刻を設定）
var rightNow = new Date();
//日付をYYYY/MM/DDフォーマットにする
var format_date = format(rightNow, 'YYYY/MM/DD');
//日付部分をブラウザーに表示する
var pelem031 = document.getElementById("date031");
pelem031.innerHTML = format_date;
}
</script>
</body>
</html>
「date-fns」ライブラリを指定します。
<script src="https://cdn.date-fns.org/v1.9.0/date_fns.min.js"></script>
「date-fns」で使用できるフォーマットの種類はたくさんありますが、本日の日付を「YYYY/MM/DDフォーマット」に変換してみましょう。日付フォーマットの一覧は「https://date-fns.org/v1.9.0/docs/format」で確認できます。
サンプルコードでは、formatメソッドの引数に「日付」と「フォーマット文字列」を指定し、ボタンをクリックすると本日の日付が「YYYY/MM/DD」で表示されます。
ボタンをクリックして、本日の日付が「YYYY/MM/DD」で表示されるか確認して下さい。
ボタンをクリックすると日時を表示します。
ここにYYYY/MM/DD形式の日付が表示されます。
ボタンを押した日付が「2018年8月22日」の場合、ブラウザーには「2018/08/22」と表示されます。
【関連記事】JavaScript - Dateオブジェクトで日付や時刻を表示する方法
【関連記事】JavaScriptのDateオブジェクトで日付の計算をしてみよう！
