2020-08-28

コンポーネント、パーツの依存関係・利用状況を可視化できないか考える

Component 的な方針でデザインパーツが作られているとして、それらを Storybook 的なスタイルガイドなどで一覧することは何かしらの方法でできる。

ちゃんと自分で作ったことはないから、まずはそこからやらないと、、、
こう言うのがあるなかで作ってある場合とない場合の差が質にもつながっていくような気もする。

デザインガイド的なものを元に作っていくのは普通の流れだとは思うのだけど。
サイトに組み込んでいくときにそれらがある程度まとまった粒度で組み込まれていくとは思う。
Atomic Design で言うところの Molecules , Organisms くらいの粒度。

サイト内で共通のものがどのくらい使われていて、Atoms 単位での調整がサイトに与える影響度、 Molecules の一部を直したときに影響があるページがどのくらいあるか？というのをサクッと見通せないものか、、、と。

依存関係を図示する

うまいこと調べられていない気がするがぱっと調べてみたときにこちらで紹介されてるようなコンポーネントの依存関係を図示してくれるようなのがイメージには近かった。

もう少し整った感じであればいい気もするが、それはそれで難しそう。

コンポーネント図とかがイメージとしては近いのかなぁ、、、

検索して調べる

コードを検索していくことで include / extend / require とかを見ていけばある程度依存を調べていける気はするのだけど、検索しないといけないところとかが誰でもわかるというのには難しそうだなぁと。

全く同じパーツなのかベースは同じだけど若干加工してある別パターンなのか、とかとか。
パーツの量が少ないときはいいのかもしれないが、数が増えてくるとなかなか把握しづらくなってくると思う。

これは作るときにはあまり気にならないのかもしれないが、時間がたって後で見直したときにわかりにくくなりそうな気がする。

同じコンポーネントを使うにしてもベースのパターンをループで回しつつ、表示要素の変数的なものを別途配列的にもたせて使うとか。
Vue や React の component に props を渡して使っていくようなイメージというか。

そういう形でできるだけ同じものが見通しやすく（見つけやすく）なるように作っておかないとのちのち大変だなぁと。
CSS の設計の世界は CSS の仕組み上話題になりやすい気はする。

MTの管理画面だとインクルードしているテンプレートを見ることができる。
PowerCMS のは一歩進んでインクルードしているもの、インクルードされているものを見ることができる。

この辺がイメージとしては近いところはあるのだけど。
これは1段階で場合によってはインクルード先でさらにインクルードされてるものとかもあるので、そういった構成図的なものが作れるといいんだろうなぁと。

運用していける仕組み

新規構築時やリニューアル時は見通しやすくちゃんと作られていたとしても、長期間の運用をへて担当も変わったりしてくるとそのあたりの関係性、依存関係がわからなくなってくるし、把握している人が少なくなってきそう。

ワイヤーレベルなりドキュメントなりを作るにしても、それが常にアップデートされていく仕組みがないことにはだめだろうし。
「作れる」から「使っていける」的な感じというか。

うまいことキーワードが思いついていない気がするから検索できていない気がするし、、、、もう少し調べたり、本読んだりしてみよう。