🐥

Vueで大規模プロジェクトを想定したcomponentsディレクトリ構成の考え方

に公開
テーマ「フリーテーマ」
TypeScript
Vue 3
Vite
Pinia
zennfes2025free
tech

前置き

法人向けのWebサイトをVueで新規構築するにあたり、Vueのcomponentsディレクトリ構成について改めて整理・検討することになりました。
現在の要件としては、Atomic Designをベースにコンポーネントを設計する方針です。

環境

  • Vue3

    • Vue2と比べて大きく進化しており、とくに<script setup>構文が推奨されるようになっています。
    • ▶️ https://github.com/vuejs

  • Vite

    • Webpackの代替となるバンドラー。Vue3で推奨されており、作者のエヴァン・ユー氏が開発。
    • 高速なビルド性能を持ち、現在注目を集めています。

  • TypeScript

    • JavaScriptをより明確に記述できる言語。Vue3では積極的に利用が推奨されています。

  • Pinia

Case Study : Components in Large Scale Application

コンポーネントのフォルダリングには大きく分けて次の2つの考え方があります。

  1. UIアイテムを基準に構成
    • 例：Card、Form、Slider、Loader など
  2. 機能（ドメイン）を基準に構成
    • 例：Post、User、Comment など

この2つをベースに、実際の大規模アプリでよく見られる構成パターンを4つに整理しました。

Case1. ui-item foldering in components

components内にbutton、form、input、listといったUIアイテムをフォルダごとにまとめる方式。

  • メリット

    • Atomic Designに近づけられる
    • 可読性が高まる
    • UI共通化作業が容易

  • デメリット

    • UIアイテムだけではカバーしきれない領域がある

📌 参考:

Case2. function foldering in components

components内を機能単位でフォルダリング。

  • メリット

    • 最も直感的で分かりやすい

  • デメリット

    • コンポーネントが増えると、フォルダが乱立し管理が難しくなる

📌 参考:

Case3. function foldering next to components

src直下に機能ごとのフォルダを作成し、その中にcomponentsを置く方式。

  • メリット

    • components配下が肥大化しない
    • 各機能にstoreやutilをまとめられる

  • デメリット

    • assetsやpluginsと混同しやすい

📌 参考:

Case4. function foldering in modules next to components

Case3をmodulesフォルダで包み込む方法。

  • メリット

    • 最上位のフォルダ構造が整理される
    • viewsやpagesと統合する設計も可能

  • デメリット

    • 学習コストが少し上がる

📌 参考:

まとめ

プロジェクトの規模やスタイルに応じて、上記の4つのケースのいずれかを採用するのが適切です。

今回のプロジェクトはAtomic Designを基盤にする予定であり、さらに大規模開発を前提としているため、よりスケールを意識したフォルダ設計が必要です。
また、自社運用ではなく納品を前提とする案件であるため、運用担当者にとって分かりやすい構成であることも重要です。

これらを踏まえると、Case4が最適だと考えています。さらに、Case1のUIアイテムフォルダリングとAtomic Designの要素を組み合わせることで、より柔軟で拡張性の高いアーキテクチャになると期待しています。

今後も検証を進め、実プロジェクトに反映できる形に落とし込んでいきたいと思います。

Discussion