2024.02.29
この記事を書いた人
だいち
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を扱うざっくりとした流れ
かなりザックリなので、自分で手を動かしながら確認していきましょう。
（準備1）Gitのインストール
まずはGitが使えるようにします。
Macであれば⌘＋スペースでSpotlightという検索窓が開きます。ここで「ターミナル」と検索してください。（Windowsだったらコマンドプロンプトを開いてください）
このような黒い画面が出てくるので、文末のカーソルが当たっているところに
git –versionと入力してエンター。
見づらいですが赤線を引いたようにバージョンが表記されていれば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を使っていきます。
まずはファイルを格納する空のフォルダを作成します。
作成した空のフォルダを開きます。
フォルダを開いた状態でGitアイコンをクリックすると「リポジトリを初期化する」というボタンがあるのでクリックします。
するとVSCode画面がこのようにソース管理：Gitと表示されます。
これで編集するフォルダにローカルリポジトリが作成されました。一見変化が無いのでわかりづらいですが、Gitは隠しファイルとして作成されています。
Macの場合は ⌘ ＋ ⇧ ＋ . (ドット)で隠しファイルを確認できます。
フォルダを開きショートカットで確認してみると、このようにきちんと作成されていることがわかります。
連携手順2：ローカルリポジトリにコミットしてみる
実際にファイルを作成し、リポジトリにコミットしていきます。テストでHTMLファイルを作成して保存した状態が下の図です。
上から3つ目のGitアイコンが①となっていますが、これはファイルを保存したことによって変更が生まれているファイルの数を指してます。（ここの反映には多少タイムラグがあります）
また、左下にmasterと表示されてますが、これは初期リポジトリ名が「master」という名前だからです。
Gitアイコンを押したらGit管理メニューが表示されます。矢印で指している＋マークをクリックすることでステージングできます。
ステージングしたら表示が変わります。
次にメッセージのところにコミット名を入力し、チェックアイコンをクリックすることでコミットできます。
これでローカルリポジトリにコミットできました。
ちなみに横三点印をクリックするとGitメニューが表示されます。現時点ではまだGitHubに連携してないのでプッシュしてもエラーとなります。
※ステージング（git add）できない場合
この箇所は上記で問題なく進めてる場合飛ばしてOKです！
ステージング（git add）しようとした際にキャプチャのようなエラーが出た場合、下記2点を確認してみましょう。
- フォルダ名が日本語になっている
- Gitのバージョンが低い（更新されてない）
フォルダ名が日本語になっている
VScodeの場合、フォルダが日本語名になっているとステージングできないバグ？があるようです。該当してる場合は一度アルファベット表記に変えてみてVScodeを再起動（再読み込み）して試してみてください。
Gitのバージョンが低い（更新されてない）
git --version OSのターミナルかVScodeからターミナルを開き上のコマンドをコピペしてみましょう。（上メニューターミナル＞新しいターミナル）
git version 2.33.1など情報がでてきます。最新はGitの公式サイトからも確認はできますが、この数字が2.2◯以下の場合古めかもしれません。
Windowsの場合
git update-git-for-windowsGit 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公式
サインインしたら「new」からリポジトリ作成画面にうつりリモートリポジトリを作成しておきましょう。
連携完了：VSCodeからGitHubに接続
メニューバーの「ターミナル」→「新しいターミナル」からターミナルを開きます。リモートリポジトリへの接続コマンドを入力します。
git remote add origin originの後ろにさきほどコピーしたGitHubのURLを貼り付けてエンターします。
git push -u origin master続けて上記コマンドを入力してエンターを押してください。
接続されるとこんな感じで文字がズラッとターミナルに表示されるのでこれで接続完了です。
ためしにプッシュしてみましょう。先ほどのエラーが出なくなっていれば成功です！
GitHubの画面を更新すると、リポジトリにプッシュした内容が反映されています。
本題の「VSCode からGitHubへの連携」はここまでとなります！次の章からはブランチの作成方法とマージ方法を補足で解説します！
（補足）VSCodeでGitHubの基礎操作
VSCodeからブランチ作成
左下「master」をクリックするとコマンドパレットが開きます。ここで「新しい分岐の作成元」を選択します。
するとブランチ名を入力できるようになるので任意の名前をつけます。
ブランチ元を選択します。ここでは現在の「master」を選択します。
これで「master」 からブランチを切って、「ブランチA」が作成されました。
試しにファイル内を更新すると、Gitアイコンも更新されていることが確認できます。
先程同様にステージングしてコミットするとブランチAに履歴が更新されていきます。
プッシュするとリモートリポジトリにブランチAの更新分が反映されます。
VSCodeからマージ
今ブランチAで作業をしている状態なので、今度はmasterにチェクアウト（切り替え）し直します。
※この時上図のようにステージング対象がある場合切り替えできないので、コミットまでしてしまうか、下図のように変更を破棄しておいてください。
masterブランチに切り替わったら、エディタ内の状態もmasterブランチとしてプッシュした時の状態に戻っていることがわかります。
次にリポジトリの流れが可視化され、簡単にマージもできるようになる「Git History」という拡張機能をインストールします。
拡張機能の検索窓にGit Historyと入力し、これをインストールします。（図は既にインストールされてる状態です）
インストールすると上にアイコンが表示されます。（表示されてない方は一度VSCode の再起動を）
アイコンをクリックすると履歴が表示されます。数が少ないのでわかりづらいですが、本流(master)でコミットしたあと、分岐したブランチAがプッシュされているという状態です。
赤がリモートリポジトリ、緑がローカルリポジトリです。
図の文字が小さいですが右端の「More」をクリックするとコマンドパレットが表示されるので「Marge this commit into current branch」を選択します。
そのあとorgin/ブランチAと選択しYesと選択するとマージができます。
右上のようにローカルのmasterのみマージされている状態になった場合は、右下の「1↑」をクリックするとプッシュができます。
円状の矢印がクルクル回ってしばらくしたらプッシュ完了です。右上ブランチ名をクリックして「All branches」を選択すると最新状況がわかります。
こんな感じでリモート（赤）の方もマージされているのがわかります。(変化が無い場合はVSCode 再起動を)
あとは再度左下のmasterになっているところをブランチAに切り替えて、作業を再開します。
まとめ
ちょっと説明は長くなってしまいましたが、慣れてしまえば簡単に進むようになるので安心してください！
ただ、この記事で紹介した内容は本当に最低限の部分のみですので、複数人が携わるエンジニアの現場で使用する事を想定する方はもっと使い方を学んでおく必要はあります。
また、同じGUIツールでもGitHub用に開発された公式のツールもあります。初めての方も扱えるようにこちらの記事で解説しているので、合わせてご覧ください！
これを機にGitについて体系的に学びなおしたい方は書籍を使うのもオススメです。オススメ書籍をご紹介するので参考にしてみてください！
また、当記事を読まれている方の中にはWeb制作初学者の方もいるかと思います。デザインやコーディングの基礎知識を学びたい方向けの記事を用意しているので是非見ていってください！
PENGIN無料コーディング課題
オススメ書籍紹介
オススメUdemy講座紹介
