Nuxtコンポーネントマトリョーシカ問題🪆


PM「Nuxtで作ってるプロジェクトのhogeっていうページなんだけど、不具合があって、ちょっと見てくれない?」

ワイ「わかりました」

ワイ「pages/hogeを見てみるか」

<template>
<Hoge />
</template>

このHogeコンポーネントって他でも再利用してるのかな?
→してない

とりあえずHogeコンポーネントを開いてみるか

<template>
<HogeHeader />
<HogeContents />
<HogeFooter />
</template>

このコンポーネントって他でも再利用してるのかな?
→してない

不具合のあるコンポーネントはどれかな?
一個一個開いて確認しなくては

<template>
<HogeBlock />
<HogeImage/>
<HogeButton /> 
</template>

ワイ「いつになったら問題のコードにたどり着くんや」

コンポーネントマトリョーシカ設計

こう言うコンポーネントマトリョーシカ🪆についてどう思いますか?

コンポーネントは再利用性があるもの
機能的に分離して疎結合にし、コードの可読性を高めたいもの

に限って使いたい派なので、このようなとりあえずなんでもかんでもコンポーネントにしろ、的な設計はうーんって感じます。

プロジェクトの規模にもよると思いますが。

そう思う
これでいい

などコメント欄やSNS引用で広くバトルしていただけたらと思います。