Rails で Webpacker と aigis を使ってスタイルガイドを作る

Ruby on Rails で Webpacker と aigis を使ってスタイルガイドを作り運用しています。運用を始めてみてどうだったか？を、みんなのウェディング、松久（@kamonegi1977）から紹介します。

aigis ってなに？

「aigis」は「style guide generator」と説明されている通り、スタイルガイドを SCSSファイルからも生成できます。

aigisの特徴として

npm で用意できて、SCSS ファイルや Markdown ファイルを使ってスタイルガイドを作ることができる
Markdown を使ってスタイルの説明ができる
カテゴリーごとのスタイルガイドを作ることができる
npm で配布されている

というのがあります。

「CSSフレームワークをデザインシステムに置き換えている」で紹介させていただきた Oshidori では、aigis を使って運用されています。実際に運用してみてわかったことがあります。
SCSS ファイルに書いたコメントからスタイルガイドが作られることがデザインシステムを運用する時に、とても役立つということです。

今までは、スタイルガイドの追加・更新作業は

スタイルを定義する
定義したことを説明するファイルにサンプルを書く

という2ステップでした。しかし、1と2を一緒にすることができます。
スタイルガイドもプロダクトのコードで一緒に管理するのでプルリクエストで、追加変更を行います。そのため、プルリクエストから「足りない説明」がないか、サンプルコードや参考例も一緒に合わせて話すことができます。

aigis ですが、運用していて悩んだことがあります。
モーダルダイアログを追加することになった時に、JavaScript による動きや、設定方法もサンプルコードに入れたい、ということに、その時はすぐに答えられなかったことです。

Webpacker の設定を流用した webpack.config.js を用意する

みんなのウェディングでは、少しづつですが Webpacker を利用するようにしています。
「モーダルダイアログ」は Webpacker を利用している状態でしたので、Webpacker を利用して JavaScript をビルドして aigis でも使えるようにしたい、と考えました。

Rails では、 javascript_pack_tag を利用すればいいのですが、 aigis は静的ファイルを生成するジェネレーターで、npm 内で完結しているため、 javasciript_pack_tag は利用することができません。そこで、Webpacker の設定を流用した webpack.config.js を aigis 用に用意することにしました。

config/webpack/aigis.js

aigis 用の webpack.config.js を用意します。今回 webpack.config.js というファイル名にしなかったのは、今後、脱Webpacker をする可能性もあるためです。

toWebpackConfig を実行して webpakcer の設定を追加することができます。今回は、output を aigis 用に増やすようにしています。

process.env.NODE_ENV = process.env.NODE_ENV || 'development';

const environment = require('./environment');

module.exports = Object.assign({}, environment.toWebpackConfig(), {
  entry: [
    './app/javascript/packs/application.js',
  ],
  output: {
    filename: 'bundle.js',
    path: __dirname + '../../../public/styleguide/javascripts',
  }
})

package.json

webpack を使う scripts を設定します。この時、webpack の実行前に aigis を実行する設定も用意しておきます。

"scripts": {
  "styleguide": "aigis run -c ./aigis/pc/aigis_config.yml",
  "webpack-for-style-aigis": "webpack --config ./config/webpack/aigis.js --bail -p",
  "oshidori": "yarn styleguide && yarn webpack-for-style-aigis"
}

実装例

まとめ

今回は、Rails で色々な意見がある Webpakcer と組み合わせて使っていることをお話ししました。

React や Vue を使うなら Storybook を利用すると思います。みんなのウェデイングでは、Stimulusを利用しています。そのため、スタイルガイドやデザインシステムのために Storybook を使う選択肢はとりませんでした。
そこで、aigis を教えていただき利用しています。
シンプルなツールですが、SCSSからスタイルガイドを生成することができ、運用しやすいツールです。特にデザインガイドと実装が一緒になることで、デザインとコードの保守がしやすいのは、大変ありがたいです。

シンプルなツールで他のツールとも一緒に使いやすいツールなので、デザインシステムの一歩目に取り入れやすいツールです。