
モジュールのimportはどのように書いていますか？

相対パスの場合、階層が深くなればなるほど `../../../../SomeComponent` のように `../` をいくつも並べることになり見た目にもわかりにくいです。これは相対パスがimport 先のファイルを起点としたパスになるためです。

一方で絶対パスと呼ばれる階層の上を起点としたパスの書き方があります。 `@/src/components/Layout/SomeComponent` のように `@/` に続いて常に同じフォルダから始まるため、相対パスと比べて階層の見通しがとても良くなります。

React, TypeScript を使用するプロジェクトでの絶対パスで import する方法です。

## 要件

- React
- TypeScript
- Vite

ファイルディレクトリ

```text
/
  src/
    components/
      SomeComponent.tsx
    index.tsx
  tsconfig.json
  vite.config.ts
```

## 設定方法

### 1. tsconfig.json に追記

```json
{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "@/src/*": [ "./src/*" ]
    }
  }
}
```

### 2. vite.config.ts に追記

```tsx
export default defineConfig({
  plugins: [
    ...
  ],
  resolve: {
    alias: {
      "@/src": "/src"
    },
  },
});
```

以上で設定は完了です。

## 例

```text
src
|-- components/
|   |-- Button/
|       |-- Button.tsx
|
|-- pages/
    |-- UserProfile/
        |-- UserProfile.tsx
```

`Button.tsx` をimportする場合は以下のように書くことができます。

```tsx
import Button from "@/src/components/Button/Button";
```


絶対パス（@始まり）で import する方法 [React, TypeScript]

Tags