スタイルガイドは取り入れやすく捨てやすくが大切

スタイルガイドの作成にはfractalを使っている。

ずっとHologramをつかっていたけど、fractalに乗り換えたという記事（スタイルガイドジェネレーターはfractalがおすすめ！メリットとデメリットは？）を書きました。

fractalをどういう風に使うのがよいか、ある程度自分の中で考えが固まりました。

fractalのディレクトリ構成はくせがある

これはfractalがスタイルとテンプレートと設定を一つのディレクトリで管理するというコンポーネント思考を持っているからです。

たとえばボタンのスタイルガイドを作ろうとした時、下記のようなファイル構成になる。

— button
|— button.css(scss)
|— button.hbs
|— button.config.json(yml)

通常開発するときはcssなりscssをこんな形で配置することはないと思う。

つまり一から作るプロジェクトでも、すでに運用中のプロジェクトでも、fractalを使うためのディレクトリ構成になってしまう。

使っている間は良くてもfractalを捨てた時に不自然なディレクトリになり、途中から入れるにしてもこのディレクトリ構成に作り直す必要がでてしまう。

スタイルガイドを取り入れやすく、捨てやすく

唯一我慢しなければいけないのはcss(scssやless)のコードをドキュメントに載せないこと。

fractalではスタイルガイドでHTMLはもちろん、スタイルシートのコードも見ることができる。

ただしスタイルシートのコードを見るには先に書いたfractal特有のディレクトリにする必要が出てくる。

スタイルガイドのコードを完全に分離する

— root
|— src/
　　|—— styles/
　　　　　|———— style.scss
　　|—— scripts/

こういうディレクトリ構成でたとえばrootなりsrcなりにstyleguideというディレクトリを切って、そこにfractalで使うコードを入れるようにすれば完全に分離することができる。

分離することで運用中のプロジェクトにもすぐに取り入れることはでき、スタイルガイドを捨てたくなってしまった時に、styleguideのディレクトリだけまるごと消してしまうことができる。

fractalの設定を変更する

fractal.components.set('path', __dirname + '/styleguide'); //スタイルガイドのコードがあるディレクトリ

このディレクトリにテンプレートファイル(hbs)、設定ファイル(json or yaml)を配置することで通常どおりスタイルガイドを生成することができる。

fractalではディレクトリ内にcssやscssがある場合にのみ、スタイルシートのコードもスタイルシートガイドが参照できるけど、参照の必要がなければ別に配置しなくてもよい。

このディレクトリ構成にすることで、スタイルガイドのコードだけを完全に切り離すことができる。

スタイルガイドは導入した後を考える

フロントエンドとサーバーサイドの開発者が別れている時にも、サーバーサイドのエンジニアは定義されているUIがHTMLと一緒に見られるのはメリットだと思う。

ただスタイルガイドは見るだけの人は良いけど、運用する側は結構なコストがかかる。

正直スタイルガイドの運用はかなりめんどくさい。

運用が進み次第に手入れされないスタイルガイドと最新のスタイルシートのプロジェクトができることもある。

更新されないスタイルガイドは混乱のもとなので、それならば無いほうがマシとも言える。

そんな時にスタイルガイドを捨てる選択が生まれ、いらなくなったスタイルガイドのコードだけを捨てることができるのは大きなメリットだと思う。

スタイルガイドは作ってみないと運用できるかわからない

先にも書いたようにメンテするのは大変。

メンテできなくる理由は

• スタイルガイドの工数を確保しなければならない。
• 作ってみたけど、あまり見られなくなった。
• デザイン段階でコンポーネントがうまくされていない。

実際に取り入れてみたもののメリットよりもデメリットのほうが大きくなるなんてことは、運用してみてわかること。

こういう状況でスタイルガイドは見やすくわかりやすいのはもちろん大切だけど、取り入れやすく、捨てやすいものがいいんじゃないかと思う。