(2022/07/27)デザインツールFigmaが日本語化対応!解説記事一覧はこちら!→→

【VSCode×GitHub】使い方から連携手順まで完全解説!

バージョン管理の図

 

Gitを学ぶには時間と労力がかかりますし、最適な連携方法(できれば簡単なやり方)を模索して当記事に辿り着いた方もいるかもしれません。

普段使ってるコードエディタ・VSCodeで簡単にGitHubが使えたら便利だと思いませんか??

そんな方に向けて、この記事ではVSCodeからGitHubに連携する手順についてまとめてみました!

初期設定から具体的な連携操作方法まで解説します!

当記事ではMacをベースに解説してますが、Windowsも画面はほぼ同じですので、ショートカットキーなど置き換えてご覧ください。

VSCodeから連携するメリット

まずVSCodeでGit連携するメリットを紹介しておきます。

メリット1:GUI操作が可能

Gitのサービスを使用する場合、ターミナルやコマンドプロンプトからコマンドライン(CUI)で操作するか、専用のアプリを使用しマウスなどで操作(GUI)する方法があります。

公式のヘルプはCUI操作で解説されています。これはGitのコマンド全てを実行できることが理由です。

ただ、あの黒い画面に抵抗感がある方もいると思いますし、まずはGitHubを使ってみたい!という方はGUIでもOKです。

GUI操作ができるアプリはいくつかありますが、VSCcodeはその内の一つということです。

他にも公式が公開している無料GUIツールでGitHub Desktopというものがありますが、導入から使い方までこちらの記事でまとめています。

エディタプラグインを増やせない方は導入検討してみるのはありです!

メリット2:専用アプリケーションとの切り替えが不要

他アプリを使用する場合、そもそもそのアプリを立ち上げて切り替えながら別操作が必要ですし、それだけでデスクトップ上の操作スペースを占有します。

その点VSCodeを使用する場合、コードを記述しながらそのままの画面上でGit操作を行えることから操作性はかなり良くなります。

用語の意味

必要最低限ですが触れておきます。

VSCode
Microsoftが開発しているコードを記述するエディタ。多様な拡張機能がありカスタマイズ性も高いことから使用者が多い非常に使いやすい。
>> 参考記事:VScodeインストール方法や日本語化の流れをバッチリ解説!
Git
ソースコードなどの変更履歴を記録・追跡するためのバージョン管理システム。
ローカル環境(自分のパソコンなど)に全ての変更履歴が作成することができるため、コードの変更管理などをするために用いられる。[ Git | 公式サイト ]
GitHub
Gitの仕組みを利用してウェブ上にソースコードなどの変更履歴を記録、また公開することができるサービスの名称。※同様のサービスでBitbucketやBacklogなどがあります。[ GitHub | 公式サイト]
GitHubは現在英語対応しかしていませんが、必要な操作の名称を理解しておけば問題ありません。
>> 参考記事:GitHubって日本語対応してるの?英語が不安な初学者向けに用語解説!
リポジトリ
履歴管理を行い諸々のデータが格納される場所。Gitの根元となる部分。
リモートリポジトリ
サーバ(ウェブ上)にあるリポジトリのこと。ここにコードが格納されることでウェブ上に公開することができる。
ローカルリポジトリ
自分のPC上にあるリポジトリのこと。
>> 参考記事:【徹底解説】GitHubリポジトリとは?作成や削除・運用方法まとめ!
マスターブランチ
リポジトリを作成した時に最初に作成される本流。本番用の原本的なもの。
ブランチ
変更履歴を枝分かれさせたもので、マスターブランチのコピーのようなもの。
クローン
リモートリポジトリを自分のPC上にコピーすること。このコピーは、ローカル上でローカルリポジトリとなる。
>> 参考記事:【GitHub】クローンについて解説!うまくできない時の対処法まで紹介
ステージング
変更したデータを仮保存すること。(この時リポジトリには保存されない)
コミット
インデックスされたデータをローカルリポジトリに反映させること。
プッシュ
ローカルリポジトリの内容をリモートリポジトリに反映させること。
マージ
ブランチを合流させ、変更内容を合体させること。一般的にはブランチに履歴を残していき、本番にうつしたい時にマスターブランチにマージする、という運用をとる。

GitHubを扱うざっくりとした流れ

かなりザックリなので、自分で手を動かしながら確認していきましょう。

Gitをインストールし初期設定(上の流れまで)

コードを格納するファイル上にローカルリポジトリを作成
GitHubサイトでリモートリポジトリを作成
VSCode とGitHub上のリモートリポジトリを接続
作業→ローカルリポジトリにコミット→プッシュ
リモートリポジトリにプッシュ
VSCodeでブランチを作成(仮にブランチAとする)
更新したらブランチAにコミット→プッシュ
ブランチAからマスターブランチにマージ
マスターブランチにプッシュ

(準備1)Gitのインストール

まずはGitが使えるようにします。

Macであれば⌘+スペースでSpotlightという検索窓が開きます。ここで「ターミナル」と検索してください。(Windowsだったらコマンドプロンプトを開いてください)

スポットライト画像

このような黒い画面が出てくるので、文末のカーソルが当たっているところに

ターミナル画像
git –version

と入力してエンター。

Gitバージョン記載画像

見づらいですが赤線を引いたようにバージョンが表記されていればGitが使える状態です。

まだの方はこちらからインストールを。

Gitダウンロード画像

OSを選べますが、赤丸箇所からでよいです。インストール完了したら上記のようにターミナルから確認してみましょう。

(準備2)Gitの初期設定

再びターミナルを開き、下記項目を入力してください。

 git config --global user.name 'username'
 git config --global user.email 'username@example.com'
 git config --global core.editor 'code --wait'
 git config --global merge.tool 'code --wait "$MERGED"'
 git config --global push.default simple
  • ユーザ名
  • メールアドレス
  • エディタをVSCodeに指定
  • マージツールをVSCodeに指定
  • pushのデフォルト方式を指定(追跡ブランチに対してpush)

上から二つのユーザ名、メールアドレスはご自身のものに変更してください。

「core.editor」はデフォルトエディタの設定で「code」というのが「VSCode」を指しています。

「merge.tool」はGit の履歴差分の比較を確認したり、マージをするツールを指定します。「code」でVSCodeを指定しています。(履歴差分の比較は拡張機能で見れるけど)

連携手順1:VSCodeでローカルリポジトリを作成

ここからVScodeでGitを使っていきます。

まずはファイルを格納する空のフォルダを作成します。

ローカル作成1

作成した空のフォルダを開きます。

ローカル作成2

フォルダを開いた状態でGitアイコンをクリックすると「リポジトリを初期化する」というボタンがあるのでクリックします。

ローカル作成3

するとVSCode画面がこのようにソース管理:Gitと表示されます。

ローカル作成4

これで編集するフォルダにローカルリポジトリが作成されました。一見変化が無いのでわかりづらいですが、Gitは隠しファイルとして作成されています。

Macの場合は ⌘ + ⇧ + . (ドット)で隠しファイルを確認できます。

ローカル作成5

フォルダを開きショートカットで確認してみると、このようにきちんと作成されていることがわかります。

連携手順2:ローカルリポジトリにコミットしてみる

実際にファイルを作成し、リポジトリにコミットしていきます。テストでHTMLファイルを作成して保存した状態が下の図です。

上から3つ目のGitアイコンが①となっていますが、これはファイルを保存したことによって変更が生まれているファイルの数を指してます。(ここの反映には多少タイムラグがあります

また、左下にmasterと表示されてますが、これは初期リポジトリ名が「master」という名前だからです。

ファイル作成後

Gitアイコンを押したらGit管理メニューが表示されます。矢印で指している+マークをクリックすることでステージングできます。

ステージング画像

ステージングしたら表示が変わります。

ステージング後

次にメッセージのところにコミット名を入力し、チェックアイコンをクリックすることでコミットできます。

コミット画面

これでローカルリポジトリにコミットできました。

ちなみに横三点印をクリックするとGitメニューが表示されます。現時点ではまだGitHubに連携してないのでプッシュしてもエラーとなります。

プッシュエラー画面

※ステージング(git add)できない場合

この箇所は上記で問題なく進めてる場合飛ばしてOKです!

ステージングできないエラー画面

ステージング(git add)しようとした際にキャプチャのようなエラーが出た場合、下記2点を確認してみましょう。

  1. フォルダ名が日本語になっている
  2. Gitのバージョンが低い(更新されてない)

フォルダ名が日本語になっている

VScodeの場合、フォルダが日本語名になっているとステージングできないバグ?があるようです。該当してる場合は一度アルファベット表記に変えてみてVScodeを再起動(再読み込み)して試してみてください。

Gitのバージョンが低い(更新されてない)

git --version 

OSのターミナルかVScodeからターミナルを開き上のコマンドをコピペしてみましょう。(上メニューターミナル新しいターミナル

git version 2.33.1など情報がでてきます。最新はGitの公式サイトからも確認はできますが、この数字が2.2◯以下の場合古めかもしれません。

Windowsの場合

git update-git-for-windows

Git for Windowsの場合、上記コマンド入力してみてください。

Macの場合

Macの場合はHomebrewというパッケージマネージャーをインストールして、最新版にアップグレードできます。

サイト内「インストール」箇所をそのままターミナルにコピペしましょう。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

passwordが求められたらPCに設定してる管理者パスワード(システム環境設定時に入力するパス)を入力し、何度かエンター押すとインストールが開始されます。

brew install git

その後上記をターミナルにコピペしてください。brew(Homebrew)のインストールが実行されます。

少し時間がかかるかもしれませんがしばらく待つと終了するので、上のコマンドでバージョン確認しておきましょう。

連携手順3:GitHubにてリモートリポジトリを作成

次にリモートリポジトリを作成します。※先に作成している方はこの手順は飛ばしていいです。

GitHubアカウントを既に作ってる方はサインイン、アカウント未作成の方はサインアップから作成しましょう。

GitHubサインイン
GitHubサインイン後

サインインしたら「new」からリポジトリ作成画面にうつりリモートリポジトリを作成しておきましょう。

連携完了:VSCodeからGitHubに接続

メニューバーの「ターミナル」→「新しいターミナル」からターミナルを開きます。リモートリポジトリへの接続コマンドを入力します。

git remote add origin 

originの後ろにさきほどコピーしたGitHubのURLを貼り付けてエンターします。

リモートadd画面
git push -u origin master

続けて上記コマンドを入力してエンターを押してください。

リモート接続ターミナル画面

接続されるとこんな感じで文字がズラッとターミナルに表示されるのでこれで接続完了です。

プッシュ画面

ためしにプッシュしてみましょう。先ほどのエラーが出なくなっていれば成功です!

プッシュ後リポジトリ画面

GitHubの画面を更新すると、リポジトリにプッシュした内容が反映されています。

本題の「VSCode からGitHubへの連携」はここまでとなります!次の章からはブランチの作成方法とマージ方法を補足で解説します!

(補足)VSCodeでGitHubの基礎操作

VSCodeからブランチ作成

左下「master」をクリックするとコマンドパレットが開きます。ここで「新しい分岐の作成元」を選択します。

コマンドパレット展開

するとブランチ名を入力できるようになるので任意の名前をつけます。

ブランチ名入力

ブランチ元を選択します。ここでは現在の「master」を選択します。

ブランチ元選択

これで「master」 からブランチを切って、「ブランチA」が作成されました。

試しにファイル内を更新すると、Gitアイコンも更新されていることが確認できます。

ブランチ作成後の更新

先程同様にステージングしてコミットするとブランチAに履歴が更新されていきます。

ブランチコミット画面

プッシュするとリモートリポジトリにブランチAの更新分が反映されます。

ブランチGitHub反映

VSCodeからマージ

今ブランチAで作業をしている状態なので、今度はmasterにチェクアウト(切り替え)し直します。

ブランチAからmasterに切り替え

※この時上図のようにステージング対象がある場合切り替えできないので、コミットまでしてしまうか、下図のように変更を破棄しておいてください。

Git変更破棄

masterブランチに切り替わったら、エディタ内の状態もmasterブランチとしてプッシュした時の状態に戻っていることがわかります。

masterに切り替え

次にリポジトリの流れが可視化され、簡単にマージもできるようになる「Git History」という拡張機能をインストールします。

拡張機能の検索窓にGit Historyと入力し、これをインストールします。(図は既にインストールされてる状態です)

GitHistoryインストール

インストールすると上にアイコンが表示されます。(表示されてない方は一度VSCode の再起動を)

アイコン表示

アイコンをクリックすると履歴が表示されます。数が少ないのでわかりづらいですが、本流(master)でコミットしたあと、分岐したブランチAがプッシュされているという状態です。

赤がリモートリポジトリ、緑がローカルリポジトリです。

GitHistory画面

図の文字が小さいですが右端の「More」をクリックするとコマンドパレットが表示されるので「Marge this commit into current branch」を選択します。

マージ画面

そのあとorgin/ブランチAと選択しYesと選択するとマージができます。

右上のようにローカルのmasterのみマージされている状態になった場合は、右下の「1↑」をクリックするとプッシュができます。

マージ後のプッシュ

円状の矢印がクルクル回ってしばらくしたらプッシュ完了です。右上ブランチ名をクリックして「All branches」を選択すると最新状況がわかります。

プッシュ反映確認

こんな感じでリモート(赤)の方もマージされているのがわかります。(変化が無い場合はVSCode 再起動を)

マージ完了の図

あとは再度左下のmasterになっているところをブランチAに切り替えて、作業を再開します。

まとめ

ちょっと説明は長くなってしまいましたが、慣れてしまえば簡単に進むようになるので安心してください!

ただ、この記事で紹介した内容は本当に最低限の部分のみですので、複数人が携わるエンジニアの現場で使用する事を想定する方はもっと使い方を学んでおく必要はあります。

また、同じGUIツールでもGitHub用に開発された公式のツールもあります。初めての方も扱えるようにこちらの記事で解説しているので、合わせてご覧ください!

これを機にGitについて体系的に学びなおしたい方は書籍を使うのもオススメです。オススメ書籍をご紹介するので参考にしてみてください!


また、当記事を読まれている方の中にはWeb制作初学者の方もいるかと思います。デザインやコーディングの基礎知識を学びたい方向けの記事を用意しているので是非見ていってください!

PENGIN無料コーディング課題

【デザインカンプ無料配布】未経験からのコーディング学習ステップ

オススメ書籍紹介

Web制作のおすすめ本30選!(コーディング・Webデザイン)

オススメUdemy講座紹介

【2022年7月】Udemy×Web制作!オススメ優良講座15選!