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

2024年3月3日 16:59

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

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

Fractalとは

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

▼公式ドキュメント

▼公式デモ

Fractalの始め方

準備

Node.jsをインストール
任意の場所にファイルを作成し、コマンドで作成したフォルダに移動
npm init（※太字はコマンドです。ターミナルで実行してください。）でpackage.jsonを作成（質問が表示されたらエンターキーを押す）
npm install --save @frctl/fractalでFractalをインストール
npm i -g @frctl/fractalでFractalのCLIツールをインストール

Fractalのテンプレートを作成

fractal new styleGuideを実行してテンプレート作成（styleGuide部分がフォルダ名になるので別名でもOK）
いくつか質問されるので答えていくとテンプレートが作成されます

サーバー起動

先程作成したstyleGuideディレクトリにコマンドで移動
fractal start --syncを実行するとターミナルに添付画像のように表示され、ローカルサーバーが起動する
http://localhost:3000にアクセスするとスタイルガイドが表示されているはずです！

コンポーネント作成

HTML

componentsディレクトリ内にコンポーネント名でフォルダを作成（例：Button）
コンポーネント名を含むhbsファイルをパターンごとに作成（例：01_button-primary.hbs）※同じファイル名は2度使えないのでコンポーネント名を入れてユニークな名前を付けるのがおすすめです。
.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"
},

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

この記事が気に入ったらサポートをしてみませんか？