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

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

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

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

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

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

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

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

Gitとは？

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

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

GitHubとは？

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

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

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

Gitのインストール手順

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

Git for Windows

We bring the awesome Git VCS to Windows

gitforwindows.org

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

Information

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

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

Select Dstination Location

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

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

Select Components

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

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

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

Select Start Menu Folder

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

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

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

Choosing the default editor used by Git

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

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

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

【VSCode】コピペでできる初期設定とおすすめ拡張機能 21個

設定項目が多いVSCodeの初期設定内容とプログラミングが効率良くなるおすすめの拡張機能21個ご紹介します。各解説ごとに画像を用意したのでパソコンに不慣れな初心者でも簡単に導入することができますよ！

literacyboxes.com

2021.10.25

Adjusting the name of the initial branch in new repositories

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

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

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

Adjusting your PATH environment

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

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

Choosing HTTPS transport backend

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

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

Configuring the line ending conversions

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

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

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

Configuring the terminal emulator to use with Git Bash

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

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

Choose the default behavior of ‘git pull’

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

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

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

Choose a credential helper

接続補助の設定です。

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

Configring extra options

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

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

Configuring experimental options

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

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

Instaling

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

Completing the Git Setup Wizard

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

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

Gitの初期設定

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

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

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

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

git config --global user.name "ユーザー名"

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

git config --global user.email "メールアドレス"

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

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

git config --list

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

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

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)について詳細はこちら↓

【VSCode】コピペでできる初期設定とおすすめ拡張機能 21個

設定項目が多いVSCodeの初期設定内容とプログラミングが効率良くなるおすすめの拡張機能21個ご紹介します。各解説ごとに画像を用意したのでパソコンに不慣れな初心者でも簡単に導入することができますよ！

literacyboxes.com

2021.10.25

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

事前準備

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

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

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

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

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

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

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

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

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

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

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

連携設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

拡張機能

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

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

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

【VSCode】コピペでできる初期設定とおすすめ拡張機能 21個

設定項目が多いVSCodeの初期設定内容とプログラミングが効率良くなるおすすめの拡張機能21個ご紹介します。各解説ごとに画像を用意したのでパソコンに不慣れな初心者でも簡単に導入することができますよ！

literacyboxes.com

2021.10.25

コミットして動作確認

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

コミット処理

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

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

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

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

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

編集履歴の確認

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Visual Studio Code (VSCode)とGitHubを連携

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

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

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

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

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

GitHubアカウントを作成

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

GitHub · Build and ship software on a single, collaborative platform

Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the la...

github.com

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

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

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

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

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

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

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

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

Microsoft Authenticator

Microsoft のスマートフォン認証アプリ | Microsoft Security

Microsoft のモバイル認証アプリで組織のアプリケーションに安全にログインすることで、外部からの侵害から個人とビジネスのデータを保護しましょう。

www.microsoft.com

利用手順1：右上[+]をクリック

利用手順2：3番めをクリック

利用手順3：QRコードを写す

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

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

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

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

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

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

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

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

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

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

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

これで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つの設定が必要になります。

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

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

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

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

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

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

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

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

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

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

更新すると↓

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

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

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

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

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

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

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

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

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

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

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

https://ppc.literacyboxes.com/programming-school/

ppc.literacyboxes.com

https://ppc.literacyboxes.com/child-programming-school/

ppc.literacyboxes.com