コンポーネント管理どうしてる？

mana

webサイト制作時にコンポーネントを作成することがあると思います。
大規模案件になるとコンポーネントの数が増えてしまい、「使いたいのに探すのに時間がかかる」「どんなコンポーネントを制作したかわからなくなる」など管理が大変だと感じた経験はありませんか？

そんな時に便利なのがスタイルガイドジェネレーター「Fractal」です。
そんなFractalについて今回は紹介していきます！


Fractalとは

Fractalとはコンポーネントのプレビュー表示、コンポーネントのHTML取得などが簡単に行えるスタイルガイドを生成するためのツールです。

▼公式ドキュメント

▼公式デモ

Fractalの始め方

準備

  1. Node.jsをインストール

  2. 任意の場所にファイルを作成し、コマンドで作成したフォルダに移動

  3. npm init（※太字はコマンドです。ターミナルで実行してください。）でpackage.jsonを作成（質問が表示されたらエンターキーを押す）

  4. npm install --save @frctl/fractalでFractalをインストール

  5. npm i -g @frctl/fractalでFractalのCLIツールをインストール

Fractalのテンプレートを作成

  1. fractal new styleGuideを実行してテンプレート作成（styleGuide部分がフォルダ名になるので別名でもOK）

  2. いくつか質問されるので答えていくとテンプレートが作成されます

サーバー起動

  1. 先程作成したstyleGuideディレクトリにコマンドで移動

  2. fractal start --syncを実行するとターミナルに添付画像のように表示され、ローカルサーバーが起動する

  3. http://localhost:3000にアクセスするとスタイルガイドが表示されているはずです！

コンポーネント作成

HTML

  1. componentsディレクトリ内にコンポーネント名でフォルダを作成（例：Button）

  2. コンポーネント名を含むhbsファイルをパターンごとに作成（例：01_button-primary.hbs）※同じファイル名は2度使えないのでコンポーネント名を入れてユニークな名前を付けるのがおすすめです。

  3. .ymlファイルは削除でOK

CSS

scssを使用したかったため、gulpでscssをcssにコンパイルします。styleGuideディレクトリでgulpをインストールします。（npm install -D gulp sass gulp-sass）
styleGuideディレクトリ内にscssファイルを作成。コンポーネントごとにscssファイルを作成し、main.scssでインポートするようにします。
main.scssがstyleGuide/public/cssにmain.cssとしてコンパイルされ、変更が自動でブラウザに反映されるようにgulpfile.jsに下記記述を追加します。

const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));

gulp.task("sass", function(done){
    gulp.src(["./scss/*.scss","!./scss/_*.scss"])
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest("./public/css"));
    done();
});

gulp.task("watch", () => {
    gulp.watch("./scss/*.scss", gulp.series("sass"));
});

package.jsonのscripsを以下のように編集し、npm run devを実行するとmain.scssがmain.cssとしてコンパイルされ、変更が自動でブラウザに反映されるようになります。

"scrips": {
  "start": "fractal start --sync",
  "dev": "gulp sass && gulp watch"
},

最後にcomponentsの中に_preview.hbsを作成し、main.cssを読み込めばコンポーネントにcssがあたります。

 <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <link media="all" rel="stylesheet" href="{{ path '/css/main.css' }}">
      <title>Preview Layout</title>
    </head>
    <body>
      {{{ yield }}}
    </body>
  </html>

JavaScript、画像

cssと同じようにpublicディレクトリにフォルダを作成して、その中にjsファイルや画像を入れます。jsは_preview.hbsで読み込みます。

これでコンポーネントをスタイルガイドに反映できるようになりました！

サーバーにあげる

fractal.config.jsに下記記述を追加します。

fractal.web.set('builder.dest'__dirname + 'dist');

package.jsonのscripsを以下のように編集し、npm run buildを実行すると「dist」フォルダが生成されるのでフォルダ内を全てサーバーにアップすればOKです。

"scrips": {
  "start": "fractal start --sync",
  "build": "fractal build",
  "dev": "gulp sass && gulp watch"
},

他の人が作成したコンポーネントも一覧に追加されていくので管理がしやすく、複数人で開発する際にとても便利だと思います！
ぜひ使ってみてください。


いいなと思ったら応援しよう！