こんにちは！TypeScriptの世界へようこそ。
新しい言語を学ぶとき、一番最初に立ちはだかる「設定ファイル（tsconfig.json）」の壁。正直、最初は暗号みたいに見えて、「これをいじって動かなくなったらどうしよう…」と不安になりますよね。その気持ち、痛いほどよくわかります。
今回は、そんなTypeScriptの心臓部である`tsconfig.json`を、「賢く使い回す魔法」である`extends`プロパティについて、難しい専門用語は抜きにしてお話ししていきますね。
—
1. なぜ「設定の継承」が必要なの？
例えば、あなたがこれから「Webサイト制作」と「スマホアプリ開発」という2つのプロジェクトを作るとします。どちらもTypeScriptを使いますが、細かいルール（「古いブラウザでも動くようにしたい」「最新の書き方を積極的に使いたい」など）は微妙に異なりますよね。
ここで、すべてのプロジェクトに同じ設定をコピペして管理すると、後で「あ、やっぱりここは厳しくチェックしたいな」と思った時に、全部のファイルを直さなきゃいけなくなります。これが地獄の始まりです。
そこで登場するのが、「ベース（基本）の設定を作って、そこから継承（コピー＆カスタマイズ）する」という考え方です。
身近な例え：料理の「基本の出汁」
料理で例えると分かりやすいかもしれません。
- ベース（基本の出汁）： どんな料理にも使える基本の味。
- 継承（各プロジェクト）： 「味噌汁にするなら味噌を足す」「うどんにするなら醤油を足す」。
ベースの出汁さえあれば、毎回イチから鰹節を削らなくても、美味しい料理がパパッと作れますよね。`extends`は、まさにこの「基本の出汁」を使い回す機能なんです。
—
2. 実際にやってみよう：魔法の「extends」
まずは、基本となる設定ファイル`tsconfig.base.json`を作ります。
// tsconfig.base.json
{
“compilerOptions”: {
“strict”: true, // 厳しくチェックしてね
“target”: “ES2020”, // 最近の書き方でOK
“moduleResolution”: “node” // Node.jsの作法に合わせる
}
}
次に、特定のプロジェクト用の設定ファイルを作ります。ここで`extends`の出番です！
// tsconfig.app.json
{
“extends”: “./tsconfig.base.json”, // 「ベースのルールを全部引き継ぐよ！」
“compilerOptions”: {
“target”: “ES6” // ここだけ上書き！スマホ向けにちょっと古い形式へ
}
}
ここがポイント！
`tsconfig.app.json`には、たったこれだけしか書いていませんが、実際には`tsconfig.base.json`で定義した`strict: true`もちゃんと引き継がれています。
「基本はベースの通り。でも、ここだけは僕の好みに変えさせて！」と主張しているようなイメージですね。これが継承のパワーです。
—
3. 「上書き」の優先順位を知っておこう
ここで初心者がつまずきやすいのが、「どっちの設定が勝つの？」という優先順位です。ルールはシンプルで、「後から書いたもの（継承先）が勝つ！」と覚えておいてください。
お買い物に例えると分かりやすいです。
1. 「お弁当を買う」という決定事項（ベース）がある。
2. でもお店に着いてから「やっぱり唐揚げ弁当にする」と決める（上書き）。
3. 結果、あなたは唐揚げ弁当を食べる。
TypeScriptも同じで、ベースで「何でもOK」と言っていても、継承先で「いや、ここはダメ！」と書けば、継承先の設定が優先されます。これで、大きなプロジェクトでも柔軟にルールを調整できるんです。
—
現場のエンジニアからのワンポイントアドバイス
最初は「設定ファイルが分かれていると混乱しそう…」と思うかもしれません。でも大丈夫です。
実務の現場では、「基本設定は厳しめにする」というのが鉄則です。`strict: true`（厳格モード）をベースに入れておけば、どのプロジェクトを立ち上げても「うっかりミス」をTypeScriptが未然に防いでくれます。
もし設定が複雑になってきたら、無理に一つにまとめようとせず、今回のように`base`、`web`、`server`といった具合に、ファイルを分けて`extends`で繋いでみてください。それだけで、あなたのプロジェクトはぐっとプロフェッショナルな構成になりますよ。
—
最後に：失敗しても怖くない！
TypeScriptの設定は、パズルのようなものです。最初はピースが合わなくて「エラー！」と怒られることもありますが、それはTypeScriptが「もっとこうしたほうが、あとで君が楽になるよ！」と教えてくれているサインです。
焦らず、一つずつ設定を書き換えて、エディタのエラーメッセージが消えていくのを楽しんでみてください。その積み重ねが、いつかあなたを「TypeScriptの達人」へと押し上げてくれます。
何か分からないことがあれば、いつでもまた聞きに来てくださいね。あなたの開発ライフを心から応援しています！
コメント