【初心者向け】フロントエンドのフォルダー構成をわかりやすく解説！

フロントエンドの開発を始めるときに「どのフォルダーに何を入れればいいの？」と迷うことはありませんか？

本記事では、初心者の方でも理解しやすいように、フロントエンドのプロジェクトでよく使われるフォルダー構成を解説します！💡

📂 フロントエンドのフォルダー構成（基本）

以下のようなフォルダーを作成すると、コードが整理されて管理しやすくなります。

my-frontend/
├── public/  ← 画像やフォント、favicon などの静的ファイル
│   ├── images/
│   ├── icons/
│   ├── favicon.ico
│   └── index.html
├── src/  ← フロントエンドのメインコード
│   ├── components/  ← UI部品（ボタンやナビゲーション）
│   ├── pages/  ← 各ページのコンポーネント
│   ├── layouts/  ← 共通レイアウト（ヘッダー・フッターなど）
│   ├── store/  ← 状態管理（Pinia, Vuex, Redux）
│   ├── composables/  ← カスタムロジック（Vue 3 の Composables, React の Hooks）
│   ├── utils/  ← 便利な関数（データ変換など）
│   ├── middleware/  ← ルートガードなどのミドルウェア
│   ├── api/  ← API 通信関連の処理
│   ├── assets/  ← CSS, SCSS, 画像（ビルド時に処理するファイル）
│   ├── router/  ← ルーティング設定（Vue Router, React Router）
│   ├── main.js (or main.ts)  ← アプリの起点
│   └── App.vue (or App.js)  ← メインコンポーネント
├── .env  ← 環境変数ファイル
├── package.json  ← プロジェクトの設定
└── README.md  ← 説明書

📌 各フォルダーの意味と使い方

1️⃣ components/（コンポーネント）

✅ どんなフォルダー？

• ボタンやナビバーなどの「再利用できる UI 部品」を入れる場所。

✅ 例

<!-- Button.vue -->
<template>
  <button class="btn">クリック</button>
</template>

2️⃣ pages/（ページ）

✅ どんなフォルダー？

• Web アプリの各ページのコンポーネントを入れる場所。

✅ 例

• Home.vue（トップページ）
• About.vue（会社概要）

3️⃣ public/（静的ファイル）

✅ どんなフォルダー？

• 画像やフォント、favicon などの「ビルド不要の静的ファイル」を配置。
• src/assets/ との違い → assets/ はビルド時に処理されるが、public/ はそのまま配信。

✅ 例

• favicon.ico
• images/logo.png

4️⃣ router/（ルーティング）

✅ どんなフォルダー？

• ページの遷移を管理するルート設定を入れる。

✅ 例（Vue Router の場合）

// index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../pages/Home.vue';
import About from '../pages/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({ history: createWebHistory(), routes });
export default router;

🎯 まとめ

フロントエンドのフォルダー構成を整理すると、
✅ コードがスッキリする！
✅ 開発がしやすくなる！
✅ チーム開発でも迷わない！

初心者の方は、まず components/, pages/, router/ から作ってみると良いでしょう！💡

🔰 「こんなフォルダーも知りたい！」というリクエストがあれば、ぜひコメントください！ 🚀