はじめに
私は新卒1年目のフロントエンドエンジニアです。
研修の中で弊社のFrontend Styleguideを読みました。その中で理解するのに苦しみ時間を要した項目であるコンポーネントやバリエーションの考え方について、改めて振り返ってみました。
また、これらの使い方だけでなく、なぜこれらの考え方が必要なのかなども触れていければいいなと思います。
自分のようにここで躓いてほしくないからこそ、この記事を読んで理解を深めていただけたら幸いです。
きっかけ
OJT研修の中でタスクをこなすために弊社のFrontend Styleguideを読む機会がありました。この中に記載されているコンポーネントやクラス命名ルールなどの考え方を理解するのに苦労しました。その分、本研修の数ある学びの中でもとても印象に残っています。
来年から入社される後輩を含めた新社会人の方々が同じような壁にぶつかったときに、この記事を読めば理解できる！となって欲しいといった気持ちが大きく今回の記事を作成しました。少しでもみなさまの助力になれればと思います。
コンポーネントとは
ここではコンポーネントとは何か、今までの考え方と比較しながら説明していきます。
弊社のFrontend Styleguideには、以下のような説明文が記載されていました。
コンポーネントとは、Web アプリケーションの UI を構成する部品です。具体的には、見出しやボタン、テキストボックス、テーブル、リンクなどです。
この文章を読んで部品であることは分かりますが、普通にコードを書くのと何が違うのかイメージが湧きませんでした。
ここで1つ例を挙げて考えてみましょう。
<button>削除</button>
このコードを見たとき、HTMLのbuttonタグを用いた「削除ボタン」だと思いますよね？
buttonタグではありますが、それだけではコンポーネントとは呼びません。
なぜなら、この状態では、
- どんな場面で使われるのか
- 他の画面でも使うものなのか
- どんな役割を持ったUIなのか
が分からないからです。
改めてコンポーネントとは、
見た目だけでなく「役割」や「意味」を含めて切り出したUIの部品のことを指します。
例えば、
- クリックできる操作用のボタン
- 入力を受け付けるフォーム
- 情報をひとまとまりで表示するカード
といったように、
UIを「画面の一部」ではなく「再利用できる部品」として扱うための単位がコンポーネントです。
ここで改めて、先ほどのコードをもう一度見てみましょう。
<button>削除</button>
コンポーネントの考え方を用いると、
- 「削除ボタン」という画面専用の名前ではない
- あくまで「Button」という汎用的なUI部品として扱っている
といった点が挙げられると思います。
つまり、Buttonコンポーネントの一つの使われ方として表現されている、という考え方になります。
最初から完璧に設計する必要はなく、「これ、他の画面でも使えそうだな」と気づけるかがとても大切だと思います。
コンポーネントの次に考える「バリエーション」
前の章で、コンポーネントとは、
UIを再利用できる部品として切り出す考え方だと説明しました。
ただ、実際に開発を進めていくと、次の壁に私はぶつかりました。
「同じコンポーネントだけど、見た目や使い方が少しずつ違う...」
ここで出てくるのがバリエーションという考え方なのですが、さっぱりだと思うので具体例を挙げて説明していきますね。
<button class="delete-button">削除</button>
このコードは、
- buttonタグを用いており、文字は削除
- 削除ボタン専用のcssを設定しており、classで紐づけている
- クラス名は、そのボタン名をイメージしやすいように「delete-button」にしている
の3つの要素から成り立っているものになります。
このコードの書き方のメリットとしては、
- 何をするボタンか分かりやすい
- その画面だけなら十分である
といった点が挙げられます。
<button class="delete-button">削除</button>
<button class="submit-button">保存</button>
<button class="cancel-button">キャンセル</button>
<button class="edit-button">編集</button>
しかし、上記の例のように画面が増えるたびに専用のボタンを作成していたら数がたくさん増えてしまいます。
このような状況から、
- クラス名が用途ごとに増えていく
- デザインは似ているのに別のクラスを使っている
- 「このボタンの共通ルール」が見えない
といった点が挙げられます。
当時の自分は、「削除ボタン」「保存ボタン」「編集ボタン」を全部別物として作っていました。
でも途中で、こんな疑問が湧きました。
これ、見た目も構造もほぼ同じじゃない？
わざわざ別のUIとして扱う必要あるのか？
実はやっていることは、
同じボタンを場面ごとに使っているだけなのでは？ と思うようになりました。
ここで、バリエーションとは何か説明します。
バリエーションとは、同じコンポーネントの中で許容される差分 のことを指します。
先ほどの気づきがバリエーションに繋がります。具体例を用いて分かりやすく説明します。
<Button text="削除" color="danger" size="small" />
ここでは、
- Button：共通のコンポーネント
- 削除 / 保存 / 編集：使い方の違い
同じコンポーネントの中で許容される差分
より、削除ボタンや保存ボタンは別のコンポーネントではなく、Buttonコンポーネントのバリエーション という扱いになります。
コンポーネントとバリエーションを組み合わせることで、他のボタンも下記のように書くことができます。
<Button text="保存" color="primary" size="medium" />
<Button text="キャンセル" color="secondary" size="medium" />
<Button text="編集" color="default" size="small" />
text, color, sizeとは何？と思うかもしれませんがそれはまた別の機会にご説明させていただきますね！
まとめ（コンポーネント → バリエーションの関係）
ここまでを整理すると、関係はこうなります。
- コンポーネント
UIの共通部分をまとめたもの - バリエーション
コンポーネントである共通部分からはみ出した差分
順番としては必ず、
「まずコンポーネントとしてまとめる」→ 次に「違い」を整理する
という流れになりますので、忘れないようにしてください。
おわりに
今回の記事では、コンポーネントとは何かという基本的な考え方と、そこからバリエーションへどうつながるのかを、自分の体験を交えて整理しました。画面をそのまま作るのではなく、UIを「部品」として見る視点に切り替えることが、コンポーネント思考の出発点だと思います。
新卒1年目の頃は、コンポーネントという言葉を聞いてもなかなか実感が湧かず、理解するのに時間がかかりました。ボタン一つ取っても用途ごとに分けて作るのが当たり前で、それが後からどう影響するのかを考えられていなかったと思います。
もし今、コンポーネント設計で悩んでいる新卒の方や経験の浅いエンジニアの方がいたら、最初からうまくできなくても問題ありません。「これ、まとめられないかな」と一度考えてみるだけで十分です。この記事が、同じところで悩む人の気持ちを少しでも軽くできたら嬉しいです。