React と AtomicDesign - Template編

atomic - template

すべて個人的な考えです。

Template は 間取り

Template 層は間取りです。例えば台所で考えると「冷蔵庫はここに置こう」「テーブルはここで」みたいに事前に決め、実際に電化製品から冷蔵庫が届いたら決められた場所に置いてもらうだけです。ただ間取りを考える人と実際に運んでいる置いてもらう人は別人です。個人的に Template 層は配置する人が迷わなくても決められた所に置けるようにすることだと思います。

Organizm 以前との違いですが、個人的に Organism などは順番に埋まっていく、 Template は狙った位置にストンと入れるみたいなイメージの違いがあると思います。

Template は何で定義してもいい

ただ僕は TypeScript にしかないですが、abstract classを使う方法がお気に入りです。

abstract class DetailTemplate extends React.PureComponent {
  abstract Header(): JSX.Element;
  abstract Main(): JSX.Element;

  render() {
    return (
      <ColumnLayout>
        {/* 上部に固定されるOrganism要素 */}
        <StickyMenu>
          <this.Header />
        </StickyMenu>

        <this.Main />
      </ColumnLayout>
    )
  }
}

継承したコンポーネントでHeaderを定義すると、それは勝手にColumnLayoutStickyMenuの下に配置されレイアウトのマークアップを意識せずに良くなります。 また、これを継承した時にHeaderMainを定義しなければコンパイルエラーにできるので、定義し忘れ防止もできます。

この層はデータに依存することがあまりないようにできると思うので、狙った位置に置けるJSX.Elementを返すただの関数でもいいと思います。