JavaScriptの日付フォーマット変換ライブラリdateformatについて現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptの日付フォーマット変換ライブラリdateformatについて解説しています。dataformatの導入方法、基本の使い方、実際の日付フォーマット作成の例を説明します。dataformatを利用した日付の扱い方を学びましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
高田 悠
JavaScriptの日付フォーマット変換ライブラリdateformatについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
日付フォーマット変換ライブラリdateformatについて詳しく説明していくね！
お願いします！
dateformatとは
dateformatは、無料で提供されているJavaScriptの「日付フォーマット変換ライブラリ」です。
JavaScriptそのものには、「2021年1月1日」のように年月日を直接出力してくれるようなメソッドは存在しません。
そのため、日付のフォーマットを都度実装する手間を省くために、dateformatのようなライブラリが公開されています。
日付に関するライブラリは複数存在しますが、本記事では一例としてdateformatの使用方法を解説していきます。
dateformatの使い方
dateformatライブラリの使用手順は以下の通りです。
1.ライブラリのコードをダウンロードする
dateformatのソースコードは、ここからダウンロードできます。
ダウンロードしたら、プロジェクトの任意のフォルダ内にコードを設置しましょう。
今回の設置場所は/js/vendors/dateformat.jsとします。
2.HTMLからライブラリを読み込む
scriptタグを用いて、先ほどダウンロードしたソースコードをHTML側から読み込みます。
この際、メインの処理をするJavaScriptよりも上の位置で読み込むようにしましょう。
<script type="text/javascript" src="./js/vendors/dateformat.js"></script>
3.DateFormatインスタンスを作成する
ここからはJavaScriptコードの実装に入ります。
まずは以下の記述の通り、DateFormatインスタンスを作成します。
その際、引数にどのようなフォーマットで出力するかを指定できます。
const dateFormat = new DateFormat("yyyy/MM/dd HH:mm:ss");上記の例で用いている"yyyy/MM/dd HH:mm:ss"という形式は、日本語で表すと"年/月/日 時:分:秒"という意味です。
4.formatメソッドを呼び出して出力を得る
最後に、3で作成したインスタンスを用いて、フォーマットされた出力結果を取得します。
今回は、現在の日付をフォーマットしてみます。
const result = dateFormat.format(new Date()); //new Date()とすることで現在の日付情報を取得できる
console.log(result); //-> 2021/01/01 00:00:00 (元日の0時の場合)
また、dateformatでは日付データをフォーマットすることの逆、つまり文字列から日付データに変換することも可能です。
文字列を日付データに変換するには、parseメソッドを使います。
const parsedDate = dateFormat.parse("2021/01/01 00:00:00");
console.log(parsedDate); //-> Fri Jan 01 2021 00:00:00 GMT+0900 (日本標準時)
日付フォーマットのパターン
dateformatを使うと、実装目的に応じて様々なフォーマットのパターンを出力できます。
以下はいくつかの日付フォーマットの例です。
1.日本語で年月日と時分まで表示する
インスタンス生成時の引数を改変し、日本語で出力してみます。
const dateFormat = new DateFormat("yyyy年MM年dd日 HH時mm分");
const result = dateFormat.format(new Date());
console.log(result); //-> 2021年01月01日 00時00分
2.0埋めを行わない
0埋めとは、月日などの数字が1桁の場合に01, 02などと先頭に0をつけて桁数を揃える手法のことです。
0埋めをしたくない場合には、以下のようにフォーマットを変更します。
const dateFormat = new DateFormat("yyyy年M年d日 H時m分"); //ローマ字1文字分に減らす
const result = dateFormat.format(new Date());
console.log(result); //-> 2021年1月1日 0時0分 //0埋めされていされていない結果上記の例の他にも、ダウンロード時に紹介したこちらのサイトに仕様が記載されていますので、迷ったら参照してみましょう。
まとめ
現在の日付を表示する際に、new Date()を元に自力で実装をするのはなかなか大変です。
要件に応じてdatetimeformatのようなライブラリを使うことで、開発を効率的に行っていきましょう。
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
