GitHub Desktopを使ってみよう

本ページでは、GitHub Desktopを使ったGithubの使い方について初心者向けに解説する。 まずは、使ってみることを目的としているため、Gitの説明は割愛し、repositoryの作成と、変更の同期（commit,push）についてを中心に書いた。

# そもそもGitHubってなに？
GitHubとは、バージョン管理ツールであるGitをベースとしたコードをクラウドで管理できる、いわばコードに特化したGoogle Driveのようなイメージのものである。
説明は、これぐらいにして実際に使いながら解説していこう。 
## localとcloud
蛇足かもしれないが、GitHubを使うにあたって、この概念は理解しておいた方がいいと考えたので、ここで説明する。

- local
    PC本体に格納しているデータの置き場所のこと
- cloud　
    インターネット上でのデータの置き場所のこと


# GitHubを使う準備 
ここでは、GitHubのアカウントの作成からGitHub Desktopのダウンロードまで説明する。

## GitHubのアカウントを作成する
まずは、[GitHubのホームページ](https://github.com)にアクセスしよう。
![Screenshot 2023-04-14 at 14.57.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119582/c0bcf04a-8283-0d1a-67f4-369a75f09eb9.png)
右上の「Sing up」をクリック。アカウントを作成しよう。ここでは、指示に従って、アカウントを作成していく（Create account）。アカウントの作成が完了したら、ここでの作業は終了である。次は、GitHub Desktopのダウンロードをしよう。 

## GitHub Desktopを使う準備
### GitHub Desktopのダウンロードとアカウントへのログイン
[GitHub Desktopのサイト](https://desktop.github.com)を開き、中央のダウンロードをクリック。
![Screenshot 2023-04-14 at 15.08.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119582/c9cabdee-27a1-6e3d-f408-373609acad44.png)
筆者のOSがmacOSであることから、このように表示されているがそれぞれで該当のOSのものをダウンロードすればよい。 ダウンロードが終了したら、アプリを開き自分のアカウントへログインする。 

# GitHubの使い方 
ここでは、GitHubを使うにあたって覚えておくべき用語などを解説する。 

- repository
    パソコンにおけるフォルダに該当するもの
- push
    localにあるファイルをcloudにあげること
- fetch origin
    cloudでの変更をlocalに同期すること

とりあえず、使ってみるというだけでは以上で問題ないと考えられる（必要があれば、その都度追記する）。

## GitHubを使う際の流れ 
基本的には、以下の流れに沿って使用する。 
1. repositoryを作成する。
2. 作られたrepository内にテキストファイルなどを作成し、そこで編集などを行う。なお、任意のテキストエディタを使って編集できる。
3. 編集が終わったタイミングなどで、Commitしてpushを行う。

以上の流れで、自分が作ったものをcloudにあげ、どこでも同期が可能となる。 

## 実際の流れ 
ここでは、上述の流れに沿ってpushまでを行う。 
### Create New Repository...
まずは、repositoryの作成からである。一番左の「Current Repository」から「Add」を選択、ここで３つ選択肢が出てくる。それぞれの選択肢について軽く説明する。 
- Clone Repository...
    既にcloudに存在するrepositoryをlocalに複製するというもの
- Create New Repository...
    新しくlocalにrepositoryを作成するというもの。なお、これについては必要であれば、「cloudにもrepositoryを作成しますか。」という問いが表示される（以下で実践する）。
- Add Existing Repository...
    既にlocalにある任意のものからcloudにrepositoryを作るというもの

ここでは、２番目のものを実行する。
![Screenshot 2023-04-14 at 16.53.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119582/4c8cf3cd-5d6e-c13c-50bb-27e191586abd.png)
Create New Repository...をクリックすると、以下のようなウインドウが出てくる。
![Screenshot 2023-04-14 at 17.02.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119582/929e432a-475d-809d-d5ba-814f5d82aebf.png)
好きな名前を入力し、path（localでの保存場所）を選択する。Git IgnoreとLicenseについての説明は現状では割愛する。必要事項の入力が終わったら、Create Repositoryをクリック。すると、以下のような画面になる。そこで、上部中央のPublish repositoryを選択。
![Screenshot 2023-04-14 at 17.05.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119582/8cecf363-6609-12a3-c5ec-2bc04a897ceb.png)
Publish repositoryを選択すると、以下のような画面になるので、自分だけで使いたい（他人に見られたくない）場合は、「Keep this code private」にチェックが入っていることを確認して、「Publish Repository」を選択。これでGitHub Desktopでの作業は終了である。
![Screenshot 2023-04-14 at 17.06.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119582/9d21cea8-8b02-4337-b58f-35fd088b4d3b.png)
完了したら、以下のような画面になることを確認して、終了である。
![Screenshot 2023-04-14 at 17.09.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119582/6233f3b8-e933-c90e-f963-c9bc09e2a780.png)
### 編集する
任意のテキストエディタで編集したのち、GitHub Desktopを開くと変更箇所が記載されている。
![Screenshot 2023-04-14 at 16.53.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119582/33f06740-7a00-48a0-182b-6985d296cbaa.png)
### Commitとpush
任意の名前と説明を加え、「Commit to main」をクリック。
画面が以下のようになるので、「Push origin」をクリック。
![Screenshot 2023-04-14 at 17.12.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119582/20de9659-297a-d6f8-e8e9-75459923e346.png)
以上で、repositoryの作成から、cloudへの送信（push）までを説明した。 

## 今回のまとめ 
このページでは、以下の流れに沿って、軽い説明と共に操作方法について説明した。
1. repositoryを作成する。
2. 作られたrepository内にテキストファイルなどを作成し、そこで編集などを行う。なお、任意のテキストエディタを使って編集できる。
3. 編集が終わったタイミングなどで、Commitしてpushを行う。

このページでは説明していないことも多々あり、特にGitHubを使う上で欠かすことができないであろう、バージョン管理（Branch）について説明していない。 しかし、本ページでは、まず使うことを目的に執筆したため、ここでは、その内容については割愛する。興味があれば、調べてみるでも良いし、また筆者が時間があったら、解説記事を書く予定である。