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

この記事では、[Fractal](https://fractal.build/)というスタイルガイドジェネレータの環境構築方法を紹介します。

## Fractal使うメリットは？
以下のように、コードを管理できるようになります。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">コンポーネントを管理するならFractalがおすすめ！<br><br>✅動画みたいな感じでコンポーネント単位で、HTML,CSS(SCSS),JSなど管理できる<br><br>✅実際の動きもわかる点もよい🌟<br><br>✅検索できるからコンポーネントが増えても大丈夫<a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://t.co/hrT24FqAG3">pic.twitter.com/hrT24FqAG3</a></p>&mdash; いちくん@25歳独学未経験でWeb制作エンジニアになったひと (@ichikun0000) <a href="https://twitter.com/ichikun0000/status/1294818322358272001?ref_src=twsrc%5Etfw">August 16, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

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

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

### Node.jsをインストールする
以下の記事などを参考にNode.jsをインストールしましょう。
[MacにNode.jsをインストール](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)
[Node.js環境構築(Windows版)](https://techfun.cc/javascript/nodejs.html)
なお、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```をクリックしましょう。
![コメント 2020-08-20 115232.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692339/923b4dc7-fa63-537b-1eb9-67d08483f42c.png)

クリックすると以下のような画面になります。
これで初期構築は終了です！
![コメント 2020-08-20 115448.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692339/b501f54c-1567-9521-193f-5cd3f6261100.png)

おつかれさまでした！