0Pricing
JavaScript Academy · レッスン

入力検証とエスケープの基礎

小さな許可リストとガードで入力を検証・正規化し、テキストを表示する前に危険な文字をエスケープします。

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

全体像

目標: 入力を単純で安全なものにします。

  • 早期に拒否するにはガード節を使います
  • 曖昧なルールより許可リストを優先します
  • 単純な形に正規化します
  • テキストを表示する前に特殊文字をエスケープします
入力検証とエスケープの基礎 — イラスト1

数値ガードの基本

単純なガードを追加します。型を確認し、範囲を確認して、最終的な値に正規化します。

// Validate age: number and range guard
function parseAge(input) {
  // trim and parse
  const n = Number(input);
  if (!Number.isFinite(n)) return null; // reject non-numbers
  if (n < 0 || n > 130) return null;    // reject out-of-range
  return Math.floor(n);                  // normalize to integer
}

console.log("age ok:", parseAge("21"));
console.log("age bad:", parseAge("twenty"));
入力検証とエスケープの基礎 — イラスト2

安全に表示するためのエスケープ

ユーザーのテキストを表示する前に、特殊文字をエスケープして、UIがプレーンテキストとして扱うようにします。

// Escape a few risky characters before displaying in HTML contexts
function escapeText(s) {
  if (typeof s !== "string") return "";
  return s
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll("\"", "&quot;")
    .replaceAll("'", "&#39;");
}

console.log("escaped:", escapeText("<b>Hello & bye</b>"));
入力検証とエスケープの基礎 — イラスト3

実践で使う許可リスト

コードやロールなど固定された集合には、許可リストを優先します。大文字と小文字、空白を正規化します。

// Allowlist example: only certain country codes
const ALLOWED = new Set(["TR", "US", "DE", "GB"]);

function parseCountry(code) {
  if (typeof code !== "string") return null;
  const up = code.trim().toUpperCase();
  if (!ALLOWED.has(up)) return null; // reject unknown
  return up; // normalized
}

console.log("country ok:", parseCountry("tr"));
console.log("country bad:", parseCountry("xx"));
入力検証とエスケープの基礎 — イラスト4

小さなオブジェクトバリデーター

型と範囲を確認し、その後、コードの他の部分が信頼して使える正規化済みの形を返します。

// Validate a tiny user object and normalize
function validateUser(input) {
  if (typeof input !== "object" || input === null) return null;

  const nameOk = typeof input.name === "string" && input.name.trim().length >= 1 && input.name.trim().length <= 40;
  const ageOk = parseAge(input.age) !== null;

  if (!nameOk || !ageOk) return null;

  return {
    name: input.name.trim(),
    age: parseAge(input.age)
  };
}

console.log("user ok:", validateUser({ name: " Ayla ", age: "22" }));
console.log("user bad:", validateUser({ name: "", age: "old" }));
入力検証とエスケープの基礎 — イラスト5

優れた防御的コーディングの習慣

ヒント:

  • 境界（ユーザー入力やネットワーク）で検証します。
  • 許可リスト、範囲、型チェックを使います。
  • 一度だけ正規化し、残りの処理はシンプルに保ちます。
  • ユーザーにテキストを表示する前にエスケープします。
入力検証とエスケープの基礎 — イラスト6

防御的な入力の基礎クイズ

クイックチェック: 安全な入力パターンを確認します。

入力検証とエスケープの基礎 — イラスト7

まとめ

まとめ: 早い段階で防御し、許可リストを使い、安全な形に正規化してから表示前にエスケープします。各ステップは小さく、読みやすく保ちます。

入力検証とエスケープの基礎 — イラスト8

よくある質問

「入力検証とエスケープの基礎」レッスンは無料ですか？

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

「入力検証とエスケープの基礎」で何を学びますか？

小さな許可リストとガードで入力を検証・正規化し、テキストを表示する前に危険な文字をエスケープします。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「入力検証とエスケープの基礎」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. 入力検証とエスケープの基礎
  2. 安全なオブジェクトマージ、凍結と封印
  3. エラーバウンダリー（概念）をフレームワークなしで実装
← JavaScript Academyに戻る