JavaScript Tips | 文字列操作：文字列が空文字か判定する

JavaScript JavaScript
スポンサーリンク
スポンサーリンク
  1. 「文字列が空文字か判定する」は“バグを防ぐための一番小さいガード”です
  2. ステップ1：「空文字」とは何かをはっきりさせる
    1. JavaScriptにおける「空文字」の定義
  3. ステップ2：最も基本的な「空文字判定」の書き方
    1. 1. 直接比較する
    2. 2. length を使う
  4. ステップ3：「空白だけの文字列」をどう扱うかを決める
    1. 「空文字」と「空白だけの文字列」は別物です
    2. 実務でよくある方針
  5. ステップ4：trim() を使った「実質的な空文字判定」
    1. trim() とは
    2. 「空白だけなら空とみなす」判定
  6. ステップ5：null / undefined をどう扱うかを決める
    1. 「値がない」と「空文字」は違う
    2. 実務でよくある方針
  7. ステップ6：実務で使える「空文字判定ユーティリティ」のテンプレート
    1. 1. 純粋な「空文字だけ」を判定するユーティリティ
    2. 2. 「空白だけも含めて空とみなす」ユーティリティ
    3. 3. null / undefined も含めて「空」とみなすユーティリティ
  8. ステップ7：具体的な利用例（フォーム・検索・設定）
    1. 例1：必須入力チェック
    2. 例2：検索条件の判定
    3. 例3：設定値の初期化
  9. ステップ8：よくある落とし穴と、チームで共有したいルール
    1. 落とし穴1：str.length === 0 を、null に対して使ってしまう
    2. 落とし穴2：str == "" を使ってしまう（== の罠）
    3. 落とし穴3：「空白だけの文字列」を空とみなすかどうかが人によって違う
  10. まとめ：「文字列が空文字か判定するユーティリティ」は“バグを防ぐための一番小さいガード”です

「文字列が空文字か判定する」は“バグを防ぐための一番小さいガード”です

業務・実務で使うJavaScriptコードでは、 「文字列が空かどうか」を判定する処理は、ほぼすべての画面・APIで登場します。

  • 必須入力チェック
  • 検索条件が入力されているかどうか
  • ログ出力時に空文字を避ける
  • 設定値が未入力かどうかの判定

こうした場面で、 「空文字かどうか」を正しく・一貫して判定できるかは、 バグを防ぐうえでとても重要なポイントになります。

ここでは、プログラミング初心者の方にも分かるように、

  • 「空文字」とは何か
  • 最も基本的な判定方法
  • 空白だけの文字列をどう扱うか
  • null / undefined との違いをどう整理するか
  • 実務で使える「空文字判定ユーティリティ」のテンプレート
  • よくある落とし穴と、チームで共有したいルール

をステップバイステップで解説していきます。

ステップ1：「空文字」とは何かをはっきりさせる

JavaScriptにおける「空文字」の定義

JavaScriptで「空文字」と言うとき、 通常は次の状態を指します。

const s = "";
JavaScript

つまり、

  • 長さが 0 の文字列
  • 1文字も入っていない文字列

です。

" "（半角スペース1つ）や、"　"（全角スペース1つ）は、 「空文字」ではなく「空白だけの文字列」です。

ここをきちんと区別しておかないと、 バリデーションや検索条件の判定で混乱しやすくなります。

ステップ2：最も基本的な「空文字判定」の書き方

1. 直接比較する

一番シンプルな方法は、 === "" で比較することです。

const value = "";

if (value === "") {
  console.log("空文字です");
} else {
  console.log("空文字ではありません");
}
JavaScript

この書き方は、

  • 「値が文字列であること」が分かっている場合
  • 「空文字だけを特別扱いしたい」場合

に向いています。

2. length を使う

文字列の長さを使って判定する方法もあります。

const value = "";

if (value.length === 0) {
  console.log("空文字です");
} else {
  console.log("空文字ではありません");
}
JavaScript

length は、

  • "abc" → 3
  • "" → 0

というように、文字数を返します。

ポイント：

  • value が必ず文字列である前提なら、 === "" でも length === 0 でも意味は同じです。
  • ただし、null や undefined に対して length を呼ぶとエラーになるため、 「必ず文字列である」ことが保証されている場面で使うのが安全です。

ステップ3：「空白だけの文字列」をどう扱うかを決める

「空文字」と「空白だけの文字列」は別物です

例えば、ユーザー入力を考えてみます。

const a = "";      // 何も入力していない
const b = " ";     // 半角スペースだけ入力
const c = "　";    // 全角スペースだけ入力
const d = "  abc "; // 前後に空白がある
JavaScript

a は明らかに「空文字」ですが、 b や c をどう扱うかは、システムの設計次第です。

実務でよくある方針

業務システムでは、次のような方針がよく採用されます。

  • 「空白だけの文字列は、実質的に空とみなす」
    • 必須入力チェックでは、空白だけの入力を「未入力」と扱う
    • 検索条件では、空白だけの入力を「条件なし」と扱う

この方針を採用する場合、 trim() を使って前後の空白を取り除いてから判定するのが定番です。

ステップ4：trim() を使った「実質的な空文字判定」

trim() とは

trim() は、 文字列の前後にある空白文字（スペース・改行など）を取り除くメソッドです。

const s = "  abc  ";
console.log(s.trim()); // "abc"
JavaScript

空白だけの文字列の場合は、 trim() の結果が空文字になります。

const s = "   ";
console.log(s.trim()); // ""
JavaScript

「空白だけなら空とみなす」判定

function isEmptyOrWhitespace(str) {
  return str.trim().length === 0;
}

console.log(isEmptyOrWhitespace(""));      // true
console.log(isEmptyOrWhitespace("   "));   // true
console.log(isEmptyOrWhitespace("abc"));   // false
console.log(isEmptyOrWhitespace("  abc ")); // false
JavaScript

ポイント：

  • この関数は、「空文字」だけでなく「空白だけの文字列」も空とみなします。
  • 必須入力チェックや検索条件の判定など、 「空白だけの入力は意味がない」と考える場面で非常に便利です。

ステップ5：null / undefined をどう扱うかを決める

「値がない」と「空文字」は違う

JavaScriptでは、

  • null → 「値が存在しないことを明示的に表す」
  • undefined → 「まだ値が設定されていない」

という意味を持ちます。

一方、"" は「空文字」であり、 「文字列としては存在しているが、中身が空」という状態です。

実務でよくある方針

業務システムでは、次のような方針がよく採用されます。

  • 入力値や設定値を扱うときは、 null / undefined / 空文字 / 空白だけの文字列を、まとめて「空」とみなす

この方針を採用する場合、 ユーティリティ関数でまとめて判定すると便利です。

ステップ6：実務で使える「空文字判定ユーティリティ」のテンプレート

1. 純粋な「空文字だけ」を判定するユーティリティ

// string-empty-utils.js

/**
 * 純粋な「空文字かどうか」を判定します。
 * null や undefined は「空文字ではない」とみなします。
 */
export function isEmptyString(str) {
  return str === "";
}
JavaScript

これは、

  • 「必ず文字列が入っている」ことが保証されている場面
  • 「空文字だけを特別扱いしたい」場面

で使うことを想定しています。

2. 「空白だけも含めて空とみなす」ユーティリティ

/**
 * 空文字、または空白だけの文字列かどうかを判定します。
 * null や undefined は「空ではない」とみなします（別関数で扱う想定）。
 */
export function isBlankString(str) {
  return typeof str === "string" && str.trim().length === 0;
}
JavaScript

ポイント：

  • typeof str === "string" で、 「文字列であること」を確認してから trim() を呼んでいます。
  • これにより、null や undefined に対して trim() を呼んでエラーになることを防げます。

3. null / undefined も含めて「空」とみなすユーティリティ

/**
 * null / undefined / 空文字 / 空白だけの文字列を
 * すべて「空」とみなして判定します。
 */
export function isNullOrEmptyOrWhitespace(str) {
  if (str === null || str === undefined) {
    return true;
  }

  if (typeof str !== "string") {
    return false;
  }

  return str.trim().length === 0;
}
JavaScript

この関数の挙動：

console.log(isNullOrEmptyOrWhitespace(null));      // true
console.log(isNullOrEmptyOrWhitespace(undefined)); // true
console.log(isNullOrEmptyOrWhitespace(""));        // true
console.log(isNullOrEmptyOrWhitespace("   "));     // true
console.log(isNullOrEmptyOrWhitespace("abc"));     // false
JavaScript

業務システムでは、 「入力値が実質的に空かどうか」を判定する共通関数として、 このようなユーティリティを用意しておくと非常に便利です。

ステップ7：具体的な利用例（フォーム・検索・設定）

例1：必須入力チェック

import { isNullOrEmptyOrWhitespace } from "./string-empty-utils.js";

function validateRequiredField(value) {
  if (isNullOrEmptyOrWhitespace(value)) {
    return "この項目は必須です。";
  }
  return "";
}

// 利用例
const errorMessage = validateRequiredField(userInput);
if (errorMessage) {
  console.log(errorMessage);
}
JavaScript

ポイント：

  • 「空文字」「空白だけ」「null」「undefined」をすべて「未入力」とみなします。
  • バリデーションロジックをユーティリティにまとめることで、 画面ごとのコードがシンプルになります。

例2：検索条件の判定

import { isNullOrEmptyOrWhitespace } from "./string-empty-utils.js";

function buildSearchParams({ keyword, category }) {
  const params = {};

  if (!isNullOrEmptyOrWhitespace(keyword)) {
    params.keyword = keyword.trim();
  }

  if (!isNullOrEmptyOrWhitespace(category)) {
    params.category = category;
  }

  return params;
}
JavaScript

ポイント：

  • 「空白だけのキーワード」は検索条件に含めないようにしています。
  • 実務では、 「空の条件はAPIに送らない」ことで、 バックエンド側の処理をシンプルに保つことができます。

例3：設定値の初期化

import { isNullOrEmptyOrWhitespace } from "./string-empty-utils.js";

function getDisplayName(rawName) {
  if (isNullOrEmptyOrWhitespace(rawName)) {
    return "名称未設定";
  }
  return rawName.trim();
}
JavaScript

ポイント：

  • 設定値が空の場合に「名称未設定」などのデフォルト表示を行うパターンです。
  • ユーティリティを使うことで、 「空文字」「空白だけ」「null」「undefined」を一括で扱えます。

ステップ8：よくある落とし穴と、チームで共有したいルール

落とし穴1：str.length === 0 を、null に対して使ってしまう

const str = null;
console.log(str.length); // TypeError（エラー）
JavaScript

対策：

  • 「必ず文字列である」ことが保証されていない場面では、 typeof str === "string" を挟んでから length や trim() を使うようにする。

落とし穴2：str == "" を使ってしまう（== の罠）

const str = 0;
console.log(str == ""); // false だが、他のケースで意図しない挙動を生むことがある
JavaScript

対策：

  • 空文字判定には、 必ず === "" を使う（厳密比較）。
  • == は型変換を伴うため、 意図しない真偽値になることがあり、バグの原因になります。

落とし穴3：「空白だけの文字列」を空とみなすかどうかが人によって違う

  • ある画面では「空白だけは空とみなす」
  • 別の画面では「空白だけも有効な入力とみなす」

というように、 画面ごとに方針がバラバラになると、ユーザー体験が不統一になります。

対策：

  • チームで「空文字」「空白だけ」「null」「undefined」をどう扱うかのルールを決める。
  • そのルールに沿ったユーティリティ関数（例：isNullOrEmptyOrWhitespace）を用意し、 全画面で共通利用する。

まとめ：「文字列が空文字か判定するユーティリティ」は“バグを防ぐための一番小さいガード”です

「文字列が空文字か判定する」JavaScriptユーティリティを整えておくことで、

  • 「空文字」と「空白だけの文字列」の違いを明確にできる
  • === "" / length / trim() を使った基本的な判定方法を整理できる
  • null / undefined を含めた「実質的な空」の判定を共通化できる
  • 必須入力チェック・検索条件・設定値の初期化など、業務システムで頻出するロジックをシンプルに書ける
  • よくある落とし穴（length の誤用・== の罠・方針のバラつき）を避けられる

という「小さいけれど重要な安全装置」を、 アプリケーション全体で一貫して使えるようになります。

空文字判定のユーティリティは、 “ユーザーの入力や設定値が「ちゃんと意味のあるものか」を、 毎回静かに見守ってくれる、小さなガードマン”のような存在です。

このガードマンを、きちんとした共通ユーティリティとチームのルールとして整えておくことが、 業務・実務で使えるWebアプリケーションの安定性と信頼性を、確実に底上げしてくれます。

スポンサーリンク
タイトルとURLをコピーしました