TypeScript Academy · レッスン

移行の開始：allowJsとcheckJs

Q: 「移行の開始：allowJsとcheckJs」で何を学びますか？

JavaScriptプロジェクトでTypeScriptのチェックを有効にします。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScriptプロジェクトでTypeScriptのチェックを有効にします。

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

移行の課題

大規模なJavaScriptコードベースを一度にTypeScriptへ移行するのは危険です。段階的な方法では、プロジェクトが動作する状態を保ちながら、ファイル単位でTypeScriptを徐々に有効にします。

# Key compiler flags for gradual migration:
# allowJs — allow .js files in the compilation
# checkJs — type-check .js files with JSDoc types

ステップ1：TypeScriptのインストール

プロジェクトにTypeScriptを追加し、最初はstrictモードを有効にせずに最小限のtsconfigを作成します。

npm install --save-dev typescript
npx tsc --init
# Edit tsconfig.json to set allowJs: true

allowJs: true

allowJs: trueを指定すると、TypeScriptは.jsファイルをコンパイル対象に含めます。型チェックは寛容になるため、ほとんどのJavaScriptコードはエラーなしでコンパイルされます。

{
  "compilerOptions": {
    "allowJs": true,
    "outDir": "./dist",
    "target": "ES2020"
  },
  "include": ["src"]
}

checkJs: true

checkJs: trueを指定すると、推論された型とJSDocアノテーションを使ってJavaScriptファイルの型チェックが有効になります。.tsへの変換を必要とせずに、明らかなバグを検出できます。

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  }
}

@ts-nocheckによるエラーの抑制

問題のあるJSファイルの先頭に// @ts-nocheckを追加すると、移行を段階的に進めている間、TypeScriptのエラーをすべて抑制できます。

// @ts-nocheck
// This file is not yet migrated — errors suppressed
function legacyUtil(x) { return x.foo.bar; }

行単位のエラー抑制

// @ts-ignoreを使うと、ファイル全体を無効にせず、1行のエラーだけを抑制できます。

const result = legacyFn(value); // @ts-ignore
// Only this line's error is suppressed

maxNodeModuleJsDepth

デフォルトでは、TypeScriptはプロジェクト内のJSファイルだけをチェックします。maxNodeModuleJsDepthを設定すると、node_modules内のJSをどの深さまでチェックするかを制御できます。

{
  "compilerOptions": {
    "maxNodeModuleJsDepth": 1 // Check 1 level deep in node_modules
  }
}

JSのDistへのコンパイル

allowJsを指定すると、TypeScriptコンパイラーはJSファイルもトランスパイルできます。これにより、ポリフィルの適用や古い環境への対応をプロジェクト全体で統一できます。

tsc
# Compiles both .ts and .js files to dist/

進捗の測定

.jsファイルと.tsファイルの数を比較して、移行の進捗を追跡します。スプリントごとに変換する割合の目標を設定しましょう。

find src -name "*.ts" | wc -l   # TypeScript files
find src -name "*.js" | wc -l   # JavaScript files remaining

型の後退を防ぐ

既存のJSファイルにエラーが大量に発生しないよう、最初はnoImplicitAny: falseにしておきます。各ファイルをTypeScriptに変換した後で有効にしてください。

{
  "compilerOptions": {
    "allowJs": true,
    "noImplicitAny": false // Relax for JS files; enable per .ts file
  }
}

まとめ：移行の開始

allowJs: trueとcheckJs: trueで移行を開始し、まだ準備のできていないファイルには@ts-nocheckを使い、ファイル数で進捗を追跡します。この方法なら、ファイルを段階的に変換している間もプロジェクトをコンパイル可能な状態に保てます。

確認問題

.jsを.tsに変換せずに、checkJs: trueは何を可能にしますか？

学んだこと

allowJs: trueと、必要に応じてcheckJs: trueを使ってJS→TS移行を開始します。まだ準備のできていないファイルには@ts-nocheckを使い、ファイル数で進捗を追跡しながら段階的に変換します。

よくある質問

「移行の開始：allowJsとcheckJs」レッスンは無料ですか？

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

「移行の開始：allowJsとcheckJs」で何を学びますか？

JavaScriptプロジェクトでTypeScriptのチェックを有効にします。ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「移行の開始：allowJsとcheckJs」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← TypeScript Academyに戻る