Reactを使い始めて5年くらい経つ。

最近「上手くコンポーネントを使い回すのって人類にはムズいんじゃね？」って思ってきた。

一番ベーシックなコンポーネントといえばボタンが思いつくけど、経験上見た目が同じでも内部での処理が異なるボタンってかなり多い。

AボタンとBボタンを頑張って抽象化したとしても、後からCボタンがやってきて抽象化をやり直したことが何度もある。

めちゃくちゃ簡単に使い回せそうなボタンですら使い回すのがムズいって絶望するわ！！

で、最近は個人開発のときにコンポーネント化するのをやめて愚直にソースコードをコピペしているけど、今のところ別に問題が起きてないんだよなあ…。

むしろどうやって抽象化しようか悩む工程がなくなっている分だけサクサク書けるようになっている気がする。

まあ超小規模な個人開発だから問題が起きていないだけの可能性もあるけどね。

というわけで最近は

  • 長いソースコードを切り分けて読みやすくしたいとき
  • 同じ画面内にデータ部分が違うだけの部品を複数表示したいとき

だけコンポーネント化している。

前者はコードが長くなりそうなときに使っていて、これは別に使い回すためにコンポーネント化しているわけではない。

Reactはコード量が増えがちだし、「どのHTMLがどのuseStateと関係あるんだっけ？」みたいなレイアウト部分とデータ部分の結びつきで混乱しがちなので、こういうときはコンポーネント化して、いい感じにソースコードを切り分けて読みやすいコードになるように工夫している。

後者の代表的な例はmapとかで配列を回して複数の要素を表示するようなときだ。例えばテーブルとかリストとか。

テーブルの行が1行目と2行目で仕様が変わることってほぼ無いから抽象化は雑で良いし、将来的に抽象化をやり直す可能性も低い。

こういうときは躊躇なくコンポーネント化している。

個人的に違うページに現れるパッと見似ている要素をコンポーネント化するのは罠だと思っている。高確率でその後に後悔している気がするんだよな。

ただ、ヘッダーとかフッターみたいに全ページで全く同じものを使うことが多い要素についてはコンポーネント化してもあんまり問題が起きないことが多い気がする。

これは例外かなー。

10年後の自分はこの記事を読んでどういう感想を抱くのかね？