こんにちは。TypeScriptの世界へようこそ！
毎日コードを書いていると、たまに「なんで急に型エラーが出るの？」「ファイルは見つかってるはずなのに！」と頭を抱えたくなる夜がありますよね。
そのモヤモヤの正体、実は `tsconfig.json` の中にある `moduleResolution` という設定が引き起こしているかもしれません。今日は、この少し影の薄い、けれど実はTypeScriptの「目利き」である設定について、一緒に紐解いていきましょう。
—
TypeScriptの「探し物」のルール、それが moduleResolution
TypeScriptを書いていると、別のファイルから関数や定数を読み込むために `import` を使いますよね。
// 例えばこんな風に
import { sayHello } from “./utils”;
TypeScriptにとって、この `import` は「宝探し」のようなものです。
「`./utils` ってどこにあるの？ 中身は本当に正しいの？」と、プロジェクト内の膨大なファイルの中から、該当するものを探しに行かなければなりません。
この「探し方の流儀」を決めるのが、`compilerOptions` の中の `moduleResolution` です。これにはいくつか種類があるのですが、まずは「お店での買い物」に例えてみましょう。
1. “node”（昔ながらの定番）
これは、Node.jsというエンジンのルールに合わせた探し方です。
「まずは同じフォルダを探して、なければ `node_modules` という大きな倉庫（ライブラリ置き場）の中を順番に見ていく」という、堅実で慎重なスタイルです。長い間、標準として愛されてきました。
2. “classic”（今はもう博物館行き）
これはTypeScriptが生まれたての頃のルールです。現在のモダンな開発ではまず使いません。もしこれを使っていると、「え、なんで今どきそんな古い探し方をしてるの？」とプロジェクトが混乱してしまうので、基本は忘れてしまって大丈夫です。
3. “bundler”（現代のWeb開発の救世主）
最近のWeb開発は、ViteやWebpackといった「バンドラー」というツールが、たくさんのファイルを一つの塊にまとめてくれます。
この `bundler` 設定は、それらのツールが持つ「特殊なショートカット（パスの解決ルール）」を理解してあげるための設定です。最近のフレームワーク（Next.jsやViteなど）を使うなら、基本的にはこれを選べば間違いありません。
—
実際に設定してみよう
`tsconfig.json` は、プロジェクトのルート（一番上の階層）にあるはずです。こんな風に書いてあげてください。
{
“compilerOptions”: {
// 現代のモダンな開発（ViteやNext.jsなど）なら “bundler” を推奨！
“moduleResolution”: “bundler”,
// 他の設定も合わせて確認しておきましょう
“target”: “ESNext”,
“module”: “ESNext”,
“esModuleInterop”: true
}
}
なぜ “bundler” を選ぶのか？
昔の “node” 設定だと、最近のJavaScript環境で当たり前になった「拡張子なしのインポート」や「特定のパスエイリアス（`@/components/…` のような書き方）」で、TypeScriptが「見つかりません！」と騒ぎ出すことがありました。
`bundler` を指定すると、TypeScriptは「あ、君はViteみたいなツールを使っているんだね。じゃあ、そのルールに合わせてファイルを頑張って探すよ！」と柔軟に対応してくれるようになります。
—
つまずいた時の処方箋
もし、あなたがこれから新しいプロジェクトを始めるなら、まずはこう考えてみてください。
- 「とりあえず動かしたい！」という場合:
`”moduleResolution”: “bundler”` を選ぶ。これが現代のスタンダードです。
- 「既存の古いプロジェクトを触っている場合」:
無理に設定を変えると他の場所でエラーが出ることがあります。その時は無理せず `”node”`（あるいは `”node16″`）のままにしておくのが、現場で生き残るための知恵です。
最後に
設定ファイルって、一見すると呪文のように見えて怖くなってしまいますよね。でも大丈夫。`moduleResolution` は、TypeScriptという優秀な助手が「どのルールでファイルを探せばいいか」を迷わないようにするための、ただの「道案内」に過ぎません。
エラーが出ても「ああ、道に迷っているんだな。もう少し丁寧に場所を教えてあげよう」と優しく声をかけてあげてください。そうすれば、TypeScriptはきっとあなたの最強のパートナーになってくれます。
今日もあなたのコードが、エラーなくスッキリと動きますように！応援しています。
コメント