UIの表示の組み合わせを網羅するための方法
背景
成長したSingle Page ApplicationはUIコンポーネントが千変万化する。 これは1つだけではなく複数のコンポーネントが同様に変化するため、検証パターンが掛け算で増えていく。
まとめ
- cssをローカルスコープで書く
- storybookを使ってUIのカタログを作る
- クエリパラメーターで初期表示の固定化をする
原因
- UIの変化が複数パターンあり、それが複数存在するとすべての表示出し分けパターンを網羅することが難しい
- DOMとCSSがグローバルスコープで干渉する
- ブラウザによってCSSの挙動が微妙に異なることがある
対策
- CSSをlocal scopeで運用する
- storybookを利用して状態の組み合わせが再現できるようにする
- UIの初期表示状態をクエリパラメーターで調整できるようにする
?display=ViewA,ViewB&highlight=ViewCと言った具合で動作=対象[]とすることで初期表示の固定化を行う- クエリパラメーターが利用する場合としない場合を変更できるようにしておく
対策の動機
- ローカルスコープの採用によって影響範囲を小さくする
- Storybookを利用し、パーツ単位でUIコンポーネントを構築できる状態にする
- Storybookを利用し、複雑な状態をコードで定義することができるようにする
クエリパラメーターで初期表示状態を決定する理由
クエリパラメーターのない場合、ページはドメインロジックによって初期表示の状態が決定される。
クエリパラメーターで制御する場合、指定されていない場合を起点としてUIを盛り付ける役割をもたせることができる。
ユースケースとして、特定の行のハイライトを行ったり、外部のページが遷移時に強調したいUIを決定したりできるようになる。
リンクの共有などを行う時に便利となる。
他にも、はじめてサービスに登録したユーザーがページを訪れるとき、はじめてページに遷移するボタンのリンクが明らかならば、
?target=tutorialをパラメーターとしてつけるだけで、特定の行動パターンの場合だけ表示するなどの導線を組み立てることができ、かつ、状態を保存しなくても良くなる。
導入方法
- css-loaderを入れる
- storybookを入れる
- クエリパラメーターと表示挙動を一致させる
継続方法（運用）
- クエリパラメーターに関しては、サービスポリシーを定める
対策の問題点
- Storybookで状態をたくさん作ることはできるが、状態が増えすぎるとメンテナンスコストが高くなる
展望
- 状態を軽く持つようにしたい