パスエイリアス

この記事は、エンジニア初心者の筆者が、自身の学びを記録するためにまとめたものです。万が一内容に誤りがありましたら、何卒ご容赦ください。

パスエイリアスとは

プロジェクトが大きくなると、ファイルを参照するときのパスが長くなります。パスエイリアスを設定することで、コードの見やすさやメンテナンス性が向上します。

例: ../../../../utils/helper.js（とても見にくい）
パスエイリアスを使うと、これを簡単に書けるようになります。

例: @/utils/helper.js

パスエイリアスの設定

パスエイリアスは、tsconfig.jsonまたはそれに俗似したファイルに、baseUrlとpathsの設定を追加することで設定できます。

baseUrlの意味

・プロジェクトのルートディレクトリを基準点に設定します。
・これにより、正規表現や../../のようなパスを短縮できます。

{
  "baseUrl": "./"
}

上記設定により、プロジェクトルート直下のsrcなどを直接指定できます。
例：

MyApp/  ← これがプロジェクトルート！
├── src/　← ここを直接指定できるようにする！
│   ├── components/
│   │   └── Header.js
│   ├── utils/
│       └── helper.js
├── public/
│   └── index.html
├── package.json
├── tsconfig.json

pathsの意味

・特定のパスをショートカットで指定できます。
・モジュールの参照を簡略化し、コードの可読性が向上します。

{
  "paths": {
    "@/*": ["src/*"]
  }
}

これは、@/ をエイリアス（長い名前や複雑なパスを短く簡単な名前に置き換える仕組み）としてsrcディレクトリを指定する設定です。この設定で、プロジェクト内のsrcフォルダにある全てのファイルを、@/ を使って簡単に指定できるようになります。

[それぞれの記号の意味]

*：全ての（この場合は、src/ フォルダ内のすべてのファイルやフォルダを指します。）
/：src/ フォルダ内のどのファイルでもパス指定ができることを表しています
＠：src/フォルダを表すエイリアスです。
エイリアス（別名）を使うことで、src を毎回書く代わりに、@ で簡単に書けるようになります。

実際の設定

例:

上設定で、たとえば次のようなパスが使えるようになります

import Header from '@/components/Header';

viteでの設定

viteを使用している場合、vite-tsconfig-pathsプラグインを使用すると、tsconfig.jsonのみで設定を実現できます。

1. vite-tsconfig-pathsのインストール

npm install -D vite-tsconfig-paths

2. vite.config.tsで適応させる

import react from "@vitejs/plugin-react-swc";
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';　← ここに先ほどインストールしたものをimport

export default defineConfig({
  plugins: [react(), tsconfigPaths()],　← ここにtsconfigPaths()関数を追加
});

これで、tsconfig.jsonを設定するだけで「@/」が使えるようになります。