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

「数億規模スタートアップのCTO講師」と「エンジニアキャリア専門のポテパン」が贈る、実践型Rubyスクール。

【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();」等を代入することが必要です。そのため違和感を感じるなど最初のうちは「使いづらい」かもしれません。しかし、使いこなすことで年・月・日・曜日など簡単に出力することができます。ぜひ参考にしてみてください。

【おすすめ記事】
JavaScriptを学べるスクールってどこがおすすめ?
フロントエンジニアが勧める!JavaScript学習サイト
Javascriptの本・参考書の評判

投稿者:プロスタ編集部

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

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

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

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

あわせて読みたい

関連記事

ページ上部へ戻る