GitHubハンズオン 第1回 〜個人開発編〜

# GitHubハンズオン 第1回 〜個人開発編〜

社内のUnityクリエイター向けにGitHubの勉強会を開催しました！
せっかくなので資料を公開します！

シリーズになっているので、気になるところだけでも読んでみてください！

##### GitHubハンズオンシリーズ

- GitHubハンズオン 第1回 〜個人開発編〜 ← 本記事
- [GitHubハンズオン 第2回 〜共同開発編〜](https://qiita.com/segur/items/a3f7b9063829850391c5)
- [GitHubハンズオン 第3回 ～ブランチ運用法編～](https://qiita.com/segur/items/1dd578003da46bddc117)
- [GitHubハンズオン 第4回 ～いろいろ取り消し編～](https://qiita.com/segur/items/8ce6914af5578c5f4ce2)
- [GitHubハンズオン 第5回 ～無視リスト編～](https://qiita.com/segur/items/2de61acfa73ce1eceac9)
- [GitHubハンズオン 第6回 ～巨大ファイル編～](https://qiita.com/segur/items/347345a489a963641306)


# 本記事の対象

以下の方を対象としています。

- 仕事仲間からGitHubを使うように言われたけど、GitHubを触ったことがない人
- 黒い画面（コマンドライン）は触りたくない人

また、資料の中でまれにUnityという言葉が登場しますが、これは弊社がUnityの編集履歴を管理するためにGitHubを利用しているという背景があるためです。
Unityを知らなくてもまったく問題のない手順になっているため、ご安心ください。


# GitHubアカウントを作成する

GitHubアカウントをすでに持っている場合は、このステップを飛ばしてください。

GitHubアカウントを持っていない方は、[GitHub](https://github.com/)でアカウント作成をお願いします。

詳しい手順は以下をご覧ください。

[https://reffect.co.jp/html/create_github_account_first_time](https://reffect.co.jp/html/create_github_account_first_time)

プランはFreeプランで大丈夫です。


# ForkをPCにインストールする

[https://git-fork.com/](https://git-fork.com/) からPCにForkをインストールしてください。

これはGitをGUIで操作するためのPCアプリケーションです。


# なぜGit？

なぜGitを使うのでしょうか？

## 編集履歴を安全に管理したい！

まず、ファイルの編集履歴を安全に管理したいという背景があります。

たとえば、以下のように、ファイルを編集する度にコピーを残すという方法があります。

* `大事なファイル_20230324.txt`
* `大事なファイル_20230324_2.txt`
* `大事なファイル_2023-03-27.txt`
* `大事なファイル_最終版.txt`
* `大事なファイル_最終版_segur修正版.txt`

どれがどれだかわからなくなるから、ファイル名やフォルダー名で編集履歴を管理するのは止めましょう！

編集履歴は専用ソフトで管理しましょう！


## 一度行った編集をいつでも元に戻したい！

* 素材を追加してみたけど、やっぱり追加前の状態に戻したい。
* ライブラリAをインストールしてみたけど、やっぱりインストール前の状態に戻したい。

ゲームのセーブ＆ロードみたいに、気軽に前の状態へ戻せれば、複雑な作業も挑戦しやすくなります！


## 複数人で安全に編集したい！

AさんとBさんが同時に編集した場合、それぞれが別々の編集履歴として記録されるので、どちらの作業もムダになりません！

競合箇所（作業がかぶった箇所）を見比べながら、安全に統合できます！

そのため、気軽に編集ができるようになります！


## GitがシェアNo.1

ここまで挙げた目的は、他のソフトでも実現可能ですが、GitがシェアNo.1です！


# 個人のリポジトリを作る


## リポジトリとは？

リポジトリとは、ファイルの編集履歴を管理する場のことです。

repositoryは貯蔵庫という意味の英単語です。


```mermaid
graph LR
    subgraph GitHub
        repository[リポジトリ]
    end
```


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

GitHubで **右上の + > New repository** をクリックします。

![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/6060fb56-a7da-039d-4082-39daa6ac6803.png)


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

リポジトリ名を記入してください。

UnityプロジェクトならPascalCaseが一般的です。（業界の慣習によります）

今回はGitPracticeと入力します。


![image20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/e51d9b9b-c288-8f10-38eb-b67a0d780b72.png)


## 公開範囲を選択する

Privateを選択してください。

**Publicを選択すると、全世界に公開されてしまいます！**

たとえば、社内用の情報を扱う場合、**必ずPrivateを選択**するようにしましょう！


![image32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/1fe647e2-f257-3042-f749-1f85eb8ef74f.png)


## 作成ボタンをクリックする

Create Repositoryボタンをクリックします！

以下のようなページが表示されれば成功です！


![image13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/3d93b720-572f-5f1c-f347-7b8c70d8da31.png)


テキストボックスに表示されている文字列（赤線）が **リポジトリURL** です。メモに控えてください。

HTTPSとSSHの2種類あります。今回はSSHを利用することにします。


# クローンする


## クローンとは？

サーバーのリポジトリをコピーして、PCにリポジトリを作ることを**クローン**と呼びます。


* サーバー側のリポジトリをリモートリポジトリ
* PC側のリポジトリをローカルリポジトリ

と呼びます。

```mermaid
graph LR
    subgraph GitHub
        remote[リモートリポジトリ]
    end
    subgraph PC
        local[ローカルリポジトリ]
    end
    remote -->|clone| local
```

## Forkでクローンする

左上の **File > Clone** をクリックします。


![image45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/5de44087-f56d-d14f-bd7b-466b182c7b09.png)


さきほどメモに控えたリポジトリURLを **Repository Url** 欄に入力してください。


![image19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/76fe7b96-b6a0-875a-4856-ea7634d54756.png)


**Parent Folder** 欄は、PC側の作業ディレクトリです。
お好きなフォルダーを指定してください。
ただし、日本語や半角スペースがパスに含まれていないフォルダーが安全です。

**Name** 欄は、デフォルトのままでOKです。（リポジトリ名と同じ）

**Clone** ボタンを押します。


## SSH接続の設定

クローンが無事にできた場合は、このステップは飛ばしてください。


<details><summary>クローンできなかった場合は、こちらをクリックしてください。</summary><div>


はじめてクローンした場合、SSHのエラーが発生すると思います。
そのエラーを解消していきましょう！

ここが最初の山場です！

この設定は、クローンする度に実施する必要はなく、PC毎に1回実施すればOKです。

ここでは、黒い画面（コマンドライン）を使うことになります！すみません！

Macの場合はターミナルを起動してください。
Windowsの場合はコマンドプロンプトを起動してください。

以下のコマンドを実行してください。


```bash
ssh -T git@github.com
```


応答に **You've successfully authenticated** が含まれていなければ、SSHの設定ができていません。

以下の記事を参考に、公開鍵と秘密鍵を作成し、公開鍵をGitHubに登録してください。

[https://qiita.com/shizuma/items/2b2f873a0034839e47ce](https://qiita.com/shizuma/items/2b2f873a0034839e47ce)

あらためて以下のコマンドを実行してください。


```bash
ssh -T git@github.com
```


応答に **You've successfully authenticated** が含まれていれば、SSH接続は成功です。

改めてForkでCloneをしてみてください。
今度こそ、クローンできると思います！


<details><summary>もし、クローンできなかった場合は、こちらをクリックしてください。</summary><div>


SSH接続が成功するにもかかわらず、クローンに失敗した場合、Fork側の設定に問題のある可能性があります。

**File > Configure SSH Keys** をクリックし、 `id_rsa` 以外のファイルが登録されていないか確認してください。


![image35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/03aeaa6a-7d5d-5aae-51d9-8cd070aa30cb.png)
![image44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/a5377086-e11d-7bb4-21ac-5c1093c0720c.png)

</div></details>

</div></details>

# コミットする


## コミットとは？

コミットというのは、編集履歴に記録するデータの単位です。

編集履歴に記録する操作もコミットと呼びます。


## README.mdを作る

Fork右上の **Open in > Open In File Explorer** をクリックすると、作業フォルダーが開けます。


![image41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/969fbfbe-8567-9700-8dfd-3fef934b7f3a.png)


`README.md` というファイルを作成します。
.mdというのは、Markdownファイルです。


![image24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/85d7afa6-68e7-703d-1ead-bd84669c800c.png)

`README.md` をテキストエディターで開き、以下のように入力して保存します。


```markdown
# GitHubハンズオン
```


文字コードはUTF-8で保存してください。でないとForkで文字化けします。


## README.mdをStageに追加する

Forkの **Local Changes** をクリックすると、 **Unstaged** に `README.md` が追加されていることがわかります。

`README.md` をクリックすると、変更箇所が右側に表示されます。
（もし、文字化けしていたら、 `README.md` をUTF-8で保存し直してください。）


![image9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/954f4201-f34d-e937-7d45-cc5aa4d6bde0.png)


**Stage** ボタンをクリックすると、 **Unstaged** から **Staged** へREADME.mdが移動します。


## README.mdをコミットする


![image27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/24651a66-4f1c-12b9-99dc-ede725f9041c.png)


右下の `Commit Message` 欄に **READMEを追加** と入力し、 **Commit File** ボタンをクリックします。

左側の **Branches > main** をクリックすると、 `READMEを追加` という行が追加されています。


![image39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/c4aedec0-8e53-d142-0b1a-7052bcc6c92d.png)


## README.mdを編集する

再び、テキストエディターで `README.md` を開き、以下のように内容を書き換えて保存します。


```markdown
# GitHubハンズオン
これはGitHubハンズオンのファイルです。
```


改めて、Forkで `Local Changes` を確認すると、再び `Unstaged` に `README.md` が表示されています。

右側には、前回と今回の差分が表示されています。

もし、差分が2列表示になっていない場合は、右上にある
![image15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/e76f40c2-d2e1-b804-0612-154c59e84d79.png)
をクリックしてください。


![image43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/28bab885-6f64-d3f6-64d8-e7b9504f4296.png)


## README.mdを再びコミットする

さきほどと同様に `Stage` ボタンを押し、コミットメッセージに **READMEを更新** と入力し、コミットボタンを押します。

今度は左側のAll Commitsをクリックしてみます。

READMEを更新という行が新たに追加されていることを確認します！


![image10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/9d8b31db-e55d-8542-ba88-679ba39ed163.png)

このようにコミットという単位で編集履歴を管理します！


## ステージとは？

ステージというのは、コミットの候補となるファイル変更データを保管する場所です。


```mermaid
graph LR
    subgraph 作業ディレクトリ
        workingDirectory[README.md]
    end
    subgraph ローカルリポジトリ
        subgraph ステージ
            stage[README.md]
        end
        subgraph mainブランチ
            main[README.md]
        end
    end

    workingDirectory -->|add| stage
    stage -->|commit| main
```


ここで急にmainブランチというのが、登場しますが、ブランチについては次回解説します！


# プッシュする

## プッシュとは？

プッシュとは、ローカルリポジトリの内容を、リモートリポジトリにコピーすることです。

```mermaid
graph LR
    subgraph PC
        subgraph ローカルリポジトリ
            local[mainブランチ]
        end
    end
    subgraph GitHub
        subgraph リモートリポジトリ
            remote[mainブランチ]
        end
    end

    local -->|push| remote
```


## プッシュする

Forkの左上のPushボタンを押します。


![image16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/c6a4e639-3f99-de3d-44a0-7823a783bb3a.png)


以下のようなダイアログが出ます！


![image11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/e1ec82ba-3da2-aa30-6f9d-1956ff5d1a1a.png)


Pushボタンを押すと、プッシュが始まります！


## GitHubのページを確認する

プッシュが完了したら、GitHubのリポジトリのページをリロードしてください。

以下のように、 `README.md` の内容が表示されたら、成功です！


![image12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/7e5d9307-b54f-5264-5ebb-131620d29729.png)


# さいごに

今回はここまでです！おつかれさまでした！

次回は共同開発編です！引き続きこちらも実践していただけると嬉しいです！

https://qiita.com/segur/items/a3f7b9063829850391c5

本記事作成にあたり、以下の記事を参考にさせていただきました。ありがとうございました！

- [https://reffect.co.jp/html/create_github_account_first_time](https://reffect.co.jp/html/create_github_account_first_time)
- [https://qiita.com/shizuma/items/2b2f873a0034839e47ce](https://qiita.com/shizuma/items/2b2f873a0034839e47ce)