![見出し画像](https://assets.st-note.com/production/uploads/images/76166899/rectangle_large_type_2_d1e156233e2c5628aa8c540bf6f7bcfe.jpeg?width=1200)
TypeScript 入門の記録(12)GitHubでバージョン管理
前回は、Reactチュートリアル「インタラクティブなコンポーネントを作る」のボタンクリックイベント時のBoard が管理する state のコンポーネント受け渡しまで確認しました。今回は、少し脱線して、GitHubの設定をします。
インタラクティブなコンポーネントを作る(閑話休題)
GitHubの設定
ここまでやってきて、「GitHubを使おうと思っていたのに、まったく触っていなかった」ことに気が付きました。やりたいことは、Windows上のソースのバージョン管理ではなくて、WSL2(Ubuntu)上のソースバージョン管理です。検索すると、「Windows上のVSCodeでWSLのgitを使う(Y Lab Desk)」という、まさにこれ!という記事が見つかりました。こちらを参考に、設定をしていきます。WSLからGitHubに接続するための鍵生成とか既視感あるなぁ。。。って思ったんですけど、これらの手順は、AWSのEC2からGitHubを使用するための手順でやったんでした。
![](https://assets.st-note.com/img/1649577730571-vg6Pe6tORb.png)
参考にした手順では、生成した公開鍵をクリップボードにコピーするのにcrip.exeを使用していたのですが、そんなコマンドはないと言われました。調べてみると、Ubuntuの場合は、xsel --clipboard --input でクリップボードコピーができるとのこと。(コマンドラインからクリップボードへのコピー)
![](https://assets.st-note.com/img/1649579436692-0lt2ChAlDi.png)
この鍵を使ってSSH接続するために、ssh-add しようとすると、
![](https://assets.st-note.com/img/1649579715331-ohf2GexYpW.png?width=1200)
【ssh】公開鍵認証するときのパスフレーズを省略する方法の紹介(fumidzuki)によると、「ssh-agent」が起動していない可能性があるそうです。解説にある手順に従って、ssh-agentを起動することにします。
![](https://assets.st-note.com/img/1649580573101-KivN0D4teG.png?width=1200)
/tmpディレクトリ配下を見ると、ssh-で始まるディレクトリが見つかったので、これを使って環境変数を設定します。
![](https://assets.st-note.com/img/1649580876653-zFUKg4PyPa.png?width=1200)
接続確認をします。
![](https://assets.st-note.com/img/1649581089843-uJtAXxDENL.png?width=1200)
ローカルリポジトリからGitHubに登録
現在作成中のソースとは別に、空のディレクトリを追加して、gitの初期化をしました。そこに、現在作成中のディレクトリからファイル群をコピーして、node-modulesなどを管理対象外にしたいので、VSCodeのソース管理画面で.gitignore に追加して、リモートの追加メニューでGitHubにリモートリポジトリを追加しました。
![](https://assets.st-note.com/img/1649592972058-52OMKK0qFb.png?width=1200)
![](https://assets.st-note.com/img/1649593103679-3qcUttZmPR.png?width=1200)
VSCodeで楽ちん
あとは、ソースコードを変更したら、コミットしてリモートリポジトリにpushしていけばOKですね。今までWindows環境で gitでバージョン管理の経験はあったのですが、WSL2上のソースコードをどうやって管理すればいいか疑問でした。今回、GitHubで管理できるようになったので、疑問は解決しました。VSCodeを使うと、メニュー操作で楽ちんなのですが、コマンドでも操作できるように色々試したいと思います。今週は、三目並べのコード自体の進捗はありませんが、今後は、バージョン管理をしながら完成にむけて進めていく予定です。次こそ、クリックしたら、Boardが管理するマスの値を表示するようにしたいと思います。