Atomic Design とは
Atomic Design をご存知でしょうか。
公式には Atomic Design はデザイン自体の名前ではなく、方法論として紹介されています。
Atomic Design では、下記5つの構成要素が登場します。
- Atoms（原子）
- Molecules（分子）
- Organisms（構造体）
- Templates（テンプレート）
- Pages（ページ）
私は今、フロントエンド開発に React Native を利用していますが、コンポーネントベースで記述するため、 Atomic Design と親和性が高いと感じています。
各要素の粒度は議論があると思いますが、ここでは私の参加するプロジェクトでの粒度を紹介したいと思います。
Atoms
原子は基本となるコンポーネントです。
公式だと、 HTML のタグや、フォームのラベル、インプット、ボタンなどが例として紹介されています。
私の職場だと、もう少し粒度が粗く定義されています。用途ベースで自分たちなりの粒度を採用しています。
我々の使用する一部のコンポーネントを紹介します。
Box
エリアを定義するベースとなるコンポーネントです。
Viewを自分たちの使いやすいようにカスタマイズしています。
Icon
アイコンです。
react-native-vector-iconsを使用しています。
propsで FontFamily を渡す形にしているので、使うたびに対象のフォントをインポートしなくて済みます。
Text
テキストです。テキスト横にアイコンを表示することも可能です。
Text、Iconを利用しています。
Atom + Atom のため、 Molecules じゃないかとも考えられますが、用途として文字の横にアイコンを添えたいケース（重要情報の i マークなど）が多く、このような形を採用しました。
Button
クリック可能なボタンのコンポーネントです。
Box、Icon、Textをラップしています。
Input
主にフォームで使用されるテキストインプットです。
TextInput、そして上述のBox、Textを利用しています。
Anchor
クリック可能なテキスト・アイコンです。
onPressでクリックイベントを渡すことができます。
Box、Icon、Textを利用しています。
Page
各ページのフォーマットを合わせるため、Pageコンポーネントを設けています。
Boxを利用しています。
Molecules
一般的には Atom + Atom で構成されます。
公式だと、フォームラベルやインプット、ボタンを組み合わせたテキストフォームのひとかたまりが例として挙げられています。
実際に利用しているコンポーネントを紹介します。
Row
左寄せでラベル、右寄せで内容を表示します。
連続して使えば、テーブルコンテンツのように利用することができます。
Section
見出しと、本文を表示します。
本文は折りたたんで非表示にすることができます。
RadioButton
チェックボタンとテキストを表示します。
クリックでチェックのオンオフが可能です。
Card
エリアの中に、タイトル、テキストやその他コンポーネントを表示します。
Organisms
一般的には Molecule + Atom/Molecule で構成されます。
公式だと、メニューバー（Molecules）とテキストフォーム（Molecules）をひとまとめにしたヘッダーメニューが紹介されています。
実際に利用しているコンポーネントを紹介します。
Field
我々は、フォームでは formik を活用しています。
Fieldでは、 Atoms や Molecules を読み込んで、共通の余白を設けたり、エラー時の色を変えたりと、フォームとして使える形に整形しています。
Templates、 Pages
各ページの雛形と、実際のページ要素がこれにあたります。
プロジェクトに特化した、再利用できないコンポーネントになります。
おまけ
我々がTextやButtonもカスタマイズして Atoms とした背景は、多言語化の背景もあります。
現在扱っているプロジェクトでは、英語・中国語繁体字・中国語簡体字でサービスを提供しています。
そのため、
<Text i18n="translation-key" ... />
<Button i18n="translation-key" ... />
といった形で利用できるコンポーネントを定義する必要がありました。
おわりに
Atomic Design の粒度はプロジェクトによって変わるかと思います。
プロジェクトを進めるうちにこれは Atoms じゃないか、これは Molecules じゃないかと、変化したコンポーネントもあります。
あくまでも方法論なので、自分たちにあった粒度を定義し、効率よく進めることが大切なのかな、と思います。
皆さんの活用している粒度なども教えて頂けると幸いです。