TSConfig ジェネレーター
TypeScriptプロジェクト用のtsconfig.jsonを生成。Node 18/20/22、Next.js、React、ライブラリ向けプリセット — すべてのコンパイラオプションを解説付きで
このツールについて
tsconfig.jsonファイルは、TypeScriptコンパイラがコードを処理する方法を制御します — どのJavaScriptバージョンをターゲットにするか、どのモジュールシステムを使うか、型チェックをどの程度厳格にするか、ソースファイルをどこで見つけるか。
tsconfigを正しく設定することは重要です。targetの設定を間違えると不要なポリフィルを含めたり、ランタイムがサポートしていない構文を使ったりします。moduleの設定を間違えるとインポートが壊れます。strictフラグがないとバグを見逃します。
このジェネレーターは、最も一般的なセットアップ — Node.js（18、20、22）、Next.js、Vite対応React、npmライブラリ — 向けの実戦テスト済みプリセットを提供し、各オプションを細かく調整できます。生成された設定はそのままプロジェクトに貼り付けられます。
使い方
1. プロジェクトに合ったプリセットを選択（Node 20、Next.js、Reactなど）
2. 必要に応じて個別のコンパイラオプションを調整 — target、module、strictness、paths
3. tsconfig.jsonが設定変更に応じてリアルタイムで更新
4. 「コピー」でクリップボードにコピー、または「ダウンロード」でファイル保存
5. プロジェクトルートにtsconfig.jsonとして配置
よくある質問
Node 18用のtsconfigは？
Node 18では、target: ES2023、module: NodeNext、moduleResolution: NodeNextを使用します。これはNode 18のネイティブJavaScriptサポートとESMモジュールシステムに対応しています。このジェネレーターのNode 18プリセットがこれらのオプションを自動で設定します。
module NodeNextとESNextの違いは？
NodeNextはNode.jsのモジュール解決ルールに従います — package.jsonの'exports'を尊重し、インポートにファイル拡張子が必要です。ESNextはバンドラー（ViteやWebpackなど）がモジュール解決を処理することを前提としています。Node.jsアプリにはNodeNext、バンドルされるフロントエンドアプリにはESNextを使いましょう。
moduleResolution Bundlerとは？
moduleResolution: Bundlerは、TypeScriptにモダンなバンドラー（Vite、webpack、esbuild）と同じ方法でインポートを解決するよう伝えます — ファイル拡張子不要、package.jsonの'exports'をサポート。バンドラーでビルドするフロントエンドプロジェクトに使用します。バンドラーなしで実行するNode.jsアプリには使わないでください。
strictモードを有効にすべき？
はい、新しいプロジェクトでは必ず。strictモードはstrictNullChecks、noImplicitAny、strictFunctionTypesなど、実際のバグを捕捉するチェックを有効にします。レガシーコードベースでstrictを無効にするのは理解できますが、新しいプロジェクトは常にstrict: trueで始めるべきです。
targetとlibの違いは？
targetはコンパイラが出力するJavaScript構文（アロー関数、async/awaitなど）を制御します。libは利用可能な型定義（Promise、Map、DOM APIなど）を制御します。Node.jsでは通常lib: ['ES2023']でDOMなし。ブラウザでは'DOM'と'DOM.Iterable'を追加します。
skipLibCheck: trueは必要？
skipLibCheck: trueは.d.ts宣言ファイルの型チェックをスキップし、コンパイルを大幅に高速化します。ほとんどのプロジェクトで推奨されます。node_modulesの宣言ファイルに型の競合があっても、それはあなたが修正すべき問題ではないからです。
verbatimModuleSyntaxとは？
verbatimModuleSyntaxは、型のみのインポートに'import type'を使うことを強制し、import/export構文をそのまま保持します。古いimportsNotUsedAsValuesやpreserveValueImportsオプションを置き換えます。TypeScript 5以降で型インポートを処理するモダンな方法です。