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

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

みなさんの最近のお気に入りソングってなんですかね。私は今更感が否めないけど、たまたま聴いたあいみょんのマリーゴールドにハマってしまいつい何度も聴き返してる。麦わら帽子がマリーゴールドに似ているかはよくわからないけど。

さて、前回ようやく〇と×を交互に出せるようになったので、勝敗のロジックとかを考えていくよ。
これはマスにidつけてるから、勝ち(負け)のパターンを取り出して、それ以外は引き分けにする感じかな。そんな単純な話じゃない？んー？

あれ、全部の配列から特定の配列を取り出すにはどうしたらいいんだろう？

うーん？

うーーーーーーん？？？？

いい方法が全然思いつかず現実逃避。笑

考えることを放棄して少し前にインストールしておいたUnityを起動。笑
GitHubといい、Unityといいエンジニアの人たちが使うツールは全部英語でよく分からないけど、なんか楽しいね。クリエイティブだね。

しかし、Unityでゲームを作るにはC#を理解する必要があるようなので、ちゃんと(？)使えるようになるのはまだまだ先の話になりそう。でもまあ、なんか適当にcubeたくさん作ったらマイクラみたいなのが作れそう。(マイクラやったことないけど←)

さて現実に向き合う
カンニングしているサイトのソース覗く。どうやら、filter()というメソッド(？)で既存の配列のなかの特定の条件にひっかかる要素だけを引っ張り出した配列を作ることができるらしい。
じゃあ、これで縦横斜めの計8ライン？の配列をfilter()で作ってあげればいいのではないか…？

Let's Try！

const win = boxes.filter(box => {
 if (box ===)
})

とりあえず、winっていう定数でもつけてみようかな。で元の配列をfilter()で取り出したいよーって言って、取り出す時の条件式が、〇〇 && 〇〇 && 〇〇 …みたいな、特定の3か所のマスが同じ文字列だった場合ってすればいいんじゃ…

ってあれ？笑

そう思ったものの、この特定の3マスってどうやって定義してあげればいいの…？

ええええー？？？わかんなーい！！笑

カンニング乱用。

え、あ、&&(かつ)じゃなくて||(もしくは)なのか。そうか、ここではラインの配列を作るだけだから、&&じゃないか。そして前回に続き、また出てきたreturn。使いこなせていない感が強い…というか全然使いこなせてない。笑

勝敗ロジック

// 勝敗判定
function isWinner(symbol) { 
 const result = lineArray.some(function (line) {
   const subResult = line.every(function (square) {
     if (symbol === 'maru') {
       return square.classList.contains('js-maru-checked');
     } else 
     if (symbol === 'batsu') {
       return square.classList.contains('js-batsu-checked');
     }
   });
   return subResult;
 });
 return result;
}

カンニング元のコードがこれ。
自分で考えても進めなかったから、もうこれを自分が作れた部分とうまく置き換えていくスタイルにシフトした。

ものすごく悩んだここの書き換え。

return square.classList.contains('js-maru-checked');

そもそもclassList.containsってなんやねん。と思って調べたら、指定のクラスが含まれているかどうか判定できるもの。という感じだった。要はここでライン上のマス全てに〇or×が入っているのかを判定しているらしい。

カンニング元は〇と×をCSSで書いてて、それをclassList.addで表示させている。対して私は単純にtextContentで〇と×文字列として入力している状態。せっかくここは自分で書けたところだから、これは崩したくなくて、上のコードをclassが含まれるかではなくて、文字列が含まれているかの判定ができるような方法に書き換えたかった。

”Javascript　文字列　含む”　で検索すると.indexOf() .test() .match()…色々でてくるものの、うまく書き換えられるものがなかった(本当はあったのかもしれないけど、正しい書き方にたどり着けなかった←)

数日間格闘した末に、自分の〇と×にそれぞれ別のクラスを付けていることを思い出す。

あれ、このクラスで判別すれば良くない…？

うん。いけたね。笑
ただ、超妥協した結果だから、全然スッキリしない。今度改めて考えなおしたい箇所。

その他、引き分け判定、replayボタンの実装諸々…

はい、お察しの通り、カンニング超乱用です。←

// ゲーム初期化
function initGame() {
 flag = false;
 counter = 9;
 winningLine = null;
 squaresArray.forEach(function (square) {
   square.classList.remove('js-maru-checked');
   square.classList.remove('js-batsu-checked');
   square.classList.remove('js-unclickable');
   square.classList.remove('js-highLight');
 });
 setMessage('batsu-turn');
 resetBtn.classList.add('js-hidden');
}

リセットするときのコードね。
ここもカンニング元と私の書いてる内容がちょっと違うから、初期化しなきゃいけないものなんだろなってちょっと悩んだ。

文字列だけ消すように書いたら、不可解な挙動をしていて何だろう？と思ったら〇と×それぞれに付けてたclassListをremoveしてなくて、文字は消えてるのにclassListだけマスに存在しているから不可解な挙動に見えただけだった。笑

そんなこんなで完成…？

https://a-zama.github.io/tic-tac-toe/

なんかもう、ほぼ丸写しに近いけど、一応使える程度にはなった。笑
ソースコード見られるとものすごくぐちゃぐちゃしているのがバレるから本当はあまり見られたくない。(色々試してコメントアウトしっぱなしのものもぐちゃっと書きっぱなし)

ロジック1つずつを自分で考えてコードを書いていくには、まだまだ理解力が足りないなあとものすごく感じた回だった。
(ここに行き着く間にも色々と葛藤した経緯があるけど、今回は割愛)

ものすごく消化不良のままだから、いったん仮完成版としておいておいて、
今度、カンニングしてきた部分に関しては1つずつどんな処理をしているのか見ていこうかなって思ってる。とりあえずお疲れ自分。笑

SpecialThanks(カンニング元)
https://www.hypertextcandy.com/tic-tac-toe-1

今日のポイント
・配列から特定の条件で取り出した要素だけで別の配列を作るのにはfilter()を使う
・考えて分からなかったらさっさとカンニングして進めた方が精神的に良い←
・Unityは使えるようになればものすごく面白そう

おまけ

ほぼ丸写しに行き着く前にさらに現実逃避していて作った、某ピンクの悪魔…のようなもの。
単純にsphereを5個置いてあるだけで、なにもスクリプトとか書いてないから1ミリも動かないけど。

正面からみて足を配置して、横から見て確認したら胴体と足がくっついてなかったのをみて、ラクガキ王国をやっているような気分になった。笑