JavaScriptで数値を扱う「Number」、数値計算を扱う「Math」、日付を扱う「Date」の基本JavaScript標準ライブラリの使い方超入門(4)(4/4 ページ)

» 2016年10月18日 05時00分 公開
[金城俊哉]
前のページへ 1|2|3|4       

日付や時刻を加算/減算する

theme

日付や時刻を加算、減算し、結果を画面に表示する。


Navigator

「Dateオブジェクトには、日付や時刻を加算したり減算したりするメソッドは用意されていません。このため、加算や減算を行うには、次の手順が必要になります」


  1. 対象の日時データからgetMonthなどのgetXxxxx()系のメソッドで日付や時刻を取得する。
  2. 取得した値に対して加算または減算を行う。
  3. 結果をsetXxxxx()系のメソッドで設定する。

特定の日時データの月と日付を加算/減算する

Navigator

「それでは、実際に日時の加算と減算を行ってみましょう」


Driver

「では、現在の日時を取得して、月の加算、日の減算、時間の減算を順に実行してみますね」


月と日付を加算/減算する(dateCalc1.html)
実行結果

指定した日からの経過日数を求める

theme

特定の日時を指定し、指定した日時からの経過日数を求め、これを画面に表示する。


Navigator

「DateオブジェクトのgetTime()メソッドを使うと、1970年1月1日0分0秒00からの経過時間をミリ秒単位で取得することができます」


Driver

「1970年の日時が基準になるわけですね」


Navigator

「さらにparse()メソッドを使用すると、()内で指定した日時までの経過時間をミリ秒単位で取得することができます」


過去の日時から現在の日時までの経過日数を求める

Navigator

「getTime()とparse()の2つのメソッドを使うことで、指定した日時までの経過時間や日数を求めることができます。ここでは、次の手順で経過日数を求めることにしましょう」


  • (1)現在の日時でDateのインスタンスを生成する。
  • (2)getTime()メソッドで1970年1月1日0分0秒00から現在までの経過時間を取得する。
  • (3)parse()メソッドで、指定した日時までの経過時間を取得する。
  • (4) (2)で取得した値から(3)で取得した値を減算する。
  • (5)ミリ秒単位を日数に直す。
Driver

「getTime()で求めた現在までの経過時間からparse()で求めた特定の日までの経過時間を引けば、特定の日から現在までの経過時間がわかるってわけですね。では、(1)から(5)までの手順に従ってコードを書いていきます」


過去の日時からの経過日数を求める(passing1.html)
実行結果

ミリ秒単位を日数に変換する

Driver

「取得した時間はミリ秒単位なので、最後に『millis / 1000 / 60 / 60 / 24』という割算を行っています。まず1000で除算することでミリ秒を秒単位にし、続いて60で除算して分単位、さらに60で除算して時間単位、そして最後に24で除算することで日数にしました」


Navigator

「最終的に小数点以下の端数が出るので、これをceil()メソッドで切り捨てていますね」


Driver

「指定する過去の日時は、1970年1月1日0分0秒00を基点にしているので、分以下の値はすべて0になります。これを現在の日時から引くと『経過した日数+今日の0:00からの経過時間』となりますが、今日の0:00からの経過時間は余分な値です。このため、小数点以下を切り上げてしまうと1日多くなるので、ceil()メソッドで切り捨てるというわけです」


Navigator

「なるほど(あれ? いつもと逆だ……)」


Hint 未来の日時はどうなる?

 parse()メソッドで先の日付を指定することで、将来の特定の日までの日数を求めることができます。この場合は、未来の日時から現在の日時を減算するようにします。

将来の日時までの日数を求める(passing2.html)

書籍紹介

JavaScript Web開発パーフェクトマスター

JavaScript Web開発パーフェクトマスター

金城俊哉著
秀和システム 3,672円

JavaScriptは、Webアプリ開発の定番言語です。本書は、JavaScriptの初学者向けにWebアプリ開発に必要なノウハウを、ボトムアップ方式で基礎から応用までやさしく解説します。

若手プログラマーが講師となって、JavaScript未体験のエンジニアに手ほどきをするというペアプロ形式で説明していくので、プログラミングスクールで1対1のレッスンを受けている感覚で読み進めていただけます。開発現場ですぐに役立つ技が満載です!

注文ページへ


前のページへ 1|2|3|4       

Copyright © ITmedia, Inc. All Rights Reserved.

スポンサーからのお知らせPR

注目のテーマ

Microsoft & Windows最前線2025
AI for エンジニアリング
ローコード/ノーコード セントラル by @IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by @IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。