こんにちは！TypeScriptの世界へようこそ。
新しいプロジェクトを始めるとき、`tsconfig.json`というファイルを見て「なんだか呪文みたいで怖いな…」と感じたことはありませんか？大丈夫です。今日は、あなたのコードを劇的にスッキリさせ、開発のストレスを消し去る「パスエイリアス」という魔法についてお話しします。
「階層の迷路」で迷子になったことはありませんか？
TypeScriptで開発をしていると、ファイル同士でデータをやり取りするために`import`文を書きますよね。でも、プロジェクトが大きくなると、こんな光景に出くわすはずです。
// うわっ、何これ…
import { User } from “../../../../../models/user”;
import { Button } from “../../../../components/ui/button”;
`../../../../` ……。「これ、あと何個戻ればいいの？」と数えながら、まるで暗い森の中で道に迷っているような気分になったことはありませんか？これこそが、多くのエンジニアが通る「階層の迷路」です。
この書き方は、見た目が悪いだけでなく、フォルダ構成を少し変えるだけで全てのimport文が壊れてしまうという、非常に脆い作りなんです。
魔法の合言葉：パスエイリアスという「住所録」
この迷路から脱出するために使うのが、`tsconfig.json`にある `baseUrl` と `paths` です。
例えるなら、これは「長い住所を短縮するニックネーム」です。
「東京都渋谷区…」と毎回書く代わりに、「渋谷オフィス」と呼ぶだけで通じるようにするイメージですね。
ステップ1：tsconfig.json に住所録を作る
まずは、プロジェクトのルートにある `tsconfig.json` を開いて、以下のように追記してみてください。
{
“compilerOptions”: {
“baseUrl”: “.”, // プロジェクトのルートを「ここ」と定義する
“paths”: {
// @models/〜 と書いたら、src/models/〜 を見に行ってね！
“@models/”: [“src/models/”],
// @components/〜 と書いたら、src/components/〜 を見に行ってね！
“@components/”: [“src/components/”]
}
}
}
これだけで、TypeScriptは「`@models`って書かれたら、あぁ、あのフォルダのことね！」と理解してくれるようになります。
魔法を使うと、コードはこう変わる！
設定が終われば、先ほどの見苦しいコードがこんなに美しくなります。
// ビフォー
import { User } from “../../../../../models/user”;
// アフター（スッキリ！）
import { User } from “@models/user”;
import { Button } from “@components/ui/button”;
どうですか？まるで霧が晴れたように、何を使っているのかが一目で分かりますよね。階層の深さを気にせず、どこからでも「住所」を直接指定できる。これだけで、開発のスピードも、コードの読みやすさも段違いになります。
ちょっと待って！「ビルドツール」という落とし穴
さて、ここで一つだけ注意点があります。実は、TypeScriptのこの設定は「開発中にエラーを出さないためのもの」に過ぎません。
ブラウザや実行環境（Node.jsなど）は、この `@models` という書き方をそのままでは理解できません。「そんなフォルダ、どこにあるの？」とエラーになってしまうのです。
そこで、WebpackやVite、Next.jsといった「ビルドツール」にも、「TypeScriptと同じようにこのパスを解釈してね！」と伝えてあげる必要があります。
- Viteを使っている場合: `vite.config.ts` にも `resolve.alias` の設定が必要です。
- Next.jsを使っている場合: `tsconfig.json` に書くだけで自動的に読み取ってくれるので、設定は不要です。
「もし動かない！」と焦ったときは、まず「ビルドツール側にもパスを教えてあげたかな？」と確認してみてください。ここさえ乗り越えれば、あなたはもうTypeScriptの環境構築マスターの入り口に立っています。
最後に：完璧を目指さなくて大丈夫
パスエイリアスは、プロジェクトが少し大きくなってきたな、と感じたタイミングで導入するのが一番のオススメです。最初から完璧にしようとして `tsconfig.json` の沼にハマる必要はありません。
「不便だな」「書きづらいな」と思った瞬間が、あなたのコードを洗練させる絶好のタイミング。その時にまたこの記事に戻ってきて、魔法をかけてみてくださいね。
あなたの開発ライフが、少しでも楽で、楽しいものになりますように。応援しています！
コメント