【超初心者向け】GitHubってなんじゃい【Gitすら分からん】

※後半からはmac向け記事です

1. Gitすら分からない（リポジトリ？クローン？何それおいしいの？）
2. GitHubが分からない
3. GitHubの操作が分からない
4. とにかくやってみたいけど何からやればいいかすら分からん

そんな人たち向けの記事です。
本当に基本的な用語を確認したのち、一緒に手を動かしながらGitHubの基本操作をできるようにしましょう。

#そもそもGitってなんじゃい

## Git = 分散型バージョン管理システム
ファイルを更新していく際、それらを編集前の状態に戻したい場合や、今まで作成したものを残しておきたい場合、最も手軽なのはファイルをいくつもコピーして残しておいて、更新するたびに新たなファイルに日付をつけて更新していくというのがあります。
<img width="768" alt="スクリーンショット 2020-01-25 11.48.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543519/78eb7499-2e6f-9ed5-8e14-a6828e426996.png">
___これでは何がなんだか分からん！！___
誰が更新したものなのか、いつ更新したものなのか、何が更新されたのか分からん！！
そもそもどれが最新のものかも分からん！！

しかもうっかり共通フォルダで複数人が同時に作業した場合には、後から更新した人の上書き保存によって先に作業していた分が消えてしまうという悲劇も起こりかねません。

これらの問題を解決するものがGitです。

## Gitを用いたバージョン管理
Gitでは、ファイルの状態を好きなときに更新履歴として保存しておくことができます。そのため、一度編集したファイルを過去の状態に戻したり、編集箇所の差分を表示したりすることができます。

また、古いファイルを元に編集したファイルで、他人の編集した最新ファイルを上書きしようとすると、サーバにアップロードした時に警告が出ます。そのため、知らず知らずのうちに他人の編集内容を上書きしてしまうといった失敗は起こりません。

___チームで作業するならGitでコード管理しよう！___

##Gitの仕組み
###どうやって履歴を管理するの？
###リポジトリ
Gitにおいて、ファイルやディレクトリ（フォルダ）の状態を記録する場所を__リポジトリ__といいます。
情報工学において、仕様・デザイン・ソースコード・テスト情報・インシデント情報など、システムの開発プロジェクトに関連するデータの一元的な貯蔵庫を意味する言葉です。

まず、Gitのリポジトリは、リモートリポジトリとローカルリポジトリの2種類に分けられます。その二つから理解していきましょう。

####ローカルリポジトリ
__ユーザ一人ひとりが利用するために、自分の手元のマシン上に配置するリポジトリ__
普段の作業はここ。手元でコード編集などを行います。
自分の手元にローカルリポジトリを作成する方法は二種類あり、一つ目は全く新しいリポジトリを作成する方法、二つ目はリモートリポジトリをコピーして作成する方法です。
具体的にはリモートリポジトリからCloneしてきたところに作られるClone毎のリポジトリとかなんとかあるのですが作成方法については後ほど。

####リモートリポジトリ
__チームのみんなで共有するためのリポジトリ__
ローカルリポジトリで作業した内容はリモートリポジトリにアップロードすることでチームのみんなに公開することができます。また逆にリモートリポジトリにおいてある他の人の作業内容を手元にダウンロードすることもできます。

####覚えておきたい言葉
__Push(プッシュ)__　ローカルリポジトリからリモートリポジトリにデータをアップロードすること
__Clone(クローン)__ リモートリポジトリの状態を丸ごとローカルリポジトリにコピーすること
__Pull(プル)__　リモートリポジトリからローカルリポジトリを更新すること
__Commit(コミット)__ ファイルやディレクトリの追加・変更を、リポジトリに記録する操作

超簡単に言うとこんな感じです。

```
commit → ゲームのセーブ
push → 現在のセーブデータをサーバに保存
Clone →　セーブデータを保存してるサーバーの内容を丸々ローカルにコピー
pull → Cloneしたデータを最新の状態に更新
```

Gitは親切なので、いきなりセーブデータをアップロードして他の作業者とデータがかち合ったり、何が作業前との変更点なのか報告させたりするステップを用意させています。
またバグ修正など軽微な変更をする際には頻繁にコミットを行って、何かあったときにすぐに昔のデータをロードできるように細かくセーブしておくことも大切です。ゲームと一緒ですね。

#GitHubが分からない

GitHubとは
>GitHubは、ソフトウェア開発のプラットフォームであり、ソースコードをホスティングする。コードのバージョン管理システムにはGitを使用する。(Wikipedia)

よく分かりませんね。
分からない時にはとりあえずやってみよう、ということで数ステップに分けて一緒に初めてのGitHubやっていきましょう。

##GitHubをweb上で触ってみよう
Gitはターミナル上で操作することも可能ですが、GitHubを使うとより直感的にGitを操作することができます。まずはここから慣れていきましょう。
###Step0 アカウントを作る
これがなければ始まらない。とりあえずアカウントのない方は作ってきてください。
[【2019年1月現在】GitHubアカウント作成方法 ](https://qiita.com/okumurakengo/items/848f7177765cf25fcde0)

###Step1 リモートリポジトリを作る
GitHub上にリモートリポジトリを作成してみましょう。
左上のgithubの猫ちゃんマークをクリックするとリポジトリの新規作成ボタン(Newボタン)が現れるのでクリック
<img width="332" alt="スクリーンショット 2020-01-25 13.27.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543519/28b886ae-7351-a3af-ff34-100b53d8ee3f.png">
各項目を入力し__Cleate Repository__
<img width="1470" alt="スクリーンショット 2020-01-25 13.33.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543519/5d8d31b5-6bd2-d8c4-2c51-52cd42cac420.png">
* __Repository name__ 作成するリポジトリの名前。スペースがあっても大丈夫。
* __Description__ 作成するリポジトリの説明
* __Public/Private__ 作成するリポジトリを公開するか、非公開にするかを選択
* __Initialize this repository with a README__ リポジトリーにアップするコードの説明書を作成するか。できるだけ作っておきましょう。作成すると__Description__に書いた説明が自動的に反映されます。

この画面になったら作成完了
<img width="1460" alt="スクリーンショット 2020-01-25 13.48.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543519/1a4201a9-dfd0-7462-5563-bf593525ab5f.png">

###Step2 リモートリポジトリにファイルを追加してみよう
簡単な方法はCleate new fileから直接コードを書き込むか、Upload fileから手元にあるファイルをアップすること。まずは何か作ってみましょう。

今回は```test.txt```を作成しました。
<img width="1704" alt="スクリーンショット 2020-01-25 18.36.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543519/2607d667-2b34-f3fa-0b98-61300121070f.png">
作成したらコミットしてみましょう。
<img width="996" alt="スクリーンショット 2020-01-25 18.37.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543519/512dc227-6e6f-9d65-f523-aa101d39dfb6.png">
上の行は何をしたか（何も書かなければ適当に追加してくれます）
下の行は詳しい説明を書き加えられます。
記入できたらCommit directly to the ```master``` branch.を選択しCommit new fileをクリック

これで新しいファイルを追加できました。

###Step3 変更を加えてみよう(Commit)
先ほど作成したファイルに少し手を加えてセーブ（コミット）してみましょう。
test.txtを選択し右にある鉛筆アイコンをクリックすると編集できます。
適当に編集したらCommit directly to the ```master``` branch.を選択しCommit new fileをクリック。
これでコミット完了です。
<img width="986" alt="スクリーンショット 2020-01-25 18.51.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543519/a1f3e68c-ddf3-8fdd-ce61-1a5b7f430987.png">

###Step4 branchを使ってみよう
さっきは変更をそのまま適用しましたが、実際にチームでプロジェクトを進めていく場合にはいきなりオリジナルのコードに変更を適用するのはリスクがあります。そこで__ブランチ(branch)__機能を使うことで一度本番のコードとは別に変更を加えて、後からチームのレビューを行ったのち本番のコードに変更を適用することができます。

もう一度鉛筆アイコンをから編集してみましょう。
編集が完了したら今度はこちらにチェックマークをつけてコミット。
<img width="1016" alt="スクリーンショット 2020-01-27 12.59.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543519/01ac7de5-c8d4-f26a-fe37-178e397f4ed2.png">
こうすることで```oozzZZZZ-patch-1```というブランチが生成され、本番のコードとは別に開発を進めることができるようになります。

また、コミットするとこちらの画面に切り替わります。これは__Pull request__です。<img width="1025" alt="スクリーンショット 2020-01-27 13.05.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543519/6c1e2252-1dbd-e822-8c75-00a1f8b7aef7.png">
ブランチで行った開発に不具合がなさそうならPull requestを作成することでプロジェクトのコード検証者にチェックしてもらう要望を送ることができます。今回はあなたが責任者なので```Create pull request```をクリックし、遷移した画面で```Marge pull request```をクリックしてください。__Marge(マージ)__することで、枝分かれ（ブランチ）した開発を本番のコードと統合することができます。

ところで画面上のタブに```Insights```があるのでそこをクリック、そして```Network```をクリックしてみてください。
するとNetwork graphがみられると思います。__枝分かれ（branch）__した開発が__本番のコード（master）__に__統合（Marge）__されているのがわかると思います。
<img width="766" alt="スクリーンショット 2020-01-27 13.16.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543519/c3f3b49a-ac21-b7c3-3eff-ace546f58e9a.png">

以上で簡単なGitHub上での開発の流れとGitの大まかな仕組みについてはわかったかと思います。
今度はGitHubのようなリモートリポジトリでの操作ではなく、あなたのPC上にローカルリポジトリを作成し、ローカルリポジトリでの__Clone__、__Pull__、__Commit__、__Push__を行っていきましょう。

#ターミナルからGitを操作してみよう(Mac)

これまで私たちはGitHubの画面を通じて直接リモートリポジトリにアクセスし、ファイルの変更や追加を行ってきました。
次のステップでは自分のマシンにローカルリポジトリを作成し、リモートリポジトリからファイルをダウンロードしたり、逆にアップロードする方法について学んでいきましょう。

簡単のために、今回はあなたのマシンのデスクトップ上にテスト用のディレクトリを作成し、そこにリモートディレクトリの内容をクローン。そこでファイルの変更を行いコミットし、最後にリモートディレクトリにプッシュしてみましょう。

##Step1 Cloneしてみよう
今回は先ほど作成したGitHub上のリモートリポジトリをあなたのマシンにCloneしてみましょう。

まずデスクトップにディレクトリを作成します。
ターミナルを開いてください。

```
cd desktop
```

を入力してください。```cd```はUNIXコマンドと言って、macやLinuxなどUNIX系のマシンを操作するためのコマンドです。
たくさんありますがよく使うところから慣れていきましょう。```cd```はCurrent Directryで、ターミナルで触る場所に移動することができます。```cd desktop```ならデスクトップに、```cd documents```ならドキュメント（書類）に移動します。

次はデスクトップに```test```という名前のフォルダを作り(make directry ```mkdir```)、そこに移動します(cd test)。

```
mkdir test
cd test
```

あなたのPCのデスクトップ上にも```test```という名前のフォルダが生成されていますね。

次はここにGitHubに作ったリモートリポジトリーをクローンしましょう。
まず<img width="1042" alt="スクリーンショット 2020-01-27 14.16.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543519/b781d7ab-8a4b-9d96-9f08-7ead9ef9e9f8.png">
GitHubのページのここからURLをコピーしてきてください。
できたらターミナルに

```
git clone [URLをペースト]
```

を入力してください。（もしGitHubからログインを求められた場合はアカウントとパスワードを入力してください）
するとデスクトップ上の```test```フォルダの中にリモートリポジトリ上のファイルがコピーされています。

##Step2 ファイルを開いてみよう

　```test```ディレクトリの中に生成された```My-New-Repository```に入り、```test.txt```を開いてみましょう。
txtファイルの中身を確認するコマンドは```more```です。

```
cd My-New-Repository
more test.txt
```
先ほど作成したtxtフィイルの中身を閲覧できます。
もう一度Enterキーを押せばファイル閉じられます。

##Step3 pullを使ってみよう

もう一度GitHubに戻り今度はtest2.txtを作成してみてください。記述は何でもいいです。
作成できたら再びURLをコピーしターミナルで

```
git pull [URLをペースト]
```
してみてください。するとあなたのデスクトップのディレクトリにもtest2.txtが追加されていると思います。```pull```を使うと更新することができます。

##Step4　ファイルを作成してみよう
次はマシンのローカルディレクトリからファイルを作成し、GitHubのリモートディレクトリに変更内容を反映させてみましょう。

ファイルを新規作成するUNIXコマンドは```touch ファイル名```ですので、

```
touch test3.txt
```

と入力することで新しいtxtファイル```test3.txt```が作成されました。確認してみてください。
ちなみに、現在のディレクトリのファイル一覧を表示するコマンド```ls```を入力すれば、ターミナルからも確認できます。

```
ls

----------
README.md	test.txt	test2.txt	test3.txt
```

##Step5 ローカルディレクトリに変更内容をコミットしよう

GitHubでも行ったように、ローカルディレクトリでも変更や追加、修正を行った場合には細かなセーブ（コミット）が必要です。コミットは```git commit -m "コメント"```で行えます。（コメントはちゃんと書こうね！！）

```
git commit -m "test3,txtを 追加しました"
```

ちなみにこれまでのコミット内容は```git log```コマンドでチェックできます。

## Step6 ローカルディレクトリでの変更内容をリモートディレクトリに反映させよう（Push）
まずは準備をします。Gitの変更を反映させるためにはまずindexにファイルを追加する必要があります。

```
git add .
```

これで現在のディレクトリ(```My-New-Repository```)以下がindexに追加されます。

これをリモートリポジトリに反映させます（__Push__します）。
今回はブランチなどせずmasterの更新として反映させます。

```
git push -u origin master
```

これでPush完了です。GitHubに戻りページを更新してみると新たなファイルが追加されていることが確認できます。

##Step7 新たなブランチとしてpushしてみよう
もちろんGitHubで行った時と同様、いきなりmasterに変更を加えるにはリスクがありますので、今回の変更をブランチとしてpushすることも可能です。

新しいブランチを作成するには次のコマンドを入力します　```git checkout -b 作成するブランチ名```

```
git checkout -b testbranch
```
作成した```testbranch```にPushするには

```
git push -u origin testbranch
```
これで完了です。GitHubから確認してみてください。

#終わりに
以上でGitの簡単な使い方についてでした。
ここまで記載した一連の流れを踏めばある程度Gitの流れは確認できると思います。
あとはもう自分で好きなように今回作成したリポジトリを機能のテストなんかに使えばいいと思います。

慣れてきたらこっちにもチャレンジ！！（Qiita記事）
 [git100本ノック](https://qiita.com/ueki05/items/5c233773e3186989bfd3)