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

2020-06-15

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

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

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

heading タグは順番を守らないといけないし、かつ h1main タグ同様、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 側に切るのが嫌いなので、上記に似たような感じで良しなにやります。

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

© 2018 kk-web