TypeScript 入門の記録（１２）GitHubでバージョン管理

前回は、Reactチュートリアル「インタラクティブなコンポーネントを作る」のボタンクリックイベント時のBoard が管理する state のコンポーネント受け渡しまで確認しました。今回は、少し脱線して、GitHubの設定をします。

インタラクティブなコンポーネントを作る（閑話休題）

GitHubの設定

ここまでやってきて、「GitHubを使おうと思っていたのに、まったく触っていなかった」ことに気が付きました。やりたいことは、Windows上のソースのバージョン管理ではなくて、WSL2(Ubuntu)上のソースバージョン管理です。検索すると、「Windows上のVSCodeでWSLのgitを使う（Y Lab Desk）」という、まさにこれ！という記事が見つかりました。こちらを参考に、設定をしていきます。WSLからGitHubに接続するための鍵生成とか既視感あるなぁ。。。って思ったんですけど、これらの手順は、AWSのEC2からGitHubを使用するための手順でやったんでした。

clipboard に貼り付けできんかった。。。

参考にした手順では、生成した公開鍵をクリップボードにコピーするのにcrip.exeを使用していたのですが、そんなコマンドはないと言われました。調べてみると、Ubuntuの場合は、xsel --clipboard --input でクリップボードコピーができるとのこと。（コマンドラインからクリップボードへのコピー）

Ubuntuの場合は、xsel --clipboard --input

この鍵を使ってSSH接続するために、ssh-add しようとすると、

接続できないって。。。

【ssh】公開鍵認証するときのパスフレーズを省略する方法の紹介（fumidzuki）によると、「ssh-agent」が起動していない可能性があるそうです。解説にある手順に従って、ssh-agentを起動することにします。

ssh-agentの起動と設定の変更

/tmpディレクトリ配下を見ると、ssh-で始まるディレクトリが見つかったので、これを使って環境変数を設定します。

できた！！！

接続確認をします。

Githubに接続できました。

ローカルリポジトリからGitHubに登録

現在作成中のソースとは別に、空のディレクトリを追加して、gitの初期化をしました。そこに、現在作成中のディレクトリからファイル群をコピーして、node-modulesなどを管理対象外にしたいので、VSCodeのソース管理画面で.gitignore に追加して、リモートの追加メニューでGitHubにリモートリポジトリを追加しました。

リモートリポジトリの追加

GitHubにリポジトリが追加できました。

VSCodeで楽ちん

あとは、ソースコードを変更したら、コミットしてリモートリポジトリにpushしていけばOKですね。今までWindows環境で gitでバージョン管理の経験はあったのですが、WSL2上のソースコードをどうやって管理すればいいか疑問でした。今回、GitHubで管理できるようになったので、疑問は解決しました。VSCodeを使うと、メニュー操作で楽ちんなのですが、コマンドでも操作できるように色々試したいと思います。今週は、三目並べのコード自体の進捗はありませんが、今後は、バージョン管理をしながら完成にむけて進めていく予定です。次こそ、クリックしたら、Boardが管理するマスの値を表示するようにしたいと思います。