【JavaScript】空文字の判定とは？実践的なコード例を初心者向けに解説

フロントエンド開発•
JavaScript

はじめに

JavaScriptを学び始めると、まず最初に文字列に関わるさまざまな処理を経験することが多いかもしれません。
なかでも「空文字」をどのように判定するかは、入力チェックやエラーハンドリングなどで頻繁に使われます。
プログラミング初心者の方は、「何も入力されていない状態をどうやって確認すればいいのか？」という疑問を持つことがあるかもしれません。

空文字の判定は「ただ単に "" （ダブルクォーテーション2つ）かどうかを見るだけ」と思いがちですが、実際には null や undefined、あるいはスペースだけが入った文字列など、いろいろなパターンが存在します。
このような違いを理解していないと、「動いているつもりなのに、実は必要なチェックが漏れていた」ということが起こりやすいです。

本記事では、JavaScriptでの空文字判定の方法をわかりやすく解説します。
具体的には「そもそも空文字とは何か？」から始まり、基本的な書き方や実務で頻繁に登場する使用例、さらに「スペースだけ入っている場合への対応」や「パフォーマンス面の考慮」なども含めて紹介します。
初心者の方でも読み進めやすいように、複雑な専門用語は極力避けながら、必要な概念はやさしく補足していきます。

JavaScriptは初心者からプロまで幅広く利用されているプログラミング言語です。
それだけに、空文字判定については「よくあるパターン」が定まっています。
この記事を読むことで、実務でもよく目にする判定パターンやコード例を自分のものにできるはずです。

いろいろな例を提示しますが、「空文字を判定して次にどう処理を進めるか」というところまで考えることがポイントになります。
単に if (str === "") { ... } と書くだけではなく、同時に null や undefined、その他の想定外データにも対応できるようにしておくと、予期せぬ不具合を減らすことができるからです。

それでは本題に入りましょう。

この記事を読むとわかること

  • JavaScriptにおける「空文字」の意味
  • 空文字判定がなぜ重要なのか
  • 基本的な書き方や実務での使用例
  • スペースや改行が含まれる場合の対策
  • パフォーマンス面や落とし穴の回避方法

以下の見出しで、順を追って解説していきます。

JavaScriptにおける空文字の判定

そもそも「空文字」とは？

初心者の方は、まず「空文字」という用語に馴染みがないかもしれません。
空文字とは、中身が何も含まれていない文字列 のことです。
具体的には "" のように、文字数がゼロの文字列を指します。

ただし、プログラミングでは「空文字」といったときに、しばしば null や undefined などと混同してしまうことがあります。
これらはまったく別の型として扱われるため、「単に === "" で判定すればいいよね」と思っていると、実際の動作でエラーやバグが生じることがあります。

例えば、何らかの処理の都合で変数が初期化されないままだったり、APIのレスポンスが「そもそもキーが存在しなかった」りする可能性があります。
こうしたケースを考えると、 「空文字を判定する」＝「それ以外のケース (nullやundefinedなど) も考慮する」 ということが非常に重要になります。

どうして空文字判定が重要なのか？

実際の開発を想像してみてください。
たとえば、ユーザーがフォームに入力して送信ボタンを押したとき、サーバー側に空文字が送られてきたら、どう処理すべきでしょうか。
必須入力項目なのに空文字の場合はエラーを返す必要がありますし、オプション項目であれば空文字でも大丈夫かもしれません。

このように、空文字判定は 「ユーザーの入力チェック」 でほぼ確実に登場します。
加えて、ファイル名の判定、APIレスポンスのバリデーション、データベースとのやりとりなど、文字列が絡むロジックであれば常に空文字の可能性を考慮しないといけません。
少なくとも「空文字が来たらどうする？」を想定しておくことが、大きなバグを防ぐ第一歩になります。

基本的な空文字判定の方法

最もシンプルな例としては、下記のような if 文がよく使われます。

const value = ""; // 例として空文字

if (value === "") {
  console.log("空文字が入力されています");
} else {
  console.log("空文字ではありません");
}

ここでは === （厳密比較演算子）を使っています。
== （等価演算子）もありますが、JavaScriptでは型変換の違いによる思わぬ挙動を防ぐために、基本的には === が推奨される ことが多いです。

ただし、これだけだと undefined や null のケースを判定できない という問題もあります。
単純に空文字であるかだけを確かめたい場合はいいですが、実務では「なんらかの値が入っているかどうか」を包括的にチェックしたいことの方が多いです。
その話は、後ほど「実践的なコード例」で詳しく解説します。

よくある実務シーンでの空文字判定

ユーザーフォームの入力チェック

最初に思いつくのが、ユーザーからの入力を受け取るフォームのチェックでしょう。
Webアプリケーションでも、フォーム入力値をサーバーに送る前に「必須項目が空になっていないか」を前段（フロントエンド）で調べる場合があります。

例：名前の必須入力チェック

以下のコード例は、名前を入力していない場合にアラートを出すシンプルなパターンです。

const nameInput = document.querySelector("#name");
const submitButton = document.querySelector("#submit");

submitButton.addEventListener("click", () => {
  const nameValue = nameInput.value;
  if (nameValue === "") {
    alert("名前は必須です");
  } else {
    alert("送信されました");
    // ここでサーバーにデータを送る処理など
  }
});

DOM操作を行い、テキストボックスの値が空文字 "" のときに警告を表示しています。
実際の開発では、これに加えて「数字が入っている場合」など、さらに高度なバリデーションが必要なケースもあるでしょう。
しかし、最低限は「空文字ではないこと」を確かめるだけで、ユーザーが未入力のまま送信ボタンを押すミスを減らすことができます。

APIレスポンスのデータチェック

クライアント側から外部のAPIを呼び出した際に、戻ってきたデータが思わぬ形で空文字になっていることがあります。
たとえば、ユーザー名を取得するはずが、本来なら文字が入っているところが "" になっているパターンです。

例：APIからのレスポンスが空文字の場合

以下は、fetchを使ってAPIデータを取得し、ユーザー名を表示する例です。

fetch("https://api.example.com/user/123")
  .then(response => response.json())
  .then(data => {
    const userName = data.name;
    if (userName === "") {
      console.error("ユーザー名が空文字でした");
    } else {
      console.log("取得したユーザー名:", userName);
    }
  })
  .catch(error => {
    console.error("通信エラー:", error);
  });

ここでは単純に「空文字かどうか」をチェックしていますが、実務であれば null や undefined の可能性も考慮する必要があるかもしれません。
たとえば、API仕様が変更されてキー名が変わってしまったら data.name は undefined になりますし、ユーザー名が正しく登録されていないときは null が返ってくるかもしれません。

ファイル名やパスのバリデーション

ファイル名をユーザーが自由につける機能がある場合、誤って空文字のファイル名がアップロードされると、システム側で処理が混乱する可能性があります。
ファイル名が空のままだと上書きに失敗したり、予期しないエラーが起きたりすることがあるため、こうした状況もチェックの対象です。

例：ファイル名チェック

function validateFileName(fileName) {
  if (fileName === "") {
    return false; // 空文字はNG
  }
  // ここで記号や拡張子などのチェックをする
  return true;
}

const userFileName = "";
if (!validateFileName(userFileName)) {
  console.log("ファイル名が不正です");
} else {
  console.log("ファイル名はOKです");
}

このように関数化しておくと、再利用がしやすくなります。
「空文字かどうか」を返すだけでなく、他のルールと合わせて判定することも簡単に実装できます。

実践的なコード例

文字列がundefinedかnullか空文字かをまとめて判定

実務では、判定する対象が「空文字かどうか」だけでなく、「null や undefined の場合も弾きたい」といった場面が多いかもしれません。
そんなときによく使われるのが、三項演算子や論理演算子 を組み合わせた書き方です。

function isEmptyString(value) {
  // null または undefined なら空扱い
  if (value == null) {
    return true;
  }
  // 文字列として長さが0なら空文字
  if (typeof value === "string" && value.length === 0) {
    return true;
  }
  return false;
}

// 使用例
const testValues = [null, undefined, "", "Hello", 0, false];
testValues.forEach(v => {
  if (isEmptyString(v)) {
    console.log(v, "は空の文字列と見なします");
  } else {
    console.log(v, "は空の文字列ではありません");
  }
});

ここでは value == null を使って、null と undefined の両方をチェックしています（等価演算子を使うことで、null と undefined の場合はtrueになります）。
ただし、厳密な型チェックを行いたい場合は、value === null || value === undefined のように書く方法もあります。

また、このサンプルでは「文字列以外の値は空文字ではない」と見なしていますが、場合によっては数字の0や false を「空文字と同じような扱い」にしたい場面があるかもしれません。
そういった特定の要件に合わせて、関数をカスタマイズすると良いでしょう。

ユーザーが入力した値をトリムして判定

ユーザーが意図せずスペースだけ入力してしまったケースを想像してみてください。
たとえば、テキストボックスにスペース1つだけ入れた場合でも、文字列としては " " が入っているため、厳密には空文字ではありません。

こういったケースをカバーするために、.trim() メソッドを利用して前後の空白を取り除いてから判定する ことが多いです。
以下の例をご覧ください。

function isBlank(value) {
  if (typeof value !== "string") {
    return true; // 文字列でなければ空とみなすかどうかは要件次第
  }
  return value.trim() === "";
}

const userInputs = ["", " ", "　", "abc", " abc "];
userInputs.forEach(input => {
  if (isBlank(input)) {
    console.log(`[${input}] は空っぽとみなします`);
  } else {
    console.log(`[${input}] はOK`);
  }
});

ここでは、日本語入力で使われがちな全角スペース（"　"）も .trim() で取り除けるのかが気になるところです。
実は、JavaScriptの .trim() は一般的な空白文字を取り除いてくれますが、一部のユニコード空白文字については、バージョンによって挙動が異なるケースもあるようです。
ただ、特殊な空白文字を除けば、通常のスペースに関しては .trim() で問題なく削除できます。

配列やオブジェクト、他の型への応用

実は、空文字判定のロジックを応用すれば、「配列が空かどうか」「オブジェクトにキーがあるかどうか」のチェックにもつながります。
文字列と違って直接 "" と比較はしませんが、「要素が存在しない」状態かどうかを判定する考え方は似ているからです。

function isEmptyArray(arr) {
  if (!Array.isArray(arr)) {
    return true; // 配列じゃなければ空扱いにするかどうかは要件次第
  }
  return arr.length === 0;
}

function isEmptyObject(obj) {
  if (typeof obj !== "object" || obj === null) {
    return true;
  }
  // Object.keys(obj).length が0なら、プロパティを持たない
  return Object.keys(obj).length === 0;
}

もちろん、これは「空文字判定」とは別の話ですが、「何も入っていない状態をどう扱うか」を考えると、配列やオブジェクトでも同様の発想が必要になります。

パフォーマンスへの影響を考える

不要な判定を避けるには？

小規模なアプリケーションであれば、「空文字判定を何回か行うだけ」でパフォーマンスに問題が出ることはあまりありません。
しかし、大量のデータを一度に処理するような場面では、不要な判定を繰り返してしまうとわずかでも負荷が積み重なる可能性があります。

たとえば、大量の文字列配列を1件ずつチェックしている場合を考えてみましょう。
1行ごとに .trim() して空かどうかを見る、といった処理を何万回も行うのは、明らかに効率が良いとはいえないケースもあります。
この場合、そもそも空文字になりうるデータを減らす 設計をするほうが先決です。
入力段階で弾いてしまう、あるいはサーバーサイドでデータを整形するなど、上流で対処する工夫も大切です。

例：大量のデータを処理する場合

// 大量の行データを取得したと想定
const lines = [...Array(100000)].map((_, i) => (i % 2 === 0 ? "" : `data${i}`));

console.time("checkEmpty");
let emptyCount = 0;
for (let i = 0; i < lines.length; i++) {
  // trim()をせずに直接チェック
  if (lines[i] === "") {
    emptyCount++;
  }
}
console.timeEnd("checkEmpty");

console.log("空文字の行数:", emptyCount);

上記の例のように、明らかに余分なスペースが入らないデータだとわかっていれば .trim() なしで === "" と書いたほうが高速になることがあります。
一方で、ユーザー入力のようにスペースが混在することが多いケースでは、正確性を優先して .trim() を使うことが一般的です。
パフォーマンスと正確性はトレードオフの場合があるので、要件やデータ特性に合わせて使い分ける必要があります。

空文字だけではなく「空っぽの状態」を総合的に判定する

JavaScript特有のnullやundefinedの取り扱い

先ほど少し触れましたが、JavaScriptでは null と undefined を混同しやすい という特徴があります。
さらに、変数が宣言されていない場合などは「ReferenceError」が出るので、そこまで細かく考えると「どこまでチェックを厳密にするのか？」という問題に行き着きます。

「空文字判定をするなら、同時に null や undefined も弾きたい」というケースは多いでしょう。
ただし、これらのパターンをすべて列挙するのは冗長になる場合もあります。
以下のように、複数条件をまとめて書くことも可能です。

function isTrulyEmpty(str) {
  return !str || str.trim() === "";
}

console.log(isTrulyEmpty(null));        // true
console.log(isTrulyEmpty(undefined));   // true
console.log(isTrulyEmpty(""));          // true
console.log(isTrulyEmpty("   "));       // true
console.log(isTrulyEmpty("Hello"));     // false

!str の部分で null や undefined、さらには空文字 "" も false とみなされる点に注目です。
ただし 0 や false などの値も !str でtrueになってしまうため、「数値の0も弾かれていいのか？」という要件を満たすかどうかは事前に確認が必要です。

例：Optional Chainingを使った安全な書き方

JavaScript（特に最近の仕様）では、オプショナルチェーン演算子 ?. を使って null や undefined を安全に扱う方法も存在します。
「プロパティが存在しないときはエラーを投げずに undefined を返す」という便利な機能です。
以下の例のように、プロパティアクセスの段階で undefined を先に拾うことで、後続の空文字チェックを安全に行うことができます。

function getUserName(user) {
  // user?.name が undefined なら、すぐに代替テキストを返す
  const name = user?.name;
  if (!name || name.trim() === "") {
    return "名前不明";
  }
  return name;
}

const user1 = { name: "Alice" };
const user2 = {};
console.log(getUserName(user1)); // "Alice"
console.log(getUserName(user2)); // "名前不明"

このように、「存在しない可能性があるオブジェクト」であっても、エラーを回避しながら安全にデータを参照できます。
実務では「そもそも user というオブジェクトがあるかどうかもわからない」という状況が珍しくないので、オプショナルチェーン演算子を活用して空文字や null を丁寧に処理することは大切です。

よくある落とし穴

空文字ではなくスペースだけの場合

文字列が完全に空であればわかりやすいですが、スペースだけ含まれるような入力は意外と発生します。
ユーザーがフォームに適当なスペースを入れて送信したり、APIレスポンスに半端なスペースが混入していたりと、理由はいろいろ考えられます。

「空文字」という言葉を文字どおり「中身が一文字もない」と定義すると、スペースは0文字ではありません。
したがって、単に === "" と比較するだけでは判定できないわけです。
このケースを見逃すと、「入力されているはずなのに実はスペースしか入っていない」状態を許してしまう可能性があります。

trim()で取り除ききれないものがある場合

.trim() は、一般的な空白文字（スペース、タブ、全角スペースなど）を削除してくれます。
しかし、プログラムが扱う文字コードは世界中の言語や特殊文字を包含しており、.trim() が想定していないユニコードの空白的な文字がある可能性はゼロではありません。

実際にはそこまで頻繁には遭遇しませんが、もし特殊な文字が混じっていた場合は、.trim() で削除できずに残ることがあります。
業務システムや国際化対応など、幅広い文字種を扱う場合には、「想定外の空白文字」 をどう取り扱うかを事前に決めておきましょう。

正規表現を使った判定の失敗例

正規表現を使って「空文字かどうか」を判定する方法もあります。
例えば /^$/ であれば「何も文字がない」にマッチするので、空文字をチェックできます。
しかしスペースだけのケースを弾きたいのであれば /^\s*$/ のように書かなければいけません。

さらに、「全角スペースや特殊な空白をどう扱うか？」といった話を正規表現でカバーしようとすると、表現が複雑になります。
実務では、正規表現を使うよりも .trim() などの組み込みメソッドを組み合わせた方がバグを起こしにくい場合が多いです。

テスト方法

コンソールでテストする

簡易的な動作確認なら、ブラウザの開発者ツールやNode.jsのコンソールなどで直接テストを書くのが手軽です。
たとえば、Chromeなどのブラウザで F12 キーを押すと開発者ツールのコンソールが表示されます。
そこにJavaScriptコードをペーストして動かしてみると、「空文字判定が期待通り動いているか」を素早くチェックできます。

単体テストを書く

本格的なアプリケーション開発では、入力チェックの関数などに対して単体テストを書くことが一般的です。
特定の入力値を与えて、返ってくる結果が想定と一致するかどうかをプログラムで検証します。

例：Jestを用いたサンプル

以下は、Jestというテストフレームワークを使って isBlank 関数をテストする例です。

// isBlank.js
function isBlank(value) {
  if (typeof value !== "string") {
    return true;
  }
  return value.trim() === "";
}
module.exports = isBlank;

// isBlank.test.js
const isBlank = require("./isBlank");

test("空文字を渡した場合はtrueを返す", () => {
  expect(isBlank("")).toBe(true);
});

test("スペースのみの場合もtrue", () => {
  expect(isBlank("   ")).toBe(true);
});

test("nullの場合はtrue", () => {
  expect(isBlank(null)).toBe(true);
});

test("文字が入っている場合はfalse", () => {
  expect(isBlank("Hello")).toBe(false);
});

このようなコードを書いておけば、何かを修正した際に 「空文字判定ロジックが壊れていないか」 を継続的に確認できます。
特に大規模な開発チームでは、メンバーが何を修正したか把握できない場面も増えるため、テストによる担保が重要です。

テストフレームワークを使うと、関数の変更やリファクタリング後でも動作が変わっていないかどうかを素早くチェックしやすくなります。

まとめ

JavaScriptで空文字を判定する方法は、単に === "" と書けば良いというだけではありません。
実際の開発シーンでは、null や undefined、スペースのみの入力など、さまざまな「空っぽ」のケース を想定する必要があります。

基本的な空文字判定

value === "" のような書き方で判断する。ただし null や undefined は別途考慮することが多い。

実務での例

ユーザーフォームの入力チェック、APIレスポンスのバリデーション、ファイル名の検証など、文字列関連の機能には空文字判定がほぼ必ず登場する。

スペース対策

.trim() を使えば先頭と末尾の空白は削除できる。ただし、特殊な空白文字や余分な要素が混じっている可能性があれば、正規表現の工夫や追加ロジックも必要。

パフォーマンスや拡張性の視点

大量のデータを扱う場合は、むやみに .trim() を連発するより、上流でデータを整形した方が効率が良いケースも。
また、数値やブール型、配列やオブジェクトなど「空文字以外の空っぽ状態」も考慮すれば、より汎用的な判定関数を作れる。

こうしたポイントを押さえておくことで、「未入力だった」ときのエラーや予期せぬ動作を最小限に抑えられます。
初心者の方も、実際に簡単なサンプルコードを動かしながら、「どのような入力を想定してどこまで判定するか」をぜひ意識してみてください。

本記事で紹介した内容を一つのきっかけにして、これからのJavaScript開発に役立てていただければ嬉しいです。
空文字判定は、単純そうに見えて意外と奥が深いテーマです。
自分が開発する機能の要件に合わせて、適切な判定方法を使い分けてみてください。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
フロントエンド開発の新着記事をチェック

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説