MENU
カテゴリー
アーカイブ
だいち
このブログの管理者
異業種で仕事をしながら、副業でWeb制作をしているアラサーリーマンです。
日々の勉強の記録や、お役立ち情報を発信していきます。
ホームページ制作などのお仕事に関するご依頼やご相談は、運営者情報のお問い合わせフォームかSNSのDMにて宜しくお願いします。

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

バージョン管理の図

どうも、ダイチです。

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

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

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

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

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

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

目次

ざっくりとした流れ

僕の場合はこんな感じで進めています、という流れです。

STEP
Gitをインストールし初期設定(前回記事にまとめています)
STEP
コードを格納するファイル上にローカルリポジトリを作成
STEP
GitHubサイトでリモートリポジトリを作成
STEP
VSCode とGitHub上のリモートリポジトリを接続
STEP
作業→ローカルリポジトリにコミット
STEP
リモートリポジトリにプッシュ
STEP
VSCodeでブランチを作成(仮にブランチAとする)
STEP
更新したらブランチAにコミット
STEP
ブランチAにプッシュ
STEP
ブランチAからマスターブランチにマージ
STEP
マスターブランチにプッシュ
STEP
マスターブランチからブランチ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
GitHub: Where the world builds software
GitHub: Where the world builds softwareGitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review...
GitHubサインイン

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

GitHubサインイン後

リポジトリ名を決めたら「Create repository」をクリックします。

リポジトリ作成画面

※この時中段のチェックがPublicだと一般公開できる状態、Privateだと公開しない状態からスタートします。(後で切り替えはできます)

作成したリポジトリ画面にうつります。

リポジトリ作成後画面

ここで表示されてるURLは後ほど使うのでどこかにコピーしておきましょう。(右のアイコンクリックでもコピーできます)

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

まとめ

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

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

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

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

こちらはネットで紹介されることも多い評価の高い書籍なのでご参考までに!

今回はGitを使うための拡張機能を紹介しましましたが、Web制作全般で使用できるオススメのVSCode拡張機能を紹介している記事もあるので、こちらもご覧ください!

あわせて読みたい
【2021年】Web制作で使えるVSCodeオススメ拡張機能16選!
【2021年】Web制作で使えるVSCodeオススメ拡張機能16選!どうも、ダイチです。今回はVSCodeで使っている拡張機能を紹介します。他記事では利用シーンや用途分けがされてないことも多く、とりあえず入れてみたもののどんな機能...

それでは今回はこのへんで!

バージョン管理の図

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる