"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { blockquote: "blockquote", code: "code", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", strong: "strong", table: "table", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "プロジェクトを続けていると、いつの間にか使われていないファイルやコンポーネントが増えてきます。コードベースが散らかった状態では、バグが生まれやすく、新しいメンバーのオンボーディングも難しくなります。この記事では、Next.jsプロジェクトの整理・リファクタリングのための実践的な方法を紹介します。" }), "\n", _jsx(_components.h2, { children: "1. 未使用のファイル・コードを見つける" }), "\n", _jsx(_components.h3, { children: "ts-prune — 未使用エクスポートの検出" }), "\n", _jsxs(_components.p, { children: ["TypeScriptプロジェクトで、どこからも使われていない ", _jsx(_components.code, { children: "export" }), " を検出します。削除候補のリストアップに便利です。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm install -D ts-prune\nnpx ts-prune\n" }) }), "\n", _jsx(_components.p, { children: "実行すると、未使用エクスポートの一覧が出力されます。" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "src/lib/helpers.ts:12 - formatDate\nsrc/components/OldButton.tsx:3 - default\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "// ts-prune-ignore-next" }), " コメントで特定の行を除外することも可能です。"] }), "\n", _jsx(_components.h3, { children: "eslint-plugin-unused-imports — 未使用importの自動削除" }), "\n", _jsxs(_components.p, { children: ["未使用の ", _jsx(_components.code, { children: "import" }), " 文を検出し、警告または自動削除できるESLintプラグインです。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm install -D eslint-plugin-unused-imports\n" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// eslint.config.js（Flat Config形式）\nimport unusedImports from 'eslint-plugin-unused-imports';\n\nexport default [\n {\n plugins: {\n 'unused-imports': unusedImports,\n },\n rules: {\n 'unused-imports/no-unused-imports': 'warn',\n 'unused-imports/no-unused-vars': [\n 'warn',\n {\n vars: 'all',\n args: 'after-used',\n ignoreRestSiblings: true,\n },\n ],\n },\n },\n];\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "npm run lint --fix" }), " と組み合わせることで、未使用importを一括削除できます。"] }), "\n", _jsx(_components.h3, { children: "VSCode の機能を活用する" }), "\n", _jsx(_components.p, { children: "IDE側でも手軽に未使用コードを見つけられます。" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "操作" }), _jsx(_components.th, { children: "機能" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "Cmd + Shift + F" }) }), _jsx(_components.td, { children: "グローバル検索（どこで使われているか確認）" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "Cmd + Click" }) }), _jsx(_components.td, { children: "定義へジャンプ" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "右クリック → 参照をすべて検索" }), _jsx(_components.td, { children: "使用箇所の一覧を表示" })] })] })] }), "\n", _jsx(_components.p, { children: "おすすめ拡張機能:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Import Cost" }), " — importしたパッケージのバンドルサイズをインライン表示"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Error Lens" }), " — ESLintの警告をコード上にリアルタイム表示"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Code Spell Checker" }), " — typoの検出"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "2. フォルダ構成のベストプラクティス（App Router対応）" }), "\n", _jsx(_components.h3, { children: "アンダースコアプレフィックスでルートと区別する" }), "\n", _jsxs(_components.p, { children: ["App Routerでは、", _jsx(_components.code, { children: "app/" }), " 配下のフォルダが自動的にURLルートになります。ルートではないフォルダには ", _jsx(_components.code, { children: "_" }), " を付けることで、Next.jsがルートとして認識しなくなります。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "app/\n├── _components/ # 再利用可能なUIコンポーネント\n├── _lib/ # API通信・DB・ユーティリティ関数\n├── _hooks/ # カスタムフック\n├── _config/ # 環境設定・定数\n├── _types/ # 型定義（TypeScript）\n├── (marketing)/ # ルートグループ（URLに影響しない）\n│ ├── page.tsx # /\n│ └── about/\n│ └── page.tsx # /about\n├── (dashboard)/ # ルートグループ\n│ └── dashboard/\n│ ├── page.tsx # /dashboard\n│ └── settings/\n│ └── page.tsx\n├── layout.tsx\n└── globals.css\n" }) }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "ポイント:" }), " ", _jsx(_components.code, { children: "(フォルダ名)" }), " のカッコ付きフォルダは「ルートグループ」として機能し、URLには影響しません。関連するルートをまとめて ", _jsx(_components.code, { children: "layout.tsx" }), " を共有するのに便利です。"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "コロケーション（コロケーション設計）" }), "\n", _jsx(_components.p, { children: "コンポーネントと、そのコンポーネントにしか使わないファイルは同じフォルダに置くと管理しやすくなります。" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "app/(dashboard)/dashboard/\n├── page.tsx\n├── _components/\n│ ├── DashboardHeader.tsx # このページ専用\n│ └── StatsCard.tsx # このページ専用\n└── _hooks/\n └── useDashboardData.ts # このページ専用\n" }) }), "\n", _jsxs(_components.p, { children: ["プロジェクト全体で使う共通コンポーネントは ", _jsx(_components.code, { children: "app/_components/" }), " や ", _jsx(_components.code, { children: "components/" }), " に置きます。"] }), "\n", _jsx(_components.h2, { children: "3. コンポーネントの整理・統合" }), "\n", _jsx(_components.h3, { children: "似た役割のコンポーネントを統合する" }), "\n", _jsxs(_components.p, { children: ["似た見た目・機能のコンポーネントが複数ある場合は、", _jsx(_components.code, { children: "variant" }), " や ", _jsx(_components.code, { children: "size" }), " などのpropsで切り替えられる1つのコンポーネントにまとめます。"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "統合前:" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// PrimaryButton.tsx\n// SecondaryButton.tsx\n// DangerButton.tsx\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "統合後:" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// Button.tsx\ntype ButtonVariant = 'primary' | 'secondary' | 'danger';\ntype ButtonSize = 'sm' | 'md' | 'lg';\n\ninterface ButtonProps extends React.ButtonHTMLAttributes {\n variant?: ButtonVariant;\n size?: ButtonSize;\n isLoading?: boolean;\n}\n\nconst variantClasses: Record = {\n primary: 'bg-blue-600 text-white hover:bg-blue-700',\n secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',\n danger: 'bg-red-600 text-white hover:bg-red-700',\n};\n\nconst sizeClasses: Record = {\n sm: 'px-3 py-1.5 text-sm',\n md: 'px-4 py-2 text-base',\n lg: 'px-6 py-3 text-lg',\n};\n\nexport const Button = ({\n variant = 'primary',\n size = 'md',\n isLoading,\n children,\n className,\n ...props\n}: ButtonProps) => {\n return (\n \n {isLoading ? '処理中...' : children}\n \n );\n};\n" }) }), "\n", _jsx(_components.p, { children: "使用例:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "\n\n\n" }) }), "\n", _jsx(_components.h2, { children: "4. リファクタリングの進め方" }), "\n", _jsx(_components.h3, { children: "Gitブランチを切って安全に作業する" }), "\n", _jsx(_components.p, { children: "削除や大規模な統合は、必ず専用ブランチで行います。" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "git checkout -b refactor/clean-up-components\n" }) }), "\n", _jsx(_components.p, { children: "作業が完了したらPRを出してレビューを受けることで、意図しない削除を防げます。" }), "\n", _jsx(_components.h3, { children: "段階的に進める" }), "\n", _jsx(_components.p, { children: "一度に全部やろうとすると、動作確認が難しくなります。以下のような順番で段階的に進めると安全です。" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "検出" }), " — ", _jsx(_components.code, { children: "ts-prune" }), " / ESLintで未使用コードをリストアップ"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "確認" }), " — 本当に使われていないか、VSCodeで参照を確認"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "削除" }), " — 1ファイルずつ削除してビルドが通るか確認"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "統合" }), " — 似たコンポーネントをまとめる"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "テスト" }), " — 動作確認・型チェック・ビルドを通す"] }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# 型チェック\nnpx tsc --noEmit\n\n# ビルド確認\nnpm run build\n" }) }), "\n", _jsx(_components.h3, { children: "コード掃除の時間を定期的に確保する" }), "\n", _jsxs(_components.p, { children: ["機能開発とは別に、", _jsx(_components.strong, { children: "週1回・スプリントの終わりに1時間" }), "など、コード整理に集中する時間をチームで決めておくのが効果的です。「後でやる」は往々にして実行されません。"] }), "\n", _jsx(_components.h2, { children: "5. Vercelデプロイ時の注意点" }), "\n", _jsxs(_components.h3, { children: [_jsx(_components.code, { children: "public/" }), " フォルダの不要ファイルを削除する"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "public/" }), " に置いた静的ファイルはすべてデプロイされます。使っていない画像・PDFなどが増えるとビルドサイズや転送量に影響します。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# public/ の内容を確認\nls -lhR public/\n" }) }), "\n", _jsx(_components.p, { children: "使われていない画像ファイルは、Vercelのログ（Analytics）でアクセスのないパスを確認して整理しましょう。" }), "\n", _jsxs(_components.h3, { children: [_jsx(_components.code, { children: ".env" }), " ファイルの管理"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: ".env # 本番環境用（Gitに含めない）\n.env.local # ローカル開発用（Gitに含めない）\n.env.example # キー名のテンプレート（Gitに含める）\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: ".env.example" }), " には値を入れず、キー名だけを記録しておきます。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# .env.example\nDATABASE_URL=\nNEXT_PUBLIC_API_BASE_URL=\nCLERK_SECRET_KEY=\n" }) }), "\n", _jsx(_components.h2, { children: "まとめ" }), "\n", _jsx(_components.p, { children: "整理・削除の作業は地味に見えますが、コードベースの健全性を保つために非常に重要です。" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "ts-prune" }) }), " と ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "eslint-plugin-unused-imports" }) }), " で未使用コードを自動検出する"] }), "\n", _jsxs(_components.li, { children: [_jsxs(_components.strong, { children: [_jsx(_components.code, { children: "_" }), " プレフィックス"] }), " と ", _jsx(_components.strong, { children: "ルートグループ" }), " でApp Routerのフォルダ構成を整理する"] }), "\n", _jsxs(_components.li, { children: ["似たコンポーネントは ", _jsx(_components.strong, { children: "propsで切り替えられる1つのコンポーネント" }), " に統合する"] }), "\n", _jsxs(_components.li, { children: ["リファクタリングは ", _jsx(_components.strong, { children: "専用ブランチで段階的に" }), " 進める"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "定期的なコード掃除の時間" }), " をスケジュールに組み込む"] }), "\n"] }), "\n", _jsx(_components.p, { children: "小さな整理を継続することで、長期的に開発速度とコード品質の両方が向上します。" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Next.jsのファイル・フォルダ管理とリファクタリング戦略