こんにちは！TypeScriptの世界へようこそ。
新しい言語を学び始めるときって、まるで知らない街に地図も持たずに降り立つような、ワクワクと不安が入り混じった気持ちになりますよね。
今日は、TypeScriptの設定ファイルである `tsconfig.json` の中でも、特に「えっ、何これ？」と初心者が一番最初につまずきやすい `lib`（ライブラリ）設定 について、一緒に紐解いていきましょう。
大丈夫、難しいことは何もありません。身近な例え話で、一瞬でイメージできるように解説しますね。
—
TypeScriptの「lib」って、結局なに？
TypeScriptを使ってコードを書いているとき、あなたは「`console.log`」や「`document.querySelector`」といった命令を当たり前のように使っていませんか？
実は、TypeScriptという言語自体は、「画面に文字を出す方法」も「ブラウザのボタンを操作する方法」も、なーんにも知りません。
そこで登場するのが `lib` です。
これを分かりやすく例えるなら、「料理をするための道具箱」だと思ってください。
- `”dom”` という道具箱：ブラウザ（Webサイト）を操作するための包丁やまな板が入っています。
- `”es2015″` という道具箱：JavaScriptという言語が持つ、計算やデータ処理のための基本的なキッチンツールが入っています。
`tsconfig.json` で `lib` を指定するというのは、「今日の料理（開発）には、この道具箱をキッチンに並べておいてね！」とTypeScript君にお願いする作業なんです。
—
なぜ設定が必要なの？
「全部の道具箱を最初から並べておけばいいじゃない！」と思うかもしれません。でも、想像してみてください。
もしあなたが「冷蔵庫の中だけを整理するプログラム」を作りたいのに、キッチンに「宇宙船の操縦マニュアル」や「深海潜水艦の修理工具」まで置いてあったらどうでしょう？ 邪魔ですよね。
それと同じで、TypeScriptも「必要な道具だけ」を定義しておくことで、「そんな道具、今の環境にはないよ！」と、間違った使い方を未然に防いでくれる（型チェック）ようになるんです。
—
実際に設定してみよう
プロジェクトのルートディレクトリにある `tsconfig.json` を開いてみてください。`compilerOptions` の中に `lib` を書く場所があります。
{
“compilerOptions”: {
“target”: “es2016”,
// ここで使う道具箱を指定します
“lib”: [
“dom”, // ブラウザの画面操作（documentやwindowなど）を使いたいなら必須！
“dom.iterable”, // 画面上のリストをループで回すなど、少し高度な操作用
“esnext” // 最新のJavaScriptの便利な機能を使いたいならこれ！
]
}
}
注意点：これだけは覚えておいて！
もし `lib` を書き忘れたり、空っぽにしてしまうと、TypeScriptは「えっ、`console`って何？」「`document`って誰？」とパニックを起こして、赤線でエラーを出してしまいます。
初心者のうちは、とりあえず「dom」と「esnext（またはes2015以上）」を入れておくのが、最も平和でトラブルの少ない設定ですよ。
—
つまずいた時の処方箋
「設定したのにエラーが消えない！」という時は、以下のポイントをチェックしてみてください。
1. `lib` を書いたら、一度エディタ（VSCodeなど）を再起動する
- 設定ファイルはエディタが読み込み直さないと反映されないことがあります。
2. `target` との兼ね合い
- `target` を「ES5」のような古い設定にしていると、`lib` で最新の機能を入れても「そんな機能は使えないよ！」と怒られることがあります。基本は `es2018` 以上にしておくと快適です。
—
最後に：完璧を目指さなくて大丈夫
プロの現場でも、最初はみんなこの設定で悩みます。「あれ？`fetch`が使えないぞ？」「`Promise`が認識されない！」なんてトラブルは、日常茶飯事。そのたびに、「あ、`lib`に何かが足りないんだな」と気づいて一つずつ足していけばいいんです。
TypeScriptは、あなたの開発を助けてくれる優秀なパートナーです。`lib`の設定は、そのパートナーに「今日はこれを使って作業するよ」と共有するための大切なコミュニケーション。
焦らず、少しずつ、自分の道具箱を充実させていってくださいね。
あなたの開発ライフが、今日から少しだけ心地よいものになりますように！
また何かあればいつでも聞いてくださいね。応援しています！
コメント