PR
スポンサーリンク

Git初期設定からVSCodeとGitHubの連携まで徹底解説

スポンサーリンク
記事内に広告が含まれています。
スポンサーリンク
各記事にあるclipをクリックすることで、あとからもう一度読みたい記事をクリップ一覧ページにまとめておくことができます(メニューをご覧ください)。
【Gitの導入手順】インストール・初期設定・VSCodeとGitHub連携
この記事で解決できるお悩み
  • Gitをインストールしたいけど、難しそう
  • VSCode (Visual Studio Code)とGitの連携方法がわからない
  • VSCodeからGitHubにアップする方法を知りたい

プログラムコードはほとんどの場合が1日で完成はせず数日に渡って書くことが多く、完成後も追加機能やバグ(誤り)の修正など運用を続ける限り常に変更の必要性がある場合がほとんどです。

プログラムには必ずと言っていいほどバグがつきものですが、『いつどの時点で追加(変更)した機能か?』『いつどの時点までは正常だったか?』など、デバッグ(バグ修正)作業をする上でコードの編集履歴を管理することはかなり重要なことです。

この編集履歴の管理のことをバージョン管理と言ったりします。

このバージョン管理をおろそかにしているとデバッグに時間がかかり効率の悪い運用となります。

商用で提供しているシステムの場合はバグ修正まで顧客に迷惑を掛ける事になり、利用者離れと繋がるためビジネスとして死活問題です。

そんな問題を解決するために今や個人から大企業までシステム開発では必要不可欠となっている開発ツールがGitおよびGitHubです。

GitおよびGitHubは基本的には無料で利用することができます。

Gitの読み方 → ギット

GitHubの読み方 → ギットハブ

Gitとは?

Gitとは、プログラムコード(ソースコード)の編集履歴(バージョン)を管理するための開発ツールです。

いつどこを編集したのか』というバージョンを管理することで、いつでも過去のバージョンと比較したり戻したりすることができます。

GitHubとは?

GitHubとは、Gitで作成・管理しているバージョンをネット上(サーバー上)に集めて『いつ誰がどこを編集したのか』を管理するためのシステムです。

これにより企業等での複数人でのスムーズな開発を可能にします。

そのため、GitHubを利用するにはGitのインストールが必須となります。

Gitのインストール手順

下記公式ページよりダウンロードしてください。

ダウンロードしたら実行してインストールを開始します。

Information

利用規約のようなものです。

そのまま[Next]をクリックします。

利用規約のようなもの。そのまま[Next]をクリック
利用規約のようなもの。そのまま[Next]をクリック


Select Dstination Location

システムインストール先フォルダです。

そのまま[Next]をクリックします。

システムインストール先です。そのまま[Next]をクリック
システムインストール先です。そのまま[Next]をクリック


Select Components

インストールするコンポーネント(構成)です。

デスクトップに起動用ショートカットが必要なら[On the Desktop]にチェックします。

あとはそのままで[Next]をクリックします。

インストールするコンポーネント(構成)。確認して[Next]をクリック
インストールするコンポーネント(構成)。確認して[Next]をクリック


Select Start Menu Folder

スタートメニューの表示名です。

そのまま[Next]をクリックします。

※スタートメニューに表示したくない場合は左下の[Don’t create a Start Menu folder]をチェック。

スタートメニューに表示するか。そのまま[Next]をクリック
スタートメニューに表示するか。そのまま[Next]をクリック


Choosing the default editor used by Git

Gitを利用するデフォルトのプログラミングテキストエディタを選択します。

[Visual Studio Code (VSCode)]を利用している場合は画像のとおり選択します。

利用しているテキストエディタを選択したら[Next]をクリックします。

https://literacyboxes.com/visual-studio-code/

Gitを利用するテキストエディタ。確認して[Next]をクリック
Gitを利用するテキストエディタ。確認して[Next]をクリック


Adjusting the name of the initial branch in new repositories

新しいリポジトリの最初のブランチ名を指定します。

リポジトリとは、データの編集履歴を管理するための場所と認識しておけば大丈夫です。

PC上のGitで管理するリポジトリをローカルリポジトリ、サーバー上のGitHubで管理するリポジトリをリモートリポジトリと言います。

ブランチとは、リポジトリを分岐して記録するための仕組みです。例えば、【masterブランチ:本運用】【Aブランチ:機能追加】【Bブランチ:バグ修正】と分岐してリポジトリを管理することで、それぞれの作業が他の作業に影響せずに作業をすすめることができます。それぞれ作業が完了するとmasterブランチに合流(マージ)させて合体することで編集内容を本運用に反映させる、という感じです。

デフォルトの[Let Git decide]では『master』という名前になります。

特に指定がなければそのまま[Next]をクリックします。

新しいリポジトリの最初のブランチ名。そのまま[Next]をクリック
新しいリポジトリの最初のブランチ名。そのまま[Next]をクリック


Adjusting your PATH environment

環境変数の設定をします。

真ん中が選択されていることを確認してそのまま[Next]をクリックします。

環境変数の設定。そのまま[Next]をクリック
環境変数の設定。そのまま[Next]をクリック


Choosing HTTPS transport backend

HTTPSアクセスのルート証明書の選択です。

通常はそのまま[Next]をクリックで大丈夫です。

HTTPSアクセス方法。そのまま[Next]をクリック
HTTPSアクセス方法。そのまま[Next]をクリック


Configuring the line ending conversions

多人数で開発する場合、開発環境が【Windows】【MAC】【Unix】など様々なOSが混在する可能性が考えられ、テキスト内改行コードはOSにより異なるため、適宜変換するための設定です。

参考改行コード
  • 【Windows】→[CRLF]
  • 【MAC、Unix】→[LF]

サーバーで利用されるOS(UnixやLinux)の改行コードは基本的に[LF]なので、コミット時はLFに変換するようにして、チェックアウト時は利用しているPCに合わせた設定をします。

コミットとは、リポジトリに現時点でのコードに関する編集情報(コード内容、日時、編集者等)を保存することです。

チェックアウトとは、ブランチを切り替えたり特定コミットからデータを取り出すことです。つまり、編集履歴を管理しているリポジトリから新たにデータを取り出すことです。

Windowsなら一番上が選択されていればそのまま[Next]をクリックします。

Checkout Windows-style, commit Unix line endings
チェックアウト時は改行コードをCRLFに変換。コミット時にはLFに変換。
Windowsならこれを選択でOK。

Checkout as-is, commit Unix line endings
チェックアウト時は何もしない。コミット時はLFに変換。
MAC、Unix、Linuxならこれを選択でOK。

Checkout as-is, commit as-is
チェックアウト時もコミット時も何もしない。
万が一リモートリポジトリにCRLFのファイルが紛れていた場合に面倒なことになるので、基本的にこれは選択しないほうがいい。

リモートリポジトリからのチェックアウト、ローカルリポジトリからのコミット時の改行コードの変換。確認して[Next]をクリック
確認して[Next]をクリック

Configuring the terminal emulator to use with Git Bash

Gitで使用するコンソールを選択します。

そのまま[Next]をクリックします。

Gitで使用するコンソールを選択。そのまま[Next]をクリック
Gitで使用するコンソールを選択。そのまま[Next]をクリック

Choose the default behavior of ‘git pull’

多人数で開発する場合、ブランチを統合する際の履歴の残し方を設定します。

チームの運用方針に沿って選択します。

個人等変更が必要なければそのまま[Next]をクリックします。

履歴の残し方の違いを設定。そのまま[Next]をクリック
ブランチを統合する際の履歴の残し方を設定。そのまま[Next]をクリック


Choose a credential helper

接続補助の設定です。

そのまま[Next]をクリックします。

接続補助の設定です。そのまま[Next]をクリック
接続補助の設定。そのまま[Next]をクリック


Configring extra options

その他のオプションについて設定します。

そのまま[Next]をクリックします。

その他のオプションについて設定。そのまま[Next]をクリック
その他のオプションについて設定。そのまま[Next]をクリック


Configuring experimental options

疑似コンソールの実験的なサポート。

[Install]をクリックします。

疑似コンソールの実験的なサポート。そのまま[Next]をクリック
疑似コンソールの実験的なサポート。そのまま[Next]をクリック


Instaling

インストール画面。完了まで待機します。

インストール画面。完了まで待機
インストール画面。完了まで待機


Completing the Git Setup Wizard

デフォルトでViewReleaseNotesチェックがついてますが、チェックを外して[Finish]をクリックします。

ViewReleaseNotesチェックを外して[Finish]をクリック
ViewReleaseNotesチェックを外して[Finish]をクリック

これでインストールは完了です。

Gitの初期設定

Gitにユーザー名とメールアドレスを設定し、誰がコミットしたかという情報も記録できるようにします。

スタートメニューから『Git Bash』をクリックして起動します。

スタートメニューからGitBashを選択
スタートメニューからGitBashを選択

Git Bashが起動されたことを確認。

GitBash起動画面
GitBash起動画面

まずはユーザー名を設定します。

  1. ユーザー名』を適宜変更して入力してください。(“”の間に書きます)
  2. ローマ字のみで設定してください。
  3. 入力したらEnterで確定します。
git config --global user.name "ユーザー名"

次はメールアドレスを設定します。

  1. メールアドレス』を適宜変更して入力してください。(“”の間に書きます)
  2. 入力したらEnterで確定します。
git config --global user.email "メールアドレス"

実際に入力した例は以下の通りです。

GitBash初期設定後
GitBash初期設定後

以下コマンドで設定した内容を確認できます。

git config --list
Git初期設定確認
Git初期設定確認

これで初期設定は完了です。

[×]で閉じてください。

Visual Studio Code (VSCode)とGitを連携

Gitの初期設定が完了したら、次はVisual Studio Code (VSCode)とGitを連携してVisual Studio Code (VSCode)上でGitを操作できるようにします。

とは言っても、実はVisual Studio Code (VSCode)では初期状態で既にGitと連携ができるようになっているので、ちょこっと設定をする程度ですぐに使えるようになっています。

それだけGitは開発者にとって必須の開発ツールということが分かりますね。

Visual Studio Code (VSCode)について詳細はこちら↓

https://literacyboxes.com/visual-studio-code/

連携の手順はとっても簡単です。以下3ステップで完了します。

連携手順
  1. プロジェクトデータを保存する専用フォルダを作成する
  2. プロジェクト専用フォルダをVisual Studio Code (VSCode)で開く
  3. リポジトリを作成(初期化)する

事前準備

連携手順の前に、とりあえずやっておいたほうがいい設定から先に確認します。

データには通常見えているデータと通常見えないように隠されているデータがあります。

この隠しファイルが非表示になっている場合は、表示するように設定を変更しておきます。

また、ファイルデータにはデータの種類を表す[拡張子]というものがあります。

[●●●.pdf][●●●.exe][●●●.txt]などの[.]以降が拡張子というものですが、この拡張子が見えない設定になっている場合はこれも見えるようにしておきます。

Windows上でフォルダやファイルなどを操作する画面をエクスプローラーといいますが(デスクトップでフォルダをダブルクリックすると開かれるあの画面です)、エクスプローラー上から設定を変更できます。

隠しファイルが非表示で、拡張子も見えないようになっている状態が以下の画像です。

隠しファイルが非表示で、拡張子も見えないようになっている状態
隠しファイルが非表示で、拡張子も見えないようになっている状態
  1. エクスプローラーのメニューバーから[表示]をクリック
  2. [ファイル名拡張子]と[隠しファイル]をチェック
【ファイル名拡張子】と【隠しファイル】をチェック
【ファイル名拡張子】と【隠しファイル】をチェック

隠しファイルとファイル名の後ろに[.txt]という拡張子が表示されていれば設定完了です。

もし、上記のチェック項目が見つからない場合は、下記の方法から設定に進めます。

  1. エクスプローラーのメニューバーから[表示] > [オプション]をクリック
  2. タブで[表示]を選択
  3. [隠しファイル、隠しフォルダー、および隠しドライブを表示する]を選択
  4. [登録されている拡張子は表示しない]のチェックを外す
  5. [OK]をクリックして終了
エクスプローラーのメニューバーから[表示] > [オプション]をクリック
エクスプローラーのメニューバーから[表示] > [オプション]をクリック
[隠しファイル、隠しフォルダー、および隠しドライブを表示する]を選択
[隠しファイル、隠しフォルダー、および隠しドライブを表示する]を選択
[登録されている拡張子は表示しない]のチェックを外す
[登録されている拡張子は表示しない]のチェックを外す
隠しファイルとファイル名の後ろに[.txt]という拡張子が表示された
隠しファイルとファイル名の後ろに[.txt]という拡張子が表示された

隠しファイルとファイル名の後ろに[.txt]という拡張子が表示されていれば設定完了です。

これで事前準備は完了です。

連携設定

事前準備が完了したら連携設定を進めていきます。


プロジェクトデータを保存する専用フォルダを作成する

プログラムは一つのファイルだけで完結する場合もありますが、ほとんどの場合が複数のファイルにまたがります。

これらのファイルをPCのデスクトップ上などに適当にバラバラに置いておくのではなく、プロジェクトを管理する専用のフォルダを作りましょう。

専用フォルダと言っても、わかりやすくフォルダを分けて管理するだけです。笑

デスクトップ上でもどこでも自分が管理しやすい場所ならどこでも構いません。

開発するプロジェクトごとに専用のフォルダを用意する必要があるので、今後いくつかのシステム開発をしていくつもりで最初からわかりやすく分けておくといいです。

たとえばデスクトップ上に【Project】というフォルダを作り、【Project】フォルダの中にそれぞれ開発するシステムごとにフォルダを用意していきます。

以降の説明のため、今回はデスクトップ上に【Project】というフォルダを作り、【Project】フォルダの中に【TestProject】というプロジェクト専用フォルダを作って進めていきます。

【デスクトップ】>【Project】>【TestProject】


プロジェクト専用フォルダをVisual Studio Code (VSCode)で開く

Visual Studio Code (VSCode)を起動し、先に作っておいた【TestProject】フォルダをVisual Studio Code (VSCode)上で開きます。

  1. メニューバー[ファイル] > [フォルダーを開く]をクリック
  2. 作成しておいたプロジェクト専用フォルダを選択して[フォルダを選択]をクリック
Visual Studio Code (VSCode)上でフォルダを開く
Visual Studio Code (VSCode)上でフォルダを開く
作成しておいたプロジェクト専用フォルダを選択して[フォルダを選択]をクリック
作成しておいたプロジェクト専用フォルダを選択して[フォルダを選択]をクリック

フォルダを開くと以下のように新しい画面でVisual Studio Code (VSCode)が開かれます。

赤枠の部分が開かれているフォルダ名です。

先に開いていたVisual Studio Code (VSCode)は不要なので、閉じて大丈夫です。

Visual Studio Code (VSCode)でフォルダを開いた状態
Visual Studio Code (VSCode)でフォルダを開いた状態


リポジトリを作成(初期化)する

リポジトリとは、データの編集履歴を管理するための場所と認識しておけば大丈夫です。

用意したプロジェクト専用フォルダをGitの管理対象にすることで、編集履歴が管理されるようになります。

編集履歴の管理対象としてGitに認識させるための作業がリポジトリの作成(初期化)です。

先に作っておいた【TestProject】フォルダをVisual Studio Code (VSCode)上で開いている状態で以下の通り進めます。

  1. サイドメニュー[ソース管理]をクリック
  2. [リポジトリを初期化する]をクリック
サイドメニュー[ソース管理]をクリック
サイドメニュー[ソース管理]をクリック
[リポジトリを初期化する]をクリック
[リポジトリを初期化する]をクリック
リポジトリの初期化完了
リポジトリの初期化完了

これで【TestProject】フォルダはGitでの編集履歴の管理対象となりました。

実際にエクスプローラーで【TestProject】フォルダを確認してみると、新たに【.git】という隠しフォルダが作成されてます。

この【.git】フォルダの中のデータが編集履歴データとなるので、原則として【.git】フォルダは直接触らないようにしてください。

【.git】フォルダ
【.git】フォルダ
バージョン管理データ
【.git】フォルダ配下のバージョン管理データ

拡張機能

Visual Studio Code (VSCode)はデフォルトでGitと連携ができるようになってますが、機能面では限定的でお世辞にも使い勝手がいいとは言えません。

ですが、Visual Studio Code (VSCode)の拡張機能を利用すればVisual Studio Code (VSCode)上で超便利にGitを使えるようになるので、以下2つは入れておいてください。

Gitを便利に使えるようにするおすすめ拡張機能
  • GitLens・・・コミット単位での編集履歴を比較確認することができます。
  • Git Graph・・・編集履歴を視覚的に追いながら確認することができます。

拡張機能のインストール手順やおすすめ拡張機能は以下の記事をご覧ください。

https://literacyboxes.com/visual-studio-code/

コミットして動作確認

Gitに編集履歴を記録してもらうには、ソースコードファイルを保存すれば自動で記録されるわけではなく、[ステージ]をしたあとに[コミット]という作業が必要になります。

コミットとは、リポジトリに現時点でのコードに関する編集情報(コード内容、日時、編集者等)を保存することです。

ステージとは、『編集したデータの中でどのデータをコミットするか?』を選ぶ作業のことをいいます。
この[ステージ]の作業を実施することを[ステージング]といいます。

コミットまでの流れをまとめると以下の通りです。

コミットまでの流れ
  1. リポジトリ管理下のデータを作成 or 編集して保存
  2. コミットするデータを選択(ステージング)
  3. メッセージに編集履歴のメモを入力
  4. リポジトリに編集履歴を保存(コミット)
  5. 編集履歴の確認

コミットまでの流れが分かったところで、実際に動作確認をしてみましょう。


テストファイル[test1.txt][test2.txt]を作成する

Visual Studio Code (VSCode)にエクスプローラー機能が組み込まれているので、そこからテキストファイルを作成します。

  1. サイドメニュー[エクスプローラー]をクリック
  2. [新しいファイル]アイコンをクリック
  3. ファイル名を入力してEnterで確定
エクスプローラーを開く
エクスプローラーを開く
テストファイルを作成する
テストファイルを作成する
ファイル名を入力してファイルを作成する
ファイル名を入力してファイルを作成する

[test1.txt]を作成したら続けて[test2.txt]も作成してください。


サイドメニュー[ソース管理]をクリックしてステージング処理

作成が完了するとテストファイル[test1.txt]と[test2.txt]の2つのファイルを作成したことで、サイドメニューの[ソース管理]アイコンに 2 と表示されていると思います。

これはリポジトリ管理下でデータの編集があったことを表します。

次はステージング処理です。

  1. サイドメニューの[ソース管理]をクリック
  2. [+]アイコンをクリック
サイドメニュー[ソース管理]をクリックする
サイドメニュー[ソース管理]をクリックする
ステージング処理
ステージング処理


メッセージに編集履歴のメモを作成

ステージングが完了すると『変更』から『ステージされている変更』に移動したのが分かります。

次はコミット処理前に[メッセージ]を入力します。

[メッセージ]とは、今回コミットする編集履歴は『なぜ、なにを編集したのか?』という編集した内容を残しておくためのメモです。

プログラミングが進めば進むほどコミット回数も増えますが、このメッセージをしっかりと残しておくことで、デバッグ作業等で確認したい編集履歴をすぐに見つけることができ、作業効率が上がります。

逆に適当なメッセージを付けると編集履歴がちゃんと残っていたとしてもたくさんの編集履歴の中から確認したい編集履歴がなかなか見つからず、作業効率がガクンと下がります。

つまり、[メッセージ]は重要ということです。

メッセージのルール化

[メッセージ]の書き方には正解はなく、企業やチームなど組織的に開発を行う際はメッセージの記載方法が独自にルール化されている場合が基本です。

個人で開発を行う場合も独自ルールを決めておくことで[メッセージ]を残す際に時間をかけずにしっかりとしたわかりやすいメモを残すことができるようになります。

僕のメッセージルール(フォーマット)を書いておくので、参考にしてみてください。

僕の独自ルールというわけではなく、ひと目で分かりやすくて使いやすいということで一般的に広く浸透したデファクトスタンダード(事実上の標準)と言える形式です。

【フォーマット】

  • 1行目:[種別(prefix)] 概要
  • 2行目:空行
  • 3行目:詳細

【参考種別(prefix)】

  • add:機能(またはファイル)追加
  • update:バグではない細かな機能変更
  • upgrade:大幅な機能変更
  • revert:機能変更取り消し
  • remove:機能(またはファイル)削除
  • fix:バグ修正

【例】

[add] 新規ファイルを追加

テストファイル[test1.txt]と[test2.txt]を追加


冒頭にはprefix(接頭辞)という種別を記載しますが、上記の参考種別は僕が絞った数です。

集めるとたくさんの種類があるので、ご自身の運用に合わせて増やすか減らすか検討してみるといいかと思います。

prefix意味
fixバグ修正
hotfixクリティカルなバグ修正
add機能(またはファイル)追加
updateバグではない細かなコード変更
change仕様変更によるコード変更
clean
regactor
improve
コード整理
disableコード無効化
remove
delete
機能(またはファイル)削除
renameファイル名変更
moveファイル移動
upgrade大幅な機能変更
revert機能変更取り消し
docsドキュメント修正
perf性能が向上するコード変更(perf は perfomance の略)
testテストで機能の追加・修正
prefixの種類

[メッセージ]を入力
[メッセージ]を入力
メッセージを入力
メッセージを入力


コミット処理

メッセージを入力したら[]をクリックすることで、メッセージを含めた編集履歴データがコミット(リポジトリに保存)されます。

コミット処理
コミット処理
コミット処理完了後
コミット処理完了後

コミットが完了すると上の画像のとおり[ソース管理]にはなにもない状態になります。

さっそく編集履歴の確認をしてみたいところですが、最初は編集履歴が1つだけだと分かりづらいかもしれないので、もう一度編集作業をしてコミットしておきます。

次はファイルの作成(追加)ではなく、先程作成したテストファイル[test1.txt][test2.txt]の内容を変更します。

変更するファイルの内容はなんでもいいので、適当に入力してください。

  1. サイドメニュー[エクスプローラー]をクリック
  2. ファイルを選択して内容を変更して保存
  3. サイドメニュー[ソース管理]をクリック
  4. ステージングしてメッセージを入力してコミット
ファイルの内容を変更する
ファイルの内容を変更する


編集履歴の確認

コミットまで完了したらいよいよ編集履歴の確認です。

拡張機能[GitLens]の機能で比較確認します。

  1. サイドメニュー[ソース管理]をクリック
  2. 下部の[COMMITS]をクリック
  3. 各コミット単位をクリック
  4. 変更を確認したいファイルをクリック
COMMITSをクリック
COMMITSをクリック
コミット詳細確認
コミット詳細確認

各コミットごとに、コミット前に入力したメッセージの1行目がタイトルとして表示されているのでひと目でどんな編集だったかが分かりやすく表示されてますね。

コミットの上にマウスを乗せるとメッセージを含むコミット詳細が表示されます。

編集内容の比較確認
編集内容の比較確認

各コミットをクリックすると編集したファイル名が表示されます。

ファイルをクリックすると編集履歴が比較できるように表示されます。

今回は空の状態だったファイルに適当な文字を入力したので、このような表示となります。

拡張機能[Git Graph]は視覚的に編集履歴を確認する拡張機能ですが、編集内容を比較確認もできます。

[Git Graph]を利用した確認方法もとりあえず記載しておきます。

  1. サイドメニュー[ソース管理]をクリック
  2. [Git Graph]アイコンをクリック
  3. 確認したい変更履歴をクリック
  4. 変更を確認したいファイルをクリック
[Git Graph]アイコンをクリック
[Git Graph]アイコンをクリック
確認したい変更履歴をクリック
確認したい変更履歴をクリック

各コミットごとに、コミット前に入力したメッセージの1行目がタイトルとして表示されているのでひと目でどんな編集だったかが分かりやすく表示されてますね。

2回目に編集した内容変更をクリックしてみます。

変更を確認したいファイルをクリック
変更を確認したいファイルをクリック

左側には編集者、編集日時、メッセージ等の編集情報が、右側にはコミットしたファイル名が表示されます。

編集内容を確認したいファイル名をクリックします。

編集履歴が表示される
編集履歴が表示される

以上が編集履歴を確認するまでの一連の流れでした。

Visual Studio Code (VSCode)とGitHubを連携

一人で開発してる場合や作成したプログラムコード(ソースコード)をローカルPC上だけで管理する場合はGitだけ使えれば特に問題ありません。

ですが、企業等チームで開発を進める場合は各々のPC上で作成・編集したコードをコミットしてGitHubにアップする必要があります。

もしくは一人で開発する場合も複数のPCを利用している場合やコード・リポジトリのバックアップ先としても使えますね。

GitはPC上でリポジトリを管理するために利用するシステムですが、GitHubはサーバー上でリポジトリを管理するために利用するサービスなので公式サイトにアクセスしてアカウントを作成したあとに、Visual Studio Code (VSCode)と連携させます。

連携までの手順は以下のとおりです。

連携手順
  1. GitHubでアカウントを作成
  2. GitHub上にリポジトリを作成
  3. Visual Studio Code (VSCode)とGitHubを連携
  4. PC上のリポジトリとGitHub上のリポジトリを連携

GitHubアカウントを作成

以下リンクから公式サイトへアクセスしてアカウントを作成してください。

GitHub公式サイト
GitHub公式サイト
GitHubアカウント作成
GitHubアカウント作成

各項目を入力して最後に【Create account】をクリックしてください。

チェック項目[Email preferences]は『GitHubのアップデート情報やキャンペーンのお知らせを受け取りますか?』というチェック項目なので、ご自身の判断で必要ならチェックしてください。

GitHubレビュー画面
GitHubレビュー画面

GitHubレビュー画面が表示されますが、ご自身の状況に合わせて選択するか、よくわからない場合はそのまま下部の【Complete Setup】をクリックして先に進めても大丈夫です。

入力したメールアドレス宛に登録メールアドレスが誤ってないかの認証メールが届くので、メール内のリンク[Verify email address]をクリックするとGitHubのアカウントが有効化されてGitHubのページに遷移します。

GitHubで最初に何をしますか?という選択画面
GitHubで最初に何をしますか?という選択画面

GitHubで最初に何をしますか?という選択画面が表示されますが、ここでは何もせず下部の[Skip]をクリックして管理画面トップに移動します。

これでとりあえずGitHubを利用する準備ができましたが、先にセキュリティをより強固にするため、2段階認証を設定しておきましょう。

  1. 右上のアカウントアイコンをクリックして[Settings]をクリック
  2. [Account security]から[Enable two-factor authentikation]をクリック
  3. [アプリ]か[SMS]のいずれか選択(今回はアプリを選択して進める)
  4. バックアップコードを保存
  5. アプリでQRを読み取りワンタイムパスワードを入力して[Enable]をクリック
右上のアカウントアイコンをクリックして[Settings]をクリック
右上のアカウントアイコンをクリックして[Settings]をクリック
[Account security]から[Enable two-factor authentikation]をクリック
[Account security]から[Enable two-factor authentikation]をクリック
[アプリ]か[SMS]のいずれか選択します
[アプリ]か[SMS]のいずれか選択

2段階認証専用アプリを使用するか、SMSを使用するか選択します。

今回は2段階認証アプリを使用した設定手順で進めていきます。

twitterやInstagramなどの他サービスで2段階認証を設定する際にも利用できるので、まだスマホに2段階認証アプリをインストールしていない場合はこの機会にインストールしておきましょう。

Microsoft Authenticator

Microsoft Authenticator

利用手順1:右上[+]をクリック
Microsoft Authenticatorアプリ追加手順-1
利用手順2:3番めをクリック
Microsoft Authenticatorアプリ追加手順-2
利用手順3:QRコードを写す
Microsoft Authenticatorアプリ追加手順-3

[Download]or[Print]or[Copy]を選択してバックアップコードを保存したら[Next]をクリック
[Download]or[Print]or[Copy]を選択してバックアップコードを保存したら[Next]をクリック

万が一、スマホを紛失したり壊れたりして2段階認証アプリが使えなくなった場合でもログインできるようにするためのバックアップコードです。

万が一の時しか使用しませんが、いつ何が起こるかわからないので必ず無くさないようにしっかり保管してください。

[Download]or[Print]or[Copy]を選択すると[Next]がクリックできるようになります。

[Copy]を選択した場合はテキスト等に貼り付けて保存する必要があるので、[Download]を選択しておくといいと思います。

アプリでQRを読み取りワンタイムパスワードを入力して[Enable]をクリック
アプリでQRを読み取りワンタイムパスワードを入力して[Enable]をクリック

アプリでQRを読み取るとGitHub専用の2段階認証設定がアプリに保存されます。

アプリには6桁の数字の横に常にカウントダウンが表示されており、制限時間内だけ有効なワンタイムパスワード(一時的なパスワード)が表示されます。

このワンタイムパスワードを入力して、制限時間内に[Enable]をクリックすると2段階認証が有効化されます。

[Enable]が表示されていれば2段階認証の有効化が完了
[Enable]が表示されていれば2段階認証の有効化が完了

これで2段階認証の設定が完了です。

これでGitHubを安心して使えるようになりました。

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

PC上で作成したリポジトリには、Visual Studio Code (VSCode)でファイルを編集してコミットした編集履歴が保存されていますが、この編集履歴をGitHub上で共有するためには、GitHub上にもリポジトリを作成し、PC上のリポジトリを受け取る準備をする必要があります。

このGitHub上のリポジトリをリモートリポジトリ、PC上のリポジトリをローカルリポジトリといいます。

  1. GitHub管理画面トップの右上にある[+]から[New repository]をクリック
  2. 各項目を入力・選択して[Create repository]をクリック
右上にある[+]から[New repository]をクリック
右上にある[+]から[New repository]をクリック
各項目を入力・選択して[Create repository]をクリック
各項目を入力・選択して[Create repository]をクリック

以下3つは最低限入力・選択して[Create repository]をクリックしてください。

  • Repository name:作成するリポジトリの名前です。分かりやすいようにローカルリポジトリと同じ名前で作成します。
  • Description:リポジトリの簡単な説明です。
  • Public or Private:[Public]にするとネット上で公開されます。つまり、誰でもコードを見ることができるようになります。誰にも見られたくない場合は[Private]を選択してください。
あとでVisual Studio Code (VSCode)上で利用するコマンド
あとでVisual Studio Code (VSCode)上で利用するコマンド

赤枠内のコマンドはあとでローカルリポジトリとリモートリポジトリを連携する際に利用するので、この画面はまだ閉じずにそのままにしておいてください。

これでGitHub上での準備は完了です。

Visual Studio Code (VSCode)とGitHubを連携

Visual Studio Code (VSCode)とGitHubを連携する目的は、PC上のローカルリポジトリとGitHub上のリモートリポジトリを繋いでリポジトリを送信したり、逆に受信したりすることです。

ですが、PC上およびGitHub上には複数のリポジトリを作成することができるので、『今、Visual Studio Code (VSCode)で開いているフォルダを管理するリポジトリはGitHub上のどのリポジトリと繋ぐか?』を設定する必要があります。

つまり、Visual Studio Code (VSCode)とGitHubの間でリポジトリの送受信を行うには、以下2つの設定が必要になります。

  1. Visual Studio Code (VSCode)で開いているフォルダを管理するローカルリポジトリと送受信をしたいGitHub上のリモートリポジトリを指定
  2. Visual Studio Code (VSCode)とGitHubを連携

まずはローカルリポジトリと送受信をしたいGitHub上のリモートリポジトリを指定します。

  1. メニューバー[ターミナル] > [新しいターミナル]をクリック
  2. GitHub上でリモートリポジトリを作成後に表示された時に表示されたコマンドを貼り付けてEnterで確定
  3. Visual Studio Code (VSCode)を再起動
メニューバー[ターミナル] > [新しいターミナル]をクリック
メニューバー[ターミナル] > [新しいターミナル]をクリック
リモートリポジトリを作成後に表示されたコマンドを貼り付け
リモートリポジトリを作成後に表示されたコマンドを貼り付け

GitHub上でリモートリポジトリを作成後に表示されたコマンドを貼り付けていきます。

1行入力ごとにEnterで確定します。

git remote add origin https://github.com/GitHubのユーザー名/リモートリポジトリ名.git
git branch -M main
git push -u origin main

ローカルリポジトリをリモートリポジトリに送信することを『プッシュ(push)』と言います。

3行目のコマンドはローカルリポジトリをリモートリポジトリに送信するコマンドですが、初めて送信する場合はまだVisual Studio Code (VSCode)とGitHubを連携してないので、入力してEnterを押すと以下のGitHubにサインイン(ログイン)する画面がポップアップ表示されます。

画像のとおりに進めるとVisual Studio Code (VSCode)とGitHubの連携が完了します。

GitHubにサインインするためにブラウザを起動
GitHubにサインインするためにブラウザを起動
GitHubのリポジトリにVisual Studio Code (VSCode)からアクセスすることを許可
GitHubのリポジトリにVisual Studio Code (VSCode)からアクセスすることを許可

これで連携が完了ですが、以下の画像のようなエラーが発生しても連携は完了しているので問題ないです。

エラーが表示されてもOK
エラーが表示されてもOK

ローカルリポジトリをリモートリポジトリに送信するコマンドのあとに一旦連携処理(サインイン)をすることになったので、連携が完了するとそのままローカルリポジトリからリモートリポジトリに送信するコマンドが実行されています。

問題なく送信されたことを確認するために、リモートリポジトリを作成した際の画面を更新してみましょう。

ローカルリポジトリをリモートリポジトリで無事受信できていれば、以下のように画面が変わります。

あとでVisual Studio Code (VSCode)上で利用するコマンド
リモートリポジトリ作成時点の画面

更新すると↓

ローカルリポジトリをリモートリポジトリにアップしたあとの画面
ローカルリポジトリをリモートリポジトリにアップしたあとの画面

これでVisual Studio Code (VSCode)からGitHubにリポジトリをアップすることができるようになりましたが、現時点ではVisual Studio Code (VSCode)の基本機能でGitHubにアップすることができるようになっただけです。

拡張機能のGitLesnではまだGitHub上のリポートリポジトリとやり取りすることができないため、次はGitLesnとGitHubの連携をさせます。

下の画像の順番どおりに進むと、先程と同じようにブラウザが立ち上がり、GitLensがGitHub内のリポジトリを操作することを許可する画面に移動します。

ターミナルはゴミ箱アイコンをクリックすることで閉じることができます。もう使わないのでいつでもいいから閉じておいてください。

  1. サイドメニュー[ソース管理]をクリック
  2. 左下[アカウントアイコン] > [サインインしてGitLens~を使用します]をクリック
  3. ブラウザ上でGitHubとの連携処理を進めて完了
[ソース管理] > [左下アイコン] > [サインインして~使用します]をクリック
[ソース管理] > [左下アイコン] > [サインインして~使用します]をクリック

左下[アカウントアイコン] > [サインインしてGitLens~を使用します]をクリックすると、ブラウザが起動してGitHubとGitLensの連携画面に移動します。

[Continue]をクリック
[Continue]をクリック
[Authorize github]をクリック
[Authorize github]をクリック
パスワードを入力して[Confirm password]をクリック
パスワードを入力して[Confirm password]をクリック
[Visual Studio Code を開く]をクリック
[Visual Studio Code を開く]をクリック

[Visual Studio Code を開く]をクリックするとVisual Studio Code (VSCode)に戻り、Visual Studio Code (VSCode)からGitHubにログインをする設定に移ります。

もしも以下のような画像が表示されて失敗した場合は、Visual Studio Code (VSCode)からもう一度やり直してください。

[エラー]が表示されたら閉じてもう一度やり直し
[エラー]が表示されたら閉じてもう一度やり直し
拡張機能のGitHub認証を許可。[開く]をクリック
拡張機能のGitHub認証を許可。[開く]をクリック

GiLensがGitHubにアクセスすることを許可します。

[開く]をクリックすると完了です。

もしも以下のような画像が表示されて失敗した場合は、Visual Studio Code (VSCode)からもう一度やり直してください。

[エラー]が表示されたら閉じてもう一度やり直し
[エラー]が表示されたら閉じてもう一度やり直し

左下[アカウントアイコン]をクリックしてGitHubログイン状態を確認できます。

『GitHubのユーザー名(GitHub)』と表示されていれば無事にGitLensとGitHubの連携が完了です。

左下[アカウントアイコン]からGitHubログイン状態を確認
左下[アカウントアイコン]からGitHubログイン状態を確認


▼ コメント ▼