Github Desktop 超入門

# この記事の対象者

- Git が初めての人
- Github Desktopを初めて使う人

# この記事で扱うこと

- Github Desktopの導入
- リポジトリの作成
- Commit
- Push
- Fetch & Pull
- Conflictの解消（少しだけ）

# そもそもGithubとは？

- **バージョン管理システム**の1つ
- 複数人で共同編集する時に便利
- 詳しくはこの辺を見ると良さそうです → https://backlog.com/ja/git-tutorial/intro/01/

# アカウントを作ろう！

1. [Github](https://github.co.jp/)にアクセス
1. Username, Email address, Password を入力する
1. 人間であることを証明して下さい
1. メールアドレスに確認コードが届くので，認証してください
1. アンケートに答えて下さい（英語ですが，適当に…）
1. 料金プランはFreeでOK（"Continue Free" 的なボタンをクリック）
1. 完了！

- usernameは他の人とかぶらないようにする必要があります
- 学生の人は学生認証を受けておくと，有料プランが無料で使えます
    - [このページ](https://education.github.com/benefits?type=student)の「Get Student benefits」から，学校のメールアドレス等を使って認証を受けて下さい

# Github Desktopをインストールしよう！

1. [Github Desktop](https://desktop.github.com/)をDL，インストールしてください
1. Github Desktop が起動したら，画面の指示に従ってサインインしてください
1. 完了！

# フォルダをGit監視下に置いてみよう！

フォルダをGit監視下に置くと，バージョン管理ができるようになります！
Githubで管理しているフォルダを **Repository(リポジトリ)** と言います．

1. 適当な場所に新規フォルダ(ディレクトリ)を作成し，その中に（メモ帳などで）適当なテキストファイルを作って下さい

    ```:test.txt
    Hello, world
    ```

1. Github Desktop で File → Add a local repository を選択します
1. 「Choose...」を押して先程のフォルダを選択してください
1. 「This directory does not appear to be a Git repository.」という警告が出ますので「create a repository」してください
1. 図のように設定して下さい

    ![Create repository.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172413/ba11a51f-331f-04c8-9629-99cc94c4c800.png)

1. 完了！

# ファイルの編集とCommit

Gitでは，作業に一区切り付いた段階で **Commit(コミット)** することでバージョンを保存することができます！
「あーこの編集間違ってるなー…」とあとから気づいたときも， Commit してあれば **過去のバージョンに戻せます！**

1. 先程のテキストファイルを適当に編集し保存して下さい

    ```:test.txt
    Hello, world!!!!
    ```

1. Github Desktopを開くと，変更ログが表示されていると思います

    ![スクリーンショット 2021-06-19 午前11.17.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172413/d215b15d-bef1-d10f-7e92-8390b1c25464.png)

1. 作業内容を記載して，Commitボタンを押して下さい
    - このとき， **パスワード等の機密情報をCommitしないで下さい**
    - 次の工程でPush(インターネットへアップロード)すると，変更履歴ごとインターネット上に残るので，他者にパスワードが見られてしまう危険があります

    ![スクリーンショット 2021-06-19 午前11.18.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172413/48676d60-ed34-4e01-b9b3-1e09798a7749.png)

1. 「History」を押すと，変更履歴の一覧が見れます

    ![スクリーンショット 2021-06-19 午前11.22.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172413/f2ebca92-f92e-e00e-2f36-90c0b117b332.png)

# リポジトリをインターネット上にPushしよう

インターネット上にリポジトリをPushすると，他人と共同編集ができたりします！
Gitを使えば，複数人で同じファイルを変更したりしても，うまいこと調整して変更をマージすることができます．

1. (初回のみ)「Publish repository」を押します

    ![スクリーンショット 2021-06-19 午前11.24.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172413/baf92903-6bc9-90fb-29a7-42f85407e451.png)

1. 基本的にはこのまま「Publish Repository」を押します
    - 「keep this code private」のチェックを外すと， **世界中に公開されます**
    - privateであってもインターネット上にファイルの変更履歴が残ります．繰り返しになりますが， **パスワード等を絶対に載せないで下さい．** 後から消しても履歴には残るのでインターネット上に残ってしまいます．

    ![スクリーンショット 2021-06-19 午前11.25.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172413/46af567e-953b-0c85-48d0-1a720c30152a.png)

1. 2回目以降はインターネット上に登録されているので，「Push origin」になります．押すと，Commitの履歴がインターネット上にアップロードされます

    ![スクリーンショット 2021-06-19 午前11.30.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172413/16ed1279-ff08-b20f-25cd-2c5e71aea90d.png)

1. 完了！


# インターネットから最新版のコードをPullしよう！

他の人がファイルを編集したり，別のPCでファイルを変更したりして，インターネット上のファイルが更新されたときは，その更新点を自分のPCに取り込む必要があります．
変更があるかどうかをチェックすることを **fetch(フェッチ)** ，変更点を自分のPCに取り込むことを **pull(プル)** と言います．
Github Desktopでは，クリックだけで fetch & pull できます！

1. Commitしていない変更点がある場合は，先にCommitしてください

1. 変更点がない場合 & Pushするものがない場合，以下のように「Fetch origin」と書いてあります．ここをクリックしてください．
    ![スクリーンショット 2022-04-28 1.27.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172413/ee007d48-91bd-158c-9aa4-41af18c90343.png)

1. もしインターネット上のコードに変更がある場合，「Pull origin」となります．クリックしてください．
    ![スクリーンショット 2022-04-28 1.30.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172413/dc432f6a-7415-3f47-7efd-78866afac425.png)

1. インターネット上の最新のコードがダウンロード（pull）されます．「History」を確認すると，コードが変更されているのが分かります．
    ![スクリーンショット 2022-04-28 1.32.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172413/0a0ac92b-609d-d903-dd20-d62cd2e8994d.png)

1. 完了！


## 変更点が競合したときは…

複数人で共同編集したりすると，「ピンポイントで同じ行を編集しちゃった！」というときがあります．このとき，Gitは **競合(conflict)** というエラーを出します．
![スクリーンショット 2022-04-28 1.37.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172413/999d1dd1-5576-30fa-6c52-b7eca57f8cff.png)

この状態でファイルを開くと以下のようになっています．
（この例では，インターネット上のコードでは3行目に中国語を，PC上のコードでは3行目に韓国語を追加してしまったとします．）

```
Hello, world!!!!!!!!!
こんにちは，世界！！
<<<<<<< HEAD
안녕하세요, 세계입니다!!
=======
你好，世界!
>>>>>>> 98585ed975dcabd612526be486329e6f4581655b
```

- `<<<<<<< HEAD` 〜 `=======` の間に書かれているのが，PC上のコード
- `=======` 〜 `>>>>>>> [commit id]` の間に書かれているのが，インターネット上のコード

こうなった場合は，手動でファイルを修正する必要があります．
（どちらの変更を取り入れるかは時と場合による．場合によっては両方取り入れることも．）

今回は， **両方の変更を取り入れる** ことにしてみます．
この場合は， `<<<<<<< HEAD` , `=======` , `>>>>>>> [commit id]` を消すだけでOKです．

```
Hello, world!!!!!!!!!
こんにちは，世界！！
안녕하세요, 세계입니다!!
你好，世界!
```

ファイルを編集して保存すると，以下のようにエラーが解消されます！
「Continue Merge」を押してください．
![スクリーンショット 2022-04-28 1.44.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172413/70c27393-a506-4058-b9f5-34ce864f26b2.png)

これで再びCommitしたり，Pushしたりできるようになります．
（Conflictを解消した）

Pushすると，「Merge branch 'main' of ...」というようなHistoryが残っていると思います．
これがConflictを解消したCommitログになります．
![スクリーンショット 2022-04-28 1.48.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172413/e5028ea4-4090-a0e4-8fe2-63f8ad6d4f51.png)

# 他にも機能がたくさん！

今回紹介していない機能として

- Branch 機能
    - 参考 → https://backlog.com/ja/git-tutorial/stepup/01/
- Tag 機能
    - 参考 → https://backlog.com/ja/git-tutorial/stepup/17/

などもあります．

Github DesktopはシンプルなGUIなので，初心者におすすめだと思います！
素敵なGit Lifeを！