スタイルガイドジェネレーターの検討

[manabuyasuda]

現在使用しているaigisは開発が止まっている状態。 機能的でメンテナンスが定期的におこなわれているスタイルガイドジェネレーターがあれば移行する。

必須

• カテゴリーわけができる
• IDを指定できる
• コードとプレビューを表示してくれる

オプション

• プレビューは折りたたむこともできる

[manabuyasuda]

Storybook for HTMLというのがいいかもしれない（未検証）。 VueやReactによく使われているし、スター数も多く、開発も活発そう。 https://github.com/storybooks/storybook

[manabuyasuda]

Storybook for HTMLを使ってみた所感。

導入は簡単。以下の内容通り、npm i --save-dev @storybook/htmlして、configファイルとstoriesファイルを作って、npm run storybookのようにするだけ。 https://storybook.js.org/basics/guide-html/ npm スクリプトは以下のようにする。-s ./htdocsを渡すとディレクトリごとコピーしてくれる。

"storybook": "start-storybook -s ./htdocs -p 9001 -c .storybook"

configファイルと同階層にpreview-head.htmlを作成し、メタタグなどを追加できる。

Addonは、いくつか入れないと検証ができないよう。 https://storybook.js.org/addons/addon-gallery/

コードブロックの生成機能はない（Addonであるかも？）。 IDを設定することはできなそうだけど、検索がリアルタイムで絞り込んでくれるので、IDをテキストとして残しておくだけでも問題なさそう。

storiesは以下のように記述するのがハードル低そう。 JSは別に作成しているので、テスト上の問題は起きない。

  .add('sw-Button', () => {
    return `
      <p>ボタンです</p>
      <button class="sw-Button" type="button">ボタン</button>
    `;
  })

ただ、1つのファイルに複数のHTMLを書いていくことになるので、若干管理しにくい感じはする。

[manabuyasuda]

「HologramのNode.js版が欲しくてAigisを作った。でも最近はStorybook Vueを使ってるから、Aigisのメンテナンスをやめると決めた」 https://github.com/aigis-styleguide/aigis/issues/121