"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h1: "h1", h2: "h2", h3: "h3", hr: "hr", p: "p", pre: "pre", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "ファイル・フォルダの管理とリファクタリング戦略 Next.jsプロジェクトでファイルやフォルダが増えすぎたときの整理整頓術" }), "\n", _jsx(_components.h1, { children: "📁 ファイル・フォルダの管理とリファクタリング戦略" }), "\n", _jsx(_components.p, { children: "プロジェクトを作っているうちに、使っていないファイルやコンポーネントが増えてくることはよくあります。ここでは、整理・リファクタリングのためのベストプラクティスとツールを紹介します。" }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "🧹 使っていないファイルやコードを見つける方法" }), "\n", _jsxs(_components.h3, { children: ["1. ", _jsx(_components.code, { children: "ts-prune" }), " を使う"] }), "\n", _jsx(_components.p, { children: "TypeScriptのコードから未使用のエクスポートを検出します。" }), "\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.h3, { children: "2. VSCode の機能を活用する" }), "\n", _jsx(_components.p, { children: "•\tCmd + Shift + F：グローバル検索\n•\tCmd + Click：定義へジャンプ\n•\t拡張機能のおすすめ：\n•\tImport Cost\n•\tCode Spell Checker" }), "\n", _jsx(_components.p, { children: "⸻" }), "\n", _jsx(_components.h3, { children: "3. eslint-plugin-unused-imports を使う" }), "\n", _jsx(_components.p, { children: "未使用の import を検出・削除してくれる ESLint プラグインです。" }), "\n", _jsx(_components.p, { children: "npm install -D eslint-plugin-unused-imports" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "// .eslintrc.js\nplugins: ['unused-imports'],\nrules: {\n 'unused-imports/no-unused-imports': 'warn',\n 'unused-imports/no-unused-vars': [\n 'warn',\n { vars: 'all', args: 'after-used', ignoreRestSiblings: true },\n ],\n}\n" }) }), "\n", _jsx(_components.p, { children: "⸻" }), "\n", _jsx(_components.h2, { children: "🗂️ フォルダ構成のベストプラクティス（App Router対応）" }), "\n", _jsx(_components.p, { children: "app/\n├── _components/ # 再利用UI（shadcnなど）\n├── _lib/ # API、db、utility\n├── _hooks/ # カスタムフック\n├── _config/ # 環境設定・定数\n├── (routes)/ # ページルート（App Router構成）\n│ └── dashboard/\n│ └── page.tsx\n├── layout.tsx\n└── globals.css" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "\n ポイント\n \n フォルダ名の先頭に _ を付けることで、Next.js に「これはルートではない」と示すことができます。\n \n\n" }) }), "\n", _jsx(_components.p, { children: "⸻" }), "\n", _jsx(_components.h2, { children: "🔁 リファクタリングの進め方" }), "\n", _jsx(_components.h3, { children: "✅ 1. コード掃除デーを設ける" }), "\n", _jsx(_components.p, { children: "開発とは別に、コードの整理・改善に集中する時間を定期的に取りましょう。" }), "\n", _jsx(_components.p, { children: "⸻" }), "\n", _jsx(_components.h3, { children: "✅ 2. 似た役割をまとめる" }), "\n", _jsx(_components.p, { children: "複数の似たコンポーネントを1つに統合し、variant や type などの props で切り替えると再利用性が高まります。" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "

Tailwind CSS の className 命名規則と運用 🚀