🦔

tsconfig.json の設定解説 📝

2025/06/22に公開

!tsconfig.json は、TypeScriptプロジェクトのルートに配置される設定ファイルで、TypeScriptコンパイラ tsc がコードをコンパイルする際の挙動を定義します。これにより、プロジェクトの要件に合わせて、TypeScriptの厳密さ、出力形式、モジュール解決方法などを細かく制御できます。🔧
提供された tsconfig.json の各オプションについて詳しく解説しますね！

 compilerOptions の各プロパティ解説 💡

プロパティ
設定値
解説


rootDir
.
プロジェクトのルートディレクトリを指定します。TypeScriptコンパイラがどのディレクトリからファイルを探索し、出力ディレクトリ構造を構築するかを決定します。. は現在のディレクトリを意味します。

paths
{"rn-mk-tour": ["./src/index"]}
モジュール解決のためのパスエイリアスを設定します。ここでは、rn-mk-tour というパスが ./src/index に解決されるように定義されています。これにより、import "rn-mk-tour" と書くと、実際には ./src/index.ts (または .tsx など) が読み込まれます。エイリアスを設定することで、長い相対パスを短縮したり、リファクタリングを容易にしたりできます。

allowUnreachableCode
false
到達不能なコード（実行されることがないコード）が存在する場合にエラーとするかどうかを指定します。false に設定することで、デッドコードを検出して品質を向上させることができます。

allowUnusedLabels
false
使用されていないラベル（label: などのステートメント）が存在する場合にエラーとするかどうかを指定します。false に設定することで、不要なコードや意図しないラベルの使用を防ぎます。

esModuleInterop
true
CommonJSモジュールをES Modules形式でインポートできるようにするための互換性フラグです。これにより、import * as React from 'react' のような記述だけでなく、import React from 'react' のようなデフォルトインポートも可能になります。true に設定することで、CommonJSとES Modulesが混在する環境での相互運用性を高めます。

forceConsistentCasingInFileNames
true
ファイル名の大文字・小文字の区別を強制します。例えば、myFile.ts と myfile.ts を同じファイルとして扱わないようにし、異なるOS（Windowsは通常大文字・小文字を区別しないが、Linuxは区別する）間での互換性の問題を避けるのに役立ちます。

jsx
react-jsx
JSX構文がどのようにコンパイルされるかを指定します。react-jsx は新しいJSX変換モードであり、React をスコープ内にインポートする必要がなくなります。これにより、生成されるJavaScriptコードが簡潔になります。

lib
["ESNext"]
コンパイル時に利用可能な標準ライブラリの型定義を指定します。ESNext を指定することで、最新のECMAScript機能（例: Promise, Map, Set など）の型定義が利用可能になります。

module
ESNext
コンパイル後のJavaScriptモジュールの出力形式を指定します。ESNext を指定すると、ECMAScriptの最新のモジュール形式（import/export 構文をそのまま維持）で出力されます。これは、最近のバンドラー（Webpack, Rollup, Viteなど）が適切に処理できる形式です。

moduleResolution
bundler
モジュール解決戦略を指定します。bundler は、主にバンドラー（Webpack, Rollupなど）を使用するプロジェクトに適した新しいモードです。node と比較して、より厳密で効率的な解決を提供し、ES ModulesとCommonJSの混在をよりスムーズに扱えるように設計されています。これは、将来的に推奨されるモジュール解決戦略です。

noEmit
true
コンパイル後にJavaScriptファイルを出力しないことを指定します。これは、TypeScriptの型チェックのみを実行し、実際のJavaScriptの生成は別のツール（例: Babel）やバンドラーに任せる場合に有用です。

noFallthroughCasesInSwitch
true

switch 文の case 文で break がない場合にエラーとします。これにより、意図しないフォールスルーバグを防ぎます。

noImplicitReturns
true
関数内で、すべてのコードパスが値を返すことを要求します。if/else ブロックなどで、一部のパスで戻り値がない場合にエラーとなります。これにより、意図しない undefined の返却を防ぎます。

noImplicitUseStrict
false
生成されるJavaScriptファイルに "use strict"; を自動的に追加するかどうかを指定します。false に設定すると、自動的に追加されません。ES Modulesを使用している場合、モジュール自体が自動的に厳格モードになるため、この設定はあまり影響がないことが多いです。

noStrictGenericChecks
false
ジェネリック型のチェックを厳密に行わないかどうかを指定します。false に設定すると、厳密なチェックが行われます。通常は false にしておくと良いでしょう。

noUncheckedIndexedAccess
true
インデックスアクセス（例: arr[i]）を行う際に、配列やオブジェクトが undefined である可能性があることをチェックするようにします。これにより、ランタイムエラーを防ぐのに役立ちますが、コードが冗長になる可能性もあります。

noUnusedLocals
true
未使用のローカル変数やインポートが存在する場合にエラーとします。これにより、不要なコードを削除し、コードベースをクリーンに保つのに役立ちます。

noUnusedParameters
true
未使用の関数パラメータが存在する場合にエラーとします。これにより、不要なパラメータを削除し、コードの意図を明確にするのに役立ちます。

resolveJsonModule
true

.json ファイルをES Modulesとしてインポートできるようにします。これにより、import data from './data.json' のようにJSONファイルを直接JavaScriptファイルにインポートできるようになります。

skipLibCheck
true
宣言ファイル（.d.ts ファイル、特に node_modules 内のライブラリの型定義）の型チェックをスキップします。これにより、コンパイル時間を短縮できますが、ライブラリ側の型定義に問題があった場合に検出が遅れる可能性があります。通常、開発速度を優先して true に設定されることが多いです。

strict
true
TypeScriptの厳密な型チェックオプションをすべて有効にします。これには、noImplicitAny, noImplicitThis, strictNullChecks, strictFunctionTypes, strictPropertyInitialization, strictBindCallApply などが含まれます。true に設定することで、堅牢でバグの少ないコードを書くことができます。

target
ESNext
コンパイル後のJavaScriptのターゲットECMAScriptバージョンを指定します。ESNext は、利用可能な最新のECMAScriptバージョンでコンパイルすることを意味します。これにより、最新の言語機能を利用できますが、古いブラウザで動かす場合は、別途Babelなどでのトランスパイルが必要です。

verbatimModuleSyntax
true
モジュールのインポート/エクスポート構文が、コンパイル後も可能な限り維持されるように強制します。これにより、トランスパイル時のモジュール変換の一貫性が高まり、バンドラーとの連携がよりスムーズになります。特にES Modulesを積極的に利用するプロジェクトで推奨されます。


 まとめとこの設定の意図 🎯この tsconfig.json の設定は、現代のフロントエンド開発、特にReactのようなライブラリを使用し、バンドラー（Webpack, Viteなど）を前提としたアプリケーション開発に非常に適しています。

厳密な型チェック (strict: true): コードの品質と堅牢性を高めます。

最新のJavaScript機能の活用 (target: ESNext, module: ESNext, lib: ["ESNext"]): 最新の言語機能を利用し、開発の生産性を向上させます。

バンドラーとの連携強化 (moduleResolution: "bundler", noEmit: true, jsx: "react-jsx", verbatimModuleSyntax: true): TypeScriptの型チェックに集中し、最終的なJavaScriptの生成と最適化はバンドラーに任せるという役割分担を明確にしています。

開発体験の向上 (paths, esModuleInterop): モジュールパスのエイリアスやCommonJSとの互換性により、開発者がより快適にコードを書けるように配慮されています。

潜在的なバグの排除 (allowUnreachableCode: false, noFallthroughCasesInSwitch: true など): 不要なコードやバグにつながる可能性のある記述を積極的にエラーとして検出します。
このような設定は、大規模なプロジェクトやチーム開発において、コードの一貫性を保ち、早期に問題を検出するために非常に有効です。👍

プロパティ	設定値	解説
`rootDir`	`.`	プロジェクトのルートディレクトリを指定します。TypeScriptコンパイラがどのディレクトリからファイルを探索し、出力ディレクトリ構造を構築するかを決定します。`.` は現在のディレクトリを意味します。
`paths`	`{"rn-mk-tour": ["./src/index"]}`	モジュール解決のためのパスエイリアスを設定します。ここでは、`rn-mk-tour` というパスが `./src/index` に解決されるように定義されています。これにより、`import "rn-mk-tour"` と書くと、実際には `./src/index.ts` (または `.tsx` など) が読み込まれます。エイリアスを設定することで、長い相対パスを短縮したり、リファクタリングを容易にしたりできます。
`allowUnreachableCode`	`false`	到達不能なコード（実行されることがないコード）が存在する場合にエラーとするかどうかを指定します。`false` に設定することで、デッドコードを検出して品質を向上させることができます。
`allowUnusedLabels`	`false`	使用されていないラベル（`label:` などのステートメント）が存在する場合にエラーとするかどうかを指定します。`false` に設定することで、不要なコードや意図しないラベルの使用を防ぎます。
`esModuleInterop`	`true`	CommonJSモジュールをES Modules形式でインポートできるようにするための互換性フラグです。これにより、`import * as React from 'react'` のような記述だけでなく、`import React from 'react'` のようなデフォルトインポートも可能になります。`true` に設定することで、CommonJSとES Modulesが混在する環境での相互運用性を高めます。
`forceConsistentCasingInFileNames`	`true`	ファイル名の大文字・小文字の区別を強制します。例えば、`myFile.ts` と `myfile.ts` を同じファイルとして扱わないようにし、異なるOS（Windowsは通常大文字・小文字を区別しないが、Linuxは区別する）間での互換性の問題を避けるのに役立ちます。
`jsx`	`react-jsx`	JSX構文がどのようにコンパイルされるかを指定します。`react-jsx` は新しいJSX変換モードであり、`React` をスコープ内にインポートする必要がなくなります。これにより、生成されるJavaScriptコードが簡潔になります。
`lib`	`["ESNext"]`	コンパイル時に利用可能な標準ライブラリの型定義を指定します。`ESNext` を指定することで、最新のECMAScript機能（例: Promise, Map, Set など）の型定義が利用可能になります。
`module`	`ESNext`	コンパイル後のJavaScriptモジュールの出力形式を指定します。`ESNext` を指定すると、ECMAScriptの最新のモジュール形式（`import`/`export` 構文をそのまま維持）で出力されます。これは、最近のバンドラー（Webpack, Rollup, Viteなど）が適切に処理できる形式です。
`moduleResolution`	`bundler`	モジュール解決戦略を指定します。`bundler` は、主にバンドラー（Webpack, Rollupなど）を使用するプロジェクトに適した新しいモードです。`node` と比較して、より厳密で効率的な解決を提供し、ES ModulesとCommonJSの混在をよりスムーズに扱えるように設計されています。これは、将来的に推奨されるモジュール解決戦略です。
`noEmit`	`true`	コンパイル後にJavaScriptファイルを出力しないことを指定します。これは、TypeScriptの型チェックのみを実行し、実際のJavaScriptの生成は別のツール（例: Babel）やバンドラーに任せる場合に有用です。
`noFallthroughCasesInSwitch`	`true`	`switch` 文の `case` 文で `break` がない場合にエラーとします。これにより、意図しないフォールスルーバグを防ぎます。
`noImplicitReturns`	`true`	関数内で、すべてのコードパスが値を返すことを要求します。`if/else` ブロックなどで、一部のパスで戻り値がない場合にエラーとなります。これにより、意図しない `undefined` の返却を防ぎます。
`noImplicitUseStrict`	`false`	生成されるJavaScriptファイルに `"use strict";` を自動的に追加するかどうかを指定します。`false` に設定すると、自動的に追加されません。ES Modulesを使用している場合、モジュール自体が自動的に厳格モードになるため、この設定はあまり影響がないことが多いです。
`noStrictGenericChecks`	`false`	ジェネリック型のチェックを厳密に行わないかどうかを指定します。`false` に設定すると、厳密なチェックが行われます。通常は `false` にしておくと良いでしょう。
`noUncheckedIndexedAccess`	`true`	インデックスアクセス（例: `arr[i]`）を行う際に、配列やオブジェクトが `undefined` である可能性があることをチェックするようにします。これにより、ランタイムエラーを防ぐのに役立ちますが、コードが冗長になる可能性もあります。
`noUnusedLocals`	`true`	未使用のローカル変数やインポートが存在する場合にエラーとします。これにより、不要なコードを削除し、コードベースをクリーンに保つのに役立ちます。
`noUnusedParameters`	`true`	未使用の関数パラメータが存在する場合にエラーとします。これにより、不要なパラメータを削除し、コードの意図を明確にするのに役立ちます。
`resolveJsonModule`	`true`	`.json` ファイルをES Modulesとしてインポートできるようにします。これにより、`import data from './data.json'` のようにJSONファイルを直接JavaScriptファイルにインポートできるようになります。
`skipLibCheck`	`true`	宣言ファイル（`.d.ts` ファイル、特に `node_modules` 内のライブラリの型定義）の型チェックをスキップします。これにより、コンパイル時間を短縮できますが、ライブラリ側の型定義に問題があった場合に検出が遅れる可能性があります。通常、開発速度を優先して `true` に設定されることが多いです。
`strict`	`true`	TypeScriptの厳密な型チェックオプションをすべて有効にします。これには、`noImplicitAny`, `noImplicitThis`, `strictNullChecks`, `strictFunctionTypes`, `strictPropertyInitialization`, `strictBindCallApply` などが含まれます。`true` に設定することで、堅牢でバグの少ないコードを書くことができます。
`target`	`ESNext`	コンパイル後のJavaScriptのターゲットECMAScriptバージョンを指定します。`ESNext` は、利用可能な最新のECMAScriptバージョンでコンパイルすることを意味します。これにより、最新の言語機能を利用できますが、古いブラウザで動かす場合は、別途Babelなどでのトランスパイルが必要です。
`verbatimModuleSyntax`	`true`	モジュールのインポート/エクスポート構文が、コンパイル後も可能な限り維持されるように強制します。これにより、トランスパイル時のモジュール変換の一貫性が高まり、バンドラーとの連携がよりスムーズになります。特にES Modulesを積極的に利用するプロジェクトで推奨されます。

tsconfig.json の設定解説 📝

`compilerOptions` の各プロパティ解説 💡

まとめとこの設定の意図 🎯

Discussion