〇と×の交互配置の解析

このレッスンでは、〇と×の交互配置を一行で実装する方法をお見せしたいと思います。おそらく、皆さんは次のようなものを実装したことでしょう：

function start(cells) {
	let i = 0; // カウンターの初期値
	
	for (let cell of cells) {
		cell.addEventListener('click', function() {
			if (i % 2 == 0) {
				this.textContent = 'X';
			} else {
				this.textContent = '0';
			}
			
			i++; // カウンターを増加
		});
	}
}

私はこの問題をもっと短く解決する方法を提案します。プレイヤーの'配列'を作りましょう：

let gamers = ['X', 'O'];

ご覧の通り、この配列では×がキー0、〇がキー1を持っています。i % 2 についても同じことが言えます - ×の場合は剰余が0、〇の場合は1になります。

つまり、この式をキーの代わりに使うことができます：

let gamers = ['X', 'O'];
let key = i % 2;

console.log(gamers[key]);

もっと短くすることもできます：

let gamers = ['X', 'O'];
console.log(gamers[i % 2]);

さらに短く：

console.log(['X', 'O'][i % 2]);

これで、start関数のコードを簡略化しましょう：

function start(cells) {
	let i = 0;
	
	for (let cell of cells) {
		cell.addEventListener('click', function() {
			this.textContent = ['X', 'O'][i % 2];
			i++;
		});
	}
}

私のコードを覗かずに、自分自身で（説明した修正を）実装してください。

現在、任意のセルに無限回クリックでき、例えば、×を〇に変更することができます。これを修正してください。