Nuxt.jsコンポーネントは疎結合に

疎結合と密結合

一緒に勉強していた友達が「このコンポーネントは疎結合になっててうまく作れたと思うんだよね～」などという言葉を使っていて「なにそれ？」となったので調べてみました。

疎結合

お互いの関わりが薄くて、分けるのが楽になっている状態

密結合

お互いの関わりがごちゃごちゃと組み合っていて分けるのが大変な状態

例として

人間の体は密結合です。

頭だけ貸して？と言われてかせませんよね

逆にア○パンマンは疎結合です

顔だけ貸して？新しい顔よ！と言われて簡単に取り替えられますよね。簡単なので疎結合です。

本題

コンポーネントは疎結合であるべきというか、疎結合であったほうがいいなあと思います。

https://wa3.i-3-i.info/diff452ketugou.html

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

の記事内で、疎結合の例として「ピヨ子システム」なるものが出てきます。

これは機能１、機能２、機能３というものが組み合わさって一つのシステムになっています。

そうすることで機能１自体の質は低くても使いまわすことで、結果として多くの機能が提供されます。

そもそもNuxt.jsにおけるコンポーネントとは何かというと

再利用可能なものと言う意味です。

そのため

コンポーネントは疎結合であるべき

ということが言えるわけです。

ただ、

コンポーネントひとつあたりの機能が小さすぎるとコンポーネント数が増えて管理しにくくなりますし、

コンポーネントひとつあたりの機能が大きいと再利用しにくくなりますのでなんというか

良い塩梅というのがみつけにくいなあと思うのが作っている中で感じている感想です。

これは経験がものをいうというのをしみじみ感じるところでした。