Zenn
🔧

React開発での絶対パス設定まとめ

に公開
JavaScript
React
TypeScript
tech

React でコンポーネントをインポートするたびに ../ を繰り返していて、見づらい・修正が大変と感じたことはありませんか？

この記事では、import useStyles from "../components/styles"; のような相対パスではなく、import useStyles from "components/styles"; のような絶対パスでインポートする設定方法を紹介します。

✅ やりたいこと

例えば以下のような構成のとき：

├── App.tsx
├── components/
│ └── styles.ts

通常は以下のような相対パスになります。

import useStyles from "../components/styles";

ですが、絶対パスにしたい！

import useStyles from "components/styles";

✅ TypeScript プロジェクトの場合（tsconfig.json）

  1. tsconfig.json を以下のように編集します。
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "components/*": ["components/*"]
    }
  }
}

src/components/styles.ts にファイルがある場合の設定です。
2. 保存後、VS Code を再起動するか、ターミナルで tsc --build を実行すると反映されます。

✅ JavaScript + CRA (Create React App) の場合（jsconfig.json）

tsconfig.json ではなく jsconfig.json を使います。

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

✅ 補足：ESLintでのimportエラー対策

ESLint を導入していて絶対パスがエラーになる場合は、.eslintrc に以下の設定を追加してください。

{
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    }
  }
}

✅ おわりに

相対パス地獄から解放されると、以下のようなメリットがあります。

  • フォルダ構成変更でも import 修正が楽
  • 可読性がアップ
  • コードがスッキリ！

ぜひ導入してみてください🙌

Discussion