More than 1 year has passed since last update.

フロントエンドにおけるコンポーネントとは

Posted at 2022-03-18

TL;DR

ついこの間。
ジュニアのマークアップエンジニアの話を聞いていて、
「意外とこの基準わかりづらいものなんだな」と思ったので、
ここ最近身につけた知識ベースで、直感的ではなくなるべく言語化する形で
「コンポーネントとはなんぞや」
「その粒度について」
示しておこうと思いました。

コンポーネントとは、部品、成分、構成要素などの意味を持つ英単語。 ITの分野では機器やソフトウェア、システムの構成する部品や要素などのことを意味する。

上記の通りコンポーネントとは、ある程度まとまったものを「部品として」分解したものになります。
さらにコンポーネントをその「部品」として分割する理由は以下になります。

コンポーネントがコンポーネントであるための前提として、「関心の分離」というものがあります。
厳密な定義で説明すると少し難しいのですが、噛み砕いていってしまえば、機能や振る舞いなどを明確に分離する、ということです。

※Web製作者のためのCSS設計の教科書 p42

つまり、コンポーネントとは
・これはタイトルだよね
・これはリンク
・これはボタン
・これはタイトルと抜粋文とボタンがまとまったカード
のように、その「関心・目的」に沿って分割したパーツの総称になります。

さて、上記のようにパーツごとにコンポーネントを分割するとして、
どのくらいの粒度で分割すべきなのかがわからない！ということが出てくるかと思います。

個人的には、Atomic Designの定義がこの「粒度の基準」としては、
かなり明確で、なおかつわかりやすいのではないかと思いました。

Atomic Designでは、以下のようにコンポーネントの粒度を定義しています。

粒度	定義	実際のパーツ
Atoms	原子	ボタン、リンク、フォームパーツなど
Molecules	分子	フォームパーツとボタンを組み合わせた検索フォームパーツ、ニュースリストの1行など、「動作・存在意図が明確」なパーツ
Organisms	有機体	ブログのコンテンツなど、Molecules（動作）が複数まとまったことにより、ページ内のコンテンツの「ひとまとまり」となっているパーツ
Templates	ページ内のレイアウトテンプレート	ヘッダー、フッター、左カラム、右カラムなど
Pages	ページ全体	ページ全体

特に、Atoms Designにおける「Atoms」「Molecules」の基準が、
MindBEMdingにおけるコンポーネント分割で重要な基準になります。

たとえば、以下の粒度のパーツは「Atoms」「Molecules」の粒度のコンポーネントとして成立します。

実際にAtomic Designのコンポーネント命名基準を利用するかは別として、
上記粒度でコンポーネントを区切り、CSSを分けることによって
汎用性の高いコンポーネント設計を作ることが
できるのではないかと思います。

コンポーネントを作成するにあたり、
上記の粒度で分割したコンポーネントはもちろん、
そのコンポーネントを「包括するパーツ」もコンポーネントとなり得ます。

たとえば、Qiitaのトップページは以下のような分割になり得ます。
（Atomsまで入れるとややこしくなるためAtomsは割愛します）

~~・・・とおもったけど、OrganismsとMoleculesが曖昧だなぁ・・・~~

このように、大きいコンポーネントの中に小さいコンポーネントを入れ子にして
一つ一つのコンポーネントを構成していきます。
1つのコンポーネントには孫要素くらい（できれば子要素）までのCSSを指定し、
それより内側の情報に関しては別コンポーネントとしてCSSを指定するようにします。

上記の通り、コーディングする際のコンポーネント設計は
「小さいパーツをたくさん作る」
　↓
「パーツを組み合わせる」
　↓
「組み合わせたパーツを構造としてまとめる」
というボトムアップの考え方で実装していくとうまくいくかと思います。

~~今の私がそう言うのできているかは置いておいて~~
綺麗なマークアップやプログラミングができるようになると
**後々の自分（これ重要）**やそのプロジェクトを引き継いだ人を助けることになります。
・・・というわけでがんばりまっしょい！！！！