0Pricing
Frontend Academy · レッスン

TS のコンパイルと tsconfig.json

tsc を実行して TypeScript をコンパイルし、strict、target、outDir などの tsconfig.json オプションでコンパイラーを設定します。

「TS のコンパイルと tsconfig.json」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

TypeScriptコンパイラのインストール

TypeScriptを開発用依存関係としてインストールします。tsc CLIはTypeScriptファイルをコンパイルします。ViteやNext.jsではバンドラーがコンパイルを処理しますが、型チェックには引き続きtscを使用します。

npm install --save-dev typescript
npx tsc --version  # verify installation
npx tsc app.ts     # compile a single file

tsconfig.jsonの初期化

npx tsc --initを実行すると、すべてのオプションがコメントアウトされ、適切なデフォルト値が設定されたtsconfig.jsonが生成されます。このファイルがTypeScriptコンパイラの唯一の設定ファイルになります。

npx tsc --init
# Creates tsconfig.json with ~100 commented-out options

tsconfig.jsonの構成

主なセクションは、compilerOptions（コンパイラの動作）、include（コンパイルするファイル）、exclude（除外するファイル）です。

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

target — 出力するJavaScriptのバージョン

targetは、tscが出力するJavaScriptのバージョンを指定します。最新の環境にはES2022またはESNextを使用します。最大限の互換性が必要な場合はES5を使用しますが、通常は代わりにBabelが処理します。

module — モジュールシステム

moduleは、出力のモジュール形式を制御します。Node.jsにはCommonJSを使用します。バンドラー（Vite、webpack）にはESNextまたはES2022を使用します。package.jsonのtype:moduleを使う最新のNode.jsにはNodeNextを使用します。

strict — 厳密チェックフラグ

"strict": trueを設定すると、strictNullChecks、noImplicitAny、strictFunctionTypesなど、厳密なチェックをまとめて有効にできます。新しいプロジェクトでは必ず有効にしてください。最も多くのバグを検出できます。

{
  "compilerOptions": {
    "strict": true  // enables all strict checks
    // or individually:
    // "strictNullChecks": true,
    // "noImplicitAny": true
  }
}

strictNullChecks — nullバグの排除

strictNullChecksを有効にすると、nullとundefinedは、ユニオンに明示的に含めない限り、他の型に代入できなくなります。これにより、nullのケースへの対応が強制されます。

// Without strictNullChecks:
const name: string = null; // allowed

// With strictNullChecks:
const name: string = null; // Error!
const name2: string | null = null; // OK

outDirとrootDir

outDirは、コンパイル済みのJSファイルを配置する場所を指定します。rootDirは、TypeScriptソースファイルのルートを設定します。両方を組み合わせると、dist/の下にソース構造がそのまま再現されます。

// src/utils.ts → dist/utils.js
{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  }
}

paths — モジュールエイリアス

pathsオプション（およびbaseUrl）を使ってパスエイリアスを設定します。../../components/Buttonの代わりに@/components/Buttonをインポートできるようになります。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

ウォッチモードと型チェックのみ

tsc --watchは、ファイルの変更時に再コンパイルします。tsc --noEmitはファイルを出力せずに型チェックを実行します。バンドラーの処理を重複させずに型を検証できるため、CIで便利です。

# Type check only (no output):
npx tsc --noEmit

# Watch and recompile:
npx tsc --watch

tsconfig.jsonの拡張

extendsを使うと、ベース設定を継承できます。@tsconfig/strictestのような共有ベース設定には、コミュニティのベストプラクティスがまとめられています。

// Install:
npm install -D @tsconfig/strictest

// tsconfig.json:
{
  "extends": "@tsconfig/strictest",
  "compilerOptions": {
    "outDir": "./dist"
  }
}

確認問題

厳密な型チェックをすべて有効にするtsconfigのオプションはどれですか。

振り返り: tsconfig.json

tscはTypeScriptをJavaScriptにコンパイルします。tsconfig.jsonでは、target（出力するESバージョン）、module（モジュールシステム）、outDir、strict、pathsを制御します。strict: trueにすると、最も多くのバグを検出できます。CIでは、純粋な型チェックのために--noEmitを使用します。ベストプラクティスに従うには、コミュニティのベース設定を継承してください。

よくある質問

「TS のコンパイルと tsconfig.json」レッスンは無料ですか？

はい。「TS のコンパイルと tsconfig.json」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「TS のコンパイルと tsconfig.json」で何を学びますか？

tsc を実行して TypeScript をコンパイルし、strict、target、outDir などの tsconfig.json オプションでコンパイラーを設定します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「TS のコンパイルと tsconfig.json」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. TypeScript を学ぶ理由：コンパイル時に型でバグを検出
  2. プリミティブ型・ユニオン型・型エイリアス
  3. インターフェースとオブジェクト型
  4. TS のコンパイルと tsconfig.json
← Frontend Academyに戻る