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

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

この前、初めて外部のエンジニアの方に会ってきた。まだ社内でのヒアリングもしっかりできていない状況で会うのは時期尚早だなっていう認識はもちろんあったけど、興味があった。

結果的にはかなり課題が残った感じがあるけど、社外の人と話すのに必要なことも少しだけわかったし、エンジニアとしての意見ももらえたので、私にとって収穫は多かった。会ってくれた方は退屈だったかもしれない。そこは本当に申し訳ない。(めちゃくちゃいい人だった)

さて、今回から挑戦してくのは・・・〇×ゲーム！！
社内のエンジニアさんからお題として頂いたので挑戦してみるよ。

・・・とは言ったものの、0から作るのは初めてだから何から始めたらいいのかよくわからない。とりあえず、必要そうなものを書き出してみようか。

〇×ゲームに必要なもの
・9個(3×3)のマス目
・クリックしたら〇か×が表示される
・〇の次は×、その次は〇という順序
・マスは1度しかクリックできない制限
・勝敗、引き分け、続行のパターンの判断

今思いつくのはこの辺。ほかにもなんか必要かもしれないけど、とりあえずできるところからやっていってみる戦法。(そんなんで大丈夫なのか)

9個(3×3)のマス目
うーん、とりあえずdivを9個作ってみる？

分かりやすいようにグレーの背景色を付けてみたけど、floatさせたら全部横に並んじゃったな。そりゃそうだよなｗそれにdiv同士がくっついている部分のborderが太くなっちゃうね。ここも修正したい。

先にborderを重ねる方法を調べよう。

border-collapseプロパティを使う。
collapseで重ねる。separateで分ける。

直訳でborder崩壊。どういうこっちゃ。なんで崩壊。

なるほど。確かに崩壊している。…というのは冗談だけど、どうやらこのプロパティ、tableの要素にしか適応されないらしいよ。不便～。
じゃあどうしよ。別にdivじゃなくてtableでいいか。その方が3×3も並べやすそうな気がしてきた。

あ、ほら、いい感じじゃない？でもなんか隙間空いてるね。直そう。

border-collapseをtdの方につけてたから、隙間が空いたままだった模様。tableに付けたらうまくいきましたー。3×3のマス目はいい感じにできたね。

クリックしたら〇か×が表示される
これはJavascriptでクリックイベントを付ければいいんじゃないか…という推測。とりあえず書いてみよう。

クリックすると〇が出てくるようになった。けど、左上にしか出ない。マス1つずつid振らないとかな。

ふんふん。こういう感じにはなるのね。9マスのうちどれかをクリックしたら〇or×が付くようにしないといけないから…うーん。
ちょっと長くなってきたから今回はここまで。

これGitHubPagesにアップしておこうっと。
https://a-zama.github.io/tic-tac-toe/

今日のポイント
・border-collapseプロパティはtable要素にしか適応されない
・少しずつJavascriptの書き方に慣れてきた…気がする
・英語で〇×ゲームは”TIC-TAC-TOE”っていうらしいよ