VS CodeでGitHubを使う方法【2022年度版】

2022年4月更新

VS CodeでGitHubの使う方法をわかりやすく簡潔にまとめてみました。

Gitのインストール
Gitの初期設定
GitHubのアカウント作成
ローカルリボジトリの作成
ローカルリポジトリにコミット
リモートリポジトリの作成
リモートリポジトリにプッシュ
ブランチの作成
ブランチにプッシュ
ブランチにマージ

Gitのインストール

Gitをダウンロードしてインストールします。

１．公式サイトよりインストールファイルをダウンロード。
２．ダウンロードしたファイルを実行し、すべて「Next」を押して「Install」ボタンでインストールします。
３．アプリで「Git Bash」を起動し、コマンド「git --version」を入力してEnterキーを押すとバージョンが表示されることを確認します。

git --version

結果

git version 2.35.1.windows.1

Gitの初期設定

「Git Bash」でユーザー名とメールアドレスを登録してGitの初期設定をします。

１．コマンド「git config --global user.name 任意のユーザー名」を入力してEnterキーを押します。

git config --global user.name 任意のユーザー名

２．コマンド「git config --global user.email 任意のメールアドレス」を入力してEnterキーを押します。

git config --global user.email 任意のメールアドレス

３．コマンド「git config --list」を入力してEnterキーを押すとユーザー名とメールアドレスが表示されることを確認します。

git config --list

結果

diff.astextplain.textconv=astextplain
filter.lfs.clean=git-lfs clean -- %f

    中略

user.name=任意のユーザー名
user.email=任意のメールアドレス

GitHubのアカウント作成

GitHubにアカウント作成します。
※Gitで作成したユーザー名とメールアドレスは、GitHubと同じにする必要はありません。

１．GitHubのサイトで「Email address」に任意のメールアドレスを入力し、「Sign up for GitHub」をクリックします。
２．「continue」をクリック。
３．任意のパスワードを入力し、「continue」をクリック。
４．ユーザー名を入力し、「continue」をクリック。
※すでに使用されているユーザー名は「Username hashimoto is not available. 」と表示が出て使用出来ないので「continue」がクリック出来る状態のユーザー名にします。
５．「製品のアップデートやお知らせをメールで受け取りますか？」と聞いてくるので y か n を入力して、「continue」をクリック。
６．アカウントの確認なので「検証する」をして質問に回答し、「Create account」をクリック。
７．登録したメールアドレスにコードが届くのでコピペします。
８．質問に適宜解答して最後に「Continue for free」をクリックするとアカウントが作成されます。

ローカルリボジトリの作成

「リポジトリ」はGitHubでファイルやディレクトリを保存する場所で、「ローカルリポジトリ」はパソコン内で作成したリポジトリです。
VS Codeでローカルリボジトリを作成します。

１．ファイルを保存する任意のフォルダを作成（既存のファイルでもＯＫ）し、「フォルダーを開く」をクリックします。

「ファイル」からも開けます。
２．「ソース管理」で、「リポジトリを初期化する」をクリックします。

画面が変わります。

エクスプローラーで確認すると隠しファイルで作成された「.git」というフォルダが作成されます。

これでローカルリボジトリが作成されました。

ローカルリポジトリにコミット

ファイルの追加・変更をローカルリポジトリにコミット（反映）します。

１．「ソース管理」で、ファイル（ここではgithub.html）の＋マークをクリックするとステージ（コミットするファイルを登録）出来ます。

ファイル名の右側の文字が「U」から「A」に変わります。
ファイルの内容を変更すると「M」に変わります。

U：Untracked - gitが未追跡
A：added - 新規作成
M：Modified - 変更あり
２．コメントを入力し、「コミット」をクリックします。

リモートリポジトリの作成

「リポジトリ」はGitHubでファイルやディレクトリを保存する場所で、「リモートリポジトリ」はネットワーク上にあるリポジトリです。

１．GitHubのトップ画面で「Create Repository」をクリックします。

すでにリボジトリを作成している場合は「New」をクリックします。
２．任意の名前を「Repository name」に入力し、Public（公開）かPrivate（非公開）を選択して「Create Repository」をクリックします。

画面が変わりますのでコピーし、ペーストして控えておきます。

リモートリポジトリにプッシュ

ローカルリポジトリの変更をGitHub上のリモートリポジトリに反映するためにプッシュ（push）します。

１．VS Codeでターミナルを開きます。
２．GitHubでリモートリポジトリの作成で表示された「git remote add origin https://github.com/ユーザ/test.git」をコピーし、ターミナルに貼り付けてEnterキーを押すと、ローカルリポジトリとリモートリポジトリを紐づけ（初回のみ）られます。

git remote add origin https://github.com/ユーザ/test.git

３．「git push -u origin master」を入力してEnterキーを押し、ローカルリポジトリの変更をGitHub上のリモートリポジトリに反映するためにプッシュ（push）します。

git push -u origin master

４．Sing in を求められた場合は「Sign in with your browser」をクリック。
５．メールアドレス、パスワードを確認（入力）して「Sign in」をクリック。
６．「Authorize・・・」をクリック。

ターミナルに結果が表示されます。

GitHubのページ（ブラウザを更新）でリモートリポジトリに反映されていることが確認出来ます。

ブランチの作成

「ブランチ」は複数のバージョン管理を行うための履歴の流れを分岐して記録していくものです。
他の開発者が分岐したブランチで自分の作業を行い、メインのブランチに自分の変更を反映させることが出来ます。

１．VS Codeの画面左下の「master」をクリックし、「新しい分岐の作成」をクリックします。
２．任意のブランチ名を入力してEnterキーを押します。

「master」から「branch1」に表示が変更されます。
任意のコメントを入力し、「ブランチの発行」をクリックします。

GitHubのページ（ブラウザを更新）で「master」をクリックすると「branch1」が追加されていることが確認出来ます。

ブランチにプッシュ

ブランチ内で開発し、プッシュ（push）してリモートリポジトリに反映させます。

１．「branch1」でファイルを編集し、ローカルリポジトリにコミットして「同期の変更」をクリックします。

GitHubのページ（ブラウザを更新）でプッシュされたことが確認出来ます。

ブランチにマージ

ブランチ内での開発が完了したら、メインのブランチ（master）にマージ（merge）して取り込み、統合します。

１．VS Codeの画面左下の「branch1」をクリックし、「master」をクリックします。
２．「･･･」をクリックし、「ブランチ」から「ブランチをマージ」を選択します。
３．マージ元のブランチ「branch1」を選択します。
４．「同期の変更」をクリックしまするとリモートリポジトリに反映されます。