こんにちは！TypeScriptの世界へようこそ。
今、あなたはTypeScriptという強力な武器を手に取ったばかりですね。「型」という新しい概念と格闘しながら、少しずつコードを書く楽しさを感じ始めている頃ではないでしょうか。
そんなあなたを待ち受けているのが、「デバッグの迷宮」です。
一生懸命TypeScriptを書いたのに、ブラウザのデベロッパーツール（F12キーで開くあれです）で中身を覗くと、なぜか書いた覚えのない難解なJavaScriptが表示されていて、「あれ、さっき書いたコードはどこに行ったの？」と途方に暮れる……。
今回は、そんな絶望を救う救世主、`compilerOptions.sourceMap` という魔法のスイッチについてお話しします。
—
TypeScriptは「翻訳者」であるという事実
まず、大前提を整理しましょう。ブラウザ（ChromeやEdgeなど）は、実はTypeScriptが読めません。彼らが読めるのはJavaScriptだけです。
そこで、TypeScriptという「原稿」を、JavaScriptという「翻訳本」に変換する作業が必要になります。これを「コンパイル（またはトランスパイル）」と呼びます。
迷子になる理由
TypeScriptのコードと、変換後のJavaScriptは、似ているようで実は別物です。
特に、少し複雑なロジックを書いたり、最新の便利な書き方をしたりすると、変換後のJavaScriptは元のコードとは似ても似つかない姿に変貌してしまうことがあります。
想像してみてください。「日本語で書いた手紙」を「英語」に翻訳してもらったのに、翻訳機がポンコツすぎて元の日本語の意味がさっぱり分からなくなった状態です。デバッグしようにも、ブラウザが指し示すのは「翻訳後の英語」の行番号。これでは、どこを直せばいいのか分かりませんよね。
—
救世主 `sourceMap` の登場
そこで登場するのが `tsconfig.json` にある `sourceMap` という設定です。
この設定を `true` にしておくと、TypeScriptは翻訳作業の裏側で「翻訳の地図（ソースマップ）」という小さなファイルを一つ作ってくれます。
この地図には、「JavaScriptのこの行は、もともとTypeScriptのあの行から変換されたものだよ」という秘密のリンクが記されています。これがあるおかげで、ブラウザのデベロッパーツールを開くと、なぜか変換後のJavaScriptではなく、元のTypeScriptのコードがそのまま表示されるようになるのです。
設定のやり方は驚くほどシンプル
プロジェクトのルートディレクトリにある `tsconfig.json` を開いて、このように設定するだけです。
{
“compilerOptions”: {
“target”: “es5”,
“module”: “commonjs”,
// ここ！ここを true にするだけで世界が変わります
“sourceMap”: true,
“outDir”: “./dist”
}
}
たったこれだけです。これだけで、ブラウザが「あ、ここには地図があるんだな。じゃあ変換前の綺麗なコードを見せてあげよう」と気を利かせてくれるようになります。
—
実際に体験してみよう
例えば、こんな簡単なコードを書いたとします。
// main.ts というファイル名だと仮定します
const greeting: string = “こんにちは！TypeScriptの世界へ”;
function sayHello(message: string) {
console.log(message);
}
sayHello(greeting); // ここでデバッグ（中断）したい！
`sourceMap: true` にしてコンパイルすると、`main.js` と一緒に `main.js.map` という不思議なファイルが生成されます。これが「地図」です。
ブラウザの「ソース（Sources）」タブを開いてみてください。`main.js` を開こうとすると、不思議なことに元の `main.ts` が中身として表示されます。
行番号の横をクリックして「ブレークポイント（一時停止地点）」を置けば、TypeScriptのコード上でプログラムを止めて、変数の値を確認できるようになります。
—
最後に：つまずくのは「成長の証」です
初めて `tsconfig.json` を触るとき、設定項目が多すぎてクラクラするかもしれません。「これって本当に必要なの？」と不安になることもあるでしょう。
でも、安心してください。`sourceMap` は、あなたが書いたコードを大切に守り、開発中のストレスを極限まで減らしてくれる、いわば「お守り」のようなものです。
もしデバッグをしていて「なんかコードの動きとデベロッパーツールで見ている場所がズレてるな？」と感じたら、まずは `tsconfig.json` の `sourceMap` が `true` になっているか確認してみてください。
TypeScriptの学習は、ときどき壁にぶつかることもあるかもしれません。でも、その一つ一つを解決していく先に、驚くほど快適な開発体験が待っています。
また何か分からないことがあれば、いつでも聞きに来てくださいね。あなたのTypeScriptライフが、今日からもっと楽しくなることを応援しています！
コメント