## pushrequest Rule

この資料はpushrequestでのレビューを受ける上でのルールを書いています。

## はじめに

こんにちは！寒河江（さがえ） です。

PushRequestでは現場の開発スタイルをみなさんにお伝えしながら素早くコードレビューすることをモットーにしています。

# レビューの受け方について

### ■ レポジトリへの招待

`sagaekeiga` アカウントをあなたのレポジトリへ招待してください。

[招待の仕方](https://code-schools.com/github-invite/)

## 開発の進め方について

基本的にはみなさんにお任せしますが現場で使っている言語やテンプレートエンジンを使うことをおすすめします。

### ■ 開発言語

Ruby on Rails を利用します。

#### ◆ バックエンド

Ruby on Rails（2018 年 3 月時点では 5.1.5）をそのまま利用します。

コーディング規約については最近のレポジトリであれば Rubocop を利用してチェックを行っています。

#### ◆ JavaScript

![](https://static.amido.com/wp-content/uploads/2016/10/24155219/ES6.png)

Rails 5.1 以降で導入された webpacker を利用して、ES6 で記述します。

##### ▲ スタイルガイド

クラス名/関数名は CamelCase を基本とします。

![img](/mosaic-code.jpg)

#### ◆ テンプレートエンジン

![](http://haml.info/images/haml.png)

[Haml](http://haml.info/)を利用します。

すでにerbで開発をしている方は [erb2haml](https://github.com/dhl/erb2haml) を使ってhamlに一括置換することができます。

[参考](https://qiita.com/m_doi/items/1f01fd2b1a52c2c43f1f)


##### ▲ スタイルガイド

'='の後には必ず半角 space を 1 つ入れてください。

![img](/mosaic-code.jpg)

#### ◆ スタイリング

![](https://dynamicimagesfr-v2b.netdna-ssl.com/product_class_external_product/sass.png)

SASS（SCSS）で記述します。

CSS のフレームワークとしては[Bootstrap 3](http://getbootstrap.com/)（Bootstrap4でもOK）を利用します。


##### ▲ スタイルガイド

[Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.xml)に準拠します。

### ■ ソースコードの管理について

![](http://kykamath.github.io/images/github.png)

[GitHub](https://github.com/)を利用します。

実装を行わない方も issue の登録等でレポジトリを閲覧できる必要がありますので、アカウントを持っていない場合は作成してください。

また、セキュリティレベル向上のためアカウント作成後に[二段階認証](https://help.github.com/articles/about-two-factor-authentication/)を有効にしてください。


#### ◆ issue 登録時に設定する項目

##### 件名（Title）

長すぎず、完結に。

![img](/mosaic-code.jpg)

##### 本文（Comment）

issue を見た人間が開発に取り組めるように、情報が多すぎる位でも問題ありません。
.github/ISSUE_TEMPLATE.md は以下の通りです。

![img](/mosaic-code.jpg)

テンプレートの設定はこちらを参考にしてください。
[参考](https://github.com/sagaekeiga/pushrequest-on-boarding-for-reviewee/tree/master/.github)

##### レビュー者（Reviewer）

レビューして欲しい人間のアカウントを指定してください。

### ■ 作業開始から終了まで

基本的に git-flow の流れに則った形で作業を進めていきます。

参考 : [Understanding the GitHub Flow](https://guides.github.com/introduction/flow/)

* issue に作業内容を登録
* 作業用ブランチ作成
* 実装作業
* GitHub へ作業用ブランチを push
* プルリクエストの作成
* 実装者以外のレビュー
* （レビューで修正の指定がある場合は修正後、再度レビューを依頼）
* 本ブランチ（主に master）へのマージ

プロジェクトメンバーが増えてリリース phase を踏む形にシフトする際はタイミングをみて Git-Flow へ移行していきます。

#### ◆ 利用するブランチ

初期開発完了（受託開発であれば納品まで。サービスであれば初期ローンチまで）は master ブランチを merge 先のブランチとします。

issue の対応を行う際には GitHub-Flow に則り「features/your-task」のような形で新しく master からブランチを作成して作業を開始してください。

1 つのブランチで複数の issue を対応しても問題ありませんが、多く詰め過ぎると merge が面倒になるので最大 3 つの issue を目処にしてください。

![](http://joefleming.net/images/posts/git-flow-timeline.png)

#### ◆ ローカルでの merge について

作業用ブランチに master を merge するタイミングなど、ローカルで merge 作業を行う際には必ず「--no-ff」を指定してください。

![img](/mosaic-code.jpg)

[参考](https://qiita.com/nog/items/c79469afbf3e632f10a1)

#### ◆ プルリクエストの作成

作業用ブランチでの作業が完了したら、master ブランチに対してプルリクエストを作成してください。その上で Slack 上のプロジェクト用チャネルで

![img](/mosaic-code.jpg)

のような形で Slack 上で声をかけてください。

（複数のプロジェクトが同時に進行しているため、GitHub 上の作業が流れてしまうのを防ぐためです）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/124461/c4baa76f-1e01-4ddc-da8e-a18816b400df.png)


プルリクエストもテンプレートを用意しています。

![img](/mosaic-code.jpg)

参考 : [Pull request templates make code review easier](https://quickleft.com/blog/pull-request-templates-make-code-review-easier/)

#### ◆ WIP pullrequestの作成

実装する前にWIP pullrequestを作成してください。

レビュイー・レビュワーが作業を視覚的に確認することができます。

[参考](https://qiita.com/numa08/items/b676e38e3dbabfd39d18)

#### ◆ issue の完了

git で commit 時のメッセージとして「fixed #000」と入れておいてください。

こうしておくことで、master に merge された時点で issue が自動的に close されます。

自動的に issue を close したくない場合には、「#000」とだけ書いておけば issue に関連づけられます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/124461/3409b90a-ab5b-2c31-ee74-11087485886b.png)


### ■ テストコードについて

Rails のプロジェクトであれば rspec を利用します。ほとんどのプロジェクトでは原則モデルの unit テストだけで十分です。

継続して案件が進む場合には必要に応じて追加します。また、以下のものについてはリリース前までに書いておいたほうが幸せになれることが多いです。

* 決済機能
* API

### ■ コメントについて

クラス単位でのコメントは最小限に（そもそもクラス名を見てその役割が分からないのはおかしいので）とどめる形で構いません。

関数単位でのコメントは

* その関数が行っていること
* 引数の説明
* 戻り値の説明
* その他補足事項

を記述するようにしてください（以下の例を参照）。

![img](/mosaic-code.jpg)

### ■ ドキュメンテーションについて

設定や備考録等、対象プロジェクトに関するドキュメントは GitHub の Wiki にまとめてください。

無理やり 1 ページに納める必要はないので、Home ページからリンクを貼る形で機能/項目単位でページを作成して問題ありません。

### ■ Herokuの導入

ステージング環境にherokuを導入しましょう。
こうすることによって本番環境への移行がスムーズになります。

オートデプロイ機能を利用するとmasterにmergeした段階で自動的にherokuに反映されるので設定することをおすすめします。

### ■ CircleCIの導入

CircleCIの導入をおすすめします。
導入することでテストを自動化することができます。

[参考](https://qiita.com/noboru_i/items/7d300eb63ae667bf8dc2)

設定ファイルのテンプレートを用意しているのでカスタマイズしてご利用ください。
注: `rubocop `, ` rails_best_practices  `, ` brakeman  `（Gem）のインストールを事前に行ってください。
[テンプレート](https://github.com/sagaekeiga/pushrequest-on-boarding-for-reviewee/tree/master/.circleci)


### ■ 参考Gem

現場で使われるGemを用意しました。
中身を確認してぜひご活用ください。

[参考Gem](https://github.com/sagaekeiga/pushrequest-on-boarding-for-reviewee/blob/master/Gemfile)

### ■ わからない（実装できない）ところがあったら？

WIPのpullrequestを作成してわからない内容を書いてください。
※ テンプレートを使ってください。

[参考](https://github.com/sagaekeiga/pushrequest-on-boarding-for-reviewee/pull/1)


▼▼▼▼▼ テンプレート ▼▼▼▼▼


### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

### 発生している問題・エラーメッセージ

![img](/mosaic-code.jpg)

### 該当のソースコード

![img](/mosaic-code.jpg)

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。


## pushrequest Rule

この資料はpushrequestでのレビューを受ける上でのルールを書いています。

## はじめに

こんにちは！寒河江（さがえ） です。

PushRequestでは現場の開発スタイルをみなさんにお伝えしながら素早くコードレビューすることをモットーにしています。

# レビューの受け方について

### ■ レポジトリへの招待

`sagaekeiga` アカウントをあなたのレポジトリへ招待してください。

[招待の仕方](https://code-schools.com/github-invite/)

## 開発の進め方について

基本的にはみなさんにお任せしますが現場で使っている言語やテンプレートエンジンを使うことをおすすめします。

### ■ 開発言語

Ruby on Rails を利用します。

#### ◆ バックエンド

Ruby on Rails（2018 年 3 月時点では 5.1.5）をそのまま利用します。

コーディング規約については最近のレポジトリであれば Rubocop を利用してチェックを行っています。

#### ◆ JavaScript

![](https://static.amido.com/wp-content/uploads/2016/10/24155219/ES6.png)

Rails 5.1 以降で導入された webpacker を利用して、ES6 で記述します。

##### ▲ スタイルガイド

クラス名/関数名は CamelCase を基本とします。

```javascript
// Good
class HelloWorld {
  sayHello() {
    alert('hi!');
  }
}

// Bad
class hello_world {
  say_hello() {
    alert('hi!');
  }
}
```

#### ◆ テンプレートエンジン

![](http://haml.info/images/haml.png)

[Haml](http://haml.info/)を利用します。

すでにerbで開発をしている方は [erb2haml](https://github.com/dhl/erb2haml) を使ってhamlに一括置換することができます。

[参考](https://qiita.com/m_doi/items/1f01fd2b1a52c2c43f1f)


##### ▲ スタイルガイド

'='の後には必ず半角 space を 1 つ入れてください。

```haml
-# Good
%p= @variable

-# Bad
%p=@variable
```

#### ◆ スタイリング

![](https://dynamicimagesfr-v2b.netdna-ssl.com/product_class_external_product/sass.png)

SASS（SCSS）で記述します。

CSS のフレームワークとしては[Bootstrap 3](http://getbootstrap.com/)（Bootstrap4でもOK）を利用します。


##### ▲ スタイルガイド

[Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.xml)に準拠します。

### ■ ソースコードの管理について

![](http://kykamath.github.io/images/github.png)

[GitHub](https://github.com/)を利用します。

実装を行わない方も issue の登録等でレポジトリを閲覧できる必要がありますので、アカウントを持っていない場合は作成してください。

また、セキュリティレベル向上のためアカウント作成後に[二段階認証](https://help.github.com/articles/about-two-factor-authentication/)を有効にしてください。


#### ◆ issue 登録時に設定する項目

##### 件名（Title）

長すぎず、完結に。

```
例). XXXにパスワードリマインダの機能を実装する
```

##### 本文（Comment）

issue を見た人間が開発に取り組めるように、情報が多すぎる位でも問題ありません。
.github/ISSUE_TEMPLATE.md は以下の通りです。

```markdown
## WHAT - 何を作るのか？

例. コレをアレしたらソウなるようにする

## WHY - 何故作るのか？

例). KPI の新規作成

## HOW - どうやって作るのか？

例). KPI の新規作成

## 参考 URL

* [すごく参考になるページ](https://www.google.com)
* [ちょっと参考になるページ](https://www.yahoo.com)

## 参考資料

添付ファイルを参照（ある場合は）
```

テンプレートの設定はこちらを参考にしてください。
[参考](https://github.com/sagaekeiga/pushrequest-on-boarding-for-reviewee/tree/master/.github)

##### レビュー者（Reviewer）

レビューして欲しい人間のアカウントを指定してください。

### ■ 作業開始から終了まで

基本的に git-flow の流れに則った形で作業を進めていきます。

参考 : [Understanding the GitHub Flow](https://guides.github.com/introduction/flow/)

* issue に作業内容を登録
* 作業用ブランチ作成
* 実装作業
* GitHub へ作業用ブランチを push
* プルリクエストの作成
* 実装者以外のレビュー
* （レビューで修正の指定がある場合は修正後、再度レビューを依頼）
* 本ブランチ（主に master）へのマージ

プロジェクトメンバーが増えてリリース phase を踏む形にシフトする際はタイミングをみて Git-Flow へ移行していきます。

#### ◆ 利用するブランチ

初期開発完了（受託開発であれば納品まで。サービスであれば初期ローンチまで）は master ブランチを merge 先のブランチとします。

issue の対応を行う際には GitHub-Flow に則り「features/your-task」のような形で新しく master からブランチを作成して作業を開始してください。

1 つのブランチで複数の issue を対応しても問題ありませんが、多く詰め過ぎると merge が面倒になるので最大 3 つの issue を目処にしてください。

![](http://joefleming.net/images/posts/git-flow-timeline.png)

#### ◆ ローカルでの merge について

作業用ブランチに master を merge するタイミングなど、ローカルで merge 作業を行う際には必ず「--no-ff」を指定してください。

```shell
# masterブランチを自分の作業用ブランチにmergeする場合
git merge master --no-ff
```

[参考](https://qiita.com/nog/items/c79469afbf3e632f10a1)

#### ◆ プルリクエストの作成

作業用ブランチでの作業が完了したら、master ブランチに対してプルリクエストを作成してください。その上で Slack 上のプロジェクト用チャネルで

```
@reviewer pull-request-url

レビューお願いします。
```

のような形で Slack 上で声をかけてください。

（複数のプロジェクトが同時に進行しているため、GitHub 上の作業が流れてしまうのを防ぐためです）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/124461/c4baa76f-1e01-4ddc-da8e-a18816b400df.png)


プルリクエストもテンプレートを用意しています。

```markdown
## このプルリクエストは何なのか？

## どうやってテストすればいいのか？

## どうやって実装したのか？

## スクリーンショット

## 質問事項
```

参考 : [Pull request templates make code review easier](https://quickleft.com/blog/pull-request-templates-make-code-review-easier/)

#### ◆ WIP pullrequestの作成

実装する前にWIP pullrequestを作成してください。

レビュイー・レビュワーが作業を視覚的に確認することができます。

[参考](https://qiita.com/numa08/items/b676e38e3dbabfd39d18)

#### ◆ issue の完了

git で commit 時のメッセージとして「fixed #000」と入れておいてください。

こうしておくことで、master に merge された時点で issue が自動的に close されます。

自動的に issue を close したくない場合には、「#000」とだけ書いておけば issue に関連づけられます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/124461/3409b90a-ab5b-2c31-ee74-11087485886b.png)


### ■ テストコードについて

Rails のプロジェクトであれば rspec を利用します。ほとんどのプロジェクトでは原則モデルの unit テストだけで十分です。

継続して案件が進む場合には必要に応じて追加します。また、以下のものについてはリリース前までに書いておいたほうが幸せになれることが多いです。

* 決済機能
* API

### ■ コメントについて

クラス単位でのコメントは最小限に（そもそもクラス名を見てその役割が分からないのはおかしいので）とどめる形で構いません。

関数単位でのコメントは

* その関数が行っていること
* 引数の説明
* 戻り値の説明
* その他補足事項

を記述するようにしてください（以下の例を参照）。

```ruby
#
# push-requestに関する処理を記述する
#
class PushRequest

  #
  # 社員に給料を支払う
  #
  # 何の変哲もないアクションです。
  #
  # @TODO 通貨が変わった場合はどうする？
  #
  # @param [User] user 給料を支払うユーザー
  # @param [Integer] price 支払い金額
  #
  # @return [Boolean] 支払い処理に成功したらtrue、失敗したらfalse
  #
  def paySalary(user, price)
    # ...
  end
end
```

### ■ ドキュメンテーションについて

設定や備考録等、対象プロジェクトに関するドキュメントは GitHub の Wiki にまとめてください。

無理やり 1 ページに納める必要はないので、Home ページからリンクを貼る形で機能/項目単位でページを作成して問題ありません。

### ■ Herokuの導入

ステージング環境にherokuを導入しましょう。
こうすることによって本番環境への移行がスムーズになります。

オートデプロイ機能を利用するとmasterにmergeした段階で自動的にherokuに反映されるので設定することをおすすめします。

### ■ CircleCIの導入

CircleCIの導入をおすすめします。
導入することでテストを自動化することができます。

[参考](https://qiita.com/noboru_i/items/7d300eb63ae667bf8dc2)

設定ファイルのテンプレートを用意しているのでカスタマイズしてご利用ください。
注: `rubocop `, ` rails_best_practices  `, ` brakeman  `（Gem）のインストールを事前に行ってください。
[テンプレート](https://github.com/sagaekeiga/pushrequest-on-boarding-for-reviewee/tree/master/.circleci)


### ■ 参考Gem

現場で使われるGemを用意しました。
中身を確認してぜひご活用ください。

[参考Gem](https://github.com/sagaekeiga/pushrequest-on-boarding-for-reviewee/blob/master/Gemfile)

### ■ わからない（実装できない）ところがあったら？

WIPのpullrequestを作成してわからない内容を書いてください。
※ テンプレートを使ってください。

[参考](https://github.com/sagaekeiga/pushrequest-on-boarding-for-reviewee/pull/1)


▼▼▼▼▼ テンプレート ▼▼▼▼▼


### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

### 発生している問題・エラーメッセージ

```
エラーメッセージ
```

### 該当のソースコード

```ここに言語名を入力
ソースコード
```

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。


pushrequest Rule

はじめに

レビューの受け方について

■ レポジトリへの招待

続きを読むには単価診断を受けてください（30秒）