【UiPath Studio】バージョン管理にGitを使ってみる。

# はじめに
UiPath StudioにはGitやSVNバージョン管理ツールとの連携機能が用意されています。

当記事ではUiPath StudioのGitの機能を使ってできること、どんな操作感なのか、などを確認していきます。

ちなみにGitとGitHubは別のモノです。
前者がバージョン管理のプロトコル、後者がGitを使うことができる環境を提供するWebサービスです。

:::note
UiPath StudioのGit機能の確認を目的としており、Git用語の説明、Gitサーバーの導入手順、GitとGitHubの使い方の差異などは省略しています。
:::

# Git連携機能の有効化の手順

:::note 
UiPath Studioはv22.10を利用しています。
:::

**ツール > プラグイン > ソース管理プラグイン** から　**Git** のトグルにチェックを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/0f4f9ff1-b705-75ce-5845-208992739ede.png)
Studioの再起動が促されます。


Git機能が有効化されると、いくつかの機能メニューが表示されるようになります。

#### ① ホーム　> チーム  の表示メニュー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/48e0fce6-b80c-81b4-629b-f4edaeb43bf2.png)

#### ② 右クリックで表示されるメニュー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/6ce2a61a-5566-9554-0fc7-635ab151fbc6.png)

#### ③ 右下に表示されるメニュー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/d3fa84ed-0c0e-2d92-463b-395dfb2aa6d7.png)

:::note
 **xaml編集後のアイコン表示**
編集後、Studioの画面からファイルの状態を示すアイコンの表示となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/05d74832-f524-57a8-1abc-ff01b15e0f14.png)

- **ペンのマーク** ：　変更したファイル。
- **＋(プラス)マーク** ：　追加したファイル。

Studio下部にもアイコンが表示されます。意味は以下の通りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/787fb7e6-5e5e-7f3d-729c-dfe327d680dc.png)

左から…

- **プッシュの対象コミット数** 。
- **未コミットのファイル数** 。
- **現在Studioで修正中のブランチ** 。
:::

# 機能の確認の前に…
## Gitの仕組みについてイメージで理解してみます。
Gitの挙動や、Studio上のGit機能理解するためにはGitの仕組みを大まかに知ることが必要です。

### Gitのイメージ
Gitは分散型バージョン管理と言われるとおり、クライアント側にもリポジトリを持っていることが特徴です。

:::note
リポジトリとは修正履歴の保管先です。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/2e8bc1da-ee3a-a07b-75bd-ce7259032b39.png)

- クライアント（利用者のPC上）にも **ローカルリポジトリ** という履歴管理の仕組みを持っています。
- ローカルリポジトリのみでも履歴管理が可能です。
- サーバーへ変更を登録するためには、ローカルリポジトリの内容をサーバー側のリポジトリへ登録（ **プッシュ** ）する操作が必要です。
- ローカルリポジトリへサーバー側のリポジトリの変更を取り込むためには、登録（ **プル** ）する操作が必要です。


# 機能の説明：　よくあるシナリオに沿ったStudioのGitの使い方

## ★シナリオ１：　Gitを使った開発をはじめる。
Gitを使うパターンではいくつか始め方の異なる２つのパターンがあります。

### パターン①：　既存のGitサーバー環境から、ローカルリポジトリを複製する。（Git Clone）

**チーム > Git > リポジトリを複製** を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/fab9aec4-9b53-dbc8-cac8-1f50b2836c18.png)

以下のダイアログは **続行** ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/7a3b6f7b-72e7-d789-3fac-1a9c4aea5f96.png)


表示されたダイアログに必要な情報を入力します。

:::note
**SSHを使用して接続する例：**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/521cf29f-cf39-ced6-97f3-2dad7fb938a5.png)

| 項目名 | 入力値 | 
| ------ | ----- | 
| リポジトリURL | GitサーバーのURLを入力。 | 
| チェックアウト ディレクトリ | ソースを置く自身のPCのパスを入力。 |
| キーを使用 | 認証する場合はチェックを入れる。 | 
| 秘密キーのパス | 自身のPC内の秘密キーのパスを入力。 | 
| パスワード | 秘密キーのパスワードを入力。 |
:::

:::note
**HTTPSを使用して接続する例：**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/67cee687-49b2-2b69-56a2-c2158a75f336.png)

| 項目名 | 入力値 | 
| ------ | ----- | 
| リポジトリURL | GitサーバーのURLを入力。 |  
| チェックアウト ディレクトリ | ソースを置く自身のPCのパスを入力。 |  
| 資格情報を使用 | ※ 認証情報は選択に合わせて入力。 | 

※ Github.comに接続する場合は、下図の通りGithubアカウントにUiPath Github Appをインストールする必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/552b08c7-34a9-5493-ffac-dd118378e8bc.png)
https://docs.uipath.com/ja/studio/standalone/2023.4/user-guide/managing-projects-git#over-https
※ Github.com利用するにも関わらずGithubアカウントにUiPath Github Appが未インストールの場合、下図のエラーが発生します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/3b00f6e5-8082-9906-5e38-ea052d5515e2.png)


:::

下図ダイアログは「はい」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/d062f28c-1e57-cc38-6a88-9c5429d633c1.png)
下図ダイアログは「OK」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/70da6a4e-d039-870b-0ae0-7c58157c880f.png)

:::note
上記のダイアログはGitリポジトリ直下にStudioのプロジェクトが認識されない場合に表示されます。
Gitリポジトリとしてはプロジェクトの親フォルダも指定できますので、そういった利用方法をされている場合や、まだプロジェクトを保管していない場合などに表示されます。
:::

### パターン②：　新規にGitローカルリポジトリ環境作成する。（Git Init）
バージョン管理を使っていないプロジェクトを開いた状態で、
**チーム > Git > Git Init** を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/2841f4ed-3415-949f-2273-3b9e7937d7eb.png)

フォルダー選択のダイアログが表示されますが、ローカルリポジトリは以下のいずれかが選択できます。
- プロジェクトのフォルダー
- プロジェクトの親フォルダー

管理したい粒度に合わせて選択します。


:::note
Gitの管理下にあるフォルダには **.gitフォルダ** が作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/6a86c034-1923-355a-159e-23a746bb586e.png)
:::


## ★シナリオ２：　開発済のプロジェクトをGitの管理に追加する。（ローカルリポジトリへコピー）
プロジェクトを開いた状態で、
**チーム > Git > Gitにコピー** を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/96b859a7-1a09-ef3d-9865-551823c39175.png)

下図の通り、ダイアログを進めると、対象のプロジェクトがGitのローカルリポジトリにコピーされ、Gitの管理対象となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/0cfa47f1-428c-e13b-6fa1-3f9c878d47a4.png)


## ★シナリオ３：　他者の修正を取り込み、自身の修正をローカルリポジトリおよびサーバーへ登録する。（プル → コミット → プッシュ）

### １．プル操作：　他者の修正を自環境へ取り込む。
プログラムの開発の前には、右クリックメニューで **プル** の選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/8650d344-aaa6-3b89-cd18-4b0d66587ce5.png)
サーバーの状態がローカルリポジトリに反映されます。

### ２．コミット操作：　自身の修正をローカルリポジトリへ登録する。
:::note
**参考情報** ：　**SVNのコミット** と **Gitのコミット** は意味合いが異なります。
Gitのコミットはローカルリポジトリ（自身のPC内）に登録する操作です。
:::

コミット操作はいくつかのメニューから操作可能です。
そのうちの１つの手順をご紹介します。

① 右下のペンのようなマークを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/c4446538-903f-e0a3-aa1d-4197a482e10b.png)

①' 右クリック メニューからコミットを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/d08c347c-2a8a-3de1-db18-0ff8d05dd961.png)

② ダイアログから対象を選択し **コミット** ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/b65c8280-d536-9c69-0f39-c7b3a1174e4f.png)

:::note
**コミットしてプッシュする** ボタンでプッシュ操作も同時にすることも可能です。
:::

### ３．プッシュ操作：　コミットした修正をサーバーへ登録する。
下図のアイコンの数字がプッシュ対象が１つあることを示しています。
クリックすると **プッシュ** されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/8f528749-a761-d0d3-9b59-b9a3af30d702.png)

## ★シナリオ４：　開発対象のブランチを作成、変更する。

:::note
**ブランチ** は作業の枝分かれのような定義です。開発作業の対象となるブランチは常に１つです。
Gitを活用するためには作業中のブランチが何であるかを把握しつつ、必要に応じて切り替えて開発すると効率的です。
:::

### １．ブランチ作成
下図ではmainブランチが作業対象になっていることが確認できます。
新たにブランチを作成する手順を実施します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/2b124b41-12d0-651e-f04a-4f524cab2f07.png)
① **右下のメニュー** から **ブランチ名** を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/d1f235e0-13fd-bf90-23a7-f1c96622d120.png)
　 表示されたメニューから **ブランチを管理** を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/bb55268e-bb11-0d35-9156-4362bc33a30e.png)
② 上部の **＋** ボタンを押下します。
③ 作成したい **ブランチ名** を入力します。
④ **○○からブランチを作成** ボタンを押下します。
⑤ **保存** ボタンを押下します。

:::note
最後の「保存」ボタンの操作を忘れることが多いのでご注意ください。
:::

### ２．ブランチ変更
開発中のブランチを変更する手順は以下の２つです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/2a66bd4e-6261-a6f6-bf8c-ff72498061cb.png)
##### ■ ブランチの変更方法１
 ① **右下のメニュー** から **ブランチ名** を選択します。
'① **変更したいブランチ** を選択します。
##### ■ ブランチの変更方法２
 ② 表示されたメニューから **ブランチを管理** を選択します。
'② 変更したい対象のブランチを右クリックし **ブランチをチェックアウト** を選択します。

:::note
開発作業対象となるブランチを切り替える操作を **チェックアウト** といいます。
ブランチは複数定義できますが、チェックアウトされる対象は常に１つです。

ブランチとチェックアウトを活用することで、簡単な操作で枝分かれ（＝ブランチ）したプロジェクトの状態に切り替えることができます。
:::

## ★シナリオ５：　プログラム修正のコンフリクト（競合）が発生する。
:::note
ユーザーAとユーザーBが同じプログラムソースを同時にコミットしようとする操作を **コンフリクト（競合）** と言います。
:::

コンフリクトが発生する条件下で、操作をしようとすると以下のダイアログが表示されます。
下図は　**ブランチを管理 > マージ** の操作でコンフリクトの発生が検知された例です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/797edbfa-4306-f217-73d7-c169a6c33a4e.png)

コンフリクトの解消のためのマージ操作では、左右のどちらのファイルを残すかを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/9bc90d12-1cc3-05cf-4d67-71480f733c0a.png)

対象ファイルを選択し、**コミット** ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/f073dd07-dfeb-1c3a-083d-d487a6b1ccdf.png)
競合した修正の一方を選択したことで、コンフリクトが解消しました。


## ★シナリオ６：　プログラム修正の履歴を確認する。

右クリックメニューの **変更を表示** をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/d6b0f284-98ca-fd5d-9818-4d8e42682fa4.png)

チェックイン（コミット）の情報が確認できます。
いずれかの行をクリックすると…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/9a5d89f1-61ab-ee1e-c10d-de4ae9eb52e8.png)


変更内容の差分が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/d8f03d0d-1585-1541-3ac3-ec534624ec7a.png)


#### 右クリックメニューの 「変更を表示」 でも変更内容の確認が可能です。

このメニューでは、未コミットの差分が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/585ac6a3-24a3-3ff3-2eb9-8f0daabddcae.png)
右クリックメニューの **変更を表示** を選択すると、即座に差分が確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/42e3d441-4dc2-7ef6-c5f3-ce8c68fa045b.png)




# まとめ

StudioのGit機能を確認しました。
Gitは多機能であるためGitの概要を知った上でご利用いただくと活用しやすいです。
バージョン管理を使うと開発の生産性がより高まりますので、ぜひご活用ください。