Frontend Academy · レッスン

Strictモードとanyの排除

tsconfigですべてのstrictフラグを有効にし、anyの代わりにunknownを使い、型アサーションを安全に適用して、型付けの弱いファイルをstrictへ移行します。

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

Strictモードを使用する理由

tsconfig.jsonのstrict: trueは、TypeScriptのすべての安全性フラグを有効にします。これは本格的なプロジェクトの基準となる設定です。nullに関するバグ、型付けされていないパラメーター、安全でない代入をコンパイル時に検出します。

strictで有効になる機能

strictは、noImplicitAny、strictNullChecks、strictFunctionTypes、strictBindCallApply、strictPropertyInitialization、alwaysStrict、noImplicitThis、useUnknownInCatchVariablesを有効にするメタフラグです。

strictNullChecks

この設定がないと、nullとundefinedはすべての型に代入できるため、バグの大きな原因になります。有効にすると、nullのケースを明示的に処理する必要があります。

// Without strictNullChecks — runtime error:
function greet(name: string) { return name.toUpperCase(); }
greet(null); // compiler allows, crashes at runtime

// With strictNullChecks:
function greet(name: string | null) {
  if (name == null) return '';
  return name.toUpperCase();
}

noImplicitAny

このフラグがない場合、型注釈のないパラメーターはデフォルトでanyになり、型システムを暗黙に回避してしまいます。noImplicitAnyを有効にすると、パラメーターに型注釈を付ける必要があります。

// Without noImplicitAny:
function format(value) { return value.toUpperCase(); } // value: any

// With:
function format(value: string) { return value.toUpperCase(); }

strictPropertyInitialization

確実な初期化子を持たないクラスプロパティは、undefinedになる可能性があると判定されます。初期化するか、確定代入演算子!を使用してください。

class User {
  name!: string;     // tell TS: I'll set this elsewhere
  age = 0;           // default initialiser
  email: string;     // ERROR with strictPropertyInitialization
  constructor(email: string) { this.email = email; } // FIX: init in ctor
}

anyではなくunknownを使用する

anyは型チェックを無効にします。一方、unknownは型安全であり、使用する前に型を絞り込む必要があります。常にunknownを優先してください。

// any — no checks, bug magnet:
function parse(input: any) {
  return input.toUpperCase(); // compiler is fine, runtime may crash
}

// unknown — must narrow:
function parse(input: unknown) {
  if (typeof input === 'string') {
    return input.toUpperCase();
  }
  throw new Error('Expected string');
}

型アサーションを安全に行う

アサーションが必要な場合（TypeScriptよりも自分の判断のほうが正しいと分かっている場合）は、as構文を優先してください。どうしても他に方法がない場合を除き、x as unknown as Tのような二重アサーションは避けてください。これはコードの問題点を示す兆候です。

const el = document.getElementById('app') as HTMLDivElement;
el.style.background = 'blue';

// Safer alternative: runtime check
const el = document.getElementById('app');
if (!(el instanceof HTMLDivElement)) throw new Error('app missing');
el.style.background = 'blue'; // narrowed to HTMLDivElement

プロジェクトからanyを排除する

方針は、strictを有効にし、発生したエラーをファイル単位で1つずつ修正することです。unknownと型の絞り込みを使用します。既知の問題箇所にはTODOコメントとともに@ts-expect-errorを追加し、見落とせないようにします。

Lintルール：no-explicit-any

ESLintの設定に@typescript-eslint/no-explicit-anyを追加すると、新しいanyの追加を禁止できます。

// .eslintrc.json
{
  "rules": {
    "@typescript-eslint/no-explicit-any": "error"
  }
}

strictFunctionTypes

関数パラメーターを反変的にチェックし、想定される型よりも広いパラメーター型を持つ関数の代入を防ぎます。これにより、実行時のクラッシュを防止できます。

catch変数の型

useUnknownInCatchVariablesを有効にすると、catch (e)のeはanyではなくunknownとして推論されます。プロパティにアクセスする前に、型を絞り込む必要があります。

try {
  doRisky();
} catch (e) {
  // e is unknown
  if (e instanceof Error) {
    console.error(e.message);
  } else {
    console.error('Unknown error', e);
  }
}

移行のヒント

新しいプロジェクトでは、初日からstrictを有効にしてください。既存のプロジェクトでは、フラグを段階的に有効にします。まず最大の効果が得られるstrictNullChecksから始め、次にnoImplicitAnyを有効にします。問題が修正されたときにコメントの削除を促せるよう、//@ts-ignoreではなく//@ts-expect-errorを使用してください。

クイックチェック

値の型が分からない場合、unknownがanyより安全なのはなぜですか？

復習：Strictモード

完全な安全性を確保するにはstrict: trueを有効にします。strictNullChecksによりnullの処理が必須になります。noImplicitAnyによりパラメーターの型注釈が必須になります。クラスフィールドにはstrictPropertyInitializationを使用します。anyではなくunknownを使用し、型ガードで絞り込みます。二重アサーションは避けます。no-explicit-anyでLintを実行します。既存のコードは、@ts-expect-errorマーカーを使用し、ファイル単位で1つずつ移行します。

よくある質問

「Strictモードとanyの排除」レッスンは無料ですか？

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

「Strictモードとanyの排除」で何を学びますか？

tsconfigですべてのstrictフラグを有効にし、anyの代わりにunknownを使い、型アサーションを安全に適用して、型付けの弱いファイルをstrictへ移行します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Strictモードとanyの排除」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Frontend Academyに戻る