VS CodeでGitHubを使えるようにするための設定

作業の流れ

1. Gitをパソコンにインストール
2. コマンドプロンプトを開きGitの初期設定
3. GitHubのサイトを開きアカウント作成
4. VS Codeを開きGitHubからローカルにデータを複製
5. 拡張機能「Git Graph」をVS Codeにインストール

Gitをパソコンにインストール

Gitの役割
ローカルでバージョン管理を行う

まずはGitのダウンロードページへ行き、最新版のインストーラーをデスクトップなどの分かりやすい場所に保存。執筆時点でのバージョンは2.35.1.2

インストール手順図解

インストール先とスタートメニューはそのままで。
画面が違う、各項目の説明が知りたいといった場合は以下のページを参照のこと。

コマンドプロンプトを開きGitの初期設定

スタートボタンを押して「cmd」と入力。コマンドプロンプトがヒットするはずなので「管理者として実行」をクリック。するとお待ちかねの黒い画面が現れる。

まずは以下のコマンドを入力。

git version

Gitがちゃんとインストールされていればバージョンが表示される。表示されなければもう一度インストール作業のやり直し。

次に以下のコマンドを入力。

git config --global user.name "unko"
git config --global user.email "unko@tun.tun"

unkoの部分を任意の文字に変更すること。さもないとあなたの名前はunkoになる。前後のダブルクォーテーションは消さないように。

設定が出来たらコマンドプロンプトは閉じてOK。

GitHubのサイトを開きアカウント作成

GitHubの役割
リモートサーバ。共同作業したい場合に必要

GitHubのアカウント登録ページへ行きさくっとアカウントを作成。フリープランでOK。

次に動作確認用として非公開のリモートリポジトリを一つ作成。

URLをコピーしておく。

VS Codeを開きGitHubからローカルへ複製

サイドバーのエクスプローラーから「リポジトリの複製」をクリック。先ほどコピーしておいたURLを貼り付けて勢いよくエンターキーを押す。

複製する場所を選ぶ。今回は分かりやすくデスクトップにしたが、本番環境ではいつもの作業場所を選ぶこと。XAMPPを使っている場合ならhtdocsといったように。

複製時にリモートリポジトリと同名のフォルダが自動で作成される。これをローカルリポジトリといい、この複製のことをクローンという。

ワークスペースに追加をクリック。

これでひとまずローカルとリモートのリポジトリが紐づけされた。ローカルリポジトリ内で何か変更があると「ソース管理」に該当ファイルが表示されるようになる。

ローカルとリモートリポジトリに変更履歴を記録するためにはステージング、コミット、プッシュという工程を踏む必要がある。この解説については以下のページが分かりやすい。

※もしサイドバーにソース管理が無いときは、サイドバー内にマウスポインターを置いた状態で右クリック。一覧からソース管理をクリックすると出てくる。

拡張機能「Git Graph」をVS Codeにインストール

サイドバーの拡張機能に「Git Graph」と入力してインストールをクリック。以上。

これは何かというと、変更履歴を分かりやすく表示してくれるためのツール。他にはGit Historyというものもあるが、お好きな方で。無論、両方はいらない。

おしまい。