main とか h1 って containers が呼ぶべきじゃね？という話

今回は昨日の記事よりもさらにマニアックな話、お前どんだけ神経質やねんって思われそうな話。

main タグや h1, h2 などの heading タグってかなり特殊で扱いづらいなーと思っています。

main タグは 1 つのページ中に 1 度しか使ってはいけないし。

heading タグは順番を守らないといけないし、かつ h1 は main タグ同様、1 つのページ中に 1 度しか使ってはいけません。

で、これを Atomic Design に落とし込むと、上記のルールが保証されなくなると思っています。

詳しい説明はめんどくさいので省きますが、これが Atomic Design の弱点だよなーと。

特に heading に関しては Atoms 要素であるため、扱いづらいったらありゃしません。

ところがここに React の props の概念が入ってくると、頑張ればなんとかなるように組めることも多いです。

文章だとわかりづらいので、具体的な例を書くと、

import React, { FC } from "react";

const Hoge: FC = () => (
  <div>
    <h3>hoge</h3>
    hogehoge
  </div>
);

export default Hoge;

import React, { FC } from "react";

const Fuga: FC = () => (
  <div>
    <h1>fuga</h1>
    fugafuga
  </div>
);

export default Fuga;

import React, { FC } from "react";
import Fuga from "./Fuga";
import Hoge from "./Hoge";

const Piyo: FC = () => (
  <div>
    <Hoge />
    <Fuga />
  </div>
);

export default Piyo;

ちょっと極端な例ですが、これだけでもう既に heading の正しい使用方法からは外れちゃうわけです。

で、自分ならどう組むかと言うと、

import React, { FC } from "react";

export type HogeProps = {
  heading: JSX.IntrinsicElements["div"]["children"];
};

const Hoge: FC<HogeProps> = ({ heading }) => (
  <div>
    <div>{heading}</div>
    hogehoge
  </div>
);

export default Hoge;

Fuga も同様に組んで、

import React, { FC } from "react";
import Fuga from "./Fuga";
import Hoge from "./Hoge";

const Piyo: FC = () => (
  <div>
    <Hoge heading={<h3>hoge</h3>} />
    <Fuga heading={<h1>fuga</h1>} />
  </div>
);

export default Piyo;

みたいな呼び出し方を行います。

仮に各 heading を atoms に切った場合、pages が atoms を呼ぶことになってしまいますが、そこはご愛嬌かなと。

余談ですが、自分の場合 form タグを presentationl components 側に切るのが嫌いなので、上記に似たような感じで良しなにやります。

この書き方が正しいか間違っているかはよくわかりませんが、どなたかの参考になれば幸いです。