Fractalを使ってみよう！（環境構築編）

この記事では、Fractalというスタイルガイドジェネレータの環境構築方法を紹介します。

Fractal使うメリットは？

以下のように、コードを管理できるようになります。

コンポーネントを管理するならFractalがおすすめ！

✅動画みたいな感じでコンポーネント単位で、HTML,CSS(SCSS),JSなど管理できる

✅実際の動きもわかる点もよい🌟

✅検索できるからコンポーネントが増えても大丈夫#駆け出しエンジニアと繋がりたい pic.twitter.com/hrT24FqAG3

— いちくん@25歳独学未経験でWeb制作エンジニアになったひと (@ichikun0000) August 16, 2020

私は普段、Boostnoteというツールを使って、コードを管理していたのですが、デメリットとして、実装後のイメージがつきにくいということがありました。

しかし、Fractalを使えば、そのデメリットを解消することができます。

また、共同開発する際に使うことで、サイトに一貫生が保たれるようになるのでおすすめです。（というか本来はその使われ方がメインな気がする）

Fractalを始めよう！（環境構築編）

Node.jsをインストールする

以下の記事などを参考にNode.jsをインストールしましょう。
MacにNode.jsをインストール
Node.js環境構築(Windows版)
なお、FractalにはNode.js4.4.7以上が必要です！！

デスクトップなど適当な場所にフォルダを作成

mkdir fracatalDemo

プロジェクトを開始

fractalDemoにcdで移動し、以下コマンドを実行します。

npm init

適当にエンターキーを押していくとpackage.jsonが作成され、その中身は以下のようになります。

{
  "name": "fractaldemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Fractalをインストール

以下コマンドを実行してFractalをインストールします。(少し時間かかります)

npm install --save @frctl/fractal

この段階でpackage.jsonの中身は以下のようになっています。
dependenciesに "@frctl/fractal": "^1.3.0"が追加されましたね。

{
  "name": "fractaldemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@frctl/fractal": "^1.3.0"
  }
}

FractalのCLIツールをインストール

以下コマンドを実行してFractalのCLIツールをインストールします。(少し時間かかります)

npm i -g @frctl/fractal

これで準備完了です🌟

ここまでで、フォルダ構造は以下のようになっているはずです。

fractalDemo/
 ├ node_modules
 ├ package.json
 ├ package-lock.json

Fractalのひな形を作成する

以下コマンドを実行してFractalのひな形を作成します。

fractal new 好きな名前

今回は好きな名前をstyleGuideとします。

fractal new styleGuide

そうすると、いくつか質問されるのでエンターキーを押していきます。

▼以下質問内容

? 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)⇒Gitで管理するならyを入力してエンター

そうすると、Generating project structure...となるのでしばらく待ちます。

すると以下のようなフォルダ構造になると思います。

fractalDemo/
 ├ node_modules
 ├ styleGuide
   ├ components
      ├ example
        ├ example.hbs
        ├ example.config.yml
   ├ docs
      ├ 01-index.md
   ├ public
 ├ package.json
 ├ package-lock.json

これでひな型は完成です。

ブラウザと同期する

次に、cdコマンドで先ほど作成したstyleGuideディレクトリに移動し、
以下コマンドを実行します。

fractal start --sync

すると以下のような表示がされますので、Local URLをクリックしましょう。

クリックすると以下のような画面になります。
これで初期構築は終了です！

おつかれさまでした！