Web フロントエンドにおけるコロケーション (co-location) という考え方について - mizdra's blog

Webフロントエンド界隈の文献などにあたっていると、「コロケーション (co-location)」という考え方が時々登場します。 コロケーションを簡単に説明すると、関連するリソース同士を近くに置いておく、という考え方です。 FooComponent.tsx と同じディレクトリに FooComponent.test.tsx を置く GraphQL fragment は、クエリを発行するコンポーネントファイル (pages/user.tsx) ではなく、fragment を利用するコンポーネントファイル (components/UserInfo.tsx) の中で定義する pages/user.tsx からはサブコンポーネントのファイルで定義されている fragment を import してきて、クエリを組み立てて発行する API ドキュメントは API.md に書くのではなく、コードの中にド

[dorapon2000]

“また考え方を知っておけば、「このファイルをどこに置くか」などといった開発中の悩みも軽減されるため、開発速度の向上にも繋がります。”

[uva]

「関連するリソース同士を近くに置いておく、という考え方です」

[stibbar]

https://zenn.dev/shwld/articles/1f88b6766eb219

[shingo-sasaki-0529]

アプリコードとテスト用コード(特にブラウザでなく Node で動かすコード) が同じディレクトリにあると各種ツールの設定をディレクトリベースにできなくてしんどいのはある。

[wdoomer]

なるほど

[rail44]

プロジェクトツリーの中に同じ命名の名前空間が複数あるような構造をアンチパターンとするやつ、フロントエンドだとこういう呼び方になっているのか。

[kazuhi_ra]

なんて呼べば良いんだろうと思いながら使ってたので助かりました

[lifeisadog]

好きにしろ

[surume000]

レイヤーと両立するのバランスが難しそう

[field_combat]

「関連するリソース同士を近くに置いておく」確かにケースバイケース。まとめて処理したいときに邪魔になったりもするし

[gfx]

一口にコロケーションといってもいろいろあるのだな。たしかに自明な感じででてくる割にはあまり説明されることのない用語な気がする。

[door-s-dev]

名前があったのか

[peketamin]

よさそう

[mayumayu_nimolove]

私もコロッケを想像したコロッケ

[mevota4961]

Web フロントエンドにおけるコロッケ

[euclidean]

コ - ロケーション って事か

[mon_sat]

最近はテストファイルやstories.tsを元ファイルのとこに書いてたけど、コロケーションっていうのね。勉強になった。たしかに便利なのよね、書いたかどうかも明確になるし。

[oooooo4150]

インフラ界隈では使わなくなってきてるとはいえネームスペース衝突だ