React

React と AtomicDesign - Template編

atomic - template

Template は Webページの間取り

Templateは、間取りです。家で例えるならこの部屋はこういうことに使おう、あっちの部屋はああいうことに、と決めるような感じです。Webであれば、「header要素はこの中に」「メイン要素はこの中に」となると思います。

そしてベッドなら寝室に置くでしょうし、ブログ記事ならメイン要素に大抵は置くだろうと思いますが、Template層はそういうブログ記事をレイアウトを意識せずにメイン要素に配置できるようにするのが役割です。

Template は Abstract Class

僕は、abstract classを使う方法がお気に入りです。

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

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

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

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

Page層ではこのように継承して使います。

class FooPage extends DetailTemplate {
  Header = () => <h1>タイトル</h1>;

  // `this.props.article` はreduxなどで渡ってきた値
  Main = () => <Article article={this.props.article} />;
}

ちょっとはシンプルになると思います。