リポジトリは kubosho/nozomi です。

JSオジサン「俺の話を聞け、5分だけでもいい」 #5でも、この「Nozomi」について話してきました。

その時のスライドが以下になります。JSオジサンなのに CSS の話をしてしまったのはご愛嬌です。

どんなツールか

書いた CSS をより良くするツールを集めて、npm の run-script (もしくは Visual Studio の拡張機能 Task Runner Explorer)で簡単に実行できるようにしたものです。

具体的には以下のツールが現時点(2015/6/29)で使えるようになっています。

• Autoprefixer
  • ベンダープレフィックスを自動的に追加
• CSSComb
  • プロパティの順番を設定ファイルをもとに並び替え
• CSSLint
  • CSS のイケてない記述(例えば !important を使っているなど)を指摘
• StyleStats
  • CSS をさまざまな視点で解析
• clean-css
  • CSS の minify

「Nozomi」という名前の由来は、東條希から取ったものですが、一応「高品質な CSS を書きたいという望み」という意味も込められています。

なぜ作ったか

スライド内にも書いていますが、今関わっているアプリの CSS (正確にはLESS) が、自分が入社してから改善はしてきたのですが、入社当初の試行錯誤しながら書いた部分が微妙に適用しづらかったりして、このままだと負債になる(もしくはすでになっている…かも)と感じ、どうにかしたいと思ったためです。

また、Visual Studio でも Gulp が使いたい！でも書いたのですが Grunt / Gulp を使うことにより、Visual Studio だけで開発を完結できる(わざわざ他のソフトを起動する必要がない)ということも期待して作りました。

ただの npm 上に公開されているパッケージの寄せ集めでは？

「Nozomi はただの npm パッケージの組み合わせでは？」というのは「確かにそうですね」というしかないけど、CSS 関連のパッケージ「だけ」をまとめあげたものとしては自分の観測範囲では他に見当たらない。なので、良いのかなと自分は思います。

— イカ: kubosh0 (@kubosho_) 2015, 6月 26

ver 1.0 に向けて

現在のバージョンは ver 0.5.0 (2015/6/29時点)ですが、現在、自分が関わっているアプリに導入を進めているのと、あとは Sass や LESS などの CSS プリプロセッサーを使った場合のサンプルを追加しようとしています。

つまり、現時点でも十分使えるのですが、利用実績とサンプルコードを増やしてから ver 1.0 になるのかなという思いです。

まとめ

良いツール(自称)なので、使ってみてください。気になるところがあれば Issue や Pull Request をしていただけると大変ありがたいです。Star も歓迎しています！

kubosho/nozomi