【入門編】 moduleResolutionの選択肢（node, node16, bundler） – TypeScript実践ガイド

こんにちは！フロントエンドの現場で日々コードと格闘しているチーフアーキテクトです。

TypeScriptを触り始めると、避けて通れないのが `tsconfig.json` という設定ファイル。「何を書けばいいのか分からない！」「とりあえずコピペでいいや」と悩んでいる方も多いのではないでしょうか？

今日はその中でも、特に初心者さんが「迷子になりがち」な `moduleResolution` という設定について、身近な例え話を交えながら紐解いていきましょう。大丈夫、仕組みさえ分かれば怖くありませんよ。

—

そもそも「モジュール解決」って何？

TypeScriptにおける「モジュール解決」とは、「プログラムの中で『この部品（モジュール）を使いたい！』と言ったとき、PCの中のどこからその部品を探してくるか？」というルールブックのことです。

例えば、あなたがスーパー（プログラム）で「牛乳（モジュール）」を探しているとします。

A店は「入り口から見て右の棚」にあると決まっている。
B店は「店員に聞けばバックヤードから持ってきてくれる」と決まっている。

この「探し方のルール」が `moduleResolution` です。これの設定を間違えると、TypeScriptは「そんなファイル、どこにあるの！？」とパニックになってしまうわけですね。

—

3つの主な選択肢：どれを選べばいいの？

現代のWeb開発でよく目にする3つの設定について、それぞれのキャラクターを紹介します。

1. `node` (古き良きスタンダード)

昔からある設定です。Node.jsの伝統的な探し方をそのまま使います。

イメージ: 「とりあえずフォルダの中を片っ端から探す」という職人タイプ。
今の立ち位置: もはや「骨董品」です。新しいプロジェクトで使う理由はほとんどありません。

2. `node16` / `nodenext` (厳格なルール遵守)

現在のNode.jsの仕様（ECMAScript Modules）にバッチリ合わせるための、非常に真面目な設定です。

イメージ: 「ルールブックに一行でも違反したら絶対に許さない！」という厳しい教師タイプ。
今の立ち位置: Node.jsでバックエンドを書くなら必須ですが、フロントエンドのReactやVueなどの環境では、時に厳しすぎて苦労することがあります。

3. `bundler` (現代のフロントエンドの救世主)

これが本日の主役です！ViteやWebpackといった「バンドラー」と呼ばれる道具を使っているなら、これを選べば間違いありません。

イメージ: 「現代の複雑な開発環境を熟知している、頼れるガイドさん」。
今の立ち位置: React, Next.js, Viteなどの環境なら、これ一択です。

—

具体的な設定方法：`tsconfig.json` はこう書こう！

もしあなたが Vite や Next.js で開発しているなら、以下のように設定してみてください。

{
“compilerOptions”: {
// 現代的な開発環境（Vite, Next.jsなど）では、迷わず ‘bundler’ を選びましょう
“moduleResolution”: “bundler”,

// モジュールの形式は ‘ESNext’ にするのが今のトレンドです
“module”: “ESNext”,

// 他の推奨設定も添えておきますね
“target”: “ESNext”,
“strict”: true,
“esModuleInterop”: true
}
}

なぜ `bundler` が推奨されるのか？

今のフロントエンド開発では、`import` をする際にファイルの拡張子（`.ts` や `.js`）を書かないのが普通ですよね？

`node` 系の設定だと、「拡張子がないとファイルを見つけられないよ！」と怒られてしまうことが多いんです。でも `bundler` なら、「ああ、裏側でWebpackやViteがうまく解決してくれるんだね。いいよいいよ！」と、現場の事情を汲み取って柔軟に対応してくれるんです。

—

つまずいた時の処方箋

もし設定を変えてもエラーが消えないときは、以下の3つをチェックしてみてください。

1. エディタの再起動: VS Codeが設定変更を読み込めていないだけかもしれません。「コマンドパレット（Ctrl/Cmd + Shift + P）から `TypeScript: Restart TS server`」を試してみてください。
2. 拡張子の有無: 一部の環境では、あえて拡張子を求められることがあります。エラーメッセージをよく読んでみましょう。
3. tsconfigの配置場所: `tsconfig.json` がプロジェクトのルートディレクトリにしっかり置かれているか確認してくださいね。

—

最後に：完璧主義にならなくて大丈夫

TypeScriptの設定は奥が深く、ベテランでもたまにハマるポイントです。今日紹介した `bundler` も、あくまで「今のスタンダード」に過ぎません。

開発していて分からないエラーが出たら、それは「あなたがより良くコードを書こうとしている証」です。失敗を恐れず、色々と設定をいじってみてください。その泥臭い試行錯誤の時間が、あなたを本当のエンジニアへと育ててくれるはずですよ。

それでは、良いコーディングライフを！応援しています！