0Pricing
TypeScript Academy · レッスン

Target、lib、module、JSXの設定

出力されるJSと利用可能なグローバルに適したtarget/libを選び、実行環境やバンドラーに合わせてmoduleとJSXを設定します

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

導入

目標：アプリに適した target（出力 JS）、lib（アンビエントなグローバル）、module（import/export 形式）、および JSX の戦略を選びます。

target オプション

target は出力される JS の ECMAScript バージョン（例：ES2018、ES2020）を設定します。実行環境がサポートする中で、最も低いバージョンを選びます。

// tsconfig.json (excerpt)
{
  "compilerOptions": {
    "target": "ES2020"
  }
}

// TS may downlevel features based on target
const n = 10n; // BigInt requires ES2020+

lib オプション

lib は、どのグローバル型宣言を含めるかを制御します（例：ES2020、DOM、WebWorker）。

// tsconfig.json (excerpt)
{
  "compilerOptions": {
    "lib": ["ES2020", "DOM"]
  }
}

// Now Promise, fetch, and DOM globals are typed if included

module オプション

module はモジュールシステム（CommonJS、ESNext、NodeNext など）を設定します。Node やバンドラーの想定に合わせてください。

// tsconfig.json (excerpt)
{
  "compilerOptions": {
    "module": "ESNext"
  }
}

// ESM example
import { join } from "path";
export const p = join("a", "b");

jsx オプション

jsx は TS による JSX の変換方法（react、react-jsx、preserve）を選択します。フレームワークやバンドラーの想定に合わせてください。

// React 17+ recommended
// tsconfig.json (excerpt)
{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

// JSX files compile to React 17 runtime helpers (no need for import React)

プリセット

使用する技術スタックに合ったプリセットを選びます。Web アプリには DOM が必要です。Node プロジェクトでは通常これを省略し、モジュールには NodeNext を選びます。

// Web app (Vite/React)
{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM"],
    "module": "ESNext",
    "jsx": "react-jsx"
  }
}

// Node (ESM)
{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020"],
    "module": "NodeNext"
  }
}

lib オプションの確認

簡単な確認：lib オプションは何を制御しますか？

振り返り

振り返り：target ⇒ 出力される JS のレベル、lib ⇒ 利用可能なグローバル、module ⇒ import/export 形式、jsx ⇒ JSX の変換モードです。

よくある質問

「Target、lib、module、JSXの設定」レッスンは無料ですか？

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

「Target、lib、module、JSXの設定」で何を学びますか？

出力されるJSと利用可能なグローバルに適したtarget/libを選び、実行環境やバンドラーに合わせてmoduleとJSXを設定します ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Target、lib、module、JSXの設定」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. strictnessフラグ
  2. Target、lib、module、JSXの設定
  3. Project References（入門）
← TypeScript Academyに戻る