EagleLand

一歩進んだHTML/CSS/JSを目指すために

Published at 2013-08-01

「なんとなく書きたくないけど、どう意識してコーディングしていけばいいのかわからない…。それを解消するためのツールがあるので、紹介する。

HTMLInspector

こちらはHTMLを解析して悪いところを指摘してくれるツール。たぶんガイドラインとかそれぞれあると思いますが、基本的にはコレに沿ってもいいかと。スクリプトを差し込んで実行すると、指摘事項がconsoleに出力される。githubのリポジトリからダウンロードするか、bowerで落としてくるか。

$ bower install html-inspector

次に、解析したいページに以下のコードを埋め込む。

<script src="path/to/html-inspector.js"></script>
<script> HTMLInspector.inspect() </script>

HTMLInspector.inspect()には引数を与えられる。設定を渡すことでどういう解析を実行するかを指定できる。

デフォルトだと以下のようになっている。解析ルールの追加などは都度更新されていくと思うので、公式ドキュメントを参照して欲しい。

{
  useRules: null, //(Array) 解析のルールの指定
  domRoot: "html", //(selector | element) 解析を開始するルート
  exclude: "svg", //(selector | element | Array) 解析の対象としない要素を指定
  excludeSubTree: ["svg", "iframe"], //(selector | element | Array) 解析の対象としないサブツリー要素を指定
  onComplete: function(errors) {//(Function) 解析完了時のコールバック
    errors.forEach(function(error) {
      console.warn(error.message, error.context)
    })
  }
}

HTMLInspectorをGruntで実行出来たらいいのかなとか、むしろなぜそうなってないのか一瞬考えたけど、JavaScript側でテンプレート持ってたら無理（PhantomJSはさむとか？）かとか、サーバーサイドで動的にHTMLを返していると面倒くさいな、むしろそれでこういうスクリプト埋め込んでもらう形式なんだろうな、と。

それでも開発時にしか必要のない2行なので、ChromeのExtensionにしてみた。

これで一応、解析したいページを好きなタイミングで解析できるようになったと思う。inspect()メソッドに渡す引数はDevToolsのパネルで編集・指定できるようにした。ChromeExtensionなら導入はそれなりに楽かと。

CSSLint

こちらはNicole SullivanとNicholas C. Zakasが作った、CSSのlintツール。

Node.jsで実行する。

$ npm install -g csslint

$ csslint target.css

都度ターミナルから実行するのもアレなので、Gruntなどで自動化するのが一般的かと思う。

インストールはこちら。

$ npm install grunt-contrib-csslint --save-dev

Gruntの使い方はこことかここを見ていただけると。こちらもlintの方針を指定することができるけど、デフォルトで注意される内容を直すだけでもだいぶキレイになる。

JSHint

最後にJavaScriptのチェックツール。こちらも前述のCSSLintと同様のことが言えるので、Gruntと一緒に紹介してしまう。

JSHintのインストール。

$ npm install -g jshint

「非推奨プロパティを使うな！」とか比較演算子の使い方のあたりを指摘してくれる。何をチェックするしないの指定はコマンドライン引数でもできるが、.jshintrcという設定ファイルで一括指定可能。さらにこの.jshintrcをGruntと連携させるなりするのがいいかと。Gruntが公式で配布しているモジュールのインストールはこちら。

$ npm install grunt-contrib-jshint --save-dev

ルールセットは.jshintrcで行う他、gruntfile.jsのタスクのオプションにも指定することが出来る。

grunt.initConfig({
  jshint: {
    options: {
    curly: true,
    eqeqeq: true,
    eqnull: true,
    browser: true,
    globals: {
      jQuery: true
    }
  }
});

gruntfile.jsへの指定はこのあたりを参考に。

意義とか

テストなどにも同じ事が言えるが、こういったこと継続的にやることが重要かと思っている。その点、メンテナビリティとポータビリティなどを考えてpackage.jsonだけで済むGruntが最有力候補になるかと。

こちら@t32k氏が作成したフレームワークだけど、Grunt周りやcssの方針など参考になる（@t32k氏にはH:inspectorのアイコンを頂いた）。JSHint、CSSLintに加えて、grunt-imageoptimやgrunt-kssなども一緒に導入可能になっており、画像の最適化やスタイルガイドの作成も自動化できるようになっている。

業務でプロジェクトを幾つか経験したけど、最初の設計と継続的リファクタリングが如何に大事であるかを痛感していて、特に運用が大変なプロジェクトだと、どうしてもフロントエンドのコードが犠牲になりがち。それでも、 ディベロッパーは理性を保ってコードを清潔に保つ努力をしていかなければならない と、思う。

リファクタリングしてコードを修正するのは、スクラッチで開発していくこととは比較にならないくらい難しい。ましてや稼働中のサービスに一気に手を入れるのは非常に勇気のいる作業。ひとつひとつの蓄積（ある種我慢の蓄積かもしれないけど）が、

につながると、思ってる。

タイトルと URL をコピーしました