本記事では、日付フォーマットを指定する方法を解説します。
JavaScriptで現在時刻をブラウザ上に表示したい場合があると思います。
JavaScriptは標準に日付フォーマットを整形する関数はなく、ライブラリを使うことになります。
そのあたりについても詳しくみていきましょう。
JavaScriptで現在時刻を取得する方法
JavaScriptでまずは現在時刻を取得する方法を解説します。
現在時刻を取得するだけなら、Dateオブジェクトを使うのが良いです。
○コード例
<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var today = new Date();
document.write(today)
</script>
</body>
</html>
○実行結果
Dateオブジェクトを使えば、現在時刻を簡単に取り出すことができます。
ただ、時刻が見やすいように整形することはできません。
なお、Dateオブジェクトの各メソッドを活用すれば、年や月だけを取り出すことも可能です。
○コード例
<script>
var today = new Date();
document.writeln(today.getFullYear());
document.writeln(today.getMonth() + 1);
document.writeln(today.getDate());
</script>
○実行結果
getFullYearを使うことで年を取り出すことが可能です。
getMonthに関してなのですが、こちらは0~11の数値を返すため正しい月を取得するには「+1」する必要があります。
getDateは現在日を取得可能です。
これらのメソッドを使うことで、それぞれのデータのみを取り出して活用できます。
JavaScriptて日付フォーマットを調整する
それでは日付フォーマットを調整する具体的なやり方をみていきましょう。
JavaScriptには日付フォーマットを調整できる関数はありません。
splitなどの文字列操作系の関数を使えば一応可能ですが、あまり効率的とは言えませんね。
そこで、おすすめなのが外部のライブラリを使うやり方です。
ライブラリを使うやり方について本記事では紹介します。
JavaScriptのライブラリについて詳しく知りたい方は【初級編7】JavaScriptのライブラリの使い方を学ぼうをお読みください。
Moment.jsをインストールする
日付フォーマットを調整する場合、Moment.jsという外部ライブラリが必要です。
まずMoment.jsをインストールする必要があります。
Moment.jsの公式サイトからライブラリをインストールする手もありますし、HTMLに、以下のようにライブラリのパスを指定する方法もあります。
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.js"></script>
本記事では、ライブラリのパスを指定するやり方でいきます。
実際に日付フォーマットを調整する
Moment.jsを使った具体的な日付フォーマットの調整方法をみていきましょう。
○コード例
<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.js"></script>
<script>
var today = moment();
document.write(today.format('YYYY/MM/DD HH:mm'));
</script>
</body>
</html>
○実行結果
上記の例ではまずmomentオブジェクトのformatメソッドを使っています。
formatメソッドに日付のフォーマットを指定することで、その通りに日付を表示可能です。
今回は
年/月/日 時:分
となるように調整してみました。
formatメソッドはこのように使います。
日本語表示を行う
Moment.jsだけでもフォーマットの調整はできますが、日本語表記をさせることができません。
日本語表示を使うには、ja.jsというファイルを使う必要があります。
ja.jsを使うことで、「分」や「時」といった日本語表記が可能です。
○コード例
<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/ja.js"></script>
<script>
var today = moment();
document.writeln(today.format('LLLL'));
document.writeln(today.format('llll'));
</script>
</body>
</html>
○実行結果
moment.jsとja.jsの両方のパスを指定しました。
ja.jsを使うことでformatによる日本語表記ができていることがお分かり頂けるかと思います。
現在時刻以外を取得する
最後に現在時刻以外を取得するやり方もみておきましょう。
○コード例
<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/ja.js"></script>
<script>
var oneDay = moment("20170817");
document.writeln(oneDay.format('LLLL'));
document.writeln(oneDay.format('llll'));
</script>
</body>
</html>
○実行結果
momentの引数に時刻を指定することで、その時刻を取得することが可能です。
後はformatメソッドを使えば好きな日付フォーマットに変更できます。
まとめ
本記事ではJavaScriptで日付フォーマットを指定する方法を解説しました。
momentライブラリとlocaleライブラリの2つを使えば、日付表示で困ることはないでしょう。
これらのライブラリを使いこなせるようになってくださいね。
次回はJavaScriptの乱数、をみていきましょう。
