スケーラブルなフォルダ構成
大規模なVueプロジェクトを保守しやすく整理します。
「スケーラブルなフォルダ構成」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。
構成が重要な理由
Vueアプリのファイル数が少数を超えて増えてくると、整理方法によって、コードの見つけやすさや保守のしやすさ、新しい開発者の参加しやすさが決まります。適切な構成は規模の拡大に対応できますが、混乱した構成はチーム全体の作業を遅くします。
種類別の構成
種類別のアプローチでは、ファイルの種類ごとにまとめます。たとえば、すべてのコンポーネント、ビュー、ストアをそれぞれ同じ場所に配置します。シンプルで、小規模から中規模のアプリに適しています。
src/
components/
views/
stores/
composables/
router/機能別の構成
機能別のアプローチでは、ファイルを所属する機能ごとにまとめます。認証機能に必要なものを1つのフォルダーに集めるため、大規模なアプリでも構造を把握しやすくなります。
src/
features/
auth/
LoginView.vue
useAuth.js
authStore.js
cart/
CartView.vue
cartStore.jsアプローチの選択
小規模なアプリには種類別の構成が適しています。アプリが成長して機能が増えると、機能別の構成によって関連するコードをまとめられ、フォルダー間を行き来する手間を減らせます。多くのチームは種類別の構成から始め、規模の拡大に合わせて移行します。
ビューとコンポーネントの分離
ビュー（ページ単位で、ルーティングされるコンポーネント）と、コンポーネント（再利用可能な構成要素）を区別します。この分離により、どの要素がルーティング対象で、どの要素が共有されるものかが明確になります。
views/ // routed pages: HomeView.vue, AboutView.vue
components/ // reusable: BaseButton.vue, UserCard.vueコンポーザブルの整理
再利用可能なComposition APIのロジックは、composables フォルダーにまとめます。名前に use プレフィックスを付けると、その目的がひと目でわかります。
composables/
useAuth.js
useFetch.js
useLocalStorage.jsストアの整理
グローバルな状態を管理するストアは stores フォルダーに配置し、ドメインごとに1つのファイルに分けます。これにより、状態管理の場所がわかりやすくなり、モジュール化もできます。
stores/
user.js
cart.js
settings.js命名規則
一貫性があると、開発時の負担が減ります。コンポーネントのファイルにはPascalCaseを使い、基本コンポーネントには Base を付け、HTML要素と名前が衝突しないように複数の単語を組み合わせた名前を使います。
// components
BaseButton.vue
BaseInput.vue
UserProfileCard.vue
// composables
useAuth.jsバレルエクスポート
バレルとは、フォルダーの内容を再エクスポートする index.js のことです。利用側は複数のパスからではなく、1つのパスからインポートできます。
// composables/index.js
export { useAuth } from "./useAuth"
export { useFetch } from "./useFetch"バレルからのインポート
バレルを使うと、複数のインポートをすっきりした1行にまとめられ、コードの読みやすさが向上します。
import { useAuth, useFetch } from "@/composables"一貫性を保つ
どの構成を選んでも、一貫して適用し、プロジェクトのREADMEに記載してください。チーム全体が理解して守れる構成が、最も優れた構成です。アプリの成長に合わせて、機能別の構成へリファクタリングしましょう。
理解度チェック
フォルダー構成についての知識を確認しましょう。
まとめ
小規模なアプリでは種類別に整理し、規模が大きくなったら機能別に整理します。ルーティングされるビューと再利用可能なコンポーネントを分け、コンポーザブルとストアは専用のフォルダーにまとめ、命名規則を統一します。また、インポートを整理するにはバレルエクスポートを使用します。チーム向けに文書化された一貫性こそが、構成を本当に拡張しやすくします。
よくある質問
「スケーラブルなフォルダ構成」レッスンは無料ですか？
はい。「スケーラブルなフォルダ構成」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。
「スケーラブルなフォルダ構成」で何を学びますか？
大規模なVueプロジェクトを保守しやすく整理します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。
「スケーラブルなフォルダ構成」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ミックスインとカスタムディレクティブ
- プラグイン開発
- スケーラブルなフォルダ構成