Unitのじゆんきち(@junkisai)です。版のNewsPicksを新しい基盤に置き換えるプロジェクト(以降、リアーキプロジェクト)を進めています。Colocationという考え方を導入したら、これまで抱えていた技術的な課題が解消され、開発スピードが向上したお話をしようと思います。導入前の課題リアーキプロジェクト開始当初から使用していたGraphQLですが、プロダクトの規模が大きくなるにつれ、いくつか課題が浮き彫りになってきました。このツールが自動生成してくれるのは型定義だけではなく、QueryやMutationを呼び出せるhooksも含まれています。自動生成されたhooksは、通信まわりをすっきり記述できるというメリットがあり、弊プロダクトでは下記のようなルールでコンポーネントを構成して、コンポーネント内で利用していました。/>}しかし、ページを読み込む際にレンダリングするコンポーネントの数だけQueryを叩くことになるので、扱うコンポーネント数が多くなるにつれて通信回数が増えてしまうという問題がでてきました。クエリを書く際に必要な項目が漏れていたり、不要な項目が残ったままになる弊プロダクトでは、コンポーネントがどんなデータを必要としているかを、ページのクエリとして記述するという形を取っていました。このため、各コンポーネントの知識をページがもつ必要があり、コンポーネントの追加や変更があった際、同時にページのクエリも変更しなければなりませんでした。News_Bというコンポーネントをあるページに表示する際の実装をあげてみます。News_Bコンポーネントを表示するページのクエリは下記のようになり、Newsスキーマのデータがほしいコンポーネントが増えれば増えるほど、クエリの管理が複雑になり、仕様変更によって使用しなくなった項目が残ったままになったり、項目の記述漏れが発生してしまいます。弊プロダクトでは、コンポーネントをcomponents/ディレクトリ下で管理しており、下記のようなルールでコンポーネントを振り分けています。domain/下は更に各ドメイン知識ごとにディレクトリが分けられているといった状態です。層の線引きが曖昧になってしまいました。Colocation」とは、コンポーネントが必要なデータをGraphQLのFragmentで記述し、コンポーネントと同じ場所で宣言する考え方です。各コンポーネントに自分をレンダリングするために必要な項目をFragmentとしてまとめ、ページコンポーネントでレンダリングするコンポーネントのFragmentを取りまとめて、単一のクエリを投げるという形を取ります。Colocationの考え方をベースに、コンポーネントのディレクトリやファイル構成、クエリの管理ルールなどを再考しました。components/下のディレクトリ振り分けルールまず、components/下のディレクトリを下記のような振り分けルールに更新し、domain/下もGraphQLスキーマベースにディレクトリを切っていくというルールに変更しました。Movieスキーマの項目を使用するコンポーネントGraphQLファイルの置き場所ページとQuery、コンポーネントとFragmentがそれぞれ1対1に対応するため、下記のようにページとコンポーネントそれぞれの近くに配置することにしました。具体的な実装フローユーザー一覧ページ(/users)にUserCardというコンポーネントを表示する場合の実装フローを紹介します。コンポーネントと対になるFragmentの定義をfragment.graphqlに記述します。Generatorにかけると下記のような型定義が生成されます。string}生成された型定義をUserCardコンポーネントのpropsとして使用して、コンポーネントを組み上げていきます。/>}次にコンポーネントを呼び出したいページのクエリを更新します。}}最後に該当のコンポーネントまでデータを流し込んで完了です。Colocationが解決してくれました。domain/下のディレクトリ分けをGraphQLスキーマベースにしたことで、メンバー間で解釈が異ならないルールになったまた、BFFでスキーマ定義さえ先にしてしまえば、コンポーネントの実装からBFFとのつなぎこみまでノンストップで進めることができるといったメリットも得られ、弊チームの開発スピードも導入前に比べ、向上したのではないかと思います。Colocationという考え方を取り入れて改善した話を紹介させていただきました。UnitはNewsPicksにおけるWebの価値を届けるべく、より良い技術を模索し、プロダクトを成長させ続けています。reserved.引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。