1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

JavaScriptでDateオブジェクトを利用する方法とは?

【JavaScript入門】
Pocket

今回は、JavaScriptの組み込み関数の1つ、Dateオブジェクトを使って日付を表示する方法について解説します。

簡単に言えば、「Dateオブジェクト」を利用すると日付を取得して表示させることができるようになります。詳しい使い方は下記の様になります。まずは特徴をチェックしてみましょう。

日付を取得する

今日の日付を取得したい場合の方法

指定の日付を表示させたい場合の方法

と行うと日付を取得することができます。最初に変数に入れて、それを使うことがポイントです。

年・月・日を一気に取得する場合の方法

上記のやり方では、日付を取得してくるだけで応用がありませんでした。今回は「年や月」「曜日」「分や秒」などを取得できる方法を解説していきます。

と入力することで、HTML側では下記のような表示に切り替わります。

実行結果

2016年10月01日

パラメータを細か分けて表示する方法とは?

ここからはさらにパラメータを細かく分けて解説していきます。

パラメータ 範囲
分・秒 0~59
時間 0~23
曜日 0~6
1~31
0~11
西暦の下2桁

年を表示させる方法

※.getYear()というのもあるのですが、これは1900年から数えた数値を出力するので注意。たとえば、2016年の場合、2016-1900=116なので、116という値が出力されます。

月を表示させる方法

※初期の設定で必ず「0」から始まるので、数字表記を行う場合は「+1」を加える必要がある

日を表示させる方法

曜日を表示させる方法

時を表示させる方法

分を表示させる方法

秒を表示させる方法

※今回はわかりやすいように全て変数名を「var time」としていますが、変数名は自由に設定して行って頂いて大丈夫です。

おわりに

いかがだったでしょうか。Dateオブジェクトには似た表記のメソッドが多く、変数の中に「new Date();」等を代入することが必要です。そのため違和感を感じるなど最初のうちは「使いづらい」かもしれません。しかし、使いこなすことで年・月・日・曜日など簡単に出力することができます。ぜひ参考にしてみてください。

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

WebCampは、一ヶ月の短期集中でWebデザイン、プログラミングスキルを習得するスクールです。学習効果の高い反転授業(自主学習でインプット、講義でアウトプット)を採用し、年間1000名を輩出しています。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ

3WEB塾

WEB塾

メールマガジン

ページ上部へ戻る