さくっとデザインガイドを作成するための Fractal #Node.js

突然ですが、デザイナーとエンジニアの間で一番多く共有されるものって何でしょう？
（おそらく）そうデザインテンプレートです。

今回は、デザインガイドを作成するために Fractal を使用してみた所感や使い方を書いていきたいと思います。なお、あくまでエンジニア主導と目線による使用感になるので、デザイナーから見た場合は少し違った感想になるかとは思いますのであしからず。

デザインガイド作成のきっかけ

実は今回のデザインガイドはデザイナーとエンジニア向けではなく、HTMLほぼ初心者の方でもHTMLを構築できるようにするためでした。なので、導入部分のデザイナーとエンジニアの共有とは少し違いますが、分かりやすい指標を作る必要があったため、デザインガイドを作成しました。

簡潔に作成するためにいくつかのフレームワークを検討しましたが、一番導入が簡単そうな Fractal を使うことにしました。

インストールはとても簡単で npm の環境があればコマンド一発で可能です。
が、依存関係をコントロールやしやすい yarn がおすすめです。

buildなどでコマンドを頻繁に叩くので、CLIツールのほうが便利です。

yarn global add fractal

公式から引用すると

となります。簡単ですね。

Fractalは2つの要素で構成されます。

ディレクトリ構造も上記に即しており、非常に分かりやすかったです。

├── src
│   ├── components
│   └── docs
└── package.json

ざっくりと言うと、テンプレートエンジンに Handlebars を使用して、READMEとか書けるといったものです。Handlebars自体エンジニアであれば見覚えある方も多く、使いやすくなってます。
詳しい使い方は公式ドキュメントを参照いただければと思います。

今回使ってみてテンプレート毎にREADMEを書けるのは、汎用性があって使いやすいと思いました。下記のように注意事項やtipsを書き込んでおけるので、共有する上では非常に助かりました。

こちらはテンプレートとかはなく、純粋にドキュメントを書いていく部分になります。
使い方はその時の次第になるかと思いますが、 docs ディレクトリの最初のファイルがアクセス時のトップページになるので、目次やデザインガイド全体のルールを載せると良いかと思います。

もちろん単純な文字だけでなく、変数的な使い方をすることもできます。
詳しい使い方は公式ドキュメントを参照いただければと思います。

正直言うと、かなり良いものを見つけることができたと思います。導入も簡単で使い勝手も良いので、今後似たような案件の場合、Fractalを使用しても良いなと思いました。
もちろん、気になった点もいくつかあるので書いておきます。（いくつかはissue出してみようかな…）

他のフレームワークも同じような機能はありますが、導入前に調べた限り 扱いが簡単 という点ではFratalが一つ飛び抜けているかと思います。

今回はここで終わりになりますが、ご感想やご指摘ありましたらどうぞよろしくお願いします。

ちなみに弊社、Tech系以外にも会社ブログも掲載してますので、気になった方は是非どうぞ。
https://www.wantedly.com/companies/ks-rogers