Webエンジニア目線で見たコンポーネント設計で気をつけるべきこと3選

こんにちは。

Webエンジニアの皆さんは、デザイナーから上がってきたFigmaをもとに実装をしていることが多いと思います。

今回はそんなときについ忘れがちな、コンポーネント設計について、Webエンジニア目線で見た3つのポイントをまとめてみました。

1. ボタンのテキストにはwhitespace-nowrapをつけよう

Webの特に厄介なところとして、画面サイズの自由度が挙げられます。

画面サイズが小さくなると、テキストが折り返されてしまうことがあります。

特に困るのは、ボタンのテキストが途中で折り返されてしまうことではないでしょうか？

そうならないように、ボタンのテキストにはwhitespace-nowrapをつけましょう。

.btn {
  white-space: nowrap;
}

コンポーネントの幅は、常にwidth: 100%で実装しましょう。

これは1同様、画面サイズの自由度のためです。

コンポーネント側でサイズを指定してしまうと、画面サイズが小さくなったときに、コンポーネントの幅が画面幅を超えてしまうことがあります。

こちらは2と関連しての話なのですが、コンポーネントというからにはいろいろなところで再利用されることが多いです。

そのときにコンポーネント同士の間隔の違いが必要になってくる時がどうしても出てきます。

その度にコンポーネントを作成することになりがちなので、コンポーネントの上位クラスでgapを指定しておくと便利です。

.list {
  display: flex;
  gap: 1rem;
}

今回は、Webエンジニア目線で見たコンポーネント設計で気をつけるべきこと3選をまとめてみました。

コンポーネント設計を間違えると、不要なコンポーネントが乱立し、コンポーネントの再利用性が下がってしまいます。

コンポーネント設計は、デザイナーとエンジニアの両方の目線で考える必要があります。

それぞれが気持ちよく開発、設計ができるように、コンポーネント設計を考えていきましょう。