TypeScriptの世界へようこそ！
「プロジェクトを始めたけれど、`tsconfig.json`の中身がなんだか難しそうで、コピペしたものをそのまま使っている……」なんてこと、ありませんか？
実は、TypeScriptの神様も最初からすべてを知っていたわけではありません。今日は、そんな設定ファイルの「コピペ地獄」からあなたを救い出し、賢くスマートにプロジェクトを管理するための魔法の杖、「extends（継承）」という機能についてお話しします。
—
そもそも、なぜ設定ファイルが散らかるの？
例えば、あなたが「Webサイト制作」と「サーバー側の処理」という2つのプロジェクトを同時に進めていると想像してください。
どちらも「TypeScriptを正しく動かしたい」という目的は同じなのに、それぞれに同じような設定を書くと、あとで「あ、やっぱり厳しめのチェックルール（`strict: true`）に変えたいな」と思ったとき、すべてのファイルを一つずつ書き換えるハメになります。
これって、冷蔵庫の中の調味料を全部書き出すメモを、家中の部屋の壁に貼っているようなものですよね。一箇所変えたら、全部修正しないといけない。……そんなの、面倒すぎます！
救世主「extends」は「テンプレート」そのもの
そこで登場するのが `extends` です。これは、「ベースとなる設定ファイルを一つ作っておいて、あとはそれを『継承（コピーして追加）』する」という仕組みです。
カフェのメニューで例えるなら、「ベースのコーヒー」という基本設定を作っておいて、「ミルク入り」や「砂糖入り」という個別設定は、その基本設定をベースに「ちょっとだけカスタマイズ」して注文するようなイメージです。
ステップ1：ベースとなる設定を作る（base.json）
まずは、共通で使いたいルールをまとめたファイルを作ります。
// tsconfig.base.json
{
“compilerOptions”: {
“strict”: true, // 厳しくチェックしてね
“target”: “ESNext”, // 最新のJavaScriptに変換してね
“moduleResolution”: “node” // モジュールの読み込み方を決めるよ
}
}
ステップ2：個別の設定で継承する
次に、実際のプロジェクト側の `tsconfig.json` で、先ほどのファイルを読み込みます。ここで `extends` の出番です。
// tsconfig.json
{
// 共通の設定を丸ごと読み込む！
“extends”: “./tsconfig.base.json”,
“compilerOptions”: {
// ここには、「このプロジェクト特有の設定」だけを書けばOK！
“outDir”: “./dist”
}
}
たったこれだけです。見た目がスッキリして、何が「共通」で何が「個別」なのかが一目瞭然になりましたよね。
—
なぜこのやり方が「プロの現場」で愛されるのか
現場では、プロジェクトが大きくなればなるほど、設定ファイルは複雑になります。もし継承を使わなかったら、設定ファイルの変更一つに数時間かかる……なんて悲劇が起きてしまいます。
`extends` を使うメリットは、単に「楽」なだけではありません。
1. 「正解」を一つにまとめられる: チーム全員が同じルールを共有できるので、「あれ、このプロジェクトだけ設定が違う？」というミスがなくなります。
2. あとから「上書き」できる: ベース設定を継承しつつ、特定の項目だけ別の値に書き換える（オーバーライド）ことも簡単です。
3. メンテナンスが圧倒的に早い: 「全プロジェクトのJavaScriptのバージョンを一斉に上げたい！」というときも、`tsconfig.base.json` を一行直すだけで完了です。
—
最後に：つまずきやすいポイント
もし、設定がうまく反映されないときは、「ファイルの場所（パス）」を疑ってみてください。
`”extends”: “./tsconfig.base.json”` と書いたとき、`./` は「今このファイルがいる場所から見て、同じ階層にあるよ」という意味です。もしベースファイルが深い階層にあるなら、`../` （一つ上の階層）などを組み合わせて指定してあげてくださいね。
最初は難しく感じるかもしれませんが、この `extends` を使いこなすだけで、あなたはもう「設定ファイルの奴隷」から解放され、「設定ファイルを支配する人」になれます。
TypeScriptの設定は、あなたの開発を楽にするための「ガイドライン」です。ガチガチに固める必要はありません。まずは小さく、共通設定を一つ作るところから始めてみませんか？
応援しています！困ったことがあったら、いつでもここへ戻ってきてくださいね。
コメント