こんにちは。フロントエンドの現場で長年コードを書き続けていると、たまに「TypeScriptって、なんだか厳しくて怖い……」と感じている新人エンジニアさんに出会います。
でも、安心してください。TypeScriptは、あなたの書いたコードを「もっと安全に、もっと健やかに」育てるための頼もしいパートナーです。そのパートナーと最初に取り交わす契約書、それが `tsconfig.json` です。
今日は、この設定ファイルの正体を、難しい専門用語を使わずに紐解いていきましょう。
—
`tsconfig.json` は「理想の生活ルール」
いきなりですが、あなたの部屋を想像してみてください。
「服はクローゼットにしまう」「ゴミはゴミ箱へ」「夜12時以降は静かにする」……こういったルールがあるからこそ、心地よい生活が送れますよね。
`tsconfig.json` は、まさにTypeScriptというプログラミング言語に対して、「このプロジェクトでは、こうやって振る舞ってね」と伝えるルールブックです。
もしこのファイルがないと、TypeScriptは「どこまで厳しくチェックしていいの？」「どのバージョンのJavaScriptに変換すればいいの？」と迷子になってしまいます。だから、プロジェクトの始まりには必ずこの「契約書」が必要なんです。
—
最小限の「契約内容」を見てみよう
まずは、これさえあれば最低限動くという、シンプルで愛らしい設定を見てみましょう。
{
“compilerOptions”: {
// どのバージョンのJavaScriptに変換するか（ES6やESNextが一般的）
“target”: “ESNext”,
// モジュールをどう読み込むかの設定（モダンな開発ならこれが標準）
“module”: “ESNext”,
// TypeScriptが厳しくチェックしてくれるモードをONにする（超重要！）
“strict”: true
},
// 「どのファイルを変換対象にするか」を指定する場所
“include”: [“src//”]
}
この設定のポイントを「お買い物」に例えると…
- `compilerOptions`（買い物のメモ）: 「今日のお買い物リスト」です。冷蔵庫の中身（コード）をどう料理するか（変換するか）の指示書ですね。「なるべく新鮮な食材（最新のJavaScript）で料理してね」といった指定をここで行います。
- `strict: true`（お母さんの愛情）: これ、本当に大切です。これを `true` にすると、TypeScriptが「あ、ここデータが空っぽになる可能性があるよ！ 気をつけて！」と、お母さんのように細かく注意してくれます。最初は「うるさいな」と思うかもしれませんが、これがあるおかげで、後から大きなトラブル（バグ）を未然に防げるんです。
- `include`（冷蔵庫の場所）: 「srcフォルダの中にある食材を全部チェックしてね」と伝えています。ここを指定しないと、TypeScriptはどこを見ていいか分からず、せっかく書いたコードを無視してしまいます。
—
つまずきやすいポイント：設定は「一生固定」じゃない
初学者の皆さんがよく悩むのが、「最初から完璧な設定にしなきゃいけないの？」という不安です。
大丈夫です。そんなことはありません。
実際、現場のプロジェクトでも、最初は最低限の設定からスタートして、開発が進むにつれて「もう少し厳しくチェックしようか」「最新の機能を許可しようか」と、ルールを書き換えていくことは日常茶飯事です。
`tsconfig.json` は、あなたの成長とともに育てていく生き物です。最初から全てを理解しようとせず、「今はこれが動けばOK！」くらいの軽い気持ちで始めてみてください。
—
まとめ：怖がらずに、まずは書いてみよう
TypeScriptの環境構築で手が止まってしまうのは、設定が「正解か不正解か」を気にしすぎるからかもしれません。でも、TypeScriptはあなたの敵ではなく、「ミスを減らして、開発を楽にするための魔法」をかけてくれる存在です。
まずは上記のコードをエディタに貼り付けて、`src` フォルダの中に適当なファイルを作ってみてください。エラーが出たら、それはTypeScriptがあなたに「ここ、こう書くと良くなるよ！」とアドバイスをくれているサインです。
その対話を繰り返していくうちに、いつの間にかあなたは、TypeScriptを自在に操る職人になっているはずですよ。
それでは、良いコーディングライフを！何か分からないことがあれば、いつでもまた聞きに来てくださいね。
コメント