0Pricing
TypeScript Academy · レッスン

null、undefined、厳格な null チェック

strict モードで null と undefined を安全に扱います。

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

ようこそ

JavaScriptでは、nullとundefinedが実行時エラーの一般的な原因になります。TypeScriptのstrict nullチェックを有効にすると、これらを明示的に処理するよう強制できます。

nullとundefined

`undefined`は、変数が宣言されているものの値が代入されていないことを表します。`null`は、意図的に値がないことを表します。TypeScriptでは、どちらも別々の型です。
let a: undefined = undefined;
let b: null = null;

strict nullチェックなしの場合

`strictNullChecks`がない場合、nullとundefinedはすべての型のサブタイプになります。これは古いTypeScriptでのデフォルトであり、一般的には安全ではありません。
// strictNullChecks: false (unsafe default)
let name: string = null; // allowed — dangerous!

strict nullチェックの有効化

`strictNullChecks: true`（`strict`に含まれています）を設定すると、nullとundefinedは、それぞれ自身の型または明示的なユニオン型にのみ代入できます。
// strictNullChecks: true
let name: string = null; // Error!
let maybeName: string | null = null; // OK

オプショナルプロパティ

`?`が付いたオブジェクトプロパティは、暗黙的に`T | undefined`になります。プロパティが存在しない場合にも対処する必要があります。
interface Config {
  host: string;
  port?: number; // number | undefined
}

const c: Config = { host: 'localhost' };
console.log(c.port?.toString()); // optional chaining

nullable型の絞り込み

プロパティにアクセスする前に、ifチェックを使ってnullまたはundefinedとのユニオン型を絞り込んでください。
function greet(name: string | null): string {
  if (name === null) return 'Guest';
  return 'Hello, ' + name;
}

オプショナルチェーン（?.）

`?.`演算子は、左辺がnullまたはundefinedの場合に`undefined`を返して処理を短絡し、実行時クラッシュを防ぎます。
const user = getUser();
const city = user?.address?.city; // undefined if any step is null

Null合体（??）

`??`演算子は、左辺がnullまたはundefinedの場合にのみ右辺を返します。任意のfalsy値で動作する`||`とは異なります。
const port = config.port ?? 3000; // 3000 if port is null/undefined
const label = name ?? 'Anonymous';

Non-Nullアサーション演算子（!）

`!`後置演算子は、値がnullでもundefinedでもないことを確信しているとTypeScriptに伝えます。本当に確信できる場合にのみ使用してください。
const el = document.getElementById('root')!;
el.textContent = 'Loaded'; // no null check needed

nullとundefinedの返し分け

意図的に空の結果を表す場合は`null`を返し、値がない場合やオプショナルな値には`undefined`を返すことを推奨します。コードベース全体で一貫させてください。
function findUser(id: number): User | null {
  return db.find(u => u.id === id) ?? null;
}

strictNullChecksは「10億ドルの間違い」を防ぐ

Tony Hoareはnullを「10億ドルの間違い」と呼びました。TypeScriptのstrictNullChecksは、これらの値を明示的に処理させることで、nullやundefinedによるクラッシュを防ぎます。

クイックチェック

`??`（Null合体）演算子は、どのような場合に右辺の値を返しますか？

まとめ

strictNullChecksを有効にして、nullやundefinedによるバグを防いでください。nullableな値を許可するにはユニオン型を使用し、安全にプロパティをたどるにはオプショナルチェーン（?.）を使用し、デフォルト値を指定するにはNull合体（??）を使用します。

よくある質問

「null、undefined、厳格な null チェック」レッスンは無料ですか？

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

「null、undefined、厳格な null チェック」で何を学びますか？

strict モードで null と undefined を安全に扱います。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「null、undefined、厳格な null チェック」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. プリミティブ型: string、number、boolean
  2. any 型と避けるべき理由
  3. unknown と any: より安全な選択肢
  4. null、undefined、厳格な null チェック
← TypeScript Academyに戻る