コードレビューというとプログラマ向けの仕組みに感じますが、そんなことはありません。Webデザイナーにとっても役立つケースがあります。例えばCSSはテキストで書かれるものなので差分が取れます。更新部分だけをコードレビューできれば、日々の運用の中でメンテナンス性を維持できます。
CSSを拡張して書けるようにしたSCSSはWebデザイナーの中でも広く使われています。開発の中でSCSSを使われているのであれば、scss-lintを使ってコードをチェックしてみましょう。
scss-lintのインストール
scss-lintはRubygemsを使ってインストールできます。
$ gem install scss-lint
これで scss-lint コマンドが使えるようになります。開発チームで実際に導入される際には Gemfile に追記し、bundlerで管理すると全員で同じバージョンのものを使えるので便利です。
scss-lintの使い方
scss-lintの使い方は簡単で、SCSSファイルのあるディレクトリまたはファイルを指定するだけです。実行すると、解析された結果が標準出力されます。
$ scss-lint app/assets/stylesheets/ app/assets/stylesheets/jobs.css.scss:2:21 [W] HexNotation: Color `#EAEAEA` should be written as `#eaeaea` app/assets/stylesheets/jobs.css.scss:2:21 [W] ColorVariable: Color literals like `#EAEAEA` should only be used in variable declarations; they should be referred to via variable everywhere else. app/assets/stylesheets/jobs.css.scss:4:11 [W] ZeroUnit: `0px` should be written without units as `0` app/assets/stylesheets/jobs.css.scss:12:3 [W] PropertySortOrder: Properties should be ordered background-color, font-family, padding app/assets/stylesheets/jobs.css.scss:14:21 [W] ColorVariable: Color literals like `white` should only be used in variable declarations; they should be referred to via variable everywhere else.
エラー項目の指摘と同時にどう修正すれば良いかも出してくれるのが便利です。
表示結果について
表示結果は --format オプションで変更できます。例えばよくあるエラーをリストアップには Stats を指定します。そうすると以下のように多いエラー順で一覧にしてくれます。
$ scss-lint --format Stats app/assets/stylesheets/ 238 SpaceAfterPropertyColon (across 6 files) 162 SpaceBeforeBrace (across 10 files) 92 ColorVariable (across 8 files) 51 PseudoElement (across 5 files) 50 SingleLinePerSelector (across 9 files)
Files を指定すると単にエラーのあるファイル名だけを標準出力します。
$ scss-lint --format Files app/assets/stylesheets/ app/assets/stylesheets/application.css app/assets/stylesheets/bootstrap-notify.css app/assets/stylesheets/bootstrap-responsive.min.css app/assets/stylesheets/bootstrap-tagmanager.css app/assets/stylesheets/bootstrap.min.css
TAP は一つ一つのエラーを分割し、より細かく内容を出力してください。
$ scss-lint --format TAP app/assets/stylesheets/ | more TAP version 13 1..9514 ok 1 - app/assets/stylesheets/ads.css.scss ok 2 - app/assets/stylesheets/api/ads.css.scss ok 3 - app/assets/stylesheets/api/articles.css.scss ok 4 - app/assets/stylesheets/api/users.css.scss not ok 5 - app/assets/stylesheets/application.css:1:1 Comment --- message: Use `//` comments everywhere severity: warning file: app/assets/stylesheets/application.css line: 1 column: 1 name: Comment ... not ok 6 - app/assets/stylesheets/application.css:23:1 SingleLinePerSelector --- message: Each selector in a comma sequence should be on its own single line severity: warning file: app/assets/stylesheets/application.css line: 23 column: 1 name: SingleLinePerSelector ...
チェックできる内容について
あらかじめ用意されているチェック項目（Linter）は --show-linters オプションで確認できます。
$ scss-lint --show-linters Installed linters: - BangFormat - BemDepth - BorderZero - ChainedClasses - ColorKeyword - ColorVariable - Comment :
設定について
scss-lint の設定は .scss-lint.yml というファイルで行います。例えば以下のような記述になります。
scss_files: 'app/assets/stylesheets/**/*.css.scss'
exclude: 'app/assets/stylesheets/plugins/**'
linters:
BorderZero:
enabled: false
Indentation:
exclude:
- 'path/to/file.scss'
- 'path/to/directory/**'
severity: warning
width: 2
解析するファイルやディレクトリも指定するので、設定ファイルさえ書いておけば scss-lint コマンドだけで済むようになります。そして前述したチェック項目（Linter）ごとに有効/無効を設定したり、除外するディレクトリやファイルを細かく指定できます。
CSSは構造化ができなかったり、変数でまとめて管理するようなことができないためにSCSSやStylusといった拡張言語が生み出されています。それらを使うことで管理しやすくなりますが、それでも継続的に更新していく中で全体のメンテナンス性が悪くなっていくのはよくあることです。そういった事態に陥らないようscss-lintを使ってメンテナンス性を維持するのは大切です。
SideCIはscss-lintに対応していますので、チームで開発されている際にはぜひ導入を検討してみてください。Pull RequestベースでSCSSファイルを検証し、自動コードレビューできるようになります。
無料トライアルも提供していますので、ぜひお試しください。