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

この記事は、前回の記事を見ていることを前提に解説します。まだご覧になっていない方は先に前回の記事をご覧ください。

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

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

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

まず、コンポーネントやドキュメントのページを作成するためのディレクトリを作成します。
任意の名前で任意の場所にディレクトリを作成することができます。
今回は各々、「components」と「docs」と命名し、それらをまとめた「src」フォルダをプロジェクトフォルダ配下に作成します。

1fractalTest/2 ├─ node_modules/3 ├─ src/4 │　　├─ components/5 │　　└─ docs/6 ├─ package-lock.json7 └─ package.json

Fractalが認識できないものはすべて無視されますが、ビルドファイルやREADMEなど、好きなものをプロジェクトディレクトリ内に置くことができます。

次に、Fractalの新しいインスタンスを作成し、プロジェクトの構造やその他の情報をオプションで設定します。
一般に、プロジェクトディレクトリのルートにfractal.config.jsを作成し、そこにオプションの設定を記述します。
以前は設定ファイルの名前はデフォルトでfractal.jsでしたが、v1.3.0でfractal.config.jsに変更されました。

1fractalTest/2 ├─ node_modules/3 ├─ src/4 │　　├─ components/5 │　　└─ docs/6 ├─ fractal.config.js7 ├─ package-lock.json8 └─ package.json

fractal.config.jsの必要最低限の設定は次のようなものになります。
特にこだわりがなければ、以下のコードをそのまま使用しても良いでしょう。

1'use strict';23/* Fractalのインスタンスを作成し、必要に応じて他の場所で使用するためにエクスポートします */4const fractal = module.exports = require('@frctl/fractal').create();56/* プロジェクトのタイトルを設定します */7fractal.set('project.title', 'Component Library');89/* コンポーネントの場所を指定します */10fractal.components.set('path', __dirname + '/src/components');1112/* ドキュメントの場所を指定します */13fractal.docs.set('path', __dirname + '/src/docs');

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

コンポーネントは1つのビューテンプレートファイルで構成されるシンプルなものから、複雑なものまであります。

ここでは、button.hbsというファイルをcomponentsディレクトリに追加することで、最もシンプルなコンポーネントを作成します。

1<a href="" class="button">ボタン</a>

次に、ドキュメントディレクトリ（今回は、src/docs）にインデックスページとなるMarkdownファイルindex.mdを追加します。

1---2title: Component Library3---4**○○株式会社**のWebサイトで使用するコンポーネントライブラリです。

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

1fractalTest/2 ├─ node_modules/3 ├─ src/4 │　　├─ components/5 │　　│　　└─ button.hbs6 │　　└─ docs/7 │　　　　　└─ index.md8 ├─ fractal.config.js9 ├─ package-lock.json10 └─ package.json

あとは開発用サーバーを起動し、コンポーネントライブラリを見るだけです。

ターミナルを開いて、プロジェクトディレクトリのルートにいることを確認した上で、以下のコマンドを実行します。

$fractal start --sync

--syncオプションを使うことで、FractalはBrowserSyncを使ってファイルシステムの変更を監視し、ファイルを更新したときにページをリフレッシュすることができます。

コマンドを実行するとターミナルに以下のようなものが表示されます。
「Local URL」の右側のURLにアクセスすると、コンポーネントライブラリのページを見ることができます。

今回はここまでになります。より複雑なコンポーネントの作り方は、Fractalの公式ドキュメントを参照してください。

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