【JavaScript】文字列に特定の文字が含まれているか確認する方法を初心者向けに解説

プログラミング言語•2025/2/15

はじめに

JavaScriptを使ってプログラミングを始めると、まず多くの方が出会うのは文字列操作です。
なかでも「ある文字列が特定の単語や文字を含んでいるかどうかを確認したい」という場面はとても多いでしょう。

たとえば、ユーザーが入力した内容に禁止ワードが含まれていないかをチェックしたり、ファイル名やURLに特定のパターンが入っているかを確認したりするケースが挙げられます。
こうした操作を適切に行うためには、JavaScriptが提供しているいくつかのメソッドや手法を理解しておくことが重要です。

本記事では、JavaScript 文字列含むという基本的なチェックのやり方を、初心者の皆さんでもスムーズに理解できるよう、具体的なサンプルコードとともに整理していきます。
文章中では、実際の開発や運用のシーンを意識した説明を心がけますので、実務でも活用しやすい内容になっています。

それでは、基本的な方法から応用的なポイントまで順を追って見ていきましょう。

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

JavaScriptで文字列に特定の文字が含まれているかチェックする主要な方法
各メソッドの違いや長所と短所
実務でよくある使用シーンと関連する注意点
正規表現を使った高度な検索の概要
パフォーマンスやエラーハンドリングにおける考え方

JavaScriptで文字列チェックが必要になる場面

文字列が指定の文字や単語を含むかどうかを調べる場面は、多岐にわたります。
実際の実務では以下のようなケースが考えられます。

ユーザー入力のバリデーション

Webアプリケーションやフォームでユーザーが入力する情報に、不適切な単語や絵文字、あるいは特定のパターン（例：メールアドレス内に"@"があるか）を含んでいるかをチェックする際に利用されます。
フォーム送信時にリアルタイムで文字列を検査できると、サーバーへの不要なリクエストを減らすことにもつながります。

フィルタリングや検索機能

フロントエンド側でデータの一覧を表示する際に、ユーザーが入力したキーワードを含む項目だけを絞り込む処理を行う場合があります。
このとき、JavaScriptのメソッドを使って効率よく文字列比較を行うことで、画面の表示切り替えを素早く実現できます。

URLやパスの分析

URLに「/api/」というパスが含まれているかどうかや、ファイルパスに「.js」「.css」などの拡張子が含まれているかどうかを調べるケースもあるでしょう。
こうした場合も、文字列の含む/含まないを判定するメソッドがあると便利です。

エラーメッセージの判定

サーバーから返ってきたエラーメッセージに特定のワードが含まれているかどうかで、フロントエンドのUI表示を切り替えることも考えられます。
ユーザーにわかりやすいメッセージを表示するには、返却された文字列を細かく検査する仕組みが役立ちます。

ここからは、実際にJavaScriptを使って文字列が含まれているかを判定する方法を紹介していきます。

JavaScript 文字列含む判定でよく使われるメソッド

JavaScriptでは、includes、indexOf、match、searchなど、文字列を調べるためのさまざまなメソッドが用意されています。
どれを使うかは、実務での要件や開発者の好みに左右される部分もありますが、まずはそれぞれの基本的な使い方を見ていきましょう。

includesメソッド

includesは、ある文字列が指定した部分文字列を含んでいるかどうかを真偽値で返してくれるシンプルなメソッドです。


const str = "Hello, JavaScript!";
const keyword = "JavaScript";

if (str.includes(keyword)) {
  console.log("文字列に 'JavaScript' が含まれています。");
} else {
  console.log("含まれていません。");
}

結果はtrueかfalseで返ってくるので、条件分岐としてそのまま使えるのが便利です。
実務では、ユーザーが入力したテキストの中に特定の単語が入っているかチェックする際によく使われます。

一部の古いブラウザ環境ではサポートされていない可能性があるため、レガシー環境向けには代替案も検討する必要があります。

indexOfメソッド

古くからあるindexOfは、文字列が見つかった位置（インデックス）を返してくれます。
見つからなかった場合は-1を返す点が特徴です。


const str = "Welcome to JavaScript world!";
const keyword = "JavaScript";
const position = str.indexOf(keyword);

if (position !== -1) {
  console.log("文字列に 'JavaScript' が含まれています。位置:", position);
} else {
  console.log("含まれていません。");
}

includesとは違い、見つかった場合に具体的な位置がわかるのが利点です。
たとえば、複数回出現する単語のうち、最初に出てきた場所だけを知りたい場合などに役立ちます。
一方で、true/falseの判定が必要なだけなら、indexOf(...) !== -1という表現が少し冗長に感じるかもしれません。

実務での具体的な活用方法

文字列が含まれているかどうかの判定は、単なる「検索」以外にも、実務でさまざまな使い方があります。
以下では、少し踏み込んだ例を見ていきましょう。

部分一致による条件分岐

注文管理システムや在庫管理システムなどでは、商品名に「特売」「セット」などのキーワードが入っている場合だけ割引処理をしたり、ラベルの色を変えたりすることがあります。
その際、includesやindexOfを用いた文字列チェックで分岐を行うと、コードがわかりやすく書けるでしょう。


function applyDiscountIfNeeded(itemName) {
  if (itemName.includes("特売")) {
    // 特売品に対する割引や表示変更など
    console.log("特売商品なので割引を適用します。");
  } else if (itemName.includes("セット")) {
    // セット商品の場合に別の処理
    console.log("セット商品です。追加の処理を実行します。");
  } else {
    console.log("通常商品です。");
  }
}

applyDiscountIfNeeded("夏の特売セールセットA");

これにより、商品名に対する事前チェックを手早く実装できます。

複数の条件が混在する場合

実際の業務コードでは、文字列が含まれているかどうかだけでなく、数値範囲やデータの型チェックなど、複数の条件が絡むケースも少なくありません。
その際は、まず文字列に特定のパターンを含むかを確認し、問題なければ次の条件へ進むといったステップを踏む設計も考えられます。


function validateInput(data) {
  // 文字列チェック
  if (!data.message.includes("必須キーワード")) {
    return false;
  }
  
  // 数値チェック
  if (data.count < 1 || data.count > 1000) {
    return false;
  }

  // 型チェック
  if (typeof data.flag !== "boolean") {
    return false;
  }
  return true;
}

このように、JavaScript 文字列含むを入り口にして、複数の判定を順序立てて実装することで、エラーを早期に発見できる仕組みが作りやすくなります。

正規表現を使った検索の考え方

より柔軟なパターンマッチが必要な場合は、正規表現が役立ちます。
たとえば、大文字と小文字を区別せずに検索したい、特定の記号や数値が続いたパターンを見つけたい、といったケースです。
JavaScriptの文字列ではmatchやsearchメソッドが代表的な手段として利用できます。

searchメソッド

searchは、文字列の中から正規表現にマッチする最初のインデックスを返し、見つからなければ-1を返します。
よくある使い方としては、部分文字列が含まれているかどうかだけでなく、より複雑なパターンをチェックするシーンで利用されます。


const str = "abc123XYZ";
const regex = /[0-9]+/; // 1文字以上の数字にマッチ
const result = str.search(regex);

if (result !== -1) {
  console.log("数字が含まれています。");
} else {
  console.log("数字は含まれていません。");
}

大文字と小文字を区別しない検索を行いたい場合は、正規表現のフラグiを利用します。
たとえば/pattern/iと書けば、大文字小文字の区別なく検索してくれます。

matchメソッド

matchメソッドは正規表現に合致した文字列を配列で返します。
複数個所にマッチする場合でもすべて取り出したいなら、グローバルフラグgを使うと便利です。
単純に含むかどうかの判定に加えて、「どの部分がヒットしたか」という情報も必要な場合に検討すると良いでしょう。


const str = "Hello HELLO hello";
const matches = str.match(/hello/gi); // 大小文字を無視してマッチ

if (matches) {
  console.log("見つかった要素:", matches);
} else {
  console.log("マッチしませんでした。");
}

実務で正規表現を使う場合は、一度に多くの条件を処理できるメリットがある一方で、パターンが複雑になり過ぎると可読性が下がる点にも注意が必要です。
シンプルな文字列検索で済む場合は、まずincludesなどを活用するほうが理解しやすいでしょう。

パフォーマンス上の注意点

少量のデータや短い文章の検索であれば、includesやindexOfなどのメソッドはパフォーマンス的に大きな問題を引き起こしません。
しかし、以下のような場面では注意が必要です。

大量データのフィルタリング

巨大な配列に数千から数万件の文字列要素がある場合、要素ごとにindexOfやincludesを繰り返す処理は負荷が高くなることがあります。
たとえば、検索ボックスに文字を入力するたびにリアルタイムで絞り込みを行う実装をすると、処理が頻繁に走るのでブラウザのパフォーマンスに影響が出るかもしれません。

正規表現の乱用

正規表現は非常に強力ですが、パターンが複雑になると実行時間も増加します。
単純に「文字列に含まれているかどうか」を判定したいだけなら、includesやindexOfなどのメソッドを使ったほうが高速である場合が多いです。

最適化のヒント

事前に正規表現オブジェクトを生成しておき、毎回同じ正規表現を新しく作らない
検索対象をあらかじめ小さく絞り込んでおく
重複した処理を避け、キャッシュできる部分はキャッシュする

こうした工夫を行うことで、文字列検索によるパフォーマンス低下を最小限に抑えることができます。

トラブルシューティングとエラーハンドリング

文字列検索を実装するときに想定外のデータが入り、エラーや例外が発生する可能性があります。
以下のような点に気をつけると、比較的スムーズにエラーを防げます。

nullやundefinedの入力

ユーザー入力やAPIからのレスポンスがnullやundefinedになっている場合、includesやindexOfを呼び出すとエラーが起こります。
実務では、関数の冒頭で型や値が適切かどうかをチェックするのが一般的です。


function safeIncludes(mainString, subString) {
  if (typeof mainString !== "string") {
    return false;
  }
  return mainString.includes(subString);
}

数字やオブジェクトの誤入力

文字列ではなく数値が渡されるなど、型が異なるデータを処理してしまうケースも考えられます。
データの入り口でしっかりバリデーションを行うか、あるいは文字列へ変換するなどの手立てを講じておきましょう。

実際の運用環境では文字列以外の入力や予期しない型が来ることはよくあります。
そのため、APIやフォーム入力の時点でデータを検証する設計が重要です。

空文字列の扱い

空文字列に対して「ある単語が含まれているか」をチェックしても、常にfalseが返ってきてしまいます。
意図した動作かどうかを検討し、必要なら早期リターンなどで処理を分けると良いでしょう。

よくある疑問と解消のヒント

初めてJavaScriptで「文字列含む」処理を学ぶ方が疑問に思いそうなポイントを、いくつかピックアップしてみます。

大文字小文字を区別しない検索はどうすればいいの？

includesやindexOfは大文字小文字を区別して検索を行います。
もし区別したくない場合は、事前に文字列をすべて小文字（または大文字）に変換してから検索する方法があります。


const str = "JavaScript";
const keyword = "javascript";
console.log(str.toLowerCase().includes(keyword.toLowerCase()));

あるいは、正規表現のフラグiを活用すれば一括で大文字小文字を無視できるので、複雑なパターンを扱う際に便利です。

全角と半角が混在している場合は？

ユーザーが日本語を入力する場面では、スペースだけでなく数字やアルファベットも全角と半角が混じることがあります。
この場合、JavaScriptの文字列検索そのものは単純に「別の文字」とみなすため、意図しない検索結果になる可能性があります。
実務では、全角スペースを半角スペースに置き換えたり、文字を正規化（Normalization）したりしてから検索を行うことが多いです。


function normalizeString(str) {
  // 簡易例: 全角スペースを半角スペースへ変換
  return str.replace(/\u3000/g, " ");
}

const input = "JavaScript　Tutorial"; // 全角スペース入り
const normalized = normalizeString(input);
console.log(normalized.includes("Tutorial"));

キーワードの複数一致や順序が必要な場合

複数のキーワードがすべて含まれているかどうかをチェックする場合は、includesを複数回使ってAND条件で確認する、あるいは正規表現で同時に検査するなどの方法があります。
順序が大事な場合は、indexOfで見つかった位置を比較したり、正規表現で捕捉グループを使ったりします。

チェック方法の選び方まとめ

ここで一度、代表的なメソッドを簡単に振り返ってみましょう。

includes
- 真偽値で結果を返す
- シンプルで可読性が高い
- 位置が必要ない場合に最適
indexOf
- 見つかった位置を返す
- 見つからない場合は-1
- レガシー環境でも広くサポート
search
- 正規表現にマッチした最初のインデックスを返す
- -1を返す仕組みはindexOfと同様
- 正規表現前提なので高度な検索が可能
match
- 正規表現にマッチした部分を配列として取得
- gフラグで複数ヒットをまとめて抽出
- 部分文字列の抽出に適している

実務では、まずは「単純な文字列検索か」「パターンマッチングが必要か」を見極めてから選ぶと良いでしょう。

具体的なサンプルコードで学ぶ

ここでは、実際に文字列の一括チェックや検索結果の処理をまとめたサンプルコードを示します。
シンプルなコードではありますが、複数の要素を一度に確認したいときに利用できます。


function keywordFilter(input, keywords) {
  // キーワード配列をすべて含むかどうかをチェック
  for (const keyword of keywords) {
    if (!input.includes(keyword)) {
      // ひとつでも含まれていなければfalse
      return false;
    }
  }
  return true;
}

const targetString = "この文章にはJavaScriptとHTMLが含まれています。";
const requiredKeywords = ["JavaScript", "HTML"];
const result = keywordFilter(targetString, requiredKeywords);

if (result) {
  console.log("すべてのキーワードが含まれています。");
} else {
  console.log("不足しているキーワードがあります。");
}

このように、キーワードのリストをループしながら、includesで検索するだけでも簡単なフィルタリング機能を構築できます。
実務であれば、これに加えて大文字小文字の変換や正規表現による除外パターンなどを組み合わせて、要件に合ったフィルタリングを設計できます。

適切なテストと保守

ソースコードを書いた後は、文字列検索が思わぬ入力パターンで誤作動しないかをテストすることも大切です。
特に、「マルチバイト文字の扱い」や「特殊文字（改行文字や特殊記号など）」が絡むと、ロジック通りに動かないケースも考えられます。

想定外の文字コード

フォームや外部APIを通じて受け取ったデータに、特殊な文字コードが混じることがある。
必要に応じて文字コードの変換を行うなどの工夫が必要。

結合文字の取り扱い

日本語や一部の言語で使われる結合文字（アクセント記号など）は、見た目が同じでも文字コードが異なる場合がある。
普段は意識しないが、厳密な検索が必要な場面では確認を怠らないこと。

外部ライブラリの利用

大量の文字列検索や複雑なマッチングが必要な場合、外部ライブラリを検討してもよいが、初学者にとっては標準のメソッドから使いこなすほうが理解しやすい。

まとめ

JavaScriptで「文字列が特定の文字を含むかどうか」を確認する方法は、大きく分けてincludesやindexOfといった直接的な検索メソッドと、searchやmatchを用いた正規表現の2パターンがあります。
シンプルな場面ではincludesを使えば十分なことが多く、位置情報が必要なときはindexOf、複雑なパターンマッチには正規表現が有効です。

実務では、ユーザー入力のバリデーションや、商品名やURLの分析、またはエラーメッセージの判定など、いたるところで文字列検索が使われます。
そのため、初心者の皆さんも覚えておくことで、明日からの開発がきっとスムーズになるでしょう。

ぜひ、プロジェクトでの要件やデータの性質に合わせて、最適な方法を選んでみてください。
そうすることで、コードの可読性が高まり、保守もしやすくなります。
JavaScript 文字列含むという基本的なチェック機能がしっかり身につけば、複雑なロジックを設計する際の基礎体力にもなってくれるはずです。

【JavaScript】文字列に特定の文字が含まれているか確認する方法を初心者向けに解説

はじめに

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

JavaScriptで文字列チェックが必要になる場面

ユーザー入力のバリデーション

フィルタリングや検索機能

URLやパスの分析

エラーメッセージの判定

JavaScript 文字列含む判定でよく使われるメソッド

includesメソッド

indexOfメソッド

実務での具体的な活用方法

部分一致による条件分岐

複数の条件が混在する場合

正規表現を使った検索の考え方

searchメソッド

matchメソッド

パフォーマンス上の注意点

大量データのフィルタリング

正規表現の乱用

最適化のヒント

トラブルシューティングとエラーハンドリング

nullやundefinedの入力

数字やオブジェクトの誤入力

空文字列の扱い

よくある疑問と解消のヒント

大文字小文字を区別しない検索はどうすればいいの？

全角と半角が混在している場合は？

キーワードの複数一致や順序が必要な場合

チェック方法の選び方まとめ

具体的なサンプルコードで学ぶ

適切なテストと保守

想定外の文字コード

結合文字の取り扱い

外部ライブラリの利用

まとめ

JavaScriptをマスターしよう

【PHP】配列に要素を追加する方法を初心者向けに解説

はじめに

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

JavaScriptで文字列チェックが必要になる場面

ユーザー入力のバリデーション

フィルタリングや検索機能

URLやパスの分析

エラーメッセージの判定

JavaScript 文字列 含む判定でよく使われるメソッド

includesメソッド

indexOfメソッド

実務での具体的な活用方法

部分一致による条件分岐

複数の条件が混在する場合

正規表現を使った検索の考え方

searchメソッド

matchメソッド

パフォーマンス上の注意点

大量データのフィルタリング

正規表現の乱用

最適化のヒント

トラブルシューティングとエラーハンドリング

nullやundefinedの入力

数字やオブジェクトの誤入力

空文字列の扱い

よくある疑問と解消のヒント

大文字小文字を区別しない検索はどうすればいいの？

全角と半角が混在している場合は？

キーワードの複数一致や順序が必要な場合

チェック方法の選び方まとめ

具体的なサンプルコードで学ぶ

適切なテストと保守

想定外の文字コード

結合文字の取り扱い

外部ライブラリの利用

まとめ

JavaScriptをマスターしよう

【PHP】配列に要素を追加する方法を初心者向けに解説

JavaScript 文字列含む判定でよく使われるメソッド