ぶっちゃけ最後の方で力尽きた…_(┐「ε:)_
noranuko13/tic-tac-toe-reactjs
リポジトリはこちら。
実際に動いてるものはこちら。
退勤後や週末にプラモにちまちまヤスリをかけるようにカスタムしていった結果がこれです。
まだまだ修正できるところはあるんでしょうが、これ以上時間をかけるのもどうかというのと、Router も入ってないのでどこまでいっても勉強用だなというのとで、ぼちぼちのところで切り上げた次第です。
雑感（雑な感想）
動作環境はいつもの GitHub Pages なので説明略。public 配下は基本的に手付かず。
src 配下で実験や試行錯誤含めて色々やってますが、多分邪道なのであんまり見ないでやってください。Container component と Presentational Component に分けてもいいかもですが、ペラサイトのUIパーツでそこまで分けるものもなく。useMemo も頑張って使ってみたけれど、「正直そこまで重い処理もそうそうなくないか…？」と感じながら書いてます。
useContext を使うまでもないでしょうし、書くだけ複雑になりそうですし。仕事での使用を前提とすると、やはりバックエンドも込みで、複数の一覧・詳細・編集ページ＋認証で常にヘッダー・サイドバーに情報がある規模で練習してみた方良さそうです。
ちゃっかり Tailwind CSS を使ってみましたが、どこかで聞いた『システム化されたインラインCSS』というのがしっくりきました。プロジェクトで使ってたら使えるくらいの知識は入れましたが、私には合わないような気がします。
@apply は賛否あるみたいで。今回はmoduleではなく単にインポートしてるんですが。生成後のCSSを見ると、自分が定義したCSSクラス名にマージされたCSSのプロパティが並んでいて、これらの後に tailwindcss がくる…これ順序が逆になってるんですね…。
ボードはチェスを参考にしてみました。オセロや将棋なんかの Wikipedia も見てみたんですが、ゲームによって呼び方もスコアシートの形式も違う上に、○☓ゲームにこれという定義がないのが厄介この上なく。
しかもチェスの場合の縦軸・横軸の名前がファイル・ランクなので、今回はいいんですがファイルダウンロードやプレイヤーランキングなんかが付いた日にはややこしい名前ですね。
また何か思い付いたら付け足すかもですが、今の状態のキャプチャを撮って終わりにしとこうと思います。
