SPA Componentの推しディレクトリ構成について語る記事を読んだ

SPA Componentの推しディレクトリ構成について語る

リーディングリストに入れていたので読んだ。

Nuxt.jsを使っているんだけど、ディレクトリの切り方に関してはずっと悩み続けていて、どうすればより分かりやすく、新たなコンポーネントを追加するときに迷わずに追加できるかを見いだせていない。

なのでこういったディレクトリの切り方やコンポーネントの切り分け方などは非常に参考になる。

記事内では、

pagesはルーティングの機能だけを使い、ページのコンポーネントの実態はsrc/components/pageに入れる
modelに関心を持つコンポーネントはsrc/components/modelに入れる
modelに関心を持たないコンポーネントはsrc/components/uiに入れる
modelに関心をを持たず、見た目も持たないコンポーネントはsrc/components/functionalに入れる

という感じでやっているらしい。

個人的に納得感が高く、なるほどな〜と思って読んでた。

URLとpageの名前を別にしたい需要は、今はなくても今後出てくるかな？という気もするのでいいなと思う。あとのコンポーネントは全て(基本的に)model or uiということになるので、あとはmodel内でdomainごとに正しくディレクトリを切り、そこに関係するコンポーネントを置いていく or uiの役割(modalとかbuttonとか)に分けて置いていくという感じだろうか。

明瞭で分かりやすいので参考にさせてもらおう。

hooksの切り出しの話も、Nuxt.jsでいうComposition APIでのロジックの切り出しをどこまでやるかという話と似ている。

この記事ではロジックの切り出しは「複数のコンポーネントで共有したい汎用的な機能」を切り出して、コンポーネント内部でしか使わない処理をコンポーネントファイルにそのまま書いているということになる。

ここらへんもディレクトリの切り分けと同様に悩んでいて、ロジックを切り出すときのルールも決まっていないし、どういうルールにすればより分かりやすいのかも分かっていない。

リアクティブな変数(component localなstate)を切り出していいかどうか、汎用的な機能でなくてもファイルの肥大化を避けるために切り出すかどうかなど、考えることが多くある。

VueでSFCを使っているとReactと違いtemplate, script, styleが全て1つのファイルに含まれるのでロジックを分離しないとファイルが肥大化しがちという認識はある。もちろんReactでもロジックとstyleを(styled-componentsのようなCSS in JSを使えば)同ファイルに書けば同様だとは思うけれど。

ファイルの肥大化とロジックの分離は未だに最適解がわからないので難しい。

これとは別にglobalなstateの持ち方なども含めて考えることが多く、フロントエンドって難しいな……となっている。