0Pricing
JavaScript Academy · レッスン

防御的プログラミングと入力チェック

小さな入力チェック、ガード節、安全なパース、デフォルト値、簡単なオブジェクト検証で、早い段階で失敗を防ぐコードを書きます。

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

防御的チェックの概要

目標：不正な入力を早期に止め、バグが広がらないようにします。

  • 型と範囲のチェック
  • ガード節
  • 安全なパース
  • デフォルト値と簡単なオブジェクト検証
防御的プログラミングと入力チェック — イラスト1

型ヘルパー

numberや空でない文字列などのチェックを再利用できる小さなヘルパーを作成します。

// Tiny type helpers
function isNumber(n) {
  return typeof n === "number" && Number.isFinite(n);
}

function isNonEmptyString(s) {
  return typeof s === "string" && s.trim().length > 0;
}

console.log("isNumber(3):", isNumber(3));
console.log("isNumber(NaN):", isNumber(NaN));
console.log("isNonEmptyString(\"\"):", isNonEmptyString(""));
console.log("isNonEmptyString(\"hi\"):", isNonEmptyString("hi"));
防御的プログラミングと入力チェック — イラスト2

ガード節の例

まず入力を確認し、エラーがあれば早期に処理を止めます。そうするとメインの処理経路をすっきり保てます。

// Guard clauses: return early if invalid
function buy(quantity) {
  if (!isNumber(quantity)) {
    console.log("Quantity must be a number");
    return;
  }
  if (quantity <= 0) {
    console.log("Quantity must be > 0");
    return;
  }
  console.log("Buying", quantity, "items");
}

buy(3);
buy("3");
buy(0);
防御的プログラミングと入力チェック — イラスト3

フォールバック付きのパース

パースした結果を検証します。パースに失敗した場合は、クラッシュさせる代わりに小さなfallbackを返します。

// Parse safely and use sensible defaults
function toInt(str, fallback = 0) {
  const n = parseInt(str, 10);
  if (!Number.isFinite(n)) {
    return fallback;
  }
  return n;
}

console.log("toInt(\"42\"):", toInt("42"));
console.log("toInt(\"7px\", -1):", toInt("7px", -1));
console.log("toInt(\"abc\", 0):", toInt("abc", 0));
防御的プログラミングと入力チェック — イラスト4

デフォルト値と範囲

null/undefinedのデフォルト値には??を使い、その後、安全な範囲内に収めます。

// Defaults with ?? and simple range checks
function clampPercent(value) {
  // Use 0 as default when value is null or undefined
  const v = (value ?? 0);

  if (!isNumber(v)) {
    return 0;
  }
  // Clamp into 0..100
  const clamped = Math.min(100, Math.max(0, v));
  return clamped;
}

console.log(clampPercent(undefined));
console.log(clampPercent(120));
console.log(clampPercent(-5));
console.log(clampPercent(55));
防御的プログラミングと入力チェック — イラスト5

オブジェクトの形状チェック

必須フィールドと単純な範囲を確認し、{ ok, reason }のような小さな結果オブジェクトを返します。

// Simple object validation
function validateUser(u) {
  if (u == null || typeof u !== "object") {
    return { ok: false, reason: "User must be an object" };
  }
  if (!isNonEmptyString(u.name)) {
    return { ok: false, reason: "name required" };
  }
  if (!isNumber(u.age) || u.age < 0) {
    return { ok: false, reason: "age must be a number >= 0" };
  }
  return { ok: true };
}

console.log("good:", validateUser({ name: "Ayla", age: 21 }));
console.log("bad:", validateUser({ name: "", age: -1 }));
防御的プログラミングと入力チェック — イラスト6

防御的チェックのクイズ

簡単な確認：防御的な入力処理です。

防御的プログラミングと入力チェック — イラスト7

振り返り

振り返り：小さな型ヘルパー、ガード節、フォールバック付きの安全なパース、nullishなデフォルト値、範囲のクランプ、簡単なオブジェクト検証を使って、バグを早期に止めます。

防御的プログラミングと入力チェック — イラスト8

よくある質問

「防御的プログラミングと入力チェック」レッスンは無料ですか？

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

「防御的プログラミングと入力チェック」で何を学びますか？

小さな入力チェック、ガード節、安全なパース、デフォルト値、簡単なオブジェクト検証で、早い段階で失敗を防ぐコードを書きます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「防御的プログラミングと入力チェック」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. try/catch/finally、throw、カスタムエラー
  2. 防御的プログラミングと入力チェック
← JavaScript Academyに戻る