Javascript入門。Tic-Tac-Toe(○×ゲーム）Webアプリを作成。 – その２ – クリックして○×を入力する

こちらはこの記事の続きです。

前回は、Tic-Tac-Toe(○×ゲーム）のWebアプリを作成するための準備を行いましたが、今回は実際にコードを書いて行きます。

Javascriptのコードを確認

説明のためにもさきにコードをあげておきます。前回の準備でHTML/CSSのコーディングは終わっているので、Javascriptのコードだけあげます。

// .table の中の要素がクリックされたらイベントが発火
document.querySelector('.table').addEventListener('click',function(e){
  // ○か×が入力されていたら、処理を行わす中断する。
  if(e.target.innerText !== '-'){return}

  // クリックした部分に.active要素を当てるために、
  // すでに.active要素の当たっている.pannelから
  // .active要素を取り除く
  const activatedPannel = document.querySelectorAll('.pannel.active')
  // エラー回避のため要素が取得できた場合のみ、実行する。
  if(activatedPannel[0]){activatedPannel[0].classList.remove("active")}

  // くりっくされたボタンをactiveにして、
  // 今のターンの印（ ○ or × )を入力する。（この段階では○だけ）
  e.target.classList.add("active")
  e.target.innerText = document.querySelector('.btn.active').text
})

色々と書かれていますが、詳細は追って説明していきます。この段階では、//で始まっている部分がコメント行（実際には実行されない行)であることがわかっていれば良いです。

Javascriptでは、1行を//で始めるとそのコードをコメント行として評価してくれるので、そこに実際のコードでは説明しきれない部分を文章で補足することができます。コメント行が複数にわたる時は

/*
コメント
*/

のように書くことができます。

各マスにクリックイベントを追加

javascriptでは、各DOM要素（h2タグ、pタグなどのHTML要素）にイベントを追加することでユーザーのアクションに応じて関数を実行することができます。

要素にイベントを追加する場合は、addEventListner関数を使用します。さらに、イベントを追加する前にはイベントを追加する要素が必要なので、querySelector関数でイベントを追加する要素を指定してイベントを追加します。

これをコードで書くと

document.querySelector('.table').addEventListener('click', fucntion(){
  /* 実行したい処理を書く */
})

のようになります。この例では、tableクラスにclickイベントを追加しているコードになります。

ここでは、ついでにquerySelector関数も紹介しましたが、良く使う関数なので覚えておくとよいでしょう。querySelectorはcssでの要素の指定方法でHTMLで描画されたDOMを取得することができます。

下にはセレクタでのDOMの指定の仕方を参考までに、表にしておきます。

セレクタでのDOMの指定の仕方

実装の順番を整理

addEventLisnterやquerySelectorの使い方がわかったら、次は実際に処理を記述していきます。

今回のTic-Tac-Toeでは、クリックしたと同時にマスの色を変えて、その時のターンの記号を書き込みます。一度に全部のコードを書いて行こうとすると大変なので、

「クリックしたと同時にマスの色を変えて、その時のターンの記号を書き込む」を分解して、

1. マスがクリックされたら処理を実行する。
2. マスの色を変える。
3. ターンの記号（○ or ×）をクリックされたマスに書き込む。

実際に自分でコードを書く際もこのように実現したい機能を分解して記述できるとスムーズに開発作業を進められます。開発作業時には、これくらいの単位に分割してひとつひとつ動作確認をしていくと手戻りが少なくてすみます。

クリックされたらマスの色を変える

1のマスがクリックされたら処理を実行するというのは、すでにできているので、マスの色を変える処理を記述してきます。

マスの色の変更の仕方ですが、今回はactiveクラスをクリックされた要素に割り当てることで色を変更します。

document.querySelector('.table').addEventListener('click',function(e){
  e.target.classList.add("active")
})

activeクラスにはすでに、style.cssでスタイルが定義されているので、クリックされたクラスにactiveクラスが付与されるとstyle.cssで定義されたスタイルがあたり色が変わります。

e.targetでクリックされたイベントにアクセスできるので、そのクリックされた要素に対して、e.target.classList.add("active")として、activeクラスを割り当てます。

ここまでで、一旦ブラウザをリロードしてみてみると、クリックされたマスの色が変更されるのがわかるはずです。

ただ、このままだとクリックされたマスはずっと色がついたままになってしまうので、クリックイベントが発火した時点で全てのマスの色を元に戻します。

// すでに.active要素の当たっている.pannelから
// .active要素を取り除く
const activatedPannel = document.querySelectorAll('.pannel.active')
// エラー回避のため要素が取得できた場合のみ、実行する。
if(activatedPannel[0]){activatedPannel[0].classList.remove("active")}

このコードをe.target.classList.add("active")の前に差し込んで、クリックされたマスの色が変わる前にすべてのマスからactiveクラスを取り除いてマスの色をもとに戻すようにします。

ここまでで、function.jsは以下のようになります。

document.querySelector('.table').addEventListener('click',function(e){
  // クリックした部分に.active要素を当てるために、
  // すでに.active要素の当たっている.pannelから
  // .active要素を取り除く
  const activatedPannel = document.querySelectorAll('.pannel.active')
  // エラー回避のため要素が取得できた場合のみ、実行する。
  if(activatedPannel[0]){activatedPannel[0].classList.remove("active")}

  // くりっくされたボタンをactiveにして、
  // 今のターンの印（ ○ or × )を入力する。
  e.target.classList.add("active")
})

マスに記号をを入力する。

次は、マスに記号を入れるようにします。マスのデフォルトの値は、"-"なので実際のアプリではここに○×が入力されます。

最終的には、○×がマスに入力されますが、この段階では一度○だけ入力できるようにします。

e.target.innerText = document.querySelector('.btn.active').text

クリックされたマスのテキストにはe.target.innerTextでアクセスできるので、そこに対して必要な値を入力すればマスの値を変化させることができます。

今回入力される値は、マスが並ぶテーブルの上の赤と青のボタンの値です。 最終的にはここのボタンが次に○or×のどちらが入力されるかを表示したいので、activeになっている方の値を取得してクリックされたマスに入力します。

そしてすでに、○か×が入力されているのにマスの値が書き換えられてしまうのもまずいので書き換える前にチェックします。

// ○か×が入力されていたら、処理を行わず中断する。
if(e.target.innerText !== '-'){return}

最終的なコードは、下記のようになります。

// .table の中の要素がクリックされたらイベントが発火
document.querySelector('.table').addEventListener('click',function(e){
  // ○か×が入力されていたら、処理を行わす中断する。
  if(e.target.innerText !== '-'){return}

  // クリックした部分に.active要素を当てるために、
  // すでに.active要素の当たっている.pannelから
  // .active要素を取り除く
  const activatedPannel = document.querySelectorAll('.pannel.active')
  // エラー回避のため要素が取得できた場合のみ、実行する。
  if(activatedPannel[0]){activatedPannel[0].classList.remove("active")}

  // くりっくされたボタンをactiveにして、
  // 今のターンの印（ ○ or × )を入力する。（この段階では○だけ）
  e.target.classList.add("active")
  e.target.innerText = document.querySelector('.btn.active').text
})

これで、クリックされたマスの色を変更して、○を入力することができるようになりました。

次回は、○と×のターンが交代されて、交互に○と×が入力されるような実装を行なっていきます。