Fractalでスタイルガイドを作ってみる #1 ― インストールから始め方まで

Webサイトで使用するコンポーネントを管理するための、スタイルガイドジェネレーターです。

コンポーネントをまとめるだけでなく、HTMLやCSSのコーディングルールをまとめることもできるので、サイト構築のときに構造がバラバラにならず統一感を出せます。

Fractal⁠（新しいタブで開く）

Fractalを使うにはNode.jsが必要なため、事前にインストールされていることを前提に解説します。
npmはNode.jsと一緒にインストールされます。

まずはプロジェクト用のフォルダを作成して、そのフォルダ内から以下のコマンドを実行してください。
プロジェクトディレクトリを初期化します。
-yを除けばいくつかのデフォルト設定を変更することができます。

この記事内では「fractalTest」というフォルダを使用します。

$npm init -y

次に以下のコマンドを実行してFractalをインストールします。
完了までに少々時間がかかります。

$npm install --save @frctl/fractal

Fractalはグローバルにインストール可能なCLIツールを提供しています。
あくまでもオプションですが、開発用Webサーバーの起動などのタスクが簡単に実行できるようになるFractal CLIをインストールします。
完了までに少々時間がかかります。
※この記事ではFractal CLIがインストールされていることを前提に解説します。

$npm i -g @frctl/fractal

タスクを実行する際は、ターミナルからfractal <タスク名>の形式で実行できます。
詳細なドキュメントは以下をご覧ください。

Overview | Fractal⁠（新しいタブで開く）

現時点で、プロジェクトフォルダ配下は以下のような構成になっていると思います。
※node_modulesフォルダ配下は省略します。

1fractalTest/2 ├─ node_modules/3 ├─ package-lock.json4 └─ package.json

新規のFractalプロジェクトを作成する方法は2つあります。

1. まず、プロジェクトを作成したいフォルダ（今回はfractalTest）で以下のコマンドを実行します。今回はfractal new exam-pjを実行します。

   ターミナルbash · 1行折り返すコピー（ターミナル）

   $fractal new <プロジェクト名>

2. 表示される以下の質問に答えてください。基本的にはすべてEnterでOKです。最後の質問のみ、Gitを使用するならy、使用しないならnを選択してください。

   テキストテキスト · 9行折り返すコピー（テキスト）

   1? What’s the title of your project? (Style Guide)23? Where would you like to keep your components? (components)45? Where would you like to keep your docs? (docs)67? What would you like to call your public directory? (public)89? Will you use Git for version control on this project? (Y/n)

3. 初期構造のセットアップや依存関係のダウンロードが終わるまで待ちます。その後、cdコマンドで新しく作られたプロジェクトフォルダに移動します。

   ターミナルbash · 1行折り返すコピー（ターミナル）

   $cd exam-pj

4. 以下のコマンドを実行して、開発サーバーを起動します。

   ターミナルbash · 1行折り返すコピー（ターミナル）

   $fractal start --sync

   ターミナルに表示された「Local URL」の右に書いてあるURLをクリックしてコンポーネントライブラリを表示します。

   

   コンポーネントライブラリの画面

こちらの方法は前提として以下の準備が終わっていることを確認してください。

• プロジェクト用のディレクトリを作成している（今回は「fractalTest」）。
• FractalとFractal CLIをインストールしている。

もし上記の準備ができていなければ、この記事の「Fractalの始め方」を確認してください。

これ以降の説明は長くなるので、次の記事で解説の続きをします。

Fractalでスタイルガイドを作ってみる #2 ― プロジェクトを0から始める方法と最もシンプルなコンポーネントの作成