JavaScriptでのカレンダー切り替えエラー

カレンダーの切り替え用の矢印を作成したい場合があります。この場合、いくつか典型的なエラーが発生する可能性があります。それらを見ていきましょう。

切り替えボタンと、簡単のためにカレンダーではなく単に年と月の名前を表示する要素があるとします：

<button id="prev">prev</button>
<div id="elem"></div>
<button id="next">next</button>

要素への参照を取得します：

let elem = document.querySelector('#elem');
let prev = document.querySelector('#prev');
let next = document.querySelector('#next');

また、月の番号をパラメータとして受け取り、その月の名前を返す関数があるとします：

function getMonthName(month) {
	let names = [
		'1月', '2月', '3月', '4月', '5月', '6月',
		'7月', '8月', '9月', '10月', '11月', '12月'
	];
	
	return names[month];
}

ページが読み込まれたら、現在の年と月を取得しましょう：

let date  = new Date;
let year  = date.getFullYear();
let month = date.getMonth();

要素に年と月の名前を表示します（カレンダーのシミュレーション）：

elem.textContent = year + ' ' + getMonthName(month);

次に、切り替えボタンにクリックハンドラを設定しましょう：

prev.addEventListener('click', function() {
	// 前の月を表示
});

next.addEventListener('click', function() {
	// 次の月を表示
});

それでは、スイッチを実装する際に発生する可能性のあるエラーを見ていきましょう。

最初のエラー

あるプログラマーが月の切り替えボタンを次のように実装したとします：

next.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(month + 1);
});

prev.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(month - 1);
});

しかし、このプログラマーはエラーを犯しており、その結果、月は最初のクリックでのみ切り替わり、その後のクリックでは切り替わりません。

理由は、変数 month が関数内で変更されていないからです。単にその内容に1を加算（または減算）し、その結果を関数 getMonthName に渡しているだけです。

変数が変更されていないため、次のクリック時にも変数には依然として現在の月が格納されたままとなり、何も変化しません。

この問題を修正しましょう：

next.addEventListener('click', function() {
	month = month + 1;
	elem.textContent = year + ' ' + getMonthName(month);
});

prev.addEventListener('click', function() {
	month = month - 1;
	elem.textContent = year + ' ' + getMonthName(month);
});

簡略化できます：

next.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(++month);
});

prev.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(--month);
});

2番目のエラー

月は特定の範囲内、つまり 0 から 11 の間で変更される必要があることを忘れがちです。範囲の境界に達したら、年を変更（進めるまたは戻す）し、月を初期値にリセットする必要があります。

これを実装しましょう：

next.addEventListener('click', function() {
	if (month === 11) {
		month = 0;
		year++;
	} else {
		month++;
	}
	
	elem.textContent = year + ' ' + getMonthName(month);
});

prev.addEventListener('click', function() {
	if (month === 0) {
		month = 11;
		year--;
	} else {
		month--;
	}
	
	elem.textContent = year + ' ' + getMonthName(month);
});