8/30〜|ライターのダイチが運営している個人メディア「ダイブログ」とPENGIN BLOGを統合しました

【VSCode×GitHub】かんたん連携手順解説 2/2

バージョン管理の図

お知らせ

当記事の元サイト「ダイブログ」は、8/30〜「PENGIN PLOG」と統合しました。
※元ドメイン(https://daib-log.com/〜)からはリダイレクト処理されます。

前回の記事でVSCodeからGitHubに連携するための概要説明〜初期設定までをご紹介しました。

初期設定がまだの方は是非前回の記事からご覧ください↓

バージョン管理の図 【VSCode×GitHub】かんたん連携手順解説 1/2

今回は実際の連携方法をご紹介していきます。

なかなか取っ付き難いGitHubですが、VSCode なら簡単に連携できますのでご参考までに!

ただ、この記事ではGitHubに関する基礎的な解説などは省いていますのでご了承ください。

※MacOSをベースに説明を進めていますが、全体的な作業内容はWindowsも同様です。

ざっくりとした流れ

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

Gitをインストールし初期設定(前回記事にまとめています)

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

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

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

ローカル作成1

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

ローカル作成2

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

ローカル作成3

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

ローカル作成4

これで編集するフォルダにローカルリポジトリが作成されました。

一見変化が無いのでわかりづらいですが、Gitは隠しファイルとして作成されています。

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

ローカル作成5

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

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

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

上から3つ目のGitアイコンが①となっていますが、これはファイルを保存したことによって変更が生まれているファイルの数を指してます。

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

ファイル作成後

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

ステージング画像

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

ステージング後

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

コミット画面

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

ちなみに横三点印(なんて言うのかわからん)をクリックするとGitメニューが表示されます。

GitHubに連携してないこの段階でプッシュしても、当たり前ですがエラーとなります。

プッシュエラー画面

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

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

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

GitHubサインイン

サインインしたら「new」からリポジトリ作成画面にうつります。

GitHubサインイン後

詳細はこちらの記事から確認してみてください!

【最新版】GitHubアカウントの作成方法を画像付きで解説!

完了: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に切り替えて、作業を再開します。

まとめ

いかがでしたでしょうか?

説明は長くなってしまいましたが、慣れてしまえば簡単に進むようになります。

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

初学者の方も言語の勉強と合わせて是非学んでおきたいところですが、体系的に学ぶなら書籍を使うのも良いかと思います。


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

PENGIN無料コーディング課題

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

オススメ書籍紹介

【初学者向け】書籍でWeb制作を学ぶ!オススメ書籍をジャンル別に紹介! Web制作のおすすめ本24選!(コーディング・Webデザイン)

オススメUdemy講座紹介

Udemyオススメ講座まとめ 【2021年8月】Udemy×Web制作!オススメ優良講座を紹介!

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA