スタイルガイドジェネレータ「Flactal」を導入した所感
スタイルガイドジェネレーターであるFlactalを試してみたので第一印象をメモ。
導入は4ステップ
少なくともMacであれば、インストールはnpmさえインストールしてあれば本当に簡単で、ターミナルからいくつかのコマンドを打つだけで完了する。
下記の記事を参考にやってみたら、ものの5分で導入完了。
要するに
- スタイルガイドのためのフォルダをつくる
- フォルダの中でnpm init（package.jsonの作成）
- さらにFlactalをインストール
- グローバル領域にもFlactalをインストールする
以上の流れである。
とりあえず始めるのは本当にカンタン
あと覚えないといけないのは
flactal.js というFlactalの基本設定を行うためのファイルの書き方と、Flactalディレクトリの中の基本的な構成くらいで、それさえ覚えればとりあえずスタイルガイドの作成に着手することができる。すぐにローカルでスタイルガイドをプレビューする環境も整えることができる。簡単。
アセットをどう扱うかが大きな問題
問題になるのは、スタイルガイドに、コンポーネントに関係するアセット（CSSやJSなど）を記述するかどうかだ。
コンポーネントのディレクトリの中に アセットを入れれば、それがスタイルガイドの各コンポーネントペーに表示されるのだが、各コンポーネントに関係するCSSやJSをわざわざ抜き出して書くのもちょっと面倒である。
Sassを使えばコンポーネントごとにCSSを書き、これをひとつのCSSにまとめてコンパイルすることも可能だが、CSSは再利用性が高いものほど、コンポーネント独自のCSSとして表示するのが難しくなるような気がする。
おもえばBootstrapやFoundationのドキュメンテーションでも、コンポーネントのCSSやJSについてはいちいち記述されていないわけで、HTMLと外観さえ確認できればよいのかな、という気もする。
とりあえずはアセットはローカル開発用のものを直接読み込んで、スタイルガイド用のアセットは無視する感じでいこうかなと思っている。
