概要

この記事は、Circle CIで変更のあったファイルのみを静的解析する方法を記載しています。

結論はコチラなので、既に手順が分かる人は飛ばしてください。

変更箇所のみの解析は、以下の場合などに有効です。
・既にあるプロジェクトに静的解析ツールを導入する場合
・対象ファイルが多くて解析に時間がかかる場合

Circle CIとは

Circle CIとは継続的インテグレーション(CI)のためのクラウドサービスです。
Gitレポジトリにpushするとビルド・テスト・デプロイを自動で行うなどしてくれます。

静的解析とは

静的解析(Lint)とは、実行ファイルを実行することなく品質検証する手法のことです。フォーマッターと併用して使用したりします。

今回導入する静的解析ツールはESLintです。
パッケージ管理ツールnpmは設定済みとします。

手順

静的解析ツール(Linter)の設定

1. インストール

チームで開発するためにパッケージをローカルインストールします。
CLI 環境構築グローバルインストールとローカルインストールの違いについて

$ npm install --save-dev eslint

2. エイリアスの設定

パッケージをローカルインストールした時は、実行時のパス指定が面倒なためタスクランナーにエイリアスを登録します。
package.jsonのscriptsに以下のように追記します。

package.json

{
    "scripts": {
        "eslint": "eslint"
    }
}

3. 動作確認

以下のコマンドでLintが実行できることを確認します。

$ npm run eslint path/to/file.js

出力結果

> @1.0.0 eslint /xxx/xxx
> eslint "file.js"

Cricle CIの設定

Circle CIとGitの連携は設定済みとします。

1. 設定ファイルを書く

.circleci/config.ymlを作成し、設定を記載します。

circleci/config.yml

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:7.10

    steps:
      - checkout

      # Linter含むパッケージをインストールする
      - run: npm install

      # 差分のあるjsファイルのみLintを実行する
      - run: 
          name: js lint
          command: git diff --name-only --diff-filter=ACMR origin/develop..origin/${CIRCLE_BRANCH} -- '*.js' | xargs -r npm run eslint

2. 動作確認

適当なxxx.jsを作成し、コミットしたのちにリモートにプッシュします。
ターミナルでも以下のコマンドを打ち、差分ファイルのみ表示されることを確認します。

git diff --name-only --diff-filter=ACMR origin/develop..origin/${CIRCLE_BRANCH} -- '*.js'

出力結果

Exit code: 0
#!/bin/bash -eo pipefail
git diff --name-only --diff-filter=ACMR origin/develop..origin/${CIRCLE_BRANCH} -- '*.js' | xargs -r npm run eslint
> @1.0.0 eslint /xxx/xxx
> eslint "xxx.js"

最後に、Circle CIの画面でプロジェクトのジョブを確認し、Successと表示されれば成功です。

コマンドの説明

.circleci/config.ymlの最後のコマンドについて解説します。

git diff --name-only --diff-filter=ACMR origin/develop..origin/${CIRCLE_BRANCH} -- '*.js' | xargs -r npm run eslint

git diff BRANCH1..BRANCH2：ブランチ同士の差分を取ります。
--name-only：ファイル名のみを取得します。
--diff-filter=ACMR：A(追加)/C(コピー)/M(変更)/R(名前変更)の操作があったファイルのみを取得します。
-- '*.js'：対象ファイルであるjsファイルのみを取得します。
${CIRCLE_BRANCH}：現在の作業ブランチを取得します。
xargs：前のコマンドの結果を引数として後ろのコマンドに渡します。
-r：引数に何も結果がない場合にスキップします。(Linuxのみ)

以上です！

参考

ESLint をグローバルにインストールせずに使う - Qiita
CircleCI2入門③ CirlceCI上でLintを実施する | Yuuの悠々自適Blog
ピクシブ百科事典に静的解析のCIを導入した話 - pixiv inside

最後に

~~次回はPHPの設定の記事を書く予定です。~~ 書きました。
[PHP]Circle CIで変更箇所のファイルのみを静的解析(Lint)する② - Qiita
記事に間違いや不明な点があれば遠慮なくご指摘ください。

[JavaScript]Circle CIで変更箇所のファイルのみを静的解析(Lint)する①

概要