てんハロ運営者

こんなあなたにピッタリな記事👇

• import文書くとき「../../../」となっている
• フォルダ構成変わったときのimport文修正が大変
• 「＠/」を使っている理由がよくわかっていない

がまぁまぁわかります！

プロが教える、業界最前線のノウハウ【Coloso】

困ってた自分に届けたい話

開発が進んでくると、ファイルの階層が深くなっていきますよね。
気づけば、../../../components/Button のような import 文が何度も登場…。

「あれ？このファイル、どこから import してたっけ？」
「../ を3回戻って、また中に入って……ややこしい！」

そんな風に、パスが複雑になって迷子になる問題に悩まされていた方も多いはず。
実際、現場でも「エイリアスパスを使わないとPRが通らない」なんてこともあるらしいっす…。

てんハロ運営者

この記事は、同じように困っていた方への備忘録兼シェアとして書いています。

エイリアスってなに？

エイリアスとは、長い相対パスを短くわかりやすくするための別名のこと。

// Before（地獄）
import Header from "../../../components/shared/Header";

// After（天国）
import Header from "@/components/shared/Header";

// Before（地獄）
import Header from "../../../components/shared/Header";

// After（天国）
import Header from "@/components/shared/Header";

このように、@/ を使ってパスを簡略化することで、

• 階層の深さに悩まされない
• コードが一気に読みやすくなる

といったメリットがあります。

Next.js + TypeScriptでの設定方法

tsconfig.json にパスエイリアスを設定

こうしておくと、@/components は src/components にマッピングされます。

{
  "compilerOptions": {  // tsのコンパイル設定
    "baseUrl": "./",　　　// パスの基準（プロジェクトルート）
    "paths": {
      "@/*": ["src/*"]　// "@/..." → "src/..." に変換
    }
  }
}

{
  "compilerOptions": {  // tsのコンパイル設定
    "baseUrl": "./",　　　// パスの基準（プロジェクトルート）
    "paths": {
      "@/*": ["src/*"]　// "@/..." → "src/..." に変換
    }
  }
}

現場ではどう使われてる？

エイリアスは、以下のように「機能別フォルダ」と組み合わせて使われています。

こうすることで、プロジェクトの保守性がグッと上がります。
誰が見ても、何を import してるのか一目瞭然です。

豆知識：baseUrl を "./" にしないとどうなる？

baseUrl の設定が "./" になっていないと、パスの解決がうまくいきません。
たとえば、"src" にしてしまうと @/components が src/src/components になってしまい、バグの原因に。

迷ったら baseUrl は "./" に固定でOK！

もっと開発知識つけたい方！こちらの記事はどうですか？

GitHubのHTTPS・SSH・CLIの違いとは？接続方法の選び方をわかりやすく解説！

GitHubへの接続方法にはHTTPS、SSH、CLIの3つがあります。それぞれの特徴や違いを知ることで、よりスムーズなGit操作が可能になります。初心者にもわかりやすく、使い方や選び方を丁寧に解説します。

it-bokenki.com

てんハロ運営者

おつかれさまでした！