どうも、ダイチです。
前回の記事でVSCodeからGitHubに連携するための概要説明〜初期設定までをご紹介しました。
初期設定がまだの方は是非前回の記事からご覧ください↓
今回は実際の連携方法をご紹介していきます。
なかなか取っ付き難いGitHubですが、VSCode なら簡単に連携できますのでご参考までに！
ただ、この記事ではGitHubに関する基礎的な解説などは省いていますのでご了承ください。
※MacOSをベースに説明を進めていますが、全体的な作業内容はWindowsも同様です。
ざっくりとした流れ
僕の場合はこんな感じで進めています、という流れです。
→以下⑦に戻り作業を繰り返していく
手順1：VSCodeでローカルリポジトリを作成
まずはファイルを格納する空のフォルダを作成します。
作成した空のフォルダを開きます。
フォルダを開いた状態でGitアイコンをクリックすると「リポジトリを初期化する」というボタンがあるのでクリックします。
するとVSCode画面がこのようにソース管理：Gitと表示されます。
これで編集するフォルダにローカルリポジトリが作成されました。
一見変化が無いのでわかりづらいですが、Gitは隠しファイルとして作成されています。
Macの場合は ⌘＋⇧＋. で隠しファイルを確認できます。
フォルダを開きショートカットで確認してみると、このようにきちんと作成されていることがわかります。
手順2：ローカルリポジトリにコミットしてみる
実際にファイルを作成し、リポジトリにコミットしていきます。テストでHTMLファイルを作成して保存した状態が下の図です。
上から3つ目のGitアイコンが①となっていますが、これはファイルを保存したことによって変更が生まれているファイルの数を指してます。
また、左下にmasterと表示されてますが、これは初期リポジトリ名が「master」という名前だからです。
Gitアイコンを押したらGit管理メニューが表示されます。矢印で指している＋マークをクリックすることでステージングできます。
ステージングしたら表示が変わります。
次にメッセージのところにコミット名を入力し、チェックアイコンをクリックすることでコミットできます。
これでローカルリポジトリにコミットできました。
ちなみに横三点印（なんて言うのかわからん）をクリックするとGitメニューが表示されます。
GitHubに連携してないこの段階でプッシュしても、当たり前ですがエラーとなります。
手順3：GitHubにてリモートリポジトリを作成
次にリモートリポジトリを作成します。※先に作成している方はこの手順は飛ばしていいです。
GitHubアカウントを既に作ってる方はサインイン、アカウント未作成の方はサインアップから作成しましょう。
サインインしたら「new」からリポジトリ作成画面にうつります。
リポジトリ名を決めたら「Create repository」をクリックします。
※この時中段のチェックがPublicだと一般公開できる状態、Privateだと公開しない状態からスタートします。（後で切り替えはできます）
作成したリポジトリ画面にうつります。
ここで表示されてるURLは後ほど使うのでどこかにコピーしておきましょう。（右のアイコンクリックでもコピーできます）
完了：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に切り替えて、作業を再開します。
まとめ
いかがでしたでしょうか？
説明は長くなってしまいましたが、慣れてしまえば簡単に進むようになります。
ただ、この記事で紹介した内容は本当に最低限の部分のみですので、複数人が携わるエンジニアの現場で使用する事を想定する方はもっと使い方を学んでおく必要はあります。
初学者の方も言語の勉強と合わせて是非学んでおきたいところですが、体系的に学ぶなら書籍を使うのも良いかと思います。
こちらはネットで紹介されることも多い評価の高い書籍なのでご参考までに！
今回はGitを使うための拡張機能を紹介しましましたが、Web制作全般で使用できるオススメのVSCode拡張機能を紹介している記事もあるので、こちらもご覧ください！
それでは今回はこのへんで！
コメント