読者です 読者をやめる 読者になる 読者になる

webプロダクトいんふぉ

webの気になった情報を発信中!!

JavaScriptで現在から数日~数週間前の日時を取得するには?

まず、JavaScriptで日時を扱うには?

js側で用意している組み込み関数のDateオブジェクトを使用します。

使用方法は

var 変数名 = new Date();

で、Dateオブジェクトを生成します。

今回、次のような日時を使ったグラフを作っていきます。

f:id:front-end-engineer:20160621111642p:plain

ステップ1

グラフを簡単に作成するjsのライブラリとしてchart.jsを使っていきます。

http://www.chartjs.org/

リンクをクリックしたら、下の画面に飛ぶので、Get Startedをクリック

f:id:front-end-engineer:20160620185329p:plain

ステップ2

GitHubのページに飛ぶので、clone or downloadボタンをクリック後、Download ZIPからダウンロードをしてください

f:id:front-end-engineer:20160620185617p:plain

ステップ3

今回使うファイルは、Chart.js-master→distフォルダ→Chart.min.jsのみを使います

Chart.min.jsを任意の場所に移動して置いてください。

上記ような操作が面倒な方はCDNも公開されているのでそちらを使っても大丈夫です

https://cdnjs.com/libraries/Chart.js

まず、HTMLファイルの雛型を用意して、グラフを描画するためのcanvasタグを書きつつ、chart.jsを読み込んでおきます

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div style="width:600px;height: 450px;margin: 0 auto;">
		<canvas id="canvas" height="450" width="600"></canvas>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
	<script>

	</script>
</body>
</html>

ステップ4

次に、scriptタグの中にchart.jsを使用するためのコードを書いてあげます

chart.jsの解説はしませんが、興味がある方は調べてみてください

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
	<script>
	var config = {
	type: 'line',
		data: {
			labels : ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
			datasets: [{
				label: "ページビュー数",
				fill: false,
				backgroundColor: "#3A7AC9",
				borderWidth: 2,
				borderColor: "rgba(2,63,138,0.8)",
				pointBorderColor: "#fff",
				pointBackgroundColor: "rgba(2,63,138,0.8)",
				pointBorderWidth: 2,
				pointHoverRadius: 5,
				pointHoverBackgroundColor: "#1D5191",
				pointHoverBorderColor: "#fff",
				pointHoverBorderWidth: 2,
				tension: 0,
				data:  [1, 59, 90, 81, 56, 55, 40, 30, 10, 40, 48, 58]
			}, {
				label: "セッション",
				fill: false,
				backgroundColor: "#DB514E",
				borderWidth: 2,
				borderColor: "rgba(201,60,58,0.8)",
				pointBorderColor: "#fff",
				pointBackgroundColor: "rgba(201,60,58,0.8)",
				pointBorderWidth: 2,
				pointHoverRadius: 5,
				pointHoverBackgroundColor: "#9A1B19",
				pointHoverBorderColor: "#fff",
				pointHoverBorderWidth: 2,
				tension: 0,
				data: [28, 48, 40, 19, 96, 27, 100, 33, 63, 31, 64, 51]
			}]
		},
		options: {
			responsive: true,
			scales: {
				xAxes: [{
					display: true,
					stacked: false,
					gridLines: {
						display: false
					}
				}],
				yAxes: [{
					display: true,
					ticks: {
						reverse: false,
						callback: function(value){
							return value;
						}
					}
				}]
			}
		}
	};

	// ▼上記のグラフを描画するための記述
	window.onload = function() {
	   var ctx = document.getElementById("canvas").getContext("2d");
	   window.myLine = new Chart(ctx, config);
	};
	</script>
</body>
</html>

上記のコードを書いてあげてブラウザで見てみると、グラフが出来上がっていると思います

f:id:front-end-engineer:20160620193456p:plain

ステップ5

赤枠で囲ってる部分を現在の月と日時に書き換えてあげたいと思います

var config = { の上にscriptを記述していきます

2つDateオブジェクトを生成してあげます

空の配列を用意して、for文で今日の日付から1週間前の経過日数を出して、配列に挿入しています。

<script>
var date = new Date();
var before = new Date();
var week = [];
for(var i = 0;i < 7;i++) {
	week.unshift(date.getDate() - i);
}

var config = {
</script>

ステップ6

出力結果が下記になります。今日が21日なので、1週間分がしっかりと取れてますね

f:id:front-end-engineer:20160621104837p:plain

ただ、これだと問題があります。今回は月をまたいでいないので、問題が無いように見えますが、例えば、6/1の前日の日付を取ろうとした場合に本来であれば、5/31にならなければならないのに、5/0になります。試してみましょう

for文で回す値を大きくしてあげます。

<script>
var date = new Date();
var before = new Date();
var week = [];
for(var i = 0;i < 25;i++) {
	week.unshift(date.getDate() - i);
}

var config = {
</script>

ステップ7

そうすると意図した結果にならないのが分かると思います。これを避けるためには、setDate()メソッドを使用します。

簡単に説明すると、指定した値が1から31の範囲外の場合は、Dateオブジェクトの日付の情報の更新を試みます。例えば0が値として指定された場合、前月の最終日に設定されます。

f:id:front-end-engineer:20160621105542p:plain

<script>
var date = new Date();
var before = new Date();
var week = [];
for(var i = 0;i < 25;i++) {
	before.setDate(date.getDate() - i);
	week.unshift(before.getDate());
}

var config = {
</script>

ステップ8

先月の日時がしっかりとれてますね。

そしたら、配列に月も挿入してあげつつ、chart.jsのlabelsの中身をweekに変更してあげれば完成です

getMonth()に+1している理由はgetMonthメソッドでは1月が0、2月が1といった具合に、1つ下にずれた数字が取得されるからです
※for文の値も直しておきます

f:id:front-end-engineer:20160621110528p:plain

<script>
var date = new Date();
var before = new Date();
var week = [];
for(var i = 0;i < 7;i++) {
	before.setDate(date.getDate() - i);
	week.unshift(before.getMonth() + 1 + '月' + before.getDate() + '日');
}

var config = {
type: 'line',
	data: {
		labels : week,
</script>