相変わらず三目並べの追加課題やってる

うーん進みが遅い。
昨日結局人様の答えを見て悔し涙を飲んだ(泣いてはいない)初手の次
「マス目を全部ハードコードするのではなく、Board を 2 つのループを使ってレンダーするよう書き直す。」
これについては割とするっと実装できました。
やったね。

とはいえReactでfor文を回す方法は調べましたけれども。
当たり前にreturnの中で普通にfor文は動かないので

  1. 要素のリストをfor文で先に作ってreturnで展開する

  2. return文の中で即時関数として定義することで処理する

今回1使いました。
理由としては、そっちの方が見やすくて後で読みなおしやすそうだったから。

ほんで3つめ、「手順を昇順または降順でソートできるトグルボタンを追加する。」
これは考えというか発想までは合ってたんですが実装が間違ってたやつでした。
方針として、今が昇順か否かのstateを初期値trueで作成し、トグルボタンをクリックすることでstateの値を切り替え、それにより手番の順番と、ボタンの文字を入れ替えるというもの。

最初トグルボタンをコンポーネントとして読み込んでたんだけどもどうもonClickでうまく関数が渡せず、「オブジェクトが指定されています」と言われてしまう始末。(即時関数にしてみたりなんだりかんだりしてもダメ)
そこで今日も参考記事みに行きました。
シンプルにbutton要素を記載して直接onClick指定していました。
真似してみました。
動いた。
悔しい。あとでコンポーネントにしてしまったことが原因だったのか調べておこう。

次の「どちらかが勝利したときに、勝利につながった 3 つのマス目をハイライト表示する。引き分けになった場合は、引き分けになったという結果をメッセージに表示する。」については引き分けのみ普通に実装できて、勝利さんマスハイライトだけピンと来ていない感じ。
多分ハイライト用のstate作るんだと思うけど、まあいったん突っ込んでみようってところで頭とまっちゃった。

なんといっても今日も暑い。
ポータブル日陰(日傘)が欲しい(買ったらいい)
買いだしなどで外に出るともうそれだけで消耗してしまうので
本当に夏は過ごしづらくなってしまったなと思う今日この頃。
私ら小学生の時はまだ朝涼しかったもんな。
何なら半袖半ズボンとかで元気に走り回れたもんな(今だったら多分熱中症待ったなし)

トグルボタンのところで参考にした記事
https://qiita.com/Ryukuu0919/items/f22b4d6d13095b305cd3

この記事が気に入ったらサポートをしてみませんか?