import hoge from @/hogeの@記号の理解と活用(パスエイリアス)

初めに

最近、ReactやTypeScriptのコードを見ていて、

import hoge from '@/hoge'

のような形式のインポート文を見かけたり、フォルダ名が『@hoge』というプロジェクトを見ることがありました。
この@記号は一体何を意味しているのか、いまいち理解できていなかったので、わかりやすくまとめてみました。

結論

@は、パスエイリアス（Path Aliasing）と呼ばれるテクニックです。
特定のディレクトリへのパスを短縮したり、より読みやすくしたりするために使用されます。

実際に、使用方法を確認してみます。

パス一覧

root
├─ @interfaces
│    └─ user.d.ts
├─ e2e
├─ src
│    ├─ utils
│    │   ├─ common
│    │   │   └─ common.ts
│    │   └─ user
│    │       └─ user.ts
│    └─ server.ts
└─ index.ts

src/utils/user/user.ts

src/utils/user/user.ts

// タイプエイリアスがない場合
import { IUser } from "../../../@interfaces/user";
// タイプエイリアスがある場合
import { IUser } from "@interfaces/user";

export const isUsersNameJesse = (user: IUser): boolean => {
  return user.name === "Jesse";
};

src/server.ts

src/server.ts

import express from "express";
import { message } from "./utils/common/common";

// タイプエイリアスがない場合
import { IUser } from "../@interfaces/user";
// タイプエイリアスがある場合
import { IUser } from "@interfaces/user";

const app = express();

app.get("/", (request, response) => {
  const user: IUser = { name: "Jesse", age: 31 };
  message("Sending User");
  response.send(user);
});

export default app;

特に前者の例（src/utils/user/user.ts）だと、
コードの記述を大幅に短縮することができるため、可読性が上がるのがわかると思います。

タイプエイリアス(@)を使わないと、コードは読みづらく、保守も困難になることがあります。これは、相対パスが長く、複雑になるためです。一方、絶対パスを使うと、ファイルの移動やリファクタリングが容易になります。相対パスを使うと、ファイルの位置が変わるたびにインポートパスも更新しなければならず、これがエラーを引き起こす可能性があります。

ファイル名に@をつける理由

今回の例で言うと、 @interfaces ディレクトリのように一部＠がつくディレクトリを見かけることがあります。
これは、『このディレクトリはパスエイリアスに利用しています』と言うのを視覚的にわかりやすくするためのものであり、@をつけたからといって特になんらかの機能が付け加えられるわけではないそうです。
「コーディング規約の一種」と捉えて差し支えないそうです。

パスエイリアスの設定方法

TypeScript、Webpack を例に見ていきます。

TypeScript

jsconfig.json または tsconfig.json でパスエイリアスを設定

tsconfig.json

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

※TypeScript 4.1以降、"baseUrl" を明示的に設定する必要はなくなりました​。その場合、デフォルト値は tsconfig.json のあるディレクトリを参照します。

Webpack

webpack.config.js でパスエイリアスを設定

webpack.config.js

const path = require('path');

module.exports = {
  // その他の設定
  resolve: {
    alias: {
      '@interfaces': path.resolve(__dirname, '@interfaces/'),
      '@utils': path.resolve(__dirname, 'src/utils/')
    }
  }
};

今回は以上です。

参考文献