【初級入門】輪るバージョン管理【生存戦略】

> **「 きっと定時退社したい技術者たちに告げる 」**

この記事は入門編です。
わかりやすさを最も重視しています。
目的は、すでにあるプロジェクトに参加することです。

![git.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/e626614e-d5b7-3020-21e2-d0a793b697f1.png)

> バージョン管理システム（バージョンかんりシステム、VCS）とは、
> コンピュータ上で作成、編集されるファイルの変更履歴を管理するためのシステム。
> 特にソフトウェア開発においてソースコードの管理に用いられることが多い。 
> 出典：[Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E7%AE%A1%E7%90%86%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0)

> Git（ギット）は、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。
> 出典：[Wikipedia](https://ja.wikipedia.org/wiki/Git)

## 良いことがたくさんあります
* ミスが減る
* ややこしいことを簡単にできる
* 過去に戻れる
* 人と喋らなくていい
* 早く帰れる
* モテる

![git2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/b9402edb-5a6e-4a68-c04b-8dda6c4eb8e4.png)

![git3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/56ebffcd-4ef5-6ff1-c5f8-4283cbd3c59b.png)

> 覚えること、多すぎない…？

## どうしてこんなことするの

### ストレスで死にたくないです
Ａさん「作業しました。変更箇所はこことそことそれです」
Ｂさん「え？どこですか？よくわかりません。差分ファイルをまとめて送ってください。変更箇所のスクリーンショットもお願いします」
（一時間後）
Ａさん「送りました。よろしくお願いします」
Ｂさん「確認しました。修正点がいくつかありまして、こちらで作業したので反映してください」
Ａさん（ちっ どこだよ）
Ａさん「先祖返りすると困るので差分ファイルをまとめて送ってください。変更箇所のスクリーンショットもお願いします」
（一時間後）
Ｂさん「送りました。よろしくお願いします」
Ａさん「あれ？なんか先祖返りしている箇所があるんですけど…、どうなってるんですか？」
Ｂさん「は？知りませんが」
（戦争に突入）

### 早くお家に帰りたいです
Ｃさん「作業しました。プッシュ済みです。確認お願いします」
Ｄさん「確認しました。OKです。修正箇所プッシュしてあります」
Ｃさん「確認しました。ありがとうございます」
（平和に定時退社）

## きっと乗り越えられる

**黒い画面を使わなくてもバージョン管理はできます。**
**今から人間向けソフトウェアの使い方と専門用語を説明します。**

| 用語 | 説明 |
|:--|:--|
| リポジトリ | 記録を残す図書館みたいなもの |
| オリジン | 一番えらい図書館の名前 |
| Git（ギット）　 | 司書さんみたいなもの |
| クローン | リポジトリをダウンロードすること |
| プル | 更新のあったファイルだけをダウンロードすること |
| コミット | 更新したファイルだけを記録すること |
| プッシュ | 更新したファイルだけをアップロードすること |

### リポジトリとは
リポジトリは、ファイルを記録・保管してくれます。
![repository.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/16c3c2a1-ea5e-b8c6-dc67-4fbd7d400045.png)

リポジトリは各々のパソコンにひとつずつあり、サーバーにもあります。
サーバーにあるリポジトリを**リモートリポジトリ**と言い、その中でも元となるリポジトリを**オリジン（Origin）**と呼びます。

![repositorys.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/d0329cb3-ccda-a246-e7e8-fa7ac0369a73.png)

人々はリモートリポジトリ（長いので以後オリジンと呼ぶ）を介してファイルをやり取りします。
オリジンからファイルをダウンロード⤵⤵することを**プル（Pull）**と言い、
オリジンにファイルをアップロード⤴⤴することを**プッシュ（Push）**と言います。

![push_pull.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/bdf7b200-4952-eccc-d6d8-d31e3f14b424.png)

これをするために、まずは自分のパソコンにオリジンをダウンロードします。
これを**クローン（Clone）**といいます。
作業者のパソコンにあるリポジトリのことを**ローカルリポジトリ**と言います。
![clone.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/cd9c7284-4454-481d-d2db-8e7acc1f9d20.png)

## これさえあればなんとかなる
* パソコン（WindowsやMacなど）
* SourceTree（ソースツリー。Gitを簡単に使うための無料ツール。大人気）

## 準備してみよう

### 1. ダウンロードして起動する
* [SourceTreeをダウンロードする](https://www.sourcetreeapp.com/)
* SourceTreeを起動する

### 2. ライセンスに同意する
チェックを入れて『続ける』をクリックしてください。
![SourceTree10010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/2002c691-1804-b237-9d6c-c28ce54cd8ef.png)

### 3. アカウントを作成する
![SourceTree10020.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/bc95dfa3-9a40-1a39-6894-4ff7bbe62502.png)
外部サイトに飛ばされますのでアカウントを作成してください。
メールアドレスが必要です。

### 4. ログインする
どれでもいいのでログインしてください。
![SourceTree10030.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/958b86cf-4f40-661f-4335-59cd4ab859a3.png)

### 5. セットアップをスキップする
ここは不要なので『セットアップをスキップ』してください。
![SourceTree10050.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/a120143a-b864-d0bb-bf44-97b0123c1020.png)

## すでにあるプロジェクトを見てみよう
* プロジェクトメンバーからオリジンのURLを教えてもらう（例：[https://github.com/Nunifuchisaka/html5-skeleton.git](https://github.com/Nunifuchisaka/html5-skeleton.git)）
* それを自分のパソコンにクローンする

新しいプロジェクトを作るときは他の記事を見てください。

### 6. クローンしよう
クローンとは、オリジンにあるファイル一式をダウンロードすることです。
『URLからクローン』をクリックします。
![SourceTree10060.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/4db6a9fa-c1d7-4569-4954-5057b4f3a5db.png)
ウィンドウが出てくるので情報を入力して『クローン』してください。
![SourceTree10070.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/3cbcb71a-405a-cf4f-ed76-3c0ce8aae039.png)

こういう画面が表示されたら成功です。
![SourceTree10080.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/1dcdc8d3-8016-cc16-928e-918eb0029be5.png)
これでプロジェクトのファイル一式がパソコンにダウンロードされました。

### 7. プルする
他の人が変更したファイルをダウンロードすることをプルと言います。
プルされていないファイルがあるとき、上部の『プル』アイコンにバッヂがつきます。
クローンした直後は最新の状態なので、プルしても何も変化しません。
![SourceTree30010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/ad884910-34f9-e1f8-5809-4ef988e1cfbd.png)

プッシュアイコンをクリックするとウィンドウが出てきます。
『OK』をクリックしてください。
![SourceTree30020.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/3a429191-9028-1b0e-b6ec-8f268167002e.png)

プルが成功するとファイルが更新され、履歴も新しくなります。
![SourceTree30030.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/71550646-44ef-6e64-634e-796eea40cb5b.png)

変更のあったファイルはここに一覧表示されます。
![SourceTree30031.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/8520ccf5-d09d-878f-4568-e6dc0ca6e44b.png)

どこを変更したのかは一行単位でここに表示されます。
![SourceTree30040.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/4ab44b6b-f50c-38e1-87fd-b597509910de.png)

## 参加してみよう

### 8. コミットする

![commit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/bac1cc9a-c1f0-795f-1408-19eabcd146af.png)

ファイルを変更すると以下のようにリストアップされます。
![SourceTree20010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/e47f1c4b-13ce-aed0-19d5-717137e396cf.png)

コミットするファイルにチェックを入れてください。
チェックが入っているファイルはインデックスされています。
一番の上をチェックを入れると、すべてをインデックスできます。
**インデックスされているファイルだけがコミットされます。**
![SourceTree20020.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/03aea112-8115-e47a-ebc0-221908a56fa1.png)

コミットメッセージを入力します。
変更内容を言葉で説明書きしてください。
![SourceTree20030.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/b2c7dabb-2f53-4846-7875-5390e0f45ce0.png)

書いたらコミットをクリックしてください。
![SourceTree20040.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/1a4f7a1a-cf00-1866-56aa-dc7435402c61.png)
初回コミット時には名前とメールアドレスを聞かれます。
Gitで使いたい名前とメールアドレスを入力してOKをクリックしてください。

確認が表示されます。
大丈夫だったらOKしてください。
![SourceTree20050.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/5c75d1f8-0141-4d06-bbb5-8cfcbf8b8dbd.png)

すべてのファイルがコミットされていて、作業中のファイルがないとき、以下のようになります。
![SourceTree20060.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/775e444a-851d-233c-52ae-894f725d10de.png)

### 9. プッシュする
プッシュされていないファイルがあるとき、上部の『プッシュ』アイコンにバッヂがつきます。
プッシュする前に一度プルしてください。
![SourceTree40070.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/ed32fa18-56ff-3175-971c-e753d2f0ab66.png)

『プッシュ』アイコンをクリックするとウィンドウが出てきます。
『OK』をクリックしてください。
![SourceTree40080.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/e3b7a08d-84a8-d330-57bb-f499676baca8.png)

## 同時進行をカンタンにする

![branch1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/b09efc17-2bac-d239-f021-c76663508999.png)

よくありますよね。
緊急の修正を先にリリースしなきゃいけないんだけど、今更新作業でごちゃごちゃしてるし…どうしたらいいの！？
そんなときは**ブランチ（Brunch）**を使って世界線を分けましょう。

![branch2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/20be4470-3186-c461-28e8-30d296b7437b.png)

ブランチは作業をはじめる前にあらかじめ分けておくと簡単です。
説明は後日追加します。

## 問題が起こったら

### プッシュしたらエラーが返ってきた
リモートリポジトリはいつでも誰でもアクセスできるので、正常な状態を保つ必要があります。
なので、まず異常が発生しても大丈夫なローカルリポジトリに**プル**して、異常がないことが確認できてからしか**プッシュ**はできません。
異常とは、例えば後述する**他人と変更がかぶってしまう競合（コンフリクト）**などです。
もしプルしてないのにプッシュしてしまってエラーが出たら、プルしてからもう一度プッシュしてみましょう。
後日書き足します。

### 他人と同じ箇所を変更した
変更が競合することを**コンフリクト（Conflict）**と言います。
Gitにはどちらが正しいか判断できないので、人間の手で修正する必要があります。

![conflict.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/5ef081ba-ca3b-4004-986c-b70f2e1e0c67.png)
具体的な解決方法は後日書き足します。

## いかがでしたか？

めんどくさいということだけはわかりましたね。
でもやらないほうがめんどくさいんです。
仕方ないんです。生きていくためですから。

> **「 バージョン管理、しましょうか 」**