社内文書管理はGitHubで！非エンジニアのためのGitHub講座 

社内文書を GitHub で Git 管理すると、版管理がしやすかったり、レビューによって変更点を関係者が見られたりといろいろ便利なので、最近社内の一部文書を GitHub に移行しています。

また、先日 Cookpad 開発者ブログで `Markdown と GitHub で社内規程を便利に管理` という記事が公開されました。
https://techlife.cookpad.com/entry/2019/06/26/182322

きっとうちに限らずいろんなところでエンジニアが非エンジニアに GitHub をポチポチする方法を教えたりしているかもしれないと思ったのでまとめます。

エディタを使わずコマンドも打たない、github.com 上でファイルの編集から Pull Request を作るまでを完結させる方法です。なるべく非エンジニアもわかるように書いたつもりですが、なにかあれば編集リクエストをください。

*ここでは markdown の説明はしません。

# 超簡単に Git / GitHub の用語説明
GitHub の UI 上で完結させることの利点の 1 つは、 Git の知識をほぼほぼ必要としないことです。
なので必要最低限の説明にとどめます。Web UI だとできることが限られているのでちゃんと理解する必要はなく、使っているうちにわかってくると思います。

- Pull Request
    - 文書やソースコードの変更を提示して「こういう変更しようと思うんですが、どうでしょう？」という提案をするもの
- Reviewer
    - 「この変更どうでしょう？」と聞く相手
- commit
    - 変更(差分)のまとまり
- branch
    - 他人と作業がかぶっても大丈夫なように自分用の作業場所として作るのが　branch です。ここにコミットをまとめて Pull Request にします。

詳しく書いている記事は世の中にめちゃめちゃあるのでもっと知りたい方はそちらを参考にしてください
おすすめは↓です
https://qiita.com/yunico-jp/items/87bdd13971e82833f6bb
# Pull Request を作ってレビューを依頼する
## ファイルの作成・編集
| ファイルを新規作成するとき: | 既存のファイルの編集をするとき: |
| --- | --- |
| ![Screen Shot 2019-06-27 at 10.39.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/b6fb5e64-8c86-1592-8598-d2cfd2816f5d.png) | ![Screen Shot 2019-06-27 at 10.37.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/3296f3c3-7246-9811-a352-5d104c70e24b.png) |

編集画面はこんなかんじです
![Screen Shot 2019-06-27 at 10.40.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/e157deb2-9143-adb7-5915-27c9443778b9.png)

ちなみに、ファイル名に `/` 区切りで入力することで新たにフォルダを作ることもできます。
![output.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/aea2e820-cb29-4000-8eea-5a4bd8974cc6.gif)

## Pull Request を作る
編集できたらを Pull Request を作成します。
テキストフィールドの下にある Commit Changes のフォームから作成します
![Screen Shot 2019-06-27 at 11.29.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/9d3b607c-1b02-9fec-8d4b-7b1cd587d1e7.png)

- Commit Message を入力
    - 入力しないと `Update <変更したファイル名>` になる
    - どんな変更をしたのか書く e.g.) Add FAQ part
- `Create a new branch for this commit and start a pull request` を選択
    - 合わせて branch 名を設定する
    - このままでも良いけど、チームによって規則があることが多い。 `<username>/<変更内容>` とか

`Propose file change` をクリックするとこんなビューになります。
![Screen Shot 2019-06-27 at 12.21.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/3ce90b4a-53d7-eed3-0f18-e7d32977b1b8.png)
説明には、
- Why: なぜこの変更がしたいのか
- What: 具体的にどんな変更をしたのか

を書きましょう。 これがあると、「なんでこここうしたんだっけ」といったコミュニケーションが省けるだけでなく、 Reviewer が Review しやすくなり、早く Review してもらえる確率があがります。
効果的なプルリクの書き方は以下にまとまっているのでぜひ見てほしいです。
https://qiita.com/umanoda/items/93aec41213f8e3ce14c8

タイトルと説明をかいたら `Create pull request` をクリック。

## 1つの branch (Pull Request) に複数のコミットを含める
作成した Pull Request に、他の変更も合わせたいときの方法です。
まず Pull Request のビューで今作った Branchのリンクをクリックします。
![Screen Shot 2019-06-27 at 12.36.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/4621b316-dc11-4a1a-d141-dbfd2b9d1be0.png)

リポジトリのトップに飛びますが、ブランチがさっき作った branch になっています。この状態で、ファイルの作成・編集をします。
![Screen Shot 2019-06-27 at 12.40.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/6918c274-8f2a-6153-36ad-808a7367a016.png)

Commit Changes のフォームで、今度は `Commit directly to the takose-patch-1 branch.` のままでコミットメッセージを入力して `Commit changes` をクリックします。
![Screen Shot 2019-06-27 at 12.43.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/47e775e5-d83b-f5f6-209e-978c8f546be7.png)

さっき `master` となっていた箇所が `takose-patch-1` になっています。これは「さっき作った `takose-patch-1` という branch に commit を追加する」という意味です。

これでさっき作った Pull Request を確認します。 Pull Request を探すには、上部の Pull Request タブをクリックすると一覧が見られます。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f38343530362f37633934366366362d326665342d646237322d393031622d6433393532336538356561322e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/93e6946f-4a0f-42c5-51da-374c4c427eaa.png)
さっき作った Pull Request を確認すると、コミットが追加されています。
![Screen Shot 2019-06-27 at 14.32.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/1872bf91-8a2c-ef45-17ff-36539f368b03.png)

## Reviewer を指定する
![Screen Shot 2019-06-27 at 12.27.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/1b50c50a-5cfa-69a1-4cea-4342bd62b08c.png)
サイドバーで Reviewer を指定したら　Reviewer からの反応を待ち、必要に応じて修正などをします。

## 変更を反映 (merge) する
Reviewer から Approve がもらえて変更を反映するときは、 `Merge pull request` → `Confirm merge` とクリックしていくと、変更が反映されます。

![Screen Shot 2019-06-27 at 15.35.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/5dbd9ee5-1740-4b52-245f-136c4630c409.png)
![Screen Shot 2019-06-27 at 15.36.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/6af1660d-d2ae-688d-d5e7-1ad60b2d1536.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/90e040f8-cb62-bc35-50ce-85d9dc80a00d.png)

# レビューのしかた
## 変更を確認する
レビューを依頼されたら、まず変更を確認します。
変更を確認するには、Files changed タブをクリックします
![Screen Shot 2019-06-27 at 14.37.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/8a5907c3-2a73-c0ab-f905-5fc7b23f8bee.png)
こんな感じで差分が表示されます。
![Screen Shot 2019-06-27 at 14.41.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/d7216fef-dad5-61bd-5093-7d99dc24cc9a.png)

## コメントをする
Conversation タブで普通にコメントする他に、特定の行にコメントをすることができます。コメントしたい行の左端あたりをホバーすると + アイコンが出るので、クリックすると、コメントのフォームがでます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/afe3ab51-baf9-0ae0-6d46-3d8f7930de1c.png)
詳細は省きますが、`Add single comment` をするとこのままコメントが 1 つポストされ、 `Start a review` をすると、複数のコメントまとめて 1 度にポストできます。基本的には `Add single comment` を使うのでいいと思います。

## レビューをつける
全部見終わったら、画面右上の Review changes で review の結果を選びます。
どれを選ぶか、厳密にルールが決まっているわけではないですが、大まかには以下のとおりです。

- このまま変更を反映してよければ `Approve`
- 修正した方がいいところがあれば `Request changes`
- 判断がつかず、聞きたいことがあるときなどは `Comment`

![Screen Shot 2019-07-01 at 10.49.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/24c3e224-ffda-61af-610e-86ca1dded39e.png)

Approve 以外のときは、相手の反応や修正を待ち、再び Review して Approve がでるまで繰り返します。

# Tips
## 差分表示のレイアウト
差分表示のレイアウトは、デフォルトだと差分が1行ずつ表示されていますが、変更の前後を左右で割って表示させる方が個人的には見やすくておすすめです。歯車マークをクリックして、 `Split` を選択して `Apply and reload` すると変えられます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/ace4d51e-83e2-fe1e-a87c-c07ca1ec459f.png)
1行の変更だと大して変わらないですが、このようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/244d5ca8-a59f-dfc6-8981-304c60e84b54.png)

## suggestion
Pull Request のコメントには、 suggestion の機能があります。
テキストフィールドの上にあるファイルアイコンをクリックすると、以下のように指定した行の内容が自動で記入されます。これを編集すると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/0c0abfc1-3191-3614-057b-fdb317bb61fe.png)
こんな感じで、修正を提案できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/e72235b1-bda2-78f5-2466-cac59fcafdd8.png)
レビューされた人は、Commit suggestion から簡単にこれを取り込むことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84506/815c1773-4637-6d16-d1e5-b720267227a5.png)

# 最後に
社内文書を GitHub で Git 管理して幸せになろう 😜