2020年 6月 の投稿一覧

getDay()メソッドで取得できる数字を曜日に置き換える

Dateオブジェクトには曜日を取得する.getDay()メソッドがあります。
返り値は下記のとおりとなります。

var today = new Date();
var day = today.getDay();
console.log(day); // 4 (=木曜日)

1週間を日曜日からカウントし、それぞれ0~6の番号が割り当てられます。
しかし番号で取得したところで使いづらいのでこの番号を曜日に置きなおしたいと思います。
数字と曜日が対になったオブジェクトを作成します。
そして先ほど取得した番号に対応する曜日を配列から取り出しておしまいです。

var today = new Date();
var day = today.getDay();
var week = {
	'0':'日曜日','1':'月曜日','2':'火曜日','3':'水曜日','4':'木曜日','5':'金曜日','6':'土曜日',
}
console.log('今日は'+week[day]+'です'); // 今日は木曜日です

JavaScriptで過去の特定の日時から現在までの日数を計算してみる

今日(2020年6月7日)は元号が令和になってから何日目なのか計算してみます。

var today = new Date(); //今日の日付
var startDay = new Date(2019,4,1); // 令和が始まった日、取得したいのは5月1日なので実際の月-1をして4をセット
var countDate = Math.floor((today - startDay)/86400000);
console.log(countDate); // 403

new Dateオブジェクト同士で計算をした時、結果はミリ秒で返ってきます。
1日は86400000ミリ秒なので、86400000でこの値を割ってあげれば求めたい日数が取得できます。
実際に計算してみると403.598…となりますが、これは403日と.593時間ということで404日には到達していないため切り捨てます。
数値を切り捨てるために、Mathオブジェクトのfloorメソッドを使用します。

Dateオブジェクトで日時を取得してみる(JavaScript)

Dateオブジェクトを使うと現在の日時を取得することができます。
過去や未来の日時を取得することもできるので、未来の日時から現在の日時を引いて未来の特定の日付までの時間や日数を取得するといったこともできるようになります。
この機能を使用すればカウントダウンタイマーやアクセス時間によって表示を分けたりすることが可能となります。

現在の時刻を取得する

const now = new Date();
console.log(now); // Sun Jun 07 2020 13:06:15 GMT+0900 (日本標準時)

new Date()にパラメータを付与しなければ現在の時刻を取得することができます。
現在時刻を変数nowに格納して、コンソールに表示しています。
「Sun Jun 07 2020 13:06:15 GMT+0900 (日本標準時)」と現在時刻が取得できました。

過去の日時を取得する

過去の特定の日時を取得するには、new Date()のパラメータに取得したい日付を入れます。
今回は令和の始まった日時を取得します。
令和が始まった日は2019年4月1日なので、new Date(2019,4,1)と指定して変数に格納します。
すると「Wed May 01 2019 00:00:00 GMT+0900 (日本標準時)」という結果が返ってきました。

var startDay = new Date(2019,4,1);
console.log(startDay);
console.log('令和は'+startDay.getFullYear()+'年'+startDay.getMonth()+'月'+startDay.getDate()+'日に始まりました'); //令和は2019年4月1日に始まりました

主なメソッド

先ほどnew Date()で取得した現在の日時を色々な形式で表示してみます。
デフォルトの出力形式だと曜日や月が英語になっていたり(日本標準時)などのいらない表記があったりでわかりづらいので、わかりやすい形式に変換してみます。

var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var date = today.getDate();
console.log('今日は'+year+'年'+month+'月'+date+'日です'); //今日は2020年6月7日です

西暦を取得

var today = new Date();
console.log(today.getFullYear()); //2020

月を取得

var today = new Date();
console.log(today.getMonth() + 1); //6

Dateオブジェクトでは「月」の扱いに注意

Dateオブジェクトの「月」は「実際の月-1」となっています。
なので、正しくは上記のようにtoday.getMonth()の値に1を足すと正しい月の値が取得できます。

日を取得

var today = new Date();
console.log(today.getDate()); //7


JavascriptのforEachメソッドでオブジェクトの中身を<li>タグの中に1つずつ出力する方法

前回の記事ではforEachを使って配列の中身を<li>の中に1つずつ出力するやり方を紹介しました。
今回はオブジェクトのキーや値を出力するやり方をまとめます。

エラーになる書き方

配列と同じような下記の書き方だとエラーが出てしまいます。

var obj = {
  a:'エー',
  b:'ビー',
  c:'シー',
}
obj.forEach(function(data,index){
	console.log(index+':'+data);
});
//Uncaught TypeError: obj.forEach is not a function

Object.keys() メソッドを使用することでエラーを回避

javascriptのオブジェクトの構造は上記の例でいうと、a、b、cが「キー」、エー、ビー、シーが「値」となり、それぞれついになって変数objに格納されています。この1セットのことを「プロパティ」と呼びます。

var obj = {
a:'エー',
b:'ビー',
c:'シー',
};
Object.keys(obj).forEach(function(key) {
console.log(key, obj[key]);
});
//a エー
//b ビー
//c シー

Object.keyメソッドを使用することで、値を取得することができました。