【Atomic Design】moleculeにドメイン知識を持たせてはいけない理由

2021/10/24

数多くのフロントエンド開発者に採用されているAtomic Design　✨ とりあえずAtomic Designにしとけば、いい感じにコンポーネントが整理できるので個人的にはすごく重宝しています。

ただ便利な一方で、初心者の方にとってはコンポーネントの分類が少し難しいかもしれません。特にmoleculeとorganismの分類には迷われる方も多いのではないでしょうか？一番多い間違いとしては、ドメイン知識を持つコンポーネントなのにmoleculeに分類されているケースです。

「ドメイン知識を持つ状態」と言われてもピンと来ない方もいると思うので、ここでは実際のコード（React）を例に、moleculeにドメイン知識を持たせてはいけない理由を説明したいと思います。

ドメイン知識とは？

そもそもドメイン知識とは何でしょうか？ wikipediaにはこう書かれています。

ドメイン知識（ドメインちしき、英: Domain knowledge）または領域知識は、はっきり限定された、ある専門分野に特化した分野の知識であり、一般知識またはドメイン独立の知識と対比される。この用語は、例えばプログラミングの一般知識と共に製薬業界に関するドメイン知識を有するソフトウェアエンジニアについて説明したりする目的で、より一般的な分野に関してしばしば用いられる。ドメイン知識を有する人物はしばしばその分野の専門家と見なされる。

ふむ、分かるようなわからないような... ドメインという言葉自体が様々な場面で使われるものであるため、抽象的で分かりづらいかもしれません。

エンジニア的には、ドメインとは自分の開発対象である業務やサービスなどに関連する領域のことだと考えておけばいいと思います。

つまり、ドメイン知識とは業務やサービスに関連する情報や知識と覚えておけばとりあえずはOKです 👌

ドメイン知識を持つコンポーネント

コンポーネントがドメイン知識を持つかどうかの目安としては、そのコンポーネント内で扱う変数の中に、ドメイン特有の型を持つオブジェクトが存在するかどうかで判断するといいと思います。例えば以下のようなコードは「ドメイン知識を持つ」状態のコンポーネントです。

例）ユーザーの情報を表示するコンポーネント

UserInfo.tsx

import React from 'react'

type Props = {
  user: {
    name: string
    age: number
    job: string
  }
}

const UserInfo: React.FC<Props> = (props) => {
  const { user } = props

  return (
    <ul>
      <li>名前: {user.name}</li>
      <li>年齢: {user.age}</li>
      <li>職業: {user.job}</li>
    </ul>
  )
}

export default UserInfo

userというオブジェクトがname、age、jobという属性をもっているということをこのコンポーネントは知っています（すなわちドメイン知識を持っている）。

ドメイン知識を持たないコンポーネント

では、上記のようなコンポーネントを「ドメイン知識を持たない」形式で書くとどうなるでしょうか？それが、以下のコードです。

Info.tsx

import React from 'react'

type Props = {
  items: {
    title: string
    text: string | number
  }[]
}

const Info: React.FC<Props> = (props) => {
  const { items } = props

  return (
    <ul>
      {items.map((item, i) => (
        <li key={i}>
          {item.title}: {item.text}
        </li>
      ))}
    </ul>
  )
}

export default Info

// ↑のコンポーネントを使ってUserInfoを表現したい場合は以下のようにすればOK
// const items = [
//   {
//     title: '名前',
//     text: user.name,
//   },
//   {
//     title: '年齢',
//     text: user.age,
//   },
//   {
//     title: '職業',
//     text: user.job,
//   },
// ]
// <Info items={items} />