空文字とは何かをまず整理する
JavaScript での「空文字」は、長さ 0 の文字列、つまり "" のことです。
中に何も文字が入っていないけれど、「文字列という型の値」はちゃんと存在している状態です。
const a = ""; // 空文字
const b = " "; // 半角スペース 1 文字（空文字ではない）
const c = "abc"; // 通常の文字列
console.log(a.length); // 0
console.log(b.length); // 1
ここで大事なのは、「空文字」と「null / undefined」はまったく別物だということです。
空文字は「ユーザーが何か入力した結果、最終的に何もなかった」ということも多く、業務では「入力結果としての値」として扱うことがよくあります。
なぜ業務で空文字判定が重要になるのか
業務システムでは、フォーム入力や CSV 取り込み、API のリクエスト／レスポンスなど、「文字列として扱うけれど、中身が空かもしれない」場面が大量に出てきます。
例えば、ユーザー名の入力欄で、ユーザーが何も入力せずに送信した場合、フロントエンド側では ""（空文字）として受け取ることが多いです。
const userName = ""; // 入力欄が空のまま送信されたイメージ
if (userName === "") {
console.log("名前が未入力です");
}
このように、「空文字かどうか」をきちんと判定できないと、本来エラーにすべきものを通してしまったり、逆に有効な値を弾いてしまったりします。
特に「0 や ‘0’ などは有効な値だが、空文字だけは NG」という要件は、業務では本当によく出てきます。
基本の空文字判定（=== “”）
一番ストレートで分かりやすいのは、=== "" で比較する方法です。
const value = getInputValue(); // フォームなどから取得した文字列
if (value === "") {
console.log("空文字です");
} else {
console.log("何かしら文字が入っています:", value);
}
ここで === を使う理由は、「型も含めて完全一致させたい」からです。0 や false、null、undefined などと混ざってほしくないので、「文字列としての空だけを判定する」という意味で === "" が最も安全で読みやすい書き方になります。
「空文字」と「null / undefined」をどう区別するか
実務では、「空文字は“入力された結果”として扱うが、null / undefined は“そもそも値がない”として扱う」という設計にすることが多いです。
例えば、次のようなケースを考えます。
const a = ""; // 入力欄はあったが、何も入力されなかった
const b = null; // サーバー側が「値なし」として返してきた
const c = undefined; // そもそも項目が存在しない、またはまだ設定されていない
「画面に表示するときは、空文字はそのまま表示（何も出ない）、null / undefined のときは『未設定』と表示する」など、要件によって扱いを変えることがあります。
このとき、「空文字判定」と「null / undefined 判定」をきちんと分けて書けるかどうかが、バグを減らす鍵になります。
例えば、こういう書き方は危険です。
if (!value) {
console.log("値がない");
}
この条件は、"", 0, false, null, undefined, NaN をすべて「値がない」とみなしてしまいます。
「空文字だけを特別扱いしたい」「0 や false は有効な値」という要件では、!value に頼るのは避けるべきです。
空文字専用のユーティリティ関数を作る
業務コードでは、同じような判定を何度も書くより、「意図が伝わる名前の小さな関数」にしてしまう方が読みやすくなります。
isEmptyString ユーティリティ
まずは「完全に空の文字列かどうか」を判定する関数です。
function isEmptyString(value) {
return value === "";
}
console.log(isEmptyString("")); // true
console.log(isEmptyString(" ")); // false（スペース 1 文字は空ではない）
console.log(isEmptyString(null)); // false
console.log(isEmptyString(undefined)); // false
value === "" と書く代わりに isEmptyString(value) と書くことで、「ここでは“文字列としての空だけ”を見ているんだな」という意図が一目で分かります。
チーム開発では、この「意図の見えやすさ」がかなり効いてきます。
空白だけの文字列をどう扱うか（isBlank 的な判定）
現実の入力では、「何も入力していない」つもりでスペースだけ入ってしまうことがあります。
例えば " "（スペース 3 つ）や、タブ、改行だけの文字列などです。
このような「見た目は空に見える文字列」をどう扱うかは、業務要件次第ですが、多くの場合は「空とみなしたい」ことが多いです。
その場合は、trim() を使って前後の空白を削ってから判定します。
function isBlank(value) {
if (typeof value !== "string") return false;
return value.trim() === "";
}
console.log(isBlank("")); // true
console.log(isBlank(" ")); // true（スペースだけ）
console.log(isBlank("\n\t")); // true（改行やタブだけ）
console.log(isBlank("abc")); // false
console.log(isBlank(null)); // false
ここでのポイントは二つあります。
一つ目は、「空白だけの文字列を“空とみなすかどうか”を、関数の中で明確に決めている」こと。
二つ目は、「文字列以外の値（null や数値など）は、そもそも空文字判定の対象外」としていることです。
このようにルールを関数に閉じ込めておくと、「このプロジェクトでは空文字をこう扱う」という方針がコード全体で統一されます。
null / undefined と組み合わせた空文字判定
よくある要件に、「null / undefined / 空文字 / 空白だけの文字列は全部“未入力”として扱いたい」というものがあります。
その場合は、先ほどの考え方を組み合わせて、少しだけリッチなユーティリティを作ると便利です。
function isNullish(value) {
return value == null; // null または undefined
}
function isBlankString(value) {
return typeof value === "string" && value.trim() === "";
}
function isEmptyInput(value) {
return isNullish(value) || isBlankString(value);
}
使い方のイメージはこんな感じです。
const name = getUserInputName();
if (isEmptyInput(name)) {
console.log("名前が未入力です");
} else {
console.log("名前:", name);
}
ここで重要なのは、「業務上“未入力”とみなす条件を一箇所に集約している」ことです。
画面ごとにバラバラの条件を書いてしまうと、「この画面ではスペースだけは OK になっている」「あっちの画面では NG」など、仕様のブレが発生しやすくなります。
実務でありがちなバグと空文字
典型的なバグの一つが、「空文字を null と同じように扱ってしまう」ケースです。
例えば、API にリクエストを送るとき、本当は「未入力なら項目自体を送らない」仕様なのに、空文字をそのまま送ってしまうと、サーバー側で「空文字が入っている」と解釈されてしまうことがあります。
// 良くない例：空文字もそのまま送ってしまう
const payload = {
name: nameInput, // "" の可能性あり
};
これを避けるには、「空文字や空白だけの文字列は、そもそも項目を作らない」という処理を挟みます。
function buildUserPayload(input) {
const payload = {};
if (!isEmptyInput(input.name)) {
payload.name = input.name;
}
return payload;
}
こうしておくと、「未入力なら name プロパティ自体が存在しない」「入力されていれば、その文字列が入る」という、分かりやすいデータ構造になります。
サーバー側の実装もシンプルになり、フロントとバックの認識ズレも減ります。
小さな練習で感覚をつかむ
理解を定着させるには、自分の手でいろいろな値を試してみるのが一番です。isEmptyString, isBlank, isEmptyInput を自分で実装して、"", " ", " "（全角スペース）, "\n", "0", 0, null, undefined などを渡して、結果をコンソールに出してみてください。
そのうえで、「このプロジェクトなら、どこまでを“空”とみなすべきか？」を自分なりに言語化してみると、もう一段レベルが上がります。