TypeScriptの「lib」設定は、あなたの開発環境という「道具箱」を整理する魔法です
こんにちは！TypeScriptの世界へようこそ。
新しい技術を学び始めるとき、最初にぶつかるのが`tsconfig.json`という設定ファイルですよね。「オプションが多すぎて、どれを触ればいいのか分からない…」と頭を抱えてしまう気持ち、痛いほどよくわかります。
今日は、その中でも特に重要で、かつ「これを知っているだけで開発が劇的に楽になる」`lib`プロパティについて、じっくりお話ししましょう。
—
「lib」って一体なに？——身近な「道具箱」で例えてみよう
突然ですが、あなたは今から「手芸」を始めようとしています。
でも、裁縫セットの中に、なぜか「溶接機」や「重機を動かす免許証」が入っていたらどう思いますか？「邪魔だな、裁縫には関係ないのに」と感じますよね。
TypeScriptにおける`lib`設定は、まさに「あなたの開発という作業に必要な道具だけを、道具箱に入れる」ための設定なんです。
TypeScriptは、何も設定しないと「ブラウザで動く機能（DOM）」も「Node.jsで動く機能」も、全部ひっくるめて「何でも知ってるよ！」という状態になります。でも、もしあなたが「ブラウザで動くWebサイト」だけを作りたいなら、Node.jsの知識（サーバー側の機能）は道具箱から出しておいたほうが、頭の中がスッキリしますよね。
この「道具箱の中身を自分で選ぶ」のが`lib`の役割です。
—
なぜ「lib」をわざわざ設定するの？
「全部入れておけば、どこでも動くから楽じゃないの？」と思うかもしれません。しかし、これには2つの大きな落とし穴があります。
1. 「本当は使えない機能」を「使える」と勘違いしてしまう
例えば、ブラウザ専用の`window`オブジェクト（画面を操作する機能）を、サーバー側のプログラムでうっかり使ってしまったとします。`lib`の設定が適当だと、TypeScriptは「いいよ、それ使って！」とエラーを出してくれません。結果、実際に動かした時に「そんな機能はない！」と真っ赤なエラー画面が出てしまうのです。
2. 道具箱が重すぎて、エディタがフリーズする
TypeScriptは常に裏側で「今のコード、間違ってないかな？」と監視しています。不要な機能まで読み込んでいると、エディタがその重たい辞書をいちいちめくる必要があり、結果として動作が遅くなります。
—
さっそく「lib」を設定してみよう
`tsconfig.json`を開いてみてください。以下のように`lib`という項目を追加します。
{
“compilerOptions”: {
“target”: “ESNext”,
// ここで「何が使える環境なのか」を定義します！
“lib”: [
“ESNext”, // 最新のJavaScriptの機能を使います
“DOM”, // ブラウザで動くWebサイトを作ります
“DOM.Iterable” // 画面の要素をループして回る処理を使います
]
}
}
設定のポイント：
- “ESNext”: 今のJavaScriptで一番新しい書き方に対応させるための「辞書」です。
- “DOM”: `document.getElementById`や`alert()`など、ブラウザでおなじみの機能を使えるようにする「お守り」です。
- “DOM.Iterable”: 画面上の要素を「リストとして扱う」ときには、これが必要になります。現代のフロントエンド開発では、ほぼセットで入れてOKです。
—
つまずきやすいポイント：もしNode.jsで開発するなら？
もしあなたが「Webサイト」ではなく「サーバー側のプログラム」を書くなら、`DOM`を入れる必要はありません。その代わり、`node`という型定義パッケージ（`@types/node`）を入れるのが一般的です。
「DOMがないと、`window`を使おうとした時にちゃんとエラーが出るようになる」——これこそがTypeScriptがあなたを守ってくれている瞬間です。「あ、これブラウザ専用の機能だったんだ！」と気づくことが、プロへの第一歩ですよ。
—
最後に：怖がらなくて大丈夫です
最初は「何を選べばいいかわからない！」と不安になるかもしれません。でも大丈夫。まずは上記のサンプルコードのように`[“ESNext”, “DOM”, “DOM.Iterable”]`を入れておけば、現代的なWeb開発の現場で困ることはまずありません。
開発が慣れてきたら、少しずつ「今のプロジェクトには何が必要かな？」と道具箱の中身を見直してみてください。自分の手で環境をコントロールできるようになると、TypeScriptはもっともっと頼もしい相棒になります。
今日もあなたのコードが、エラーなくスッキリ動くことを祈っています！何かあれば、いつでも聞きに来てくださいね。
コメント