[React] Vite - コンポーネントや関数を他ファイルから絶対パスでインポートする方法

はじめに

現在プロジェクトで実装を行っているのですが、よく他メンバーが書いたコードを読むことがあります。
その際に、インポートされているモジュールがどこにあるファイルなのかがパッと分かりずらいことがありました。

というわけで、今回はより可読性を上げるという目的で、他ファイルに定義された関数等を絶対パスでインポートできるようにする方法を調べましたので、備忘録をここで残したいと思います。

実践

今回はVite を使って簡単に方法を記載したいと思います。

プロジェクトの立ち上げ

$ yarn create vite
? Project name: > sample-project
? Select a framework: > React
? Select a variant: > TypeScript + SWC

$ cd sample-project

設定

以下のファイルを編集します。

• tsconfig.json
• vite.config.ts

tsconfig.json

sample-project/配下にある、tsconfig.jsonを以下のように編集

{
    "compilerOptions": {
        ...
        ...
        
        ↓追記
        "baseUrl": ".",
        "paths": {
            "@/*": ["./src/*"]
        },
        
        ...
        ...
    }
}

vite.config.ts

sample-project/配下にある、vite.config.tsを以下のように編集

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    // ↓追記
    resolve: {
        alias: {
            "@": "/src",
        },
    },
});

絶対パスでの書き方

ここでは、絶対パスと相対パスの書き方を比べてみて、どちらがより可読性が高いかを確認してみます。
今回は以下のようなディレクトリ構造で試してみたいと思います。

src/
├── App.css
├── App.tsx
├── assets/
│   └── react.svg
├── components/   ← 追加
│   └── Header/
│       └── index.tsx
├── feature/      ← 追加
│   └── login/
│       └── constants/
│           └── user.ts
├── index.css
├── main.tsx
└── vite-env.d.ts

Header/index.tsxにconstants/user.ts内の定数をそれぞれの方法でインポートしていきたいと思います。
(なぜHeaderなのかは気にしないでください。)

相対パスでインポート

// constants/user.ts
export const USER_NAME = "yolokoki"

//  Header/index.tsx
import { USER_NAME } from "../../feature/login/constants/user";

export const Header = () => {
    return <>{USER_NAME}</>;
};

// App.tsx
import { Header } from "./components/Header";

function App() {
    return <Header />;
}

export default App;

絶対パスでインポート

続いて、先ほど設定した絶対パスでインポートを試してみたいと思います。

// constants/user.ts
export const USER_NAME = "yolokoki"

//  Header/index.tsx
import { USER_NAME } from "@/feature/login/constants/user";

export const Header = () => {
    return <>{USER_NAME}</>;
};

// App.tsx
import { Header } from "@/components/Header";

function App() {
    return <Header />;
}

export default App;

最後に

いかがでしたでしょうか。
インポートする際の./や../../という部分が全て@に変換され、スッキリしたかと思います。

終わり

今回は可読性を上げるという目的で他ファイルで定義したものを絶対パスで指定できる方法を紹介しました。
使いどきはそれぞれのプロジェクトに合わせるべきかと思いますが、一つの引き出しとして持っておきたいと思います。