【2018年】 今でも現役！スタイルガイドジェネレータ3選

[@shwld](https://qiita.com/shwld)さんの[スタイルガイドジェネレータを比べてみた](https://qiita.com/shwld/items/d41ba36e9fd2e636c723) という記事を読んで非常に良い！わかりやすい！とおもったのですが、古くなってしまっていたため、自分でまとめ直しました。

## スタイルガイドジェネレータとは？
> スタイルガイドとは、デザインする前の要素やグラフィック、デザイナーやエンジニアが従うべきルールなどを集めたものです。スタイルガイドがあれば、バラバラのWebサイトの部品に一貫性を持たせて、最終的に一体感のある体験を作り出すことができます。
引用元 : [Webデザインのスタイルガイドの作り方](https://uxmilk.jp/67670)

今回でいうスタイルガイドは、**HTML / CSSのルール・規約を集めたもの**を指します。
スタイルガイドジェネレータはそのスタイルガイドを生成するツールのことを指します。
bootstrapやbulma.ioのドキュメントのようなものを、自分の書いたHTML / CSSで作ることができます。

以下は一例ですが、このようにプレビューやHTMLのコードが書いてあるものが多いです。(スタイルガイドジェネレータは[frontnote](https://github.com/frontainer/frontnote)を使っています。)
<img alt="スタイルガイドの例" src="https://qiita-image-store.s3.amazonaws.com/0/142322/a5c1f646-d22e-e998-d678-6bd7cd7699e4.png">


## スタイルガイド導入のメリット・デメリット
どのような場面でスタイルガイドを導入するのが最適なのか、わからない人のためにざっくりですが、メリットとデメリットを書いておきます。

### メリット
* 共通認識をもって制作を進めることができる。
* コードの統一化がしやすい。
* CSSが苦手な人も、HTMLをコピーしてスタイルを当てることができる。

### デメリット
* イレギュラーな改修が多い場合でも、スタイルガイドの制約に縛られてしまう。
* スタイルガイドジェネレータのバージョン非対応などの問題が発生する可能性がある。

つまり、**大規模なWebサイト**を**複数人**で作成するときに、スタイルガイドが大活躍します！

## スタイルガイドジェネレータの選び方
スタイルガイドジェネレータを調べた際に、10個以上のスタイルガイドジェネレータを見つけましたが、冒頭でも述べた通り古くなってしまっているものが多いです。
そのようなスタイルガイドは、Node.jsなどのバージョン違いによって使えなかったりするかもしれないため、**最終更新日**をしっかり確認して導入しましょう。


## オススメのスタイルガイドジェネレータ

私は以下の点を条件にスタイルガイドを見ていきました。

* GitHubのスター数 1000以上
* 更新が一年以内

条件を満たしていた、**fractal**、**sc5-styleguide**、**kss-node**に関してまとめていきます。

| 名前 | github スター数 | 最終更新日 | sass(less) | 書き方 |
| :--- | :--- | :--- | :--- | :--- | :--- | 
| [Fractal](https://fractal.build/guide/) | ★1412 | 1ヶ月以内 | ○ | 別ファイル |
| [sc5-styleguide](http://styleguide.sc5.io/) | ★1243 | 4ヶ月前 | ○ | コメントアウト |
| [kss-node](https://kss-node.github.io/kss-node/) | ★1397 | 2ヶ月前 | ○ |   コメントアウト |

## fractal
<img alt="fractalのデモ" src="https://qiita-image-store.s3.amazonaws.com/0/142322/d1c83e9b-7b7b-a8b8-9ed6-68efe2daa1af.png">
(引用元 : http://fractal.clearleft.com/)

* [GitHub](https://github.com/frctl/fractal)
* [fractal公式サイト](https://fractal.build/guide/)

### 特徴
* 別ファイルにスタイルガイドで用いるhtml等を書く
* 主なテンプレートエンジンはHandlebars
* componentとdocumentに分類されており、構造がわかりやすい
* スタイルガイドを導入する際に、他のスタイルガイドに比べて工数がかかる
* configでかなり融通を利かせることができる

### わかりやすい記事
* [スタイルガイドジェネレーターの「Fractal」がかなり良さそう  |  Rriver](https://parashuto.com/rriver/tools/getting-started-with-fractal)
* [Fractalを使ったスタイルガイドの作成（中級編）。このジェネレーターかなりいいですよ](https://parashuto.com/rriver/tools/fractal-detailed-settings)

## sc5-styleguide
<img alt="sc5-styleguideのデモ" src="https://qiita-image-store.s3.amazonaws.com/0/142322/781e913d-d417-85a4-977a-8a7536c862b9.png">
(引用元 : http://demo.styleguide.sc5.io/)

* [GitHub](https://github.com/SC5/sc5-styleguide)
* [sc5-styleguide公式サイト](http://styleguide.sc5.io/)

### 特徴
* スタイルにコメントアウトを書いて書き出せる
* コメントアウトのルールが厳しく、エラーがでがち
* navが上部にある(珍しい気がする)
* スタイルを検索できる

### わかりやすい記事
* [sc5-styleguideを使用したのでまとめてみました](https://qiita.com/tatsuyankmura/items/e1ed4c67fec602e6b33d)
* [sc5-styleguideをnpm scriptsから使ってみる](https://katsunory.github.io/2017/03/03/npm-run-sc5-styleguide/)


## kss-node
<img alt="kss-nodeのデモ" src="https://qiita-image-store.s3.amazonaws.com/0/142322/ad5d7763-4898-0257-1a23-699a8cdf1a8a.png">
(引用元 : http://kss-node.github.io/kss-node/)

* [GitHub](https://github.com/kss-node/kss-node)

### 特徴
* スタイルにコメントアウトを書いて書き出せる
* コメントアウトのルールが厳しく、エラーがでがち
* テーマが充実している

### わかりやすい記事
* [kss-nodeの導入](https://qiita.com/tazawa_naoto/items/c021e152e675d2422966)

---
以上、スタイルガイドジェネレータ3選でした！
sc5-styleguideがKSS準拠なので、sc5-styleguideとkss-nodeは大きくは変わりませんが、私は検索バーが欲しいが故にsc5-styleguideを導入しました！
Fractalは今後もどんどんアップデートしていく予感がしますね！

まだ私も知らないスタイルガイドがあるかもしれませんので、コメント等で教えていただけたら幸いです。
ご精読ありがとうございました！