やあ、TypeScriptの世界へようこそ！ここまで辿り着いたあなたは、もう「ただ動くコード」を書く段階から、「美しく、メンテナンスしやすいコード」を書く段階へ足を踏み入れたんだね。素晴らしいことだよ。
今日は、TypeScriptを書き始めた人が必ずと言っていいほど直面する「パスの迷路」と、それをスマートに解決する魔法の杖についてお話ししよう。
—
1. なぜ「パスの迷路」に迷い込むのか？
TypeScriptで開発をしていると、フォルダがどんどん深くなっていくよね。例えば、`src`フォルダの中に`components`や`utils`を作って、その中でさらにファイルを分けていく。
そんな時、他のファイルを読み込もうとするとこんなことにならないかな？
// うわっ、戻る・戻る・戻る…！
import { Button } from “../../../components/ui/Button”;
これ、まるで「家の中で探し物をしているのに、いちいち外に出て別の家のドアを開けて戻ってくる」ような感覚じゃない？ `../../../` が続くと、今自分がどこにいるのか分からなくなる。これが「パスの迷路」だ。
これをスッキリさせるために、TypeScriptには「パスエイリアス（別名）」という設定があるんだ。
2. 魔法の杖：tsconfig.jsonの「paths」
`tsconfig.json`に、こんな魔法の呪文を書くことができる。
{
“compilerOptions”: {
“baseUrl”: “.”,
“paths”: {
“@/”: [“src/”] // 「@」と書いたら「src」のことだと解釈してね！
}
}
}
これだけで、さっきのコードはこう書けるようになる。
// どこから読み込んでも同じ！スッキリ！
import { Button } from “@/components/ui/Button”;
「やった！解決！」…と言いたいところなんだけど、TypeScriptの伝説的な落とし穴がここにあるんだ。
3. 伝説の落とし穴：TypeScriptは「変換」を忘れる
ここが初学者が一番つまずくポイントだよ。
実は、`tsconfig.json`の`paths`設定は、「TypeScriptがコードをチェックする時だけ」有効なんだ。
私たちが書いたTypeScriptは、最終的にJavaScript（`.js`）に変換（コンパイル）されてブラウザやサーバーで動くよね。その時、この「`@/`」という魔法は、JavaScriptの世界ではただの文字として扱われてしまい、実行時に「ファイルが見つからないよ！」とエラーを吐いて沈没してしまうんだ。
せっかく綺麗に書いたのに、動かない。切ないよね。大丈夫、これを救うのが`tsc-alias`というライブラリだ。
4. 解決策：tsc-aliasでパスを書き換える
`tsc-alias`は、コンパイルが終わったあとのJavaScriptファイルを覗き込んで、「あ、ここもしかしてエイリアス使ってるな？ よし、正しい相対パスに書き換えてあげよう！」と気を利かせてくれる便利屋なんだ。
実践ステップ
1. インストール
ターミナルで以下のコマンドを叩こう。
npm install -D tsc-alias
2. ビルドコマンドを調整する
`package.json`の`scripts`をこう書き換えるんだ。
“scripts”: {
“build”: “tsc && tsc-alias”
// 「tsc」でコンパイルして、その直後に「tsc-alias」でパスを修正する流れだよ
}
たったこれだけ。たったこれだけのことで、あなたのプロジェクトは「開発時はスッキリ書けて、実行時も迷わない」という、強固で美しいアーキテクチャを手に入れることができる。
—
最後に：完璧主義にならなくていい
今日伝えたかったことは、技術的な設定そのものよりも、「自分のコードが、変換されたあとにどうなっているか？」という想像力を持つことなんだ。
最初はエラーが出て当たり前。真っ白な画面を見て「またか…」とため息が出る日もあるだろう。でも、その一つ一つが、君をただのコーダーから、本物のエンジニアへと育ててくれる。
もし行き詰まったら、いつでもここに戻ってきて。君のコードがパスの迷路から抜け出して、軽やかに動く日を応援しているよ。
何か分からないことがあれば、いつでもまた聞いてね。一緒に解決していこう！
コメント