【UiPath】UiPathプロジェクトをGitHubで管理してみよう！（1）_GitHub管理を始める

## はじめに
<!--
何についての記事なのか、誰に向けた記事なのかを簡単に説明しましょう。
-->

UiPathではGitHub(ギットハブ)を使用してプロジェクト管理を行うことができます。
初心者向けで簡単にまとまっている記事がなかったのでまとめてみました。

- **第1回 UiPathでGitHub管理を始める←今ココ**
- 第2回 GitHubでissueを立てて、ブランチを切る
- 第3回 GitHubでmergeする

どうしても横文字や英語が並ぶため苦しくなるかもしれませんが頑張ってついてきてください！

### この記事でわかる・できること

- GitHubを使うことで何ができるのかわかる
- GitHubのアカウントが作成できる
- UiPathのプロジェクトをGitHubで管理できるようになる


### この記事で触れないこと

- Git・GitHubの技術的な仕組み
- Gitコマンド

### この記事の対象者

- UiPath Studio 開発者
- GitHubとか差分管理はなんとなく聞いたことあるけどよくわからない…な人
- UiPathのプロジェクト管理に苦しんでいる人


### 動作環境・使用するツールや言語

- Windows10
- UiPath Studio v2023.10
- GitHub

### 記事の流れ

- GitHubの説明
- GitHubの登録方法
- GitHubでリポジトリを作成する
- UiPath Studioで接続して編集する

## GitHubとは

**すご～～～くざっくり**説明します。

**GitHub(ギットハブ)はバージョン管理をWEB上で便利に使えるMicrosoftのサービスです。** (Git(ギット)の仕組みで動く)


- バージョン管理…いつ、だれが、どのような変更をしたかを管理すること
- Git(ギット)…バージョン管理できる仕組みの1つ
- GitHub…Microsoftのサービス、めちゃくちゃ有名

GitHubのロゴマーク
![GitHubロゴ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/bc2c83fd-4d3d-a358-16b6-d919862be86b.png)

Gitのロゴマーク
![gitロゴ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/90c3bcfc-e944-a541-0f6e-d57077ec2366.png)


以上。

## GitHubを使うと何が嬉しいのか

まずはメリットが分からないとやる気が出ないと思います。
なので**GitHubで解決できるUiPathのよくあるお悩み** をいくつか挙げます。

- 本番にリリースしている**ロボットを改修していたらうっかり動かなくなって戻れなくなった**
- **デバッグ開始したら保存されて**以前の状況に戻れなくなった
- 今より良いやり方が思いつきそうだけど**既存のアクティビティがあって壊したくない**のであきらめた
- 複数人で開発していたら**だれがどこをやったのか**全くわからなくなった

こういった**よくある問題はすべてGitHubを使用することで解決します。**

## GitHubのアカウント登録

無料、かつ個人の登録方法を説明します。
もうすでにアカウントを持っている人は読み飛ばしてください。

GitHubは日本語版みたいなものがないのでだいたい全部英語です。
普通に使う分には英語力はそこまで必要ないので頑張りましょう！

### GitHubを開く

下記リンクをクリックしましょう。

https://github.com/

右上の`サインアップ`をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/982f3f62-c055-ed36-9534-370818335a16.png)

### アカウント情報の入力

- メールアドレス
- パスワード
- ユーザーネーム

:::note info
ユーザーネームは被らないものが必要です。
後述しますがユーザーネームがあなたのプロジェクトを管理するURLに必ず含まれます。

:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/6ad319ac-0a3d-7fcc-1ead-e8d09a489af9.png)

Continueすると公式からのメールを受け取るか
`Receive occasional product updates and announcements.`
を聞かれますがオフのままでOKです。

### 人間の証明

人によって違うと思いますがロボットでないことを証明するパズルのようなものを解かされます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/c6905404-7b28-d45a-06d5-30860f1c61e7.png)

### 認証コードの入力

メールアドレスに認証コードが届いているのでそれを入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/8fabef8b-0c66-06f2-5ed0-ec0ececc4a58.png)

### アカウント種類の選択

今回は個人利用のみということで`Just me`
`N/A`を選択します。(あなたが学生、教師の場合は選んでいいと思います)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/03dcb2ec-237b-b2b3-778c-f82bdf98da21.png)

アンケートは無視してContinueします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/d710b409-28f0-22c0-8ed2-20e7f0d314d9.png)

今回は無料アカウントの作り方なので左を選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/89830eef-cec4-77c4-e306-9a881127e248.png)

### GitHubアカウントの作成完了

左上にDashboardと書いてある画面が表示されたら成功です！
この辺でお茶でも飲んで一息ついてください。

今後はサインインするとこの画面が表示されるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/e0490caa-c3bc-8145-49b9-4d7ed89a1a0e.png)


## GitHubでリポジトリを作成する

いよいよ、GitHubでUiPathのプロジェクトを管理する準備をしていきましょう。

まずはGitHub上で**リポジトリ**(Repository)を作成する必要があります。
やっぱり英語ばっかりなので頑張りましょう。

### リポジトリとは

リポジトリとはGitHub上で作成する保管場所のことです。

`1ロボット≒UiPathプロジェクト≒リポジトリ`
の認識で基本はOKです。

### 作成画面を開く


https://github.com/

サインインして、Dashboard(トップページ)から
`Create Repository`または`New`をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/6dc9e431-21cf-fc1b-7124-28c5f56f5856.png)


### 作成画面


`Create a new repository`が開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/dc8544d4-9884-008d-ee4d-8af203fdb3f7.png)

#### リポジトリ名を入力する

`Repository name`に下記の通りコピペしてください。
これが実際にはプロジェクトと同じものになります。

```
UiPath-TestRepository
```

::: note info 
- GitHubではリポジトリ名に日本語が使えません
- URLに使われるので間は`-`でつなぐのがおすすめです
:::


#### PrivateかPublicか

基本的にPrivateにしておきましょう。

:::note alert
**Publicにすると全世界に公開されます！**
:::

### リポジトリ作成完了

こういうのができたらOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/7084b506-e5ea-3bc5-c4b7-f32a44bad111.png)

今後このページにはDashboard画面上からアクセスできます。
この辺で2杯目のお茶を飲んだりしましょう。

## UiPath Studioでリポジトリと接続する

いよいよ、作成したリポジトリにUiPathプロジェクトを接続させていきます。

UiPath StudioとGitHubがそこまで密接でないのでここからはブラウザとUiPath Studioを行ったり来たりしていきます。



### 新しいプロジェクトを作成する

UiPath-TestRepositoryという名前でプロジェクトを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/e4587442-17ea-0965-524e-a594517e818a.png)

### Git init

プロジェクトが作成できたら早速、画面右下の`ソース管理に追加`から`Git Init`を選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/fc8bcb3a-9979-0607-2526-6907fa30956d.png)

フォルダ選択画面が開くのでそのまま何もせずに`フォルダーの選択`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/436a2c22-bb2b-47f9-76af-385862d021a4.png)

### 最初のコミット

`変更をコミット`という画面が出ます。
`コミットメッセージ`というところに`first commit`と入力して
`コミットしてプッシュする`を選択しましょう。

```:コミットメッセージ
first commit
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/0ae8a399-7aa2-02de-98f0-21ffa051961b.png)

#### リモートを管理

リモートを管理という画面が出るので先ほど作成したGitHubのリポジトリのURLを入力しましょう。
これがUiPath StudioとGitHubを接続する作業になります。

名前のところはリポジトリと同じ`UiPath-TestRepository`にしておきましょう。
できたら追加して保存してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/d9f41b99-b454-c76a-df08-d27e2417a7d7.png)

認証が出る場合があります。その時はGitHubにサインインできるメールアドレスとパスワードを入力してください。

:::note info 
下記の連携を求められたらOKをしてください。
https://github.com/apps/uipath

:::


### GitHub用語

今、`コミットしてプッシュする`をしました。

ここで、避けて通れないGitHub用語を覚えてもらいます。(正確にはGit用語)

- コミット✏️：変更の履歴を区切って保存すること、UiPath Studioでは鉛筆マーク
- コミットメッセージ：コミットの説明
- プッシュ⬆：コミットをGitHubに反映すること

ここで大事なことは **『コミットは人の意思で作成するもの』** なことです。

先ほどの`first commit`は実際の処理を細かく見ていくと
- Main.xamlを作成し保存
- project.jsonを作成し保存
- etc…

と多くのことを行っています。しかし、これが`first commit`です。と、
あなたが何を変更したかを自分で区切ったことになります。

ちなみに、変更には追加だけでなく、削除も含まれます。


**一息つきましょう。お疲れ様です。3杯目は甘い飲み物やコーヒーとかがいいかもしれません。**

### ログ出力アクティビティを追加してコミットする

#### アクティビティを追加する

さて、実際のプロジェクトを作成していくのを模して、アクティビティを追加しましょう。
`メッセージをログ`アクティビティを追加して、`上書き保存(Ctrl+S)`してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/f6097f5e-8451-d66d-6fc7-93df3bf81965.png)

Studioの画面右下に注目してください。鉛筆マーク(コミット)の部分に`1`が表示されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/d465102c-1d28-aac3-8f2b-52fd5f03d817.png)

これはコミットできる変更が1件あることを意味しています。

#### コミット

鉛筆マークをクリックしてください。

`変更をコミット`画面が再び表示されました。




コミットメッセージを書きましょう。
先ほども説明したように**コミットは人の意思で作成する**ものなので、
何をした変更なのかを考える必要があります。

今回はMain.xamlにログを追加したので
`Mainにログを追加する`に新機能を表す`feat: ✨`を先頭に付けます。
次をコピペしてください。

```:コミットメッセージ
feat: ✨ Mainにログを追加する
```

できたら今度は`コミット`を選択してください。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/bd904057-76d9-29c0-d3f6-3aee702e6781.png)

### コミットをプッシュする

Studioのいつもの画面に戻りました。
再び右下に注目してください。コミットの数字が0になり、↑マークが1になりました。
これはプッシュできるコミットが1つあることを示しています。

それでは、プッシュ↑マークをクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/fd723c40-6f01-8dbf-8f2d-7488f2f02173.png)

:::note warn
プッシュの方は確認画面がないので、誤クリックに注意してください。
:::


### プッシュされた変更を確認する

ブラウザでGitHubのリポジトリにアクセスしましょう。`codes`画面で`Main.xaml`の部分が
`feat: ✨ Mainにログを追加する`になっていれば成功です！


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/7cc4466a-79a5-7438-e7ef-1d1ad124a1fa.png)

#### コミット履歴の確認

右上の`3 Commits`をクリックしてください。(画像は4) 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/d06e6f4d-ece9-5f04-f604-3bf68f63252b.png)

今までの変更の履歴が確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/e65592e6-d59c-944e-13c9-c52c679decb5.png)



### まとめ

お疲れ様でした。最初慣れるまではかなりしんどいとは思いますが、
基本的には以下の流れになります。

**準備**
1. GitHubでリポジトリを作成
1. UiPath Studioでプロジェクトを作成
1. プッシュして2つを接続

**作業**
1. UiPath Studioでコミット
1. UiPath Studioでプッシュ

慣れるまで、最初はシンプルにこれだけで十分です。
上手にコミットメッセージを残すことで、これだけでも変更の履歴(どう考えていつ変えたか)を追うことができます！

他のアクティビティを何個か追加した後、まとめてコミットしたり、
別のシーケンスを追加してからコミットしてみて、挙動を確かめてみてください！

次回はGitHubならではの便利な開発方法に触れていきます。ぜひ読んでみてください。


### (ちなみに) GitHubリポジトリにUiPathプロジェクトがある場合

ちなみに、既にリポジトリにプロジェクトをプッシュしていて別のフォルダや別のPCで作業を始めたい場合

スタート画面から`チーム`→`Git`→`リポジトリを複製`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/9e61d0e4-16e4-52dc-28d3-0e0cc08c3d71.png)

- リポジトリURL
- チェックアウトディレクトリ(保存場所)
- GitHubサインイン情報

を入力して開けば同様に作業ができます。
この場合、同時に編集したりすると変更が重複したり面倒なことが発生する可能性があるので、別の機会に解説します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/9191d4e4-5b44-c20c-4bb7-a2cac781946a.png)

## 参考資料


https://docs.uipath.com/ja/studio/standalone/2023.10/user-guide/managing-projects-git

[リポジトリとは -「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/word15664.html)