使えるコードレビューツール

コードレビューツール

コードレビューツールとは、文法・バグ・コーディングスタイルを自動で分析するツールです。
代表的なものとしてRubocop、ESlintなどがあります。

Eslint

EslintはJavascriptの静的コード解析ツールです。Javascriptで書かれたコードを解析し、明らかなバグ・不適切なコーディングスタイルを指摘してくれます。
参考サイト
Eslint公式(英語)

Rubocop(ルボコップ)

RubocopはRubyの静的コード解析ツールです。「インデントが揃っていない」 「無駄な改行・スペースがある」などの指摘をRubyStyleGuideに基づいて行ってくれます。

Rubocopの導入

Gemfile

#省略
group :development do
  gem 'web-console', '>= 3.3.0'
#省略
  gem 'bullet'
  gem 'rubocop', require: false   #追加
end
#省略

ターミナル

$bundle install

Rubocopを実行
ターミナル

$bundle exec rubocop

大量の出力が得られてると思います。
現時点でRubocopが検知したコード規約違反です。
Rubocopは、デフォルトでRubyのコードの書き方についてのルールを保持しています。例えば、文字列はすべてシングルクォーテーションで囲まなければならない、などです。こうしたルールはすべて、文法的にはエラーにはならないもののコードの可読性を下げるという理由で設定されています。
Rubocopの設定ファイルを作成することで、ルールをカスタマイズすることができます。

設定ファイルの作成

設定ファイルは、.rubocop.ymlという名前にする必要があります。このファイルをアプリ名のディレクトリに作成し、以下のように編集します。なおテキストエディタでファイルを作成すると警告が出る可能性がありますが、無視して作成してしまって構いません。

.rubocop.yml

AllCops:
  # 除外するディレクトリ（自動生成されたファイル）
  # デフォルト設定にある"vendor/**/*"が無効化されないように記述
  Exclude:
    - bin/*
    - db/schema.rb
    - node_modules/**/*
    - db/migrate/*
    - vendor/**/*
  # Rails向けのRails copsを実行。"rubocop -R"と同じ
  Rails:
    enabled: true

# "Missing top-level class documentation comment."を無効
Style/Documentation:
  Enabled: false

# "Prefer single-quoted strings when you don't need string interpolation or special symbols."を無効
Style/StringLiterals:
  Enabled: false

# "Line is too long"を無効
Metrics/LineLength:
  Enabled: false

#'frozen_string_literal: true'を無効
Style/FrozenStringLiteralComment:
  Enabled: false

再度Rubocopを実行すると先ほどよりも規約違反が少なくなっていると思います。
ターミナル

#$bundle exec  rubocop

ですが、まだ規約違反が多いと思います。なので次は、現在の違反を徐々に修正していきます。順番としては
1.現在の違反をすべて記録した上で、いったん違反では無いことにする
2.記録した違反のうち1つを、違反していることに戻す
3.その違反を解消する
1を行ったら、2と3を繰り返すことで徐々に規約違反を減らしていきます。それでは、まず1から行っていきます。
以下のコマンドを実行すると、現在の規約違反がまとめられた.rubocop.todo.ymlというファイルが生成されます。
ターミナル

$bundle exec rubocop --auto-gen-config

生成された.rubocop.todo.ymlは以下のような中身になっています。

# This configuration was generated by
# `rubocop --auto-gen-config`
# on 2018-05-31 14:11:52 +0900 using RuboCop version 0.56.0.
# The point is for the user to remove these configuration records
# one by one as the offenses are removed from the code base.
# Note that changes in the inspected code, or installation of new
# versions of RuboCop, may require this file to be generated again.

# Offense count: 7
# Cop supports --auto-correct.
# Configuration parameters: Include, TreatCommentsAsGroupSeparators.
# Include: **/*.gemfile, **/Gemfile, **/gems.rb
Bundler/OrderedGems:
  Exclude:
    - 'Gemfile'

# Offense count: 5
# Cop supports --auto-correct.
# Configuration parameters: EnforcedStyle, IndentationWidth.
# SupportedStyles: with_first_parameter, with_fixed_indentation
Layout/AlignParameters:
  Exclude:
    - 'app/models/user.rb'
    - 'config/initializers/generators.rb'
    - 'spec/controllers/messages_controller_spec.rb'

#省略

その時点で違反している規約自体をすべて無効にするように書かれます。同時に.rubocop.ymlに以下が追記されます。

.rubocop.yml

inherit_from: .rubocop_todo.yml

これは、.rubocop.ymlに.rubocop.todo.ymlの内容が書かれているのと同じことにしてくれる、という記述です。なので、もう一度rubocopを実行すると、違反が無い状態になるはずです。
ターミナル

$bundle exec rubocop

次に、手順2です。現在.rubocop.todo.ymlにある違反回避の記述の一つを削除します。
削除するのは以下です。

.rubocop.yml

Bundler/OrderedGems:
  Exclude:
    - 'Gemfile'

再度rubocopを実行すると、規約の警告が復活します。
ターミナル

$bundle exec rubocop

これは、Gemfileのgroup do ~ endのグループの中に書いたGemはアルファベット順に並べる、という規約に対しての違反です。
これを手動で修正しても良いのですが、少し面倒です。Rubocopには、ある程度の規約違反は自動で修正してくれる機能があります。この機能を利用するには、実行時に-aオプションを利用します。以下のコマンドを実行します。
ターミナル

$ bundle exec rubocop -a

すると、Gemfile内のgemの並びが、アルファベット順になります。
このように、.rubocop.todo.ymlから違反を消しrubocopを実行 → 修正という流れで修正作業を進めていきます。ちなみに、-aオプションが利用できるかどうかは、.rubocop.todo.ymlの各設定の上にコメントアウトで「# Cop supports --auto-correct.」と書かれているかどうかでわかります。書かれていれば、-aオプションを利用することができます。
必要なコードレビューツールをまとめて導入したい際は、Siderを活用することで簡単に設定ができます。
Rubocop 公式(英語)

Sider

Siderはコードレビューツールを一括で導入できるサービスです。Ruby、Javascript、Python、Goなど幅広い言語に対応しています。SiderはGithubのリポジトリ毎に導入することができ、プルリクエストが作成されると自動でコードレビューを行ってくれます。パブリックリポジトリへの導入は無料です。
導入の流れ
①SiderにGithubでログインする
Sider
Githubアカウントを使ってログインします。
②リポジトリを追加する
ログイン後、Siderを導入したいリポジトリを選択します。
ヘッダーから「リポジトリ追加」ボタンをクリックしてください。
連携したGithubに登録されたリポジトリの一覧が表示されるので、追加したいリポジトリをクリックしてください。
追加するリポジトリで使用している言語・フレームワークをチェックし、「自動コードレビューを開始する」ボタンをクリックしてください。これで、該当するリポジトリでプルリクエストを作成すると、自動でコードレビューが行われるようになります。
※解析ツール、解析結果の言語など、さらに詳細に設定したい場合、サイドバーの「プロジェクト設定」から設定を変更できます。
③プルリクエストを作成する
実際に自動レビューの流れを体感するため、プルリクエストを作ります。
プルリクエストが作成されると、コードの解析が行われます。
解析終了後に問題のあったコードの一覧が確認できます。
④レビューを受けた場合の修正方法
解析で問題のあったコードを修正して、もう一度プッシュします。
指摘されたものの、個人で問題がないと判断したコードは、「クローズ」することができます。
全てのコードが修正もしくは「クローズ」されると、解析結果がグリーンになります。
Sider 公式ブログ Ruby on Railsタグのついた記事一覧