「../../」地獄からの脱出！TypeScriptのパスエイリアスでコードをスッキリ整理しよう
こんにちは。フロントエンドの現場に長くいると、プロジェクトが大きくなるにつれて、ある「迷路」に迷い込むことがよくあります。
それが、インポート文の「../../」の嵐です。
import { Button } from “../../../components/ui/Button”;
import { formatDate } from “../../../utils/date”;
import { useUser } from “../../../hooks/useUser”;
こんなコード、見たことありませんか？ まるで「今、自分はどこにいるんだっけ？」と、深い森の中で迷子になったような気分になりますよね。今回は、そんなモヤモヤを解消する「パスエイリアス」という魔法の設定について、一緒に紐解いていきましょう。
—
パスエイリアスって、何をしてくれるの？
パスエイリアスを一言で言うと、「長い住所を、お気に入りのニックネームで呼べるようにする仕組み」です。
例えば、あなたの家の住所が「東京都港区六本木◯丁目◯番地…」のように長いとき、友達に伝えるなら「六本木のあそこだよ」と言うほうがずっと楽ですよね。TypeScriptの設定でも、これと同じことができるんです。
`../../../components/ui/Button` という長いパスを、`@components/ui/Button` のように短くスッキリと書けるようになります。これだけで、コードの可読性はグッと上がります。
—
設定は「tsconfig.json」に任せよう
この魔法を使う場所は、プロジェクトの司令塔である `tsconfig.json` です。以下の2つの項目を追記するだけで準備は完了です。
{
“compilerOptions”: {
“baseUrl”: “.”, // 基本となる場所（通常はプロジェクトのルート）
“paths”: {
“@components/”: [“src/components/”], // @componentsで始まるものはsrc/componentsを見に行く
“@utils/”: [“src/utils/”], // @utilsで始まるものはsrc/utilsを見に行く
“@hooks/”: [“src/hooks/”] // @hooksで始まるものはsrc/hooksを見に行く
}
}
}
ここでちょっと補足：`baseUrl` と `paths` の役割
- `baseUrl`: 「ここを基準にするよ！」というスタート地点です。`.` はプロジェクトのルートディレクトリを指します。
- `paths`: 「このキーワードは、実はここのことだよ」という翻訳リストです。“ は「その中のファイル全部」という意味のワイルドカードですね。
—
実際に使ってみよう！
設定が終わったら、さっそくコードを書き換えてみましょう。先ほどの迷路のようなインポートが、こんなに美しくなります。
// 設定前：どこにいるか分からなくなる迷路
import { Button } from “../../../components/ui/Button”;
// 設定後：まるで宝の地図のようにスッキリ！
import { Button } from “@components/ui/Button”;
// 使う場所がどこであっても、常に「@components/…」と書けば届くようになります
どうでしょう？ どのディレクトリからインポートしても、書き方は常に一定です。「あと一つ上の階層へ…」と指を折って数える必要はもうありません。
—
注意点：これだけは忘れないで！
ここで一つ、初心者がよくつまずくポイントをお伝えしますね。
「tsconfig.jsonに書いただけでは、動かないことがある」という点です。
実は、TypeScriptの設定はあくまで「TypeScriptとしての約束事」です。ビルドツール（ViteやWebpackなど）が「`@components` ってどこ？」と迷ってしまうことがよくあります。
もし開発環境でエラーが出る場合は、使っているツール（Viteなど）の設定ファイルにも同じようなパス設定を追加してあげてください。
Viteを使っている場合の例（vite.config.ts）
import { defineConfig } from ‘vite’;
import path from ‘path’;
export default defineConfig({
resolve: {
alias: {
‘@components’: path.resolve(__dirname, ‘./src/components’),
},
},
});
—
最後に：小さな工夫が、大きな余裕を作る
「たかがパスの書き換えでしょ？」と思われるかもしれません。でも、フロントエンド開発は毎日の積み重ねです。
100回、1000回と書くインポート文がスッキリしていれば、それだけで脳の疲れは少しだけ軽減されます。「コードの心地よさ」は、プロジェクトの健やかさに直結するんです。
もし設定で少し手こずったとしても、大丈夫ですよ。誰だって最初は「なぜ動かないんだ！」と頭を抱えるものです。そんな時はこの記事を読み返して、一つずつ紐解いてみてくださいね。
あなたのコードが、今日から少しだけシンプルで、ワクワクするものになりますように！それでは、また別の知見でお会いしましょう。
コメント