(cache) 静的コード解析の設定とAtomへの導入手順

静的コード解析をチームに導入することで、必然的に規約に則ったコードが書かれるため、ソフトウェアの品質を保つことができるようになります。この記事では、Ruby、JavaScript、SCSSにおける静的コード解析の設定方法と、Atomへの導入手順について解説します。

静的コード解析とは

静的コード解析とは、広義の意味では「アプリケーションを実行することなくコードを解析すること」です。一般的には、これを踏まえ「解析したコードが規約に準拠しているかどうかをチェックし、必要に応じて警告を出す」処理を静的コード解析といいます。

チームで開発すると、どうしてもメンバーによってコードの書き方が変わってきます。かといってコードレビューで些細なことを指摘し続けるのも不毛ですし、人間なのでチェック漏れも生じます。

静的コード解析を導入すると、たとえばエディタでの保存時に、規約に則った記法でなければ警告を出してくれます。結果として、自然とコードの書き方が統一されるようになります。

解析する言語

この記事では、次の3つの言語に関する静的コード解析について解説します。

Ruby
JavaScript
SCSS

Linterをインストールする

各言語で静的コード解析を行なうツール（Linter）として、それぞれ次のものを利用します。

Ruby: RuboCop
JavaScript: ESLint
SCSS: scss-lint

それぞれのインストール方法は次のとおりです。 RuboCopとscss-lintはgem、ESLintはnpmでインストールします。

$ gem install rubocop
$ gem install scss_lint
$ npm install -g eslint

設定ファイル

Linterを効果的に利用するには、それぞれのLinterに関する設定ファイルを適切に作成する必要があります。以下に、各Linterの設定について示します。

基本的には、各Linterのベストプラクティス的な設定を採用しつつ、開発を進める上で細かいルールを上書きしていけばよいと思います。

RuboCop

RuboCopの基本設定はruby-style-guideをベースに行なわれています。

まずはそのままで開発を進めてみて、変更したいルールがあればデフォルトの設定ファイルを参考に.rubocop.ymlを更新していきます。

以下に設定例を示します。

.rubocop.yml:

# ドキュメントコメントのないクラス定義を許可する
Style/Documentation:
  Enabled: false

# !!演算子の使用を許可する
Style/DoubleNegation:
  Enabled: false

ESLint

ESLintの設定は、Airbnbが提唱する規約を採用し、チームごとにルールを上書きしていけばよいと思います。

まず、必要なパッケージをインストールします。

$ npm install -g eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y

あとは、設定ファイルでAirbnbの規約を継承すればいいです。

.eslintrc.yml:

extends: airbnb

scss-lint

scss-lintも、標準で基本的な設定は行なわれています。必要に応じて、ドキュメントや標準の設定ファイルを参考に上書きしていきましょう。

以下に設定例を示します。

.scss-lint.yml:

linters:
  # カラーコードを変数に格納せずに使用することを許可する
  ColorVariable:
    enabled: false

  # IDに対するスタイルを許可する
  IdSelector:
    enabled: false

Atomパッケージ

以上の静的コード解析をAtomで利用するには、以下のパッケージをインストールします。

備考

CIに組み込む

テキストエディアでの保存時などにチェックするのももちろん効果的ですが、リモートリポジトリへのプッシュ時に自動で解析するよう設定し、かつ「パスしなければmasterにマージできない」といったルールを設ければ、コードの品質を強制的に保つことができます。

余裕があれば、ぜひやっておきたい設定のひとつです。

自分用のルールをつくる

各Linterは、作業中のディレクトリ下に.rubocop.ymlなどの設定ファイルがない場合、ユーザのホームディレクトリまで遡って設定ファイルを探し、見つかった場合にそれを適用します。

たとえばAtomでLinterを一度有効にすると、設定ファイルがない場合は標準のルールに則って警告を出すようになります。これを避けるため、自分用に比較的緩めな設定ファイルをホームディレクトリにつくっておき、プロジェクトごとにそのルールに従って開発する、という方法がおすすめです。

おわりに

静的コード解析は、一度準備すればプロジェクトでも個人でもよいコードを書ける習慣が身につきます。導入がまだの方は、ぜひ参考にしてみてください。

静的コード解析の設定とAtomへの導入手順