ざまのエンジニア勉強日記#24

エンジニア採用をしている私が、
エンジニアと話ができるようになるために色々勉強する話。

先週1週間は社内のエンジニアさんのインタビューをしていた。うちのエンジニアさんはリファラルで入ってきた人がほとんどだった。そして最近Flutter(フラッター)というフレームワークがアツいらしい。要チェックだよ。

さて、前回の日記から〇と×を交互に付ける方法をずーっと考えていた。
分かりそうで分からないところをいったりきたりしていて答えに行きつけなかったので、結局エンジニアさんにヘルプ要請。笑

以前に調べたサイトとエンジニアさんからもらったヒントを元にとりあえず動きそうな可能性がありそうだと思って書いたのがこれ。

・・・(°x°)
とりあえず交互に〇と×が出るようにはなったけど、何だこの無理やり感はｗｗｗ
ソースコードなんて見ない人たちがやるならこれでもいいかもしれないけど、私がみてもひどい書き方だと思うから修正していこうね。笑

とりあえずこのconstの山がよろしくなさそうなので、どうにか配列にして1行にしたいところなんだけど私の経験上、

const scores = [90, 75, 80];

const animals = ['猫', '犬', 'オカピ'];

みたいな、数値とか文字列を配列として扱ったことしかないから、document.getElementByIdで取得している要素を配列にする方法が分からない。ふぬん。
そこで、カンニングしているサイトのソースを眺めていたら見つけたのがquerySelectorAllという命令文(でいいの？)、どうやらこれはすべての要素を配列にできる便利なものらしい。
しかし、現状idは全て別の値を付けていて、全ての要素＝1つのマスにしかならなさそうだから、マスに統一したclassをつけてみるか。

なんということでしょう！
匠(querySelectorAll)の手によって、9行もあったconstの山がわずか1行ですっきりとしているじゃないですか。querySelectorAll便利。覚えておこう。
ちなみに、今回は9個のtdに対してboxというclassをつけて、その要素を配列にしてくれている…んだと思っている。笑

    <table>
      <tr>
        <td class="box" id="box1"></td>
        <td class="box" id="box2"></td>
        <td class="box" id="box3"></td>
     </tr>

こんな感じね。classにboxってつけちゃったからidは変えた方がよさそうな気がするね。後で考えよう。

ついでに今、何回もクリック出来ちゃって〇×上書きができちゃうので、1度クリックしたらそれ以上クリックできないように

.td-notclickable {
 pointer-events: none;
}

というのを追加しておいたよ。

次にクリックイベントの山。

box1.addEventListener('click', () => {
 if(flag === true){
   box1.classList.add('round');
   box1.textContent = '〇';
   flag = false;
 }else{
   box1.classList.add('cross');
   box1.textContent = '×';
   flag = true;
 }
 
box1.classList.add('td-notclickable');

})

これ×9マス分を書いてるんだけど、これもなんかこうもっとシュッとできそうなきがするよね。さてどうするか。
別にマスに対して個別にクリックイベントを付ける必要はなさそうな気がするんだけど、うまくまとめられる方法があるのかしら。

さっきの定数をまとめた方法から考えたらbox1と個別に指定している部分を配列にしたboxesに変えたらいけるのかも？と思い書き換えてみた。

なんかエラー吐き出してる。not a function…なんかこいつは関数じゃないぜって言ってるの？ふーん、そっか。
この配列の要素のうちどれかがクリックされたとき、それに対してイベントを発動するよって感じで書かないといけないのかな。どうやって書けばいいんだろうな。

…繰り返し処理？for文？って思ったけど

for (let i = 0; i ‹ 9; ++i)  ...???

みたいな状態になって、よく分からなくなったので結局カンニングしてヒントを得る事にした。笑

結果的にforEachに落ち着いた。ありがとうドットインストール先生。
あとは勝敗の設定とかしなきゃいけないけど、今日はここまで。
編集したのはGitHubへpushしておきました。
https://a-zama.github.io/tic-tac-toe/

ずっともやもやしていた部分からやっと抜けられた気分。
少し勢いを取り戻した…かもしれないｗ

今日のポイント
・書き方はともあれ一旦動きそうな方法で書いてみるのもよい
・querySelectorAllは全ての要素を配列にしてくれる
・forEachは配列の要素を1つずつ取り出して処理ができる