BLOG
25年新卒 WEBエンジニア インターンシップ 受付中

【初心者でも簡単!】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説(実践編)

更新日:2021/01/15

【初心者でも簡単!】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説(実践編)
この記事では、Fractalというスタイルガイドジェネレーターの実践的な使い方をご紹介します。

ちなみに、この記事は「【初心者でも簡単!】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説(環境構築編)」の続編になります。
まだ読んでいない方はそちらを読んでからの方がスムーズかと思われます。
前の記事はこちら

それでは、早速本題にいきましょう!

コンポーネントを作成してみよう!

例としてボタンを作成してみます。

現在のフォルダ構造は以下のようになっているかと思います。

まず、 exampleという名前をすべてbutton01に変更しましょう。
また、.ymlファイルは削除でOKです。

※フォルダ名とファイル名は一致させてください!
→NG例)
フォルダ名:btn
ファイル名:button01.hbs

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

次に、button01.hbsの中身を作成します。

具体的な中身はひとまず以下のようにしてください。

▼button01.hbs

ブラウザで確認してみると、、、

できてますね!いい感じです!

コンポーネントを作成してみよう!

スタイリングしよう!

まだCSSを充てていないので反映させてみましょう。

cssファイルはpublicフォルダに作成します。
以下のようにcssフォルダとcssファイルを作成しましょう。

style.css には以下のように記述してみます。
(とりあえずコピペしましょう)

これでcssは完成ですが、まだ、この段階ではブラウザに反映されてません。
なぜならcssをコンポーネント側で読み込むための設定をしていないからです。

cssを読み込もう!

publicフォルダに作成したものをコンポーネントで読み込むためには、componentsディレクトリの中に、_preview.hbs を作成します。

▼componentsディレクトリの中に_preview.hbsを作成

_preview.hbsには以下のように記述します。

これで完成です!ブラウザで確認してみると、、、
cssを読み込もう!

CSSがあたってますね!
ホバーするとアニメーションも効いているはずです!いい感じです!

Assetsタブを追加しよう

現在、タブにはHTML・View・Context・Info・Notesしかありませんが、
ここに「Assetsタブ」を追加できます。

Assetsタブを作成することで、ブラウザ上でcssやjsをコピーできるようになります。
つまり、以下のようになるということです。
Assetsタブを追加しよう

じつは、ここにjsファイルや画像なども出力させることができます。

今回は、先ほど作成したボタンをクリックしたらアラートを出すようなスクリプトをjQueryを使って書いてみようと思います。

まず、publicフォルダにjsファイルを作成します。
▼publicフォルダにjsファイルを作成

次に、作成したindex.jsに、以下のように記載します。

続いて、_preview.hbsのbody閉じタグの直前で先ほど作成したjsファイルと、jQueryを読み込みます。
▼_preview.hbsでjsファイルを読み込むように設定(jQueryが必要であればここで読み込む)

そうしたら、componentsにindex.jsを作成して、先ほどpublicフォルダ内のindex.jsに記載したスクリプトと同じものを記載します。

ブラウザを確認してみると、、、
Assetsタブを追加しよう

いい感じですね!!
ボタンをクリックしたらアラートもでるし、Assetsタブにも反映されています!

Compoundする

Compoundとは、混ぜ合わせる・調合するといった意味です。

たとえば、button01.hbsを作成しましたが、別のボタンコンポーネントとして、button02、button03・・・と作成したい場合、
それらを管理しやすいように、ひとつの「buttons」フォルダに格納したいと思うはずです。
この、ひとつにまとめることをFractalではcompoundと呼びます。

では、これまで作成してきた「button01」フォルダを同階層にコピーして、名前を「button02」としてみましょう。
現状、フォルダ構造は以下のようになっています。

▼button01をコピーしてbutton02を作成

そして、button01とbutton02をbuttonsというフォルダにまとめましょう。(これがcompound)

▼button01とbutton02をbuttonsフォルダにまとめる

ブラウザで確認してみると、、、
Compoundする

うまくいきましたね!!お疲れ様です!

その他

レスポンシブ対応

以下のようにウィンドウ幅を変えることができるので、SPサイズの様子も確認できます。
レスポンシブ対応

プロジェクト全体のreadmeを設定する

デフォルトでは、以下のように記載されていますが、これがプロジェクト全体のスタイルガイドの説明になります。
プロジェクト全体のreadmeを設定する

この部分の変更は、「docs」フォルダの「01-index.md」ファイルをいじってあげればOKです。

各コンポーネントに対してreadmeを設定する

各コンポーネントには、いくつかタブがありましたよね。
その中の、「Notes」タブには、そのコンポーネントの情報を表示させることができます。

たとえば、button01に補足情報を記載したいとします。
その場合、button01フォルダの中に、readme.mdファイルを作成します。

▼button01フォルダにreadme.mdを作成

readme.mdに適当な情報を記載します。たとえば今回は、以下のように記載してみました。

ブラウザで確認すると、、、
各コンポーネントに対してreadmeを設定する

反映されましたね!

こういうのをいちいち記載するのは面倒かもしれませんが、サイトの規模が大きかったり、何年も運用していったり、関わる人が変わったり・・・・となっていったときほど有効です。
なぜならサイトの一貫性が保たれるし、作業側も迷いがなくなるからです。

サーバーにあげたいときはどうする?

今までローカル環境で確認していましたが、サーバーにUPしたいときは静的なファイルを書き出す必要があります。
まず、fractal.config.jsに以下を記載します。

▼fractal.config.js

そうしたら、ターミナルにて以下コマンドを実行します。

▼ターミナルにて以下を実行

うまくいかないときは、自分がstyleGuideディレクトリにいるか確認してみてくださいね★
いない場合はcdコマンドで移動してください。

ターミナルで打ったコマンドが成功すると、styleGuideの中に、「dist」フォルダが生成されます。

▼fractal buildコマンドが成功したあと(一部省略)

あとは、このdistフォルダごとサーバーにUPすればOKです!!

Fractalに関する疑問

ここまで、Fractalを使って実際にコンポーネントを生成する方法などを見てきました。
ここからは、Fractalを使うシーンや運用面に関する疑問についてお答えします。

Fractalを利用するシーンはどこ?

利用するシーンは、たとえばWEBアプリのような大規模案件に適しています。
スタイルガイドがあることで複数人が関わる案件でもコードに一貫性が生まれ、各コンポーネントを容易に拡張・修正することができるでしょう。

Fractalは、簡単に言うとCSS設計管理ツールだと思ってください。

CSSというのは容易に破綻します。書く人によってまちまちです。
そういったルールの無さがCSSを破綻させ、WEBサイト全体を破綻へと導きます。

しかし、CSS設計ができていればそのような破綻は起きにくくなります。

大規模案件であればあるほど、しっかりとしたルールを管理して構築していく必要があり、Fractalのようなスタイルガイドが求められます。

Fractalを実際にどう運用していく?

Fractalにコンポーネントを追加する方法は、そこまで難しくありませんが、静的ファイルを生成するときはコマンドラインを使う必要があり若干エンジニア向きです。

とはいえ、たとえばWindowsであればそれらコマンドを打たなくても済むようにバッチファイルを作成して置くのもひとつの手です。

これをエンジニアが作成しておけば、他の人がやることはコンポーネントの追加とバッチファイルをダブルクリックし、更新された静的ファイルをサーバーにあげるだけで済みますね。

1人で使う時も便利なの?

コーディングをスニペット化する際に便利です。

筆者は普段Boostnoteというアプリで、よく使うコードを管理していますが、そのデメリットはプレビューできないことです。

しかし、Fractalを使えばプレビューができるので一目で何が実装されるかわかりますよね。

1人であればローカルホストで見るだけで十分なのでわざわざ静的ファイルを生成する必要もありません。

まとめ

いかがだったでしょうか。
本記事ではFractalの実践的な使い方についてご紹介しました。

Fractalを使うメリットは、複数人が関わる大規模案件で、各人が迷わずに、サイトで使用されている共通パーツを引き出せるところです。
これにより、作業効率のUPとサイトの一貫性が保たれます。

案件の規模問わず、ぜひ使ってみてはいかがでしょうか。

※まだ、前の記事を読んでいないという方はこちら↓
【初心者でも簡単!】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説(環境構築編)

FOLLOW US