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

はじめに

この記事は前回の「Fractalでスタイルガイドを作ってみる #1 ― インストールから始め方まで」を見ていることを前提に開設します。まだご覧になっていない方は先に前回の記事をご覧ください。

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

fractalTest/
 ├─ node_mojules/
 ├─ package-lock.json
 └─ package.json

方法2：0からプロジェクトを作成する

プロジェクト構造を設定する

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

fractalTest/
 ├─ node_mojules/
 ├─ src/
 │　　├─ components/
 │　　└─ docs/
 ├─ package-lock.json
 └─ package.json

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

Fractalインスタンスの作成と設定

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

fractalTest/
 ├─ node_mojules/
 ├─ src/
 │　　├─ components/
 │　　└─ docs/
 ├─ fractal.config.js
 ├─ package-lock.json
 └─ package.json

fractal.config.jsに設定を記述する

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

fractal.config.js

Copy Code

'use strict';

/* Fractalのインタンスを作成し、必要に応じて他の場所で使用するためにエクスポートします */
const fractal = module.exports = require('@frctl/fractal').create();

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

/* コンポーネントの場所を指定します */
fractal.components.set('path', __dirname + '/src/components');

/* ドキュメントの場所を指定します */
fractal.docs.set('path', __dirname + '/src/docs');

コンポーネントを作成する

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

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

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

ドキュメントのインデックスページを作成する

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

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

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

fractalTest/
 ├─ node_mojules/
 ├─ src/
 │　　├─ components/
 │　　│　　└─ button.hbs
 │　　└─ docs/
 │　　　　　└─ index.md
 ├─ fractal.config.js
 ├─ package-lock.json
 └─ package.json

開発サーバーを起動する

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

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

fractal start --sync

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

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

今回はここまでになります。より複雑なコンポーネントライブラリの作成については改めて記事を作成する予定です。