経緯
技術調査の一環で、storybookというwebアプリのデザインカタログを作れるライブラリがあるとのことで使ってみた
storybookとは
上にも書いたとおり、webアプリのデザインカタログを作れるライブラリで、HTMLやJSはもちろん、Vue・React・AngularなどのSPAたちにも対応している
デザイナーとのやり取りや、Componentの重複を防ぐことを目的として作られることが多いようだ
結論
それに適したアーキテクチャのアプリでかつ、慣れないと少し使いづらい
使っている人の間ではかなり絶賛されているので、使える人からすれば素晴らしい機能なんだと思うんですが、
そもそもフロントエンドエンジニアではない私にとってはちょっと使いこなすのが難しかったです
もう少し詳しく説明していきたいと思います
使いにくいポイント① 最新版（v6）のドキュメントが少ない
私の調べた限りだとこのくらい
この記事を書いている時点での最新がv6系なのですが、出回っている記事のほとんどが古いバージョンに関しての記事
v5→v6でファイル構成だったり、アドオンの種類だったり、コマンドだったり結構変わっているので、使ったことある人じゃなければv5以前の記事を見ながらv6を使っていくのは至難の業だと思います
しかしv6になってから結構立つのになんで記事が少ないんでしょうか？
古いバージョンのまま使っている人がほとんどなのか、もしくはもう誰も使っていないのか
使いにくいポイント② エラーが出ない
私の場合は別のプロジェクトですでにできているアプリを使ってstoryを書いてたんですが、なぜかstoryを読み取ってくれない
エラーとかExceptionとか出してくれたらいいのにそれもない
だから何がだめなのかわからない
しかもドキュメントもない・・・＼(^o^)／ｵﾜﾀ
使いにくいポイント③ 既存のアプリケーションに導入する場合はアプリを選ぶ
上記も書いた通り、アトミックデザインのような再利用を前提としたデザイン・Component構成になっていない限りあまり使う旨味はないと思います
使うためには既存のソースコード+storyを記載するファイルをComponent単位で作る必要があります
これだけでかなり工数が増えるのに加え、storyファイルには依存関係も全て記載していかなければならず、もとのComponentの依存関係が変わったらStoryも書き換えなければいけないため、開発だけではなく、メンテナンスの工数もかかってしまいます
ただ、きっちり再利用できるComponentごとに分割して開発できているプロジェクトってそんなにないんじゃないでしょうか？（偏見）
言い換えてみれば、今から作るプロジェクトに関してはこれを導入することで、強制的にアトミックデザインに持っていくようなガード的な役割もできるかもしれないですね
最後に
今回は私の専門外の話なので少し短いですが終わりたいと思います
有識者の方で、もし私の記事の中で間違っている所があればご指摘いただけると幸いです
今回も最後まで読んでいただきありがとうございました
それでは失礼致します
