GitHubで共同開発のためのチュートリアル

## はじめに

このエントリーはGitHubを用いた共同開発をする際どのように開発していけばいいのか、どのようなコマンドを叩けばいいかを簡単に書いたものです。

Qiitaやブログなどに同じような内容のエントリーが多数ありましたが、断片的な記事しかなかったので書きました。

想定読者は、普段Gitを用いた個人開発はやってはいるけど共同開発を行った事がない、もしくは非エンジニアなのでGitを使った事がない方です。

pcはmacを想定していて基本はCUI(個人的な趣味)を叩きますが、[sourceTree](https://ja.atlassian.com/software/sourcetree)など GUIツールを使う方が楽ならグラフィカルで見やすいのでむしろそっちを使うべきです。(特にwindowsユーザー)

GUIツールもCUIもどちらも本質的には変わらないですね。

実際にレポジトリを作るところからpull requestを出すところまでやっていこうと思います。

なるべく分かりやすい言葉を使うようにしているので多少正確さには欠けると思いますが、ご了承ください。

## 前提知識

* 簡単なCUIコマンド(`cd`, `pwd`, `ls`, `mkdir`)がわかる
* `Git`自体の仕組みを軽く知っている → [サルでもわかるGit入門](http://www.backlog.jp/git-guide/)

## CUIにgitを導入する

デフォルトで入ってる場合も多いのですが、環境によっては入ってない場合もあるので確認します

```sh
# gitが入ってる場合(一部省略)
$ git
usage: git [--version] [--help] [-C <path>] [-c name=value]......
# git入ってない or パスが通ってない場合
$ git
-bash: git: command not found
```

### 導入方法

[GitHub 初心者による GitHub 入門（１）〜 git のインストールとセットアップ・リポジトリの作成・ clone 〜](http://qiita.com/megu_ma/items/e459e62821bdd6dbaccb)

の記事がわかりやすいですね。

## 開発レポジトリの準備

この作業は一度しかしないので注力する必要はあまりないです。

### GitHubでレポジトリを作る

### レポジトリを作る

![スクリーンショット 2016-09-15 11.09.14.png](https://qiita-image-store.s3.amazonaws.com/0/125325/353d5608-4d72-5738-2f23-6c852b0b87fd.png)

1. [GitHub](https://github.com)に行き、右上の+マークの「New Repository」を押す
2. 図のような画面が出てくるので「Repository name」に作りたいレポジトリの名前を入れて「Create Repository」ボタンをクリック

![スクリーンショット 2016-09-15 11.26.17.png](https://qiita-image-store.s3.amazonaws.com/0/125325/6f2f2516-25d5-a202-412f-31c7d1679392.png)

3.ローカルにディレクトリを作り移動する

```sh
$ cd ~/Desktop
$ mkdir TestRepository
$ cd TestRepository/
```

4.最初に必要なファイルを追加する(今回は`index.html`と`Readme.md`を追加した)

```html:index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestRepository</title>
</head>
<body>
    <h1>HOGEHOGE</h1>
</body>
</html>
```

```markdown:readme.md
## This is a test repository.
```

5.Gitコマンドを叩く(コミットまで)

```sh
$ git init
$ git add .
$ git commit -m "first commit"
```

6.先ほどのgithubの画面の「…or push an existing repository from the command line」のコマンドを実行する

```sh
# これは筆者のレポジトリの場合なので各人のコマンドを実行
git remote add origin git@github.com:takeokunn/TestRepository.git
git push -u origin master
```

7.ブラウザをリロードする
![スクリーンショット 2016-09-15 11.39.54.png](https://qiita-image-store.s3.amazonaws.com/0/125325/52043987-e55c-389a-daf1-87de155a81db.png)

これで完成

### レポジトリをローカルにクローンしてくる(すでにレポジトリがある場合)

ローカルにクローンするには、`git clone`を使えば良い。

```sh
$ git clone [your_repository_url]

# 例1(今回作っているTestRepositoryのレポジトリ)
$ git clone https://github.com/takeokunn/TestRepository

# 例2(これは筆者のriot_flux_frameworkのレポジトリ)
$ git clone https://github.com/takeokunn/riot_flux_framework
```

以降自分のディレクトリに移って作業します

```sh
$ cd [your_repository_directory]
```

## 実際の開発

今回は「index.htmlにpage1へのリンクとpage1.htmlを作る」ことをやってみましょう。

### 開発の基本路線

#### 1. issueを立てる

issueバーを押して右上の「New Issue」をクリックする

![スクリーンショット 2016-09-15 12.58.50.png](https://qiita-image-store.s3.amazonaws.com/0/125325/760a759f-1d05-658a-6e40-1e922ac084e1.png)

適当にissueのタイトルと説明文を追加する

![スクリーンショット 2016-09-15 13.02.11.png](https://qiita-image-store.s3.amazonaws.com/0/125325/fc0f123e-c023-2197-d7fe-af440995310c.png)

#### 2. ブランチを切る

今回のissueは「`index.html`に`page1`へのリンクと`page1.html`を作る」なので、`master`ブランチから`feature/add-page1-link`ブランチ作り移動する

```sh
# 現在のブランチを確認する
$ git branch
* master

# ブランチを切る
$ git branch feature/add-page1-link
$ git checkout feature/add-page1-link

# 上二つ(ブランチを切る)のコマンドを１行で書くこともできる
$ git checkout -b feature/add-page1-link

# 確認
$ git branch
* feature/add-page1-link
  master
```

#### 3. issueに合わせて作業をする

「page1.htmlへのリンク」と「page1.htmlの作成」を行った

```html:index.html
<!-- 中略 -->
<body>

    <h1>HOGEHOGE</h1>

    <!-- page1へのリンクを追加 -->
    <a href="./page1.html">link to page1</a>

</body>
```

```html:page1.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestRepository</title>
</head>
<body>
    <h1>page1.html</h1>
</body>
</html>
```

### 4. 変更部分の確認をする

```sh
$ git status
On branch feature/add-page1-link
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

	modified:   index.html

Untracked files:
  (use "git add <file>..." to include in what will be committed)

	page1.html

no changes added to commit (use "git add" and/or "git commit -a")
```

上の結果は、「index.htmlが修正されました」ということと、「page1.htmlというファイルが生成されたようです」という２点を示しています。

```sh
$ git diff
diff --git a/index.html b/index.html
index 00f0ac9..3357c82 100644
--- a/index.html
+++ b/index.html
@@ -6,5 +6,9 @@
 </head>
 <body>
     <h1>HOGEHOGE</h1>
+
+    <!-- page1へのリンクを追加 -->
+    <a href="./page1.html">link to page1</a>
+
 </body>
 </html>
```

`git diff`コマンドを使えば変更内容をみることができます。

#### 5. 変更箇所をコミットしてプッシュする

`git status`や`git diff`を使って変更点を確認し、機能ごとに細かくコミットする

```sh
# 「index.htmlにpage1.htmlへのリンクを貼る」変更
$ git add index.html
$ git commit -m "index.htmlにpage1.htmlへのリンクを貼る"
$ git push origin feature/add-page1-link

# 「page1.htmlを作成する」変更
$ git add page1.html
$ git commit -m "page1.htmlを作成する"
$ git push origin feature/add-page1-link
```

#### 6. 変更を`master`ブランチ(開発主要ブランチ)に反映してもらうために`pull request`を出す

5でpushしたらこのように黄色いバーが出てくるので`Compare & pull request`を押す

![スクリーンショット 2016-09-15 13.17.38.png](https://qiita-image-store.s3.amazonaws.com/0/125325/bbd5ef04-78b0-827b-3461-c031b64b227f.png)

Titleとdescriptionを埋めてpull requestを押す。descriptionの中の`#1`はissue番号で、これを指定してあげることによってissueとの連携が取れるようになる

![スクリーンショット 2016-09-15 13.19.39.png](https://qiita-image-store.s3.amazonaws.com/0/125325/470f7f77-927f-e021-eb62-e970b2e5acdf.png)

pull requestが完成

![スクリーンショット 2016-09-15 13.21.46.png](https://qiita-image-store.s3.amazonaws.com/0/125325/fc5a8a5b-3682-e216-5bca-1223b3f0de0a.png)

#### 7. `pull request`を許可して`master`ブランチに`merge`する

下の`Merge pull request`を押すとmasterブランチに現在の変更がmergeされる

commit logはこんな感じになる
![スクリーンショット 2016-09-15 13.23.35.png](https://qiita-image-store.s3.amazonaws.com/0/125325/2adf30ac-948c-7f3c-d4fa-5610847c5b89.png)

#### 8.立てたissueをクローズする(追記)

終わったissueなのでcloseします。`Close Issue`をクリックしましょう。

![スクリーンショット 2016-09-15 14.00.54.png](https://qiita-image-store.s3.amazonaws.com/0/125325/05d77f71-ebd5-84cb-9cfe-9dc5a07fc524.png)

## Q&A

Q.どのくらいの頻度でコミットすればいいですか？
A.場合にもよりますが細かくコミットしたほうが変更がわかりやすいので個人的にはいいと思っています。`git add -p`などを活用するといいかもしれないです。([Gitで部分的にコミットする方法](http://qiita.com/miyohide/items/79ab0ff3b3852289a6be))

Q.CUI叩くとバソコンが壊れそうなので怖いです
A.内部のファイルもいじれちゃうので確かにその通りですが、勉強すれば大丈夫です。(間違っても`sudo rm -fr /`とかやらないように・・・)

Q.commitコメントを誤字った
A.書き換えられます。`git commit --amend`や`git rebase -i`について調べてみるといいと思います

Q.gitについてもっと知りたい！
A.QiitaのGitタグを見ればいいと思います

## 最後に

「習うより慣れろ」です。わからない事があれば詳しい人に聞くなりグーグル先生に聞くなりすれば大抵なんとかなります。

直接聞きたい方は[Twitter(@takeokunn)](https://twitter.com/takeokunn)にリプなりDMなりいただければ答えます。

typoや誤った情報、改善案があればコメントや編集リクエストをいただければすぐに修正変更をいたしますので宜しくお願いします。