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

投稿日：

更新日：

Fractalとは

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

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

Fractalの始め方

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

npm initで初期化処理をする

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

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

ターミナル
npm init -y

Fractalをインストールする

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

ターミナル
npm install --save @frctl/fractal

Fractal CLIツールをインストールする

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

ターミナル
npm i -g @frctl/fractal

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

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

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

プロジェクトの始め方

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

方法1：newコマンドで構造を生成する

  1. まず、プロジェクトを作成したいフォルダ(今回はfractalTest)で以下のコマンドを実行します。今回はfractal new exam-pjを実行します。
    ターミナル
    fractal new <プロジェクト名>
  2. 表示される以下の質問に答えてください。基本的にはすべてEnterでOKです。最後の質問のみ、Gitを使用するならy、使用しないならnを選択してください。
    ターミナル
    ? What’s the title of your project? (Style Guide)

? Where would you like to keep your components? (components)

? Where would you like to keep your docs? (docs)

? What would you like to call your public directory? (public)

? Will you use Git for version control on this project? (Y/n)
  3. 初期構造のセットアップや依存関係のダウンロードが終わるまで待ちます。その後、cdコマンドで新しく作られたプロジェクトフォルダに移動します。
    ターミナル
    cd exam-pj
  4. 以下のコマンドを実行して、開発サーバーを起動します。
    ターミナル
    fractal start --sync

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

    スタイルガイドのドキュメントページのナビゲーションメニューと説明文が含まれるスクリーンショット
    コンポーネントライブラリの画面

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

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

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

もし上記の準備ができていなければこちらを確認してください。

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

この記事をシェアする