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埋めされていされていない結果上記の例の他にも、ダウンロード時に紹介したこちらのサイトに仕様が記載されていますので、迷ったら参照してみましょう。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
まとめ
現在の日付を表示する際に、new Date()を元に自力で実装をするのはなかなか大変です。
要件に応じてdatetimeformatのようなライブラリを使うことで、開発を効率的に行っていきましょう。
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
