背景

成長した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を入れる
• クエリパラメーターと表示挙動を一致させる
  • 参考：JavaScriptでクエリパラメーターを書き換える

継続方法（運用）

• クエリパラメーターに関しては、サービスポリシーを定める

対策の問題点

• Storybookで状態をたくさん作ることはできるが、状態が増えすぎるとメンテナンスコストが高くなる

展望

• 状態を軽く持つようにしたい

参考資料

• JavaScriptでクエリパラメーターを書き換える