VisualStudioとGitHubを連携~Pull Requestまでの一連の流れと操作方法を解説します。
Contents
はじめに
この記事は、Visual Studio 2019をGitHubに連携させて使う方法を解説しています。
GitHubのアカウントが必要になるので、事前にアカウント作成しておいてください。
VisualStudioとGithubを連携する
GitHub連携プラグインをインストール
VisualStudio2019でツール → ツールと機能を取得 をクリック
![](https://techback.info/wp-content/uploads/2020/10/img_5f9b07cfd7973-300x144.png)
個別のコンポーネントタブを選択、Visual Studio向けGitHub拡張にチェックして変更ボタンをクリック
検索窓でgitと入力すれば一発で出てくると思います。
![](https://techback.info/wp-content/uploads/2020/10/img_5f9b077734fff-1024x446.png)
GitHubに接続する
チームエクスプローラーの接続の管理→Connect to GitHubをクリック
![](https://techback.info/wp-content/uploads/2020/10/img_5f9b08522b109-300x139.png)
ブラウザーでサインインしますをクリック
![](https://techback.info/wp-content/uploads/2020/10/img_5f9b08d3a6a47-275x300.png)
Authorize githubをクリック
![](https://techback.info/wp-content/uploads/2020/10/github.png)
GitHubアカウントのパスワードを入力してConfirm passwordをクリック
![](https://techback.info/wp-content/uploads/2020/10/img_5f9b094690ec2-276x300.png)
開発の流れ
- まずは、開発するプロジェクトをローカルに作成します。
ローカルで一から作成しているのであれば、いいですが、
GitHubからプロジェクトを持ってくる際は、Cloneしてプロジェクトを持ってきてください。 - 実際修正を加える前にBranchを作成して、そっちに修正を入れましょう。
- 修正したら、Commitしましょう。こまめにやっておくのがよいですかね。
- 修正が完了したら、Pushしましょう。GitHubにUpするってことです。
- Pull Requestして、Masterに取り込んでもらいましょう。
- あとは、本番にDeployするなりしてください。
Clone ~ Push まで
Clone
プロジェクトがすでにローカルにある場合は、Clone不要です。
プロジェクトが無い場合で、GitHubから丸々持ってくる場合は、このCloneを実行してください。
VisualStudioではClone=複製と表記されています。
GitHubにアクセスし、CloneするリポジトリのURLをコピーします。
![](https://techback.info/wp-content/uploads/2020/10/github2-1024x184.png)
VisualStudio2019側で、チームエクスプローラー→接続→GitHub→複製をクリック
![](https://techback.info/wp-content/uploads/2020/10/img_5f9b09d2d0b5a-300x136.png)
GitHubでコピーしたリポジトリURLを貼り付けて複製をクリック
![](https://techback.info/wp-content/uploads/2020/10/github3-270x300.png)
Branchを作成
Masterに直修正するのではなく、Branchを作ってそっちに修正を入れておきましょう。Branchで修正が一通り終わったら、Masterに反映させます。
右下のmaster→新しいブランチをクリック
![](https://techback.info/wp-content/uploads/2020/10/img_5f9b05680671f-300x215.png)
ブランチ名を入力して、ブランチの作成をクリック
![](https://techback.info/wp-content/uploads/2020/10/img_5f9b0c49c9047-300x211.png)
右下の表示が先ほど入力したブランチ名になります。
![](https://techback.info/wp-content/uploads/2020/10/img_5f9b0c6b9c2aa.png)
Commit
修正が終わったら、一旦Commitしましょう。
VisualStudio2019ではCommit=変更と表記されます。
チームエクスプローラー→変更
![](https://techback.info/wp-content/uploads/2020/10/img_5f9b0b05a5a1f-289x300.png)
変更した内容を記入して、すべてをコミットをクリック
![](https://techback.info/wp-content/uploads/2020/10/img_5f9b0d871ccc1-300x178.png)
以下のようなメッセージが表示されれば成功です。
![](https://techback.info/wp-content/uploads/2020/10/img_5f9b0dacd8c0c-300x218.png)
Push
先ほど変更した内容をGitHubに反映させます。
チームエクスプローラー→同期をクリック
![](https://techback.info/wp-content/uploads/2020/10/img_5f9b0b6525cb9-300x219.png)
プッシュをクリック
![](https://techback.info/wp-content/uploads/2020/10/img_5f9b0b8a09907-300x270.png)
以下のようなメッセージが表示されれば成功です。
![](https://techback.info/wp-content/uploads/2020/10/img_5f9b0ddd853f8-300x141.png)
Pull Request
変更した内容をmasterに反映してもらいます。
変更内容のレビューを依頼→問題なければ変更内容をMasterに反映、が一連の流れです。
VisualStudio側とGitHub側でそれぞれ作業が発生します。
VisualStudio2019側の作業
ソースをPushしたので、レビューしてMasterに反映(Pull)してください~ってことですね。
チームエクスプローラー→Pull Requestをクリック
![](https://techback.info/wp-content/uploads/2020/10/img_5f9b0e9aa99de-300x209.png)
新規作成をクリック
![](https://techback.info/wp-content/uploads/2020/10/img_5f9b0eda95780-300x147.png)
メッセージを適当に記入して、pull requestの作成をクリック
![](https://techback.info/wp-content/uploads/2020/10/img_5f9b0f1cb7cf1-300x293.png)
これで、VisualStudio側の作業は完了です。
GitHub側の作業
Pull Requestを受けた人が、ソースの内容をチェックして、問題なければMasterに反映します。
GitHub側のPull requestsタブを見ると、先ほどのリクエストが来ていることがわかります。
![](https://techback.info/wp-content/uploads/2020/10/github4.png)
変更内容をレビューしましょう。
Files changedタブをクリック。
![](https://techback.info/wp-content/uploads/2020/10/github9-1-1024x231.png)
レビューして問題なければViewedにチェック。
![](https://techback.info/wp-content/uploads/2020/10/img_5f9c3057ef7ed-300x123.png)
Merge pull requestをクリック
![](https://techback.info/wp-content/uploads/2020/10/github5.png)
Confirm mergeをクリック
![](https://techback.info/wp-content/uploads/2020/10/github6.png)
成功しました。
![](https://techback.info/wp-content/uploads/2020/10/github7.png)
ブランチは不要なので削除します。
Delete branchをクリック
![](https://techback.info/wp-content/uploads/2020/10/img_5f9b10cad84bc.png)
成功しました。
![](https://techback.info/wp-content/uploads/2020/10/github8.png)
以上で一連の作業は終了です。お疲れ様でした!
![](https://techback.info/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)