【初心者向け】VSCodeとGithubの連携 for Windows ② ~フェッチとプル~

前回の記事から長い時間が経過してしまいました…(汗)。
こちらの記事は「【初心者向け】VSCodeとGithubの連携 for Windows ~連携操作からプッシュまで~」の続編となっております。

今回は、

  • コラボレーター(共同開発者)の設定
  • フェッチ
  • プル

を見ていきましょう。

環境

説明している環境はこちらです。

  • Windows11
  • Git
  • VSCode(日本語化済)
  • VSCodeの拡張機能:GitLensとGitGraph

コラボレーター(共同開発者)の設定

Githubのリポジトリは、共同編集が可能です。
自分だけが編集する場合はそのまま編集を続けても大丈夫ですが、web開発の業務に携わりたいなら共同編集もできた方がよいでしょう。

共同編集をする相手をコラボレーター(共同開発者)に設定が必要です。

コラボレーター(共同開発者)とは

個人が作成したリポジトリに招待されたユーザー
招待されると作成者でなくてもリポジトリにアクセスできます
公開・非公開、両方のリポジトリで招待が可能です。

GitHub Docs|コラボレーターを個人リポジトリに招待する

コラボレーターの設定

設定はGithubのページで行います。

1、リポジトリを開く

まずはGithubへログイン(https://github.co.jp/)してユーザーページを表示します。

左上のユーザーアイコンをクリック、「Your repositories」を探してクリック。そのあと、リポジトリ一覧から、コラボレーターを設定するリポジトリを探してクリックします。
※作成していなければ、前作を参考にリポジトリを作成しましょう

Githubの画面でYour repositoriesを開くまでの手順

2、settingsからCollaboratorsを開く

リポジトリの画面を開いたら、リポジトリ名の下にあるタブの「Settings」をクリックします。

Githubの画面で設定するリポジトリの画面からsettingsを開く

Point

GitHubを操作するときは、英語のwebページを翻訳しないほうが操作しやすいです
そのため、この記事では操作の説明はすべて英語の表示情報で説明しています

サイドバーのAccessセクション内の「Collaborators」をクリック
するとConfirm accessというページが表示されるので、自分のGitHubアカウントのパスワードを入力して「Confirm」をクリックしてください。

Githubの画面でリポジトリsettingsからCollaboratorsの設定画面を開く

続いて、Manage accessの「Add people」をクリック
表示されるポップアップにコラボレーターに登録したいユーザー名かメールアドレスを入力します。

Githubの画面でCollaboratorsの設定画面でAdd peopleのボタンをクリック、ユーザーの検索

ユーザーを見つけたら、選択して「Add 〇〇〇(ユーザー名) to this repository」をクリック
コラボレーター設定終了です。

Githubの画面でAdd peopleを選択して設定
Githubの画面でAdd peopleを設定した状態

設定したコラボレーターには、通知が届いています。
ユーザーアイコン横のInboxアイコンをクリックすると通知を確認できます。

Githubの画面でCollaboratorsに登録された側のInboxの画面

設定された側のユーザーも、VSCodeとGithubを連携していればスムーズに作業が可能です。

開発作業を始める前に

Webページやアプリなどを一人で開発している時は気にしなくても大丈夫なのですが…。
共同で複数名と開発を進めている時は注意しなければいけないことがあります。

それは、作業を始める前に開発環境が最新の状態であるかの確認です。

今回のように、リポジトリを複数のコラボレーターと一緒に編集している場合。自分がいない間にリモートリポジトリの開発が進んでいる可能性があります。

ちゃんとリモートリポジトリとローカルリポジトリの状態を合わせておかないと、同じ場所を違う内容で編集してしまったりする危険があります。

リモートリポジトリとローカルリポジトリの状態を合わせておかないと起こる問題

コラボレーターがいる場合は、開発に取りかかる前に、ローカルリポジトリを最新のリモートリポジトリの状態と合わせることからスタートします。

フェッチをしてプル

では、コラボレーターが自分が開発作業をしていない状態で変更をしていたと想定してリモートリポジトリとローカルリポジトリの状態を合わせていきましょう。

やることはこちら。

  • フェッチをしてリモートリポジトリの最新の履歴を確認
  • プルをしてリモートリポジトリの履歴を取得

前作でプル(pull)について簡単に説明しましたね。リモートリポジトリをローカルに取り込むことを指しています。

プルの前にフェッチ(fetch)を実施しておいた方が、変更された内容を確認してからローカルリポジトリに変更内容を取り込むことができるので安心です。
念のため用語の違いについても確認しましょう。

フェッチとプルの違い

用語説明
フェッチ(fetch)fetchを実行すると、リモートリポジトリの最新の履歴の取得だけを行うことができます。
取得したコミットは、名前の無いブランチとして取り込まれます。
このブランチはFETCH_HEADという名前でチェックアウトすることができます。
サル先生のGit入門より引用)
プル(pull)pullを実行するとリモートリポジトリの履歴を取得することができます。
サル先生のGit入門より引用)

「ブランチ」は次回以降で詳しく見ていくので聞き流してもらって…。

簡単に言うと、フェッチはローカルリポジトリに最新情報を取り込まないで変更履歴を確認できます。プルは実行すると変更履歴が取り込まれます。

フェッチとプルの違いの図解

変更された内容は、GitGraphでも確認できます。でも完全に取り込まれる前に変更内容が確認できた方が安心ですよね。

開発作業を始める前は、フェッチ→プルの手順で変更履歴を取り込みましょう。

フェッチとプルの手順

では、VSCodeでフェッチとプルをどのように行うか見てみましょう。
VSCodeの操作画面は日本語化したものになっています。拡張機能は、GitLensとGitGraphをインストールしました。

1、フェッチ

VSCodeの画面左バーのソースコントロール(ソース管理)のアイコンをクリックします。

VSCodeの画面で、ソース管理のアイコンをクリック

ソース管理という文字の右側、6つ並んだアイコンの「3つの点のアイコン」をクリックして、「フェッチ」の文字をクリックします。

VSCodeの画面で、ソース管理から三点アイコンをクリックしてフェッチを実行

そうするとフェッチが実行されて、ソース管理の項目には「変更の同期」ボタンが。ソース管理グラフには、新たにコラボレーターの変更履歴が追加されます。

mainと書かれている白丸の行が、今のローカルリポジトリの状態です。

コラボレーターの変更は、pタグの追加のようです。まだ取り込まれていません。(詳しい変更内容を見たい場合は、この「pタグ追加」の文字をクリックすると詳細が見れます。)

VSCodeの画面で、ソース管理からフェッチを実行した後の様子

この変更を取り込む場合は、プルを実行します。

Point

フェッチを実行すると「Visual Studio Codeに定期的に「git fetch」を実行するにしますか?」と表示されます。定期的に実行して問題なければ「はい」としましょう。

2、プル

プルの操作は、「変更の同期」をクリックすると実行できます。前作でも詳しく説明していましたが、この操作は、VSCode画面下部の青いラインの左側のアイコンで操作することができます。

ボタンの矢印が上を向いている場合はプッシュ。下を向いている場合はプル。矢印横の数字はそれぞれプッシュとプルの数を表しています。

VSCodeの画面で、ソース管理のプルの操作ボタンについて説明

変更の同期」をクリックすると、ポップアップが表示されますので「OK」をクリックします。

VSCodeの画面で、ソース管理のプルの操作で「変更の同期」ボタンを押した後の操作

問題なく実行されれば、ソース管理の項目の「変更の同期」ボタンが、半透明の「コミット」へ。ソース管理グラフは、白丸の位置が、先ほどフェッチで取り込んだ「pタグ追加」へ移動したことがわかります。

VSCodeの画面で、ソース管理のプルの操作で「変更の同期」ボタンを押した後の状態

これでプッシュとプルの操作は終了です。お疲れ様でした!

まとめ

コラボレーターの設定も完了して、複数名での開発が可能になりました。
次回はブランチについて解説していきます。

作者情報

気になった居酒屋には一人でも入店します。
初めてのお店でも常連と間違われる不思議な現象に見舞われることが…。
ビールをこよなく愛していますが、家では金麦派。