〇と×の交互配置の解析

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

javascriptfunction 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++; // カウンターを増加
    });
  }
}

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

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

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

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

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

console.log(gamers[key]);

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

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

さらに短く：

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

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

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