CREATOR BLOG

StyleStats+αでCSSを継続的にチェックする(4/6追記あり)

2015/04/03
atsuko.a
  • このエントリーをはてなブックマークに追加

こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ)
春ですね!新年度ですね!一年が過ぎるのがどんどん早くなっていく気がします…

今回はStyleStatsというツールを使ってCSSの健康チェックをしたいと思います。
それだけではつまらないので、+αとして健康状態のデータを継続的にJSONファイルに溜めるようにしてみましょう。

ついでに出てきたファイルを使ってD3.jsでグラフを書きます。

もくじ

  • StyleStatsってなに?
  • 使ってみる
  • ファイルに吐き出してみよう
  • おまけ:D3.jsでグラフをつくろう
  • まとめ

StyleStatsってなに?

CSSとは実は非常に脆いものです。
複数人での開発や、大規模案件など、CSSは常に汚染の危機に晒されています。
似たような色をいくつも使っていたり、!importantが乱発されていたり、Sassのネストが深すぎてセレクタ祭だったり……
考えるだけで辛くなりますね。

そこで、CSSの健康チェックが簡単にできるようになるツールを導入してみたいと思います。
こちら!

Node.js謹製のStyleStatsという、CSSの状態チェックツールです。
CUIツールなので黒い画面で動きます。

インストールして、チェックしたいファイルのパスを指定しつつ実行すると↓のようなことがわかります。

  • ファイルのサイズ
  • セレクタの数
  • 使用してる色
  • 宣言の数
  • 使用しているフォントのサイズ
  • IDセレクタの数
  • !important宣言の数
  • gzip後のサイズ

など……。
(詳しくは前述の記事を参考にしてください)

クリーンなCSSを保つ為の指標として利用できそうな数値が詰まっていますね٩(๑❛ᴗ❛๑)۶
さっそく導入してみましょう。

使ってみる

Node.jsということで、Node.jsがインストールされている前提です。(npmも)

インストールして

コマンドを叩くと

こんな感じにつらつらと返してくれます。
150403_02
かんたーん!
オプションで、項目を取捨選択したり、表示形式を変えたりできます。↑はテーブル形式ですね。

タスクランナー用にプラグインもあるようなので、Grunt/gulpへの導入もラクラクです。

せっかくなのでgulpのタスクに組み込んでみましょう。

ファイルに吐き出してみよう

さて、便利なStyleStatsなのですが、基本的にコマンドラインへの出力しかできません
gulp-stylestats-report
このような、JSONファイルで書き出してくれるプラグインがあるようですが健康チェックには継続性がほしいので、
↓のようなタスクをどうにか書いてみることにしました。

  • StyleStatsを実行する
  • 項目はとりあえず全部乗せ
  • JSON形式で取得する
  • ファイルに保存する
  • すでにファイルが存在すれば、後ろに追加する

使用したモジュール

いろいろ使います。

gulp ないと話にならない
stylestats ないと話にならない、その2
stylestats/lib/format stylestatsに同梱されているデータ成形用モジュール
fs File System
ファイルを書き出したり、取得したり、いろいろ操作できる
mkdirp mkdir -pコマンドと同じ動きをする
ディレクトリを作成する
path ファイルのパスを取得したり、書き換えたり、いろいろ操作できる

基本的に全部npmで落としてきますが、「stylestats/lib/format」はstylestatsに含まれるものなので個別に操作する必要はありません。

タスクを書く

ざざざっと、こんな感じ。

タスクを実行すると、こんな感じのJSONファイルが生成されます。

タスクを実行するたびに後ろにデータが連結されていきます。やったね!╭( ・ㅂ・)و ̑̑ グッ
今回はgulpのタスクに入れましたが、ほぼNode.jsのモジュールで動いているのでGruntでも動くと思います(多分)

無尽蔵に貯め続けるのもアレなので、上限を設定し古いものから消していく処理も入れるといいかもしれません。

おまけ:D3.jsでグラフをつくろう

最後に生成されたJSONデータを使ってグラフを生成してみます。
グラフ生成にはD3.jsを使います。
D3.jsについてはこのブログでも何度か取り上げているので、そちらを参考に。

今回は、JSONデータから日付といくつかの項目を拾って折れ線グラフを書いてみましょう。
JSONファイルを生成したフォルダに、描画用のHTMLとJSを設置します。

折れ線グラフの書き方はこちらを参考に…

150403_03
横軸がStyleStats実行の日付、縦軸が数値になっています。
全ての項目を一つにまとめたので、下のほうが大変なことになっていますが…

Ajax通信の関係でローカル環境で見るには仮想サーバが必要ですが、それもgulpのタスクに入れておけば問題なさそうです。

まとめ

簡単ではありますが、CSSのメンテナンスに使えそうなグラフを作ることが出来ました!
CSS Lint等と合わせて使うと更によいのではないでしょうか。

繰り返しになりますが、CSSは非情に脆いです
しかしUI面に関して全面的に責任を持っています。
致命的なエラーが出ることが早々無い分、細かいバッドプラクティスの積み重ねによってCSSはすぐに死にます。

そうならないように、定期的なメンテナンスで健康なCSSを保っていきましょう。
それでは今日はこのへんで!

2015/04/06 追記

この記事の公開後、StyleStats作者の@t32kさんからTwitterでコメントを頂きました。ありがとうございますヽ(=´▽=)ノ


事前に連絡させていただこうかと思ったのですが、Twitterのアカウントが無いので直接ですみません

今回はgulpのタスクに入れたかったことと、データを追記したかったこともありこのような形にしてみました。
Terminal上で、StyleStatsの実行→ファイルに保存は頂いたコメントの通りが一番楽チンですね。

この記事を書いた人

atsuko.aフロントエンドエンジニア

猫派の甘党、胃が弱い系WEB屋。 コーディングしたり、たまにデザインしたりします。

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive