フロントエンドのコンポーネント分類方法【一目比較事例】

2024年6月15日 21:05

経緯

Nuxt3を使ってフロントエンド開発をしていて、コンポーネントはユースケースによって分類したいが、適切な分類・名前の付け方が思い浮かばず、良い方法を探していた。

そこで、食べログのフロントエンド開発記事を見つけた。

これが参考になったので、どのようにコンポーネントを分類すればよいのかまとめる。

AtomicDesignでは以下のようにコンポーネントを分類していた。

しかし、分類には以下の評価項目だけで充分だった。

そこで、評価項目に対して分類が多すぎたので、以下のように分類を修正する。

旧atomsと旧moleculesをまとめて、uiPartsというディレクトリに格納しています。このレイヤーにいるものはデザインシステムのUIライブラリに載せるべき汎用的なコンポーネントであるため、この中のコンポーネントのみStorybookに掲載することにしました。

旧organismsのうち、ページを跨いで呼び出される共通の機能をprojectsというディレクトリでまとめています。「様々なページで使われるが、汎用的ではなく特定の用途でしか使われない機能」であり、食べログでは、口コミを投稿するためのモーダルなどがあたります。

・特定のページでしか使われないコンポーネントは、該当のページのディレクトリ内に配置した。

「uiParts, projects, pages」だけ分類すれば、事足りるそうだ。

比較表は以下のGPTsで作成しました。

この記事が気に入ったらサポートをしてみませんか？