コーディングメソドロジー
第102回 スタイルガイドジェネレータaigisを使用したモジュール管理

スタイルガイドの役割

スタイルガイドはWeb サイト制作・運用時のコーダーの負担を和らげてくれるモジュール集です。また、スタイルガイドに網羅されたモジュールを使用することによって、早くぺージ制作を行うことができ、サイト内で均一なクオリティを保つことができます。とはいえWebサイトのCSS 設計も重要で、「スタイルガイドさえあればサイト制作は失敗しない！」というものではないのですが、ぺージ量産・運用を考慮したスタイルガイドを作成できると、サイト制作のクオリティアップや効率化を図ることができます。

スタイルガイドジェネレータ aigis とは

日本のWeb制作会社 PixelGrid のエンジニアが作成したnode.jsベースのスタイルガイドジェネレータです。日本人の方が作成したので公式ドキュメントに日本語もあります。また、node.jsベースなので、Windows 環境でも簡単に導入することができ、gulpに対応したgulp-aigisプラグインもあります。

（※インストール方法などの初期設定は割愛しますので、公式ドキュメントを参照してください。URL:https://pxgrid.github.io/aigis/docs/jp/）

スタイルガイドジェネレータにも様々な種類がありますが、aigisの以下の点に着目しました。

・gulp のプラグインがあるので、gulp を利用して処理を自動化することで、コーダーや運用担当者の工数を減らすことができる

・日本語のドキュメントがある

・Windows 環境でも簡単に導入できる（rubyベースだと運用者PCにインストールや設定をしてもらう必要があるため導入のハードルが高い）

aigis を使用してスタイルガイドの運用を行う方法

概要としては、タスクランナーのgulpに対応したgulp-aigisプラグインとSass（SCSS）を使用します。SCSSファイルに見た目のスタイルとスタイルガイド用のコメントを記述して更新することで、自動的にスタイルガイドのHTMLも更新します。

■Sass ファイルにコメント形式で表示させたい情報を記述する

【図１】のように①名前（name）、②カテゴリ(category)、③分類タグ（tag）、④説明文、⑤表示させるHTMLコードを記述します。

実際に出力されたスタイルガイドは【図２】のような見た目で出力され、モジュールの見た目の表示は⑥の位置に表示されます。また、②のカテゴリは【図２】には表示がないのですが、実際にはスタイルガイドの左横にサイドバーがあり、ナビゲーションのリンクとして表示されています。

図1：Sass への設定の記述例

図 2：ブラウザでのスタイルガイドの表示

Sass ファイルに記述したコメントからスタイルガイドを生成するための
処理をgulp に追加する

実際にスタイルガイドとして生成するには gulp を使い、生成する処理を加える必要があります。【図３】のような処理を行うことによってスタイルガイドの運用を行っています。
処理の内容としては、

① SCSSファイルをgulpのwatch機能で監視して

② SCSSファイルの更新をキャッチしたら

③ gulp-aigisの処理を開始して、SCSSファイルのスタイルガイド用の記述を参照して、スタイルガイドを生成する

という流れで運用しています。

図 3：gulp を使用して Sass からスタイルガイドを生成する流れ

まとめ

以前は、ぺージ量産前にわざわざスタイルガイド作成用の工数を確保して行っていた作業ですが、スタイルガイドジェネレータとタスクランナーを用いて自動化することで工数を削減することができました。

また、工数削減だけでなく、手作業のスタイルガイド作成による作業ミスを無くせたり、スタイルガイドに関連するファイルの管理を SCSS ファイルのみに集約することができるため、ファイル管理がシンプルになるという点もメリットとして感じることができました。みなさんもぜひ試してみてはいかがでしょうか。