😎

【React】絶対パスでインポートできるようにして、エイリアスを設定しよう

2023/04/15に公開

JavaScript

動機

現在、React をキャッチアップ中でディレクトリ構成の参考として、bulletproof-reactをみていたのですが、インポート時にimport { Button } from '@/components/Elements';てな感じで絶対パスでインポートされていたので、真似してみることにしました！
あと、他のリポジトリでも良く@を見かけることがあったので、なんとなく憧れていたのは秘密にしておきます www

前提として、Typescript を使っているため、tsconfig に関してのみ記載しております。

そもそも絶対パスってなんじゃい？

ファイルのインポート方法は、相対パスと絶対パスの 2 種類があり、
絶対パスは、他のファイルを import してくる際に、指定されたデレクトリを起点にしてパスを書きます
一方、相対パスは、自分がいるディレクトリを起点にしてパスを書きます。

React では、初期設定は絶対パスではなく相対パスになっているため、絶対パスにする際は各自で設定が必要です！

設定自体は超簡単です。

絶対パスに設定する方法

tsconfig.json ファイルのcompilerOptionsにbaseUrlを追記するだけです。

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"

    "baseUrl": ".", ⇦ 追加するだけ
  },
  ...

"baseUrl": "."にすることで、ルートディレクトリを起点に絶対パスを記載できます。
.をsrcに変更するとsrcが起点となりますので、用途に合わせて設定してください。

エイリアスを設定しよう

よく使うコンポーネントなどを import する場合、毎回毎回、パスを書くのは面倒。特に階層が深いとパスの記述量も増えていきます。
そこで、そのようなパスをエイリアス化することで、記述量も減りスッキリするかと思います。

設定方法は、tsconfig に以下のようにpathsを追記します。

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"

    "baseUrl": ".",
    "paths": {             ⇦ 追加する
      "@/*": ["./src/*"]
    }
  },
  ...

@の箇所は、@hogeなどに任意のエイリアス名に設定が可能です。
上記の設定だと、srcを@と記載してパスに書くことができます。

// エイリアスなし
import { Todo } from "src/types/index";

// エイリアスあり
import { Todo } from "@/types/index";

エイリアスは複数設定が可能ですので、任意で必要なだけ設定すればいいのかなと思います。

絶対パスにすると何が嬉しい？

ディレクトリ構成が複雑化してくると、異なる階層のファイルをインポートしてくる必要があったりして、相対パスだとかなり大変だなと感じました。

特に、一度ルートディレクトリに戻って、他のディレクトリのファイルを読み込む場合は../の記述が増えてよくわからなくなりそう...

その点、絶対パスだとルートディレクトリに戻るための記述は不要なので、よりスッキリしたパスになり、どのファイルを読み込んでいるか追いやすくなるかと思います。

他にも、ファイルを他のディレクトリに移動した場合に、import のパスを変更しないといけないので、この面倒くささも解消できます。

エイリアスなども駆使すると、よりパスの記述量も減らせて、どのディレクトリのファイルを読み込んでいるかも認識しやすくなるのかなと思います。

まとめ

絶対パスの設定は簡単で、メリットも多いので、導入した方がいい！

おまけ

tsconfig のオプション設定は、他のファイルに切り出して管理できたりします。
今回のケースだと、tsconfig.paths.jsonを作成し、以下を記載します。

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

そして、tsconfig ファイルでextendsを追記し読み込んであげれば、同じ設定内容になります。

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "exclude": ["node_modules"],
  "extends": "./tsconfig.paths.json"　⇦ 追加し読み込む
}

tsconfig ファイルのオプションに関してまとまった良い記事があったので是非一読ください！

追記（vite環境の場合）

viteを使用してreactプロジェクトを作成している場合は、vite.config.tsファイルに以下のようにresolveにaliasの設定が必要です！

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

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

参考記事

GitHubで編集を提案

動機