Github 未経験者が 5分で プル・リクエスト できるようになる手順


# 5分後にデキるようになっていること

- Githubを使って、文書ファイルをチームメンバーとレビューし合える
- Github上で新しいファイルの作成や編集ができる



# このページの対象者

このページは以下の様な方を対象にしています:

- Github/Gitを使って文書を共有したい
- 今まで利用規約やプライバシーポリシーなどの文書を作成するのにWordを使っていた
- 今までWordの校閲機能は使ったことがあるが、流行りのGitとやらを使ってみたい
- チームの開発者がGithubを使っていて、そこに混ざりたい
- 共有フォルダの中が日付の付いたコピーフォルダでいっぱい
- 共有フォルダの中身を間違って消してしまったことがある
- 共有フォルダから最新だと思って開いたファイルが何故か古いものだった
- やたらとファイル名に「最新版」と付けたがる
- 黒い画面を使うなと医者に禁止されている


# このページで説明しないこと

以下の事項はこのページでは説明しません:

- `git` の説明, `gitコマンド` の説明
- Githubのアカウント/レポジトリの作り方
- チームにGithubを導入させるノウハウ
- マークダウン記法の書き方
- 消してしまった共有フォルダのファイルの復元方法

# このページを読むための前提作業

- Githubアカウントを作成して、メールアドレス認証を完了しておいてください
- Githubのレポジトリをあらかじめ作成しておいてください
- レビューを担当してくれるメンバーがいるとわかりやすいです

# 用語説明

_注意_ この用語説明はGithub初心者向けなので、わかりやすさを優先しているため正確ではないものがあります。

- Github / ギットハブ
  * `git` というツールをWeb上で使えるようにしたサービス
- `git` / ギット
  * ファイルのバージョン管理をするツール
  * ソースコードやプライバシーポリシーなどテキストを管理するのに向いている
- `master` / マスター
  * Githubや `git` で「最新の状態（本流）」を指し示す
- `branch` / ブランチ
  * フォルダやファイルの「状態」を指し示す
  * `master` は 「マスターブランチ」の略
  * 「`master`からブランチを切って作業する」のように使う
  * `master`（本流）から分岐することから 「ブランチ（枝分かれ）」と呼ぶ
- `commit` / コミット
  * ブランチ上で行ったファイルの変更の履歴
  * ファイルを変更すると自動的に「コミット」される
- `Pull Request` / プル・リクエスト
  * ファイル作成・変更をしたブランチを他メンバーにレビューしてもらうための差分を作る作業
  * 1つのプル・リクエストは1つのブランチに対応し、複数のコミットを含む
  * プル・リクエスト中は `masterブランチ` への変更途中で、まだ反映されていない
  * レビューが完了すると「マージ」という作業を行うことで `masterブランチ` へ反映することができる
  * そのため、複数人で同じファイルを編集しても、「コンフリクト」する危険が少ない
- コンフリクト / 競合
  * 同じファイルを同時に複数のメンバーが変更すると発生することがある
  * 自動的に解決することはできずに、手動でどちらかの差分を修正しないと作業を続けられなくなる
- `merge` / マージ
  * あるブランチの変更を他のブランチ（大抵の場合 `masterブランチ`）へと一気に反映する作業
  * 「コンフリクト」があるとマージできない
- レビュー
  * Github上では「特定の行」に対してレビューを行うことができる。
  * Wordの校閲機能に相当する


# Github入門

いくつかのステップに分けてGithub上でのファイル作成・変更を解説していきます

二人の登場人物がいます

- Aさん (`ファイル作成・変更者`)
- Bさん (`レビューワー`)

ステップごとに役割があるので、「今はどちらの担当か」を意識して読み進めてください。


## 1. 新しいファイルの作成（`A.ファイル作成・変更者`）

ここでは、`ファイル作成・変更者` が、「新しくプライバシポリシーを作成する」という業務を想定して進めていきます。

Githubのページ上から新しいファイルを作成して `プル・リクエスト` を作るまで

![m1-PR作成](https://lh3.googleusercontent.com/nKnXS1Fv2BJuy07DXVVbGRWMXch01N-ST30z4V6MxuD3ng5nwvMfVJyTJnzqIZZeHk80guG35WvKVI1-dlcfHH6liUDqH_c5XSleYj_gbrzzVh-KtkbDUUPyHiHm5AR2n-kT0662IyjaffgXV8cXZB0Hju1SUMVyqRP663cAr28tgZgaeUjH-43mO6vMslHV0D7yA4_62tzWnZghgtu7NOT1mxg9C8Kln6o_NBW26IFnZa0AAz3GDty8_lbQ58xuUCiFiSRsl5lxTEImLeqLoHB4cjIoXoI8yeymuCth7ARZAeBA5LkXCX0msZOc7OkVcb9XPIuk92mbQDN4pjJCyPvAaLENf063lyN9CMIZdgZz0Qj5EE1bE9GZXknbLC9kaeBvoxkYE7P1f2VInsRAwETwfBevyIXWgsuo8sulRCD9MZJnKFzVMiEFyZ-N5X-M1FqJDWxInGM5qBBhQ7Ji1e5J6vz3PnmBt_DCuYiyxkerVF5IYFn1yTDK1cPK5ALLS2VR9qgqa1a8YwQKRcI1WUzLIDe6oAolRHvRZ2c4zMHS8C1KmCIKCzhYSrKL6JfYxpVW=w895-h776-no)

- TOPページから新しいファイルを変更するページヘ移動

<img width="1004" alt="1-TOPページ.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/f0f638df-6a0a-e920-df7f-78375197fddb.png">
<img width="1000" alt="2-新しいファイル作成ボタン.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/01a3c6c5-6234-59e7-32dd-ee02fc6a6ed1.png">

- 新しいファイルのタイトルと内容を記入

<img width="755" alt="3-ファイル作成.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/abd9703d-1f1d-bdb3-b7d0-eff422f7cb5e.png">

- プル・リクエストを作成します

<img width="1027" alt="4-PR作成.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/470e26ec-824b-398a-c3f0-5293768337dc.png">

- タイトルと概要を作成するとレビューワーに優しくなります

<img width="1026" alt="5-PR作成2.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/d0eca5d9-8a1f-91d4-3e30-097c83d3bb9d.png">

- プル・リクエストの作成が完了しました

<img width="756" alt="6-PR完了.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/987ce0ab-2bdb-d227-ecfc-35f1d6b408d9.png">

- コミットの確認と、

<img width="748" alt="7-コミットの確認.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/90df4b26-750c-7a15-b188-62def08b48bb.png">

- ファイル変更点を確認しておきましょう

<img width="1028" alt="8-diff確認.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/dafc82eb-fce0-60d6-4bed-9041fa27ae8b.png">

次は、レビューワーにレビューを依頼します。

---

## 2. 変更点のレビュー（B.レビューワー）

次はレビュワー（レビュー担当者）の作業です。
残念ながら、変更点にミスがあったみたいです。
コメントをつけて指摘をしてあげましょう。

![m2-Review](https://lh3.googleusercontent.com/RPFVtFNkGQoZ9ng8Eqv5CgXKn_vAMdM0rOEPPjX30hnQu0yD-QzfdaTphz7VYFZnM-UL8ZpuGEastDSyqyAk6W670VPz2GDzWpw03n3Id0huENMS9Q4wrXa_VLkQW402mmPU2TA_D2ev33s1JoFqmRVyLGUldKXg42r-m_0PJNYSrXr6Mq3vUufLank0APiN589sKBfNOkaPFqduCl0ncrUM-rHf5OQTxIWtibEyF5E1LGviX0vPVoekoF9cZt4l2JmVTiuOnWUsKE3ozw7rxzvmV53ImWzcxTJuiPZRx3H9OwRhNJRp2YbztqY6SSsYuWq3bryOG1S4RHRDEgmJcVKU5AC6nDqVvrkaJP2nrpOBvL0aFDeXlJ0RmRdRA7rHMj0jTYZNOpxcrVsf6ShBUfQaIKOeHW2yxeskpMd6qdv-QtHyfe2A6sjnMpuVCX6fsLFp9SLa3ZWk9OP6tm1_Lqj_sRmHPmlI-RslIJTib5w4-JivKhbPfh7Ssx4Ez3FWNQ03QFL18gnwdJtPIeGgF--TXa1a6QUKmo8cVt_XOG6Ww_7AUiJddJyAlBmAlMbWe_0f=w895-h776-no)

- ファイル変更画面（「Files changed」と書いてあるタブ）からレビューしたい行をクリックします

<img width="1020" alt="10-レビュー.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/86910d45-ba0b-c670-6b28-019394a256d2.png">

- 行に対してコメント

<img width="1022" alt="11-レビュー完了.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/306c4768-61c6-da73-c1db-907b6b27c01c.png">

- コメントが完了したら、変更者に伝えてあげましょう


---

## 3. レビューの指摘の修正（A.ファイル作成・変更者）

レビューされたので、変更者が修正します。


![m3-fix](https://lh3.googleusercontent.com/_vpUBljUz8Qu7CBZ3REkn8ItDotpQulzH5M0JaplSN5XRf71RwX3GUtUE5DSCKQTFZjGq_qtO7e0pVPmFqYol7z0gHTDbjZHFtjKm_0rm1SRBHkc9UNUKE3nkWytq5Ojaw6Ix_e8TB5HeYjJwscztoshA8wZ3__ODxwBrmNTb1RmOQC8RQpPszq3sgBHJ0hw1WcxyZiAQ35UQARMBrnP2LQ39029E6uMioIU3LsRJphdbRJJV7G7-wZXt2RSr6Ghxd41VEhgGyO_i7CkI670yGvIHLKcLMSc-59bb0_oTKXdlss6cIj5LpY5LbXryaD72YrMx0YUHRGScsLZvk8NqGBvGbqFABXAhpcDqSvDXRzMiWIwmdwQnOBiWU7tWO2lBCRKGVE817uXdOgCwbaNhvrpcTpmFtuJrKA53iaH5wyXNW9F4HkTwS6NxPrPP5Z2hew9KWfelxCGLGCR42u96yqjR2kJs1Fv5RInSE2Vg1P1LVQ-m7rInjTqTWj__Jfjr3Clkc70GHgEEJ_i5u1V3r--7n7TcfjtiACRDjWcZULerRVFcW0kFUBnnqJZ-o3CzCW2=w819-h701-no)

- 修正するには、左上の「鉛筆マーク」を押します

<img width="1028" alt="13-指摘の修正.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/bcb73806-11a7-7ba2-e38e-d468ed61d210.png">

- 指摘された部分を修正します

<img width="768" alt="14-修正2.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/931e85e2-3c04-dcea-328f-19d4b3e7e4fa.png">

- 修正した概要を記入すると、レビューワーが楽になります

<img width="749" alt="15-修正完了.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/d4658b4d-e501-9c62-f4f1-4872bdd4dcfc.png">

- プル・リクエストのタイムラインに追加されました

<img width="756" alt="16-タイムラインの確認.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/d1588e12-39d4-e28f-1de2-f4d956e33864.png">


---

## 4. 再レビュー（B.レビューワー）

修正されたので、もう一度レビューします。
今回は一度でレビューが完了しますが、実際の業務ではこのやり取りが複数回往復します。

![m4-再レビュー](https://lh3.googleusercontent.com/jnJ7-uhISh37XwHspE9MZ4Txa-UrGozBRhl7jdiBa3v3Axz7LL9BjM1Safw3ivf9k0AwXgJAdvfj_A1zZPDDThXW1PbHkYEJ3USHyCjDHHqImgUMsZ5jMKhzHfhHmLrd6sqjQJP86_DrrD7e3ph6boPvil6l_nuVMSeWgM62xMyH1M2Ws9ATI1p4bZDpFMHIst7u1Ugcews3L4FQkZGJcYWeDbCTMFYYAX_bftVpESK-EvAncv-9yfy9lg2BYh5HNmYz-2ae81A-fPneE0llZIi4nJmrfjLT6KCoehuQsLB19PYx2b-3EZwKAOnlEyIq0Pz88Clp0BXYIAZVH1CWAhjRZqsojOcGk0zD3gZuKBtgMybYaA8RC9sVNL6MVdwftwUeSPX8xxjnd1YBg_cK-pT8mBnZdrvaUWX2S0eGCoH4lAQmzWWYKHE1QYBEDV_COBTcGoUMyCVsdFtxt7edb33UzKTK1q38hPFMqSA6258Z2gJ6Ecixs0xscluinwBk2SG0Ta2wm0PA1uMKtpIPP2Ue9NXpriHT2PYt3X-6Q7XQqHDvu6hleCGzPZgQZTC9p1h1=w819-h701-no)

- 再度レビューします

<img width="760" alt="17-再度レビュー.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/e2fa0970-44ef-f0ea-12fe-d615841cdf00.png">

- 今回で修正が完了したので、「OKです」と伝えてあげましょう

<img width="594" alt="18-レビュー完了.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/dad64c10-af19-7229-59d8-9e7943884508.png">


---

## 5. `master`へマージ（A.ファイル作成・変更者）

レビュワーのOKがでたので、 `master` へ反映して作業を完了です

![m5-merge](https://lh3.googleusercontent.com/pWYARlGoNUuKUhVEY072Xalywk8sCW3wTANC62P3B6e0FqzN3gBQoB2uK3iZpD_vwzOOIEligCDTDfo67JHQ53OoPJzs8EBZEapSmI3V3UXetBGtdPCnunBHhRrcc10WIB7lGgvfP8PIiD1GTWHUdyj2I_yKZTas1iEtY3kCPmAYE2kk6-f90RCZsYVw7hNn7UMhZ23mJVEJ9lVp_-bRiefB-q77HlUnCRsZ_SZfFD2KXnsA9o0dq2cVcmPRyb_8btXNHDTS7oAGM_DLBwx01M3eta4aCKOwjXt89TlRrQ-f7L-dU1HrH7w76et_VxP4Y5wWedMkswQLNpqhTJqZGLQBDyWf6-GqikwfjVN4KYMBnVea6vOfnWlSDeOIu4_UacYv7sHfl-HGXzU3GzOzfkaH4rbKPok_gnCrbTUhgHeuI0sD4CpAzXfzpwgT6ErqGUC2AfnYff_zJAwbbaq5_BYZ6FODRzccmeRfhSY_j7ep9wUrrTEhuxkyxMOhGrtkRzJt9PrtQvtIEw-hWrY2DZcO4lQFJs967lESbMpa0jjdC7SPwQzBqFTCjPFJ8pKQzCFG=w819-h701-no)

- 修正点がすべて直ったのでマージ作業に入ります

<img width="535" alt="19-マージ.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/7c912ee2-9198-a2e0-501f-e6d64f7f3e3f.png">

- 「Confirm merge」というボタンを押すと、 `masterブランチ` に変更点が反映されます

<img width="756" alt="20-マージ完了.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/5f77787e-e036-c271-87da-5be144484a56.png">

- `master`ブランチのファイル` が反映されているか確認しましょう

<img width="752" alt="21-ファイル確認.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/a0eaa9aa-1fe2-cf60-c441-a3f99d02950d.png">

---

## 6. 次の変更作業を始める

次の作業を始める場合は、今までと同じ流れを繰り返せばOKです

- 「鉛筆マーク」からファイルを変更して

<img width="756" alt="22-再度修正.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/65776a98-3fa6-ccbc-a627-b2ea0f909c04.png">

- プル・リクエストのタイトルと概要を記入し、新しいブランチを作成し

<img width="756" alt="23-次のPR.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/cef205d0-432d-29f1-4fd0-90c2216709d4.png">

- 変更点を確認して、プル・リクエストを作成します。

<img width="1026" alt="24-次のPR2.png" src="https://qiita-image-store.s3.amazonaws.com/0/10272/94151b1e-9691-3d1e-102f-4f1506bf615e.png">

- この後の流れは、最初と同じです。

---

# Github / git の注意点

- 実は、ブランチやプル・リクエストを作成せずに `masterブランチ` を直接変更してしまうことは可能です。ただし、レビューの意味がないのでやめましょう
- Github上で行ったファイル作成・変更はコミットとして永遠に残ってしまいます。 __過去の変更を削除することはできません__ 。パスワードや個人情報は記入しないように注意しましょう


# 以上です

わかりにくい点があれば、ご指摘お願いします。