パスマッピングとモジュール解決
baseUrl/pathsでパスエイリアスを設定し、TSがモジュールを解決する仕組みを理解して、よくある落とし穴を避けます
「パスマッピングとモジュール解決」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。
はじめに
目標: 長い相対インポートをパスエイリアスに置き換え、インポートを整理するためにTypeScript`s モジュール解決のルールを理解します。
tsconfigのpaths設定
baseUrl（非相対インポートにおけるプロジェクトルート）を設定し、pathsでエイリアスを割り当てます。キーでは*のグロブを使えます。
// file: tsconfig.json (excerpt)
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@utils/*": ["utils/*"],
"@components/*": ["components/*"]
}
}
}エイリアスの使用
宣言したとおりのエイリアスを使ってインポートします（例: @utils/date）。TypeScriptはsrc/内の割り当て先パスに解決します。
// file: src/app.ts
import { formatDate } from "@utils/date";
import Button from "@components/Button";
console.log(formatDate(new Date()));
const btn = new Button();解決方法
解決方法はmodule（Node、NodeNext、Bundler）によって異なります。TSはファイル拡張子、package.jsonのexports／typesを確認し、その後node_modulesにフォールバックします。
// Resolution order sketch (NodeNext/Node):
// 1) Exact file: .ts/.tsx/.d.ts/.js
// 2) Index files: index.ts / index.js
// 3) package.json exports / types
// 4) paths & baseUrl fallbacks
// 5) node_modules lookup (upwards)
export const note = "Resolution depends on module setting (Node, NodeNext, Bundler).";バンドラーとの整合
重要: TSは型チェック用のエイリアスを認識しますが、バンドラー／ランタイムでもエイリアスを割り当てる必要があります（例: Vite／Webpack／ts-node用のtsconfig-paths）。
// Example: vite.config.ts (alias for runtime)
import { defineConfig } from "vite";
import path from "path";
export default defineConfig({
resolve: {
alias: {
"@utils": path.resolve(__dirname, "src/utils"),
"@components": path.resolve(__dirname, "src/components")
}
}
});ヒントと注意点
ヒント:
- baseUrlは安定させます（例: src/）。
- バンドラー／ランタイムにもエイリアスを反映します。
- 深い../..の連鎖は避け、簡潔なエイリアスを優先します。
パスエイリアスの確認
簡単な確認: @utils/*のようなパスエイリアスを有効にするtsconfigのオプションはどれでしょうか?
まとめ
まとめ: エイリアスにはbaseUrlとpathsを設定し、TSの解決順序を理解するとともに、壊れたインポートを防ぐためにバンドラー／ランタイムも合わせます。
よくある質問
「パスマッピングとモジュール解決」レッスンは無料ですか？
はい。「パスマッピングとモジュール解決」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。
「パスマッピングとモジュール解決」で何を学びますか？
baseUrl/pathsでパスエイリアスを設定し、TSがモジュールを解決する仕組みを理解して、よくある落とし穴を避けます ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。
「パスマッピングとモジュール解決」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。