0Pricing
JavaScript Academy · レッスン

バリデーションと小さな注意点

アンカーで文字列全体を検証し、貪欲な過剰マッチを避け、単語境界を使い、簡単な追加チェックを行います。test()での/gにも注意します。

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

文字列全体の検証

目標:予期しない結果を避け、安全に検証できるようにします。

  • ^と$を使って文字列全体に一致させます
  • 貪欲な過剰一致を避け、必要に応じて遅延量指定子*?を使用します
  • 単語境界\\bを使用します
  • test()で/gを使う場合は注意します
バリデーションと小さな注意点 — イラスト1

アンカーを実際に使う

^と$を追加して、一部だけの一致がすり抜けないようにします。

// Validate 4–6 digits ONLY (no spaces, no letters)
function isPin(text) {
  const re = /^\\d{4,6}$/;
  return re.test(text);
}

console.log("1234 ->", isPin("1234"));
console.log("12 34 ->", isPin("12 34"));
console.log("a123 ->", isPin("a123"));
バリデーションと小さな注意点 — イラスト2

過剰一致を避ける

貪欲な.*は最も長い範囲を取得します。マーカー間で最短の一致を取得するには?を追加します。

// Greedy (.*) vs lazy (.*?)
const text = "say \"hi\" and \"bye\"";

// Greedy: eats too much
const g = text.match(/".*"/);
console.log("greedy:", g && g[0]);

// Lazy: shortest between quotes
const l = text.match(/".*?"/g);
console.log("lazy:", l);
バリデーションと小さな注意点 — イラスト3

単語境界 \\b

\\bは単語文字と単語文字以外の文字の境界に一致します。単語全体を対象にする場合に便利です。

// Use \\b to match a whole word (not inside another)
const s = "restart start up";

console.log("has start word?", /\\bstart\\b/.test(s));    // true
console.log("matches restart?", /\\brestart\\b/.test(s));  // true
console.log("start inside restart?", /start/.test("restart")); // true (partial)
バリデーションと小さな注意点 — イラスト4

検証を安全に組み合わせる

初心者の場合は、小さな正規表現と追加のチェック(trim、最大長)を組み合わせます。巨大なパターンは避けます。

// Small, beginner-friendly email-like check (not RFC-complete)
// Strategy: small regex + extra length checks
function isEmailLite(text) {
  if (typeof text !== "string") return false;
  if (text.length > 254) return false;          // cap length
  const re = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;  // basic shape
  return re.test(text.trim());
}

console.log("ok:", isEmailLite("a@b.co"));
console.log("bad space:", isEmailLite("a @b.co"));
console.log("too basic:", isEmailLite("abc"));
バリデーションと小さな注意点 — イラスト5

グローバルフラグの注意点

gフラグを使うと、test()の内部カーソルが移動します。入力ごとに単純な真偽値を取得する場合は、gを省略します。

// Using /g with test() changes lastIndex and can surprise you
const r = /a/g;

console.log("1st:", r.test("a")); // true
console.log("2nd:", r.test("a")); // false (cursor moved)
console.log("3rd:", r.test("a")); // true again

// Safer: avoid /g when repeatedly calling test() on separate strings
function hasA(text) {
  return /a/.test(text); // no g flag
}
console.log("safe:", hasA("a"), hasA("a"));
バリデーションと小さな注意点 — イラスト6

検証でのアンカーのクイズ

クイックチェック:文字列全体の検証です。

バリデーションと小さな注意点 — イラスト7

まとめ

まとめ:^...$で文字列全体を検証し、過剰一致を避けるには遅延量指定子*?を使用します。単語全体には\\bを追加し、小さな正規表現と簡単な追加チェックを組み合わせます。また、test()を繰り返し呼び出す場合は/gを避けます。

バリデーションと小さな注意点 — イラスト8

よくある質問

「バリデーションと小さな注意点」レッスンは無料ですか?

はい。「バリデーションと小さな注意点」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。

「バリデーションと小さな注意点」で何を学びますか?

アンカーで文字列全体を検証し、貪欲な過剰マッチを避け、単語境界を使い、簡単な追加チェックを行います。test()での/gにも注意します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「バリデーションと小さな注意点」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

  1. 正規表現の基礎 — リテラル、test、アンカー、フラグ
  2. グループ、キャプチャ、置換
  3. バリデーションと小さな注意点
← JavaScript Academyに戻る