こんにちは。いよいよ年末ですね。
今回は、コンポーネントをうまく活用するために個人的に気をつけているポイントを3つまとめてみました。
コンポーネントのWidthは親要素で管理する
言い換えると、コンポーネント自身は常に100%のWidthを持つようにするということです。
これはよく言われていることですが、コンポーネントのWidthをコンポーネント自身で管理してしまうと、コンポーネントを使う側でコンポーネントのWidthを変更することができなくなってしまいます。
その結果、例えばボタンのような様々な箇所で利用されるコンポーネントを作成した場合、コンポーネントがサイズごとに作成されてしまい、管理が煩雑になる→コンポーネントが再利用されずよりコンポーネントが分割されていくという悪循環に陥ってしまいます。
そんなことがないよう、コンポーネントのWidthは親要素で管理するようにしましょう。
例えば、wrapperクラスを作成して、そこにコンポーネントを入れるというような形で管理すると再利用性の高いコンポーネントを作成することができます。
要素間の余白は親要素で管理する
これは1つ目のポイントと似ていますが、要素間の余白も親要素で管理するようにしましょう。
marginをコンポーネント自身で管理してしまうと、コンポーネントを使う側でmarginを変更することができなくなってしまい上記と同様の事象が発生してしまいます。
とはいえ、引数でmarginを指定するというのもあまり良い方法ではありません。
コンポーネント自身はあくまでコンポーネント自身のみのスタイルを持つようにし、要素間の余白は親要素で管理するようにしましょう。
具体的には、フクロウセレクタを使って親要素に余白を管理させるという方法があります。
/* wrapperという親要素に子要素間の余白を持たせる */
.wrapper > * + * {
margin-top: 1rem;
}
tailwindcssを使っている場合は、space-yを使うという方法もあります。
<div class="space-y-4"> <!-- これが親要素 -->
<div>...</div> <!-- これらがコンポーネント -->
<div>...</div>
<div>...</div>
</div>
before要素、after要素を利用する場合はコンポーネントの引数によって出しわけ可能にしておく
よく見るのが、before要素、after要素を使ってコンポーネントにアイコンを表示するというものです。
しかし、before要素、after要素でアイコンを表示させる場合、事前にCSSにアイコンのクラスを定義しておく必要があるのですが、ついそこが固定されてしまい、再利用性が下がっているコンポーネントを見かけることが多いです。
DRYと少し相反する部分もあるかもしれませんが、before要素、after要素を利用する場合は、コンポーネントの引数によって出しわけ可能にしておくようにしておくと便利だなと思うことが多いです。
以上、コンポーネントをうまく活用するために個人的に気をつけているポイントを3つまとめてみました。
様々なパターンを一つのコンポーネントにまとめて肥大化しすぎてしまうのも、コンポーネントが無数に乱立してしまうのも保守性の観点から避けたいところです。
その意味で、コンポーネント自身の抽象度をある程度高めに設定しておき、肥大化しなくても柔軟に活用できるようにコンポーネント自身を設計しておいてあげるという意識が根底にあるとよりいい設計ができると思うので、あなたの今書いているコードもその視点で一度見直してみてはいかがでしょうか。
それでは、また次回。