去年の年末くらいから大きなサイトの案件に関わることも増えてきた。1から制作ではなく、途中参加というパターン。
ある程度デベロッパー内で何かしらコンポーネントを作る時の組み方は固まってきているものの、そうでないものは当然出てくる。

その度に感じたのが、「この膨大なスタイルの中で、何を使えば目的の形になるのか分からない。’「今書こうとしてるスタイルって既にあるんじゃないか」ということ。
実際見つからなくて(探すのを諦めて)、こっそりページ特有のスタイルを作ってしまうことも…。

それでは未来に負債を抱えることになってしまう。
あと、なんといっても途中参加者がスタイルを理解するのに時間を要してしまってロスが勿体無い。

スタイルガイドジェネレーターを探す

そこで、前から気になっていたスタイルガイドジェネレーターの導入を試みました。

ググればいっぱい記事が出てくるんだけど、パッと浮かんだのが sc5-styleguide。

sc5-styleguide

スタイル毎にタグが付けれたり、出力されたスタイルガイド側で スタイルの検索 がかけれたり、 スタイルガイド側で色やサイズなどなどスタイルの編集が出来て反映させることも出来る らしい。
ただ、書き方に厳しかったりちょっと重いとか。

最初はコレにしようかなって思ってたけど、書き方に厳しい辺りちょっと抵抗があった。注力すべきはスタイルガイドじゃなくてコードだし。

aigis

あと、ちらっと名前を聞いたaigis。

スタイルガイドのテンプレートにEJS, Jade, Handlebarsなんかが使えて、自由にカスタマイズできる。
スタイルの説明を書く部分がMarkdownなんだけど、最近社内ツールでMarkdown使うものも増えてきたし、きっとみんなこっちの方が書けるでしょって思ってこっちにした。

スタイルガイドジェネレーターを導入

今回はgulpでaigisを導入した。

導入方法は、サイトに書いてあったので簡単に。

CLIとgulpの所に従ってモジュールをインストール。
./node_modules/.bin/aigis init で生成された aigis_config.yml の sourceにスタイルガイドを生成したいファイル(CSSとかSassとかLESSとか)のファイルパスを書いておけば生成してくれました。

ただ、そのままだと生成された方でスタイルが当たらなくて、 aigis_assets/template_ejs/index.ejs (これは選んだテンプレートエンジンによる)にスタイルを読み込ませることで見た目を反映させることが出来ました。

やってみて

導入簡単だし、さっさと入れておけばよかった。というのが感想。

コンポーネントとかよく使うとこは書いておいたほうが便利そうだけど、開発速度と保守・運用を考えるとどこまで書くのかがちょっと考えないといけないところかな