スタイルガイドジェネレーターの「Fractal」がかなり良さそう

ずっと自分好みのスタイルガイドジェネレーターを探していたんですが、ようやく見つけました！「Fractal 」というツールで、かなり良さそうなのでご紹介します。

初級編、中級編の2回に分けて、初級編ではインストールと初級設定からウェブUIの起動までを、中級編ではコンポーネントのより細かい設定などについてご紹介します。公式ドキュメントは初めてだとわかりづらいところもあったので、その辺を補う形でまとめてみたいと思います。

※先日、スタイルガイドとパターンライブラリの違いについてまとめましたが、スタイルガイドやパターンライブラリを自動生成するツールは「スタイルガイドジェネレーター」というのが一般的なようです。「パターンライブラリジェネレーター」とは呼ばないみたいですね。

では早速、「Fractalのはじめの一歩」的な感じで行ってみましょう！

Fractalとは

まずは、ざっくりとFractalをご紹介します。

• Clearleft というイギリスのウェブ制作会社が開発しているツールです
• インストールにはNode.js 4.4.7以上が必要です
• インストールして指定のフォルダにファイルを保存するとUIパターンライブラリ（スタイルガイド）を自動生成してくれます
• ローカル環境にインストールして使います
• 下の例のようなサイトを静的に書き出して公開もできます
• デフォルトのテンプレートエンジンはHandlebars ですが他のも使えます
• ドキュメントやデータの記述にはMarkdownやYAML、CommonJSなどを使います

ちなみに、フラクタル（Fractal）とは「フランスの数学者ブノワ・マンデルブロが導入した幾何学の概念である。ラテン語 fractus から。 図形の部分と全体が自己相似になっているものなどをいう（Wikipediaより引用 ）」そうです。

Fractalで作られたコンポーネントライブラリの例

• Clearleft Fractal
• Bits, the front-end component library for 24 ways

net Magazine で導入方法のチュートリアル があったり、レスポンシブWebデザインの生みの親、Ethan Marcotte氏がA List Apartのプレゼンでオススメしている （下から6つ目のブレット）ので、これから人気が出るツールだと思っています。

なぜFractalなのか

Fractalを気に入った理由は以下のとおりです：

• 書き出されるサイト（ウェブUI）のデザインがシンプルでわかりやすい
• コンポーネントとドキュメントを自由に構成できる
• 作り方が比較的シンプルでわかりやすい（ドキュメントを一通り読めばわかった）
• ウェブUIをローカルツールでサクッと確認できる
• ウェブUIを静的に書き出して公開できる
• Gulpなどのビルドツールと連携ができる
• APIを使って表示するデータを引っ張ってこられる

最後の2つは試していないので、実感というよりも「できたら便利そう」というレベルの感想ですが、Fractalを使ってコンポーネントのライブラリをとりあえず作っちゃって、後から徐々に制作プロセスに組み込んでいくといったことも簡単にできそうです。なので、かなり柔軟に使えるツールだという印象です。

他のツールだと記述方法やウェブUIの構成がガチガチに決められていて思った通りのものが作れなさそうなんですけど（間違ってたらすみません）、Fractalだと柔軟に対応できそうなところが気に入っています。

あと、Fractalを開発しているClearleft は昔から知っている制作会社で信頼できるからというのも理由の1つです。開発プラン もしっかりしてそうですし、責任を持って開発を続けてくれそうです。

ちなみに、公式サイトの「Why Fractal? 」でも特徴がわかりやすくまとめられているので、英語ですけど読んでみると良いと思います。

初期設定

初期設定は、とりあえず以下を行います。

ディレクトリの作成

先ほど作ったpatternsディレクトリ内に以下のようにディレクトリを作成します。

patterns
└── src
    ├── components
    └── docs

ちなみに、このフォルダ内にはnpm initで書き出されたプロジェクトの設定ファイルpackage.jsonも存在します。

fractal.jsの作成

プロジェクトのルートディレクトリ（今回はpatterns）の直下にfractal.jsファイルを作って保存します。このファイルにFractalの設定を書き込みます。※Windows環境の方はこちらをご覧ください。

'use strict';

/* Fractalのインスタンスの作成とエクスポート */
const fractal = module.exports = require('@frctl/fractal').create();

/* プロジェクト・タイトルの設定 */
fractal.set('project.title', 'Rriver Component Library');

/* componentsディレクトリの指定 */
fractal.components.set('path', __dirname + '/src/components');

/* documentationディレクトリの指定 */
fractal.docs.set('path', __dirname + '/src/docs');

これで、patternsディレクトリは以下のような構成になります。

patterns
├── src
│   ├── components
│   └── docs
├── fractal.js
└── package.json

"fractal": {
"main": "fractalfile.js"
}

Docsのトップページを設置する

Documentationのトップページの内容を追加します。テキストエディタで以下の内容のファイルを作ってdocsディレクトリにindex.mdとして保存します。MarkdownとYAML front-matter を使って記述します。

---
title: Rriverのコンポーネントライブラリ
---
Rriverのコンポーネントライブラリです。

めちゃくちゃベーシックな設定ですけど、これで準備は完了です。

では、ローカル環境でウェブUIを起動して確認してみましょう！

まとめ

以上、ざっくりとFractalの導入方法をまとめてみました。サクっとスタイルガイドやUIパターンライブラリが作れて良くないですか？細かい設定はさておき、たったこれだけの作業で作れるのは嬉しいですよね。個人的にはスタイルガイドやパターンライブラリを作るための情報をCSSやSassに直接書き込まないというのも気に入っています。

運用フェーズに入って実際に使い込んでみないと見えてこないこともたくさんあると思いますけど、Fractalは行けそうな感じがしています。

というのも、ツール自体がすごくフレキシブルな設計になっているようなので、上手に制作ワークフローに組み込めそうな気がするんですよね。そしたら、作業もかなり効率的にできそうです。

ということで、今回はこの辺で。中級編では、より細かい設定についてまとめています。

• Fractalを使ったスタイルガイドの作成（中級編）。このジェネレーターかなりいいですよ

[追記: 2017/04/23]
デモを作ってみたのでよかったらご覧ください。

• スタイルガイドジェネレーター「Fractal」のデモを作ってみた

2017年4月10日に公開され、2017年12月25日に更新された記事です。

この記事をシェアする

• ツイート
• シェアする
• ブックマーク
• Pocketに保存