三目並べのチュートリアル（作業内容メモ）

React三目並べのチュートリアル。 とりあえず、最後までやったので、最低限の三目並べはプレイできる。

チュートリアルではJavaScriptだが併せて勉強したかったのでTypeScriptにした。 初期構築にはCreate React Appを使った。

npx create-react-app react-tic-tac-toe --template typescript

チュートリアル外の機能としては、引き分け判定の追加を行った。あとは昇順・降順ソートとかいまの番手を表示するとかは追加分。

本旨とは関係ない諸々のメモ

GitHub CLIインストール

ローカルで作成したいリポジトリをリモートにpushするのにGitHub CLIを使う。

// GitHub CLIがローカルに入ってなかったのでインストール
brew install gh

// インストールできたか確認
gh --version

// 認証。プロトコルはsshにする（httpsも利用可能）。
gh auth login -p ssh

// リモートリポジトリを作成。ローカルの現在のディレクトリを選択する。あとは諸々質問に答えていく。
gh repo create

VSCode内でのプレビュー

エディタ内ブラウザで画面を確認したい。Preview.jsが入ってた（たぶん昔入れた）のでとりあえず使う。

コード整形をファイル保存時に自動で行う

settings.jsonを最低限、以下のようにするのが良さげ。Prettierが入ってたのでこれを選択。

    "editor.formatOnSave": true,
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

GitHub Copilot ChatとColipot for Docsが学習の伴走者として便利

他の言語・フレームワークは触ったことある初学者だと、ReactやTypeScriptの学習にGitHub Copilot ChatやColipot for Docsが大変便利。業務関係ないから気にせず使えるし、学習の補助線を引いてくれて良い。