JavaScriptで文字列の配列を大文字・小文字を区別せずに部分一致でフィルタリングする方法

JavaScriptでは、filter()メソッドとtoLowerCase()を組み合わせることで、大文字・小文字を区別しない部分一致検索を簡単に実装できます。本記事では、オブジェクトの配列から特定の名前を検索する具体例を通じて、その手順を詳しく解説します。

1. 検索対象となる配列を用意する

まずは、学生情報を格納したオブジェクトの配列を作成しましょう。各オブジェクトには「studentName」というプロパティが含まれています。あえて大文字・小文字が混在したデータにしている点に注目してください。

let studentDetails =
[
    {studentName: "John Smith"},
    {studentName: "john smith"},
    {studentName: "Carol Taylor"}
];

このように、同じ名前でも表記ゆれ（大文字・小文字の違い）があるデータは実際の開発でもよく見られます。そこで、検索時に大文字・小文字の違いを無視できる仕組みが必要になります。

2. filter() と toLowerCase() で大文字・小文字を無視してマッチさせる

大文字・小文字を区別せずに部分文字列をマッチさせるには、以下のアプローチを使用します。

• filter()：条件を満たす要素だけを抽出して新しい配列を返す
• toLowerCase()：文字列をすべて小文字に変換し、表記ゆれを吸収する

具体的には、配列側の名前と検索キーワードの両方をtoLowerCase()で小文字化してから比較することで、大文字・小文字の違いに関係なくマッチさせることができます。

サンプルコード

let studentDetails =
[
    {studentName: "John Smith"},
    {studentName: "john smith"},
    {studentName: "Carol Taylor"}
];
var searchName = "John Smith";

console.log(studentDetails.filter(obj =>
    obj.studentName.toLowerCase().indexOf(searchName.toLowerCase()) >= 0));

このコードでは、indexOf()の戻り値が0以上であれば部分文字列として一致していることを意味します。一致した要素のみが新しい配列として返されます。

3. プログラムの実行方法

上記のプログラムを実行するには、Node.jsを使って以下のコマンドを入力します。

node fileName.js

ここでは、ファイル名を demo55.js として保存しています。

4. 実行結果

プログラムを実行すると、次のような出力が得られます。

PS C:\Users\Amit\JavaScript-code> node demo55.js
[ { studentName: 'John Smith' }, { studentName: 'john smith' } ]

5. 結果のポイント

出力結果を見ると、「John Smith」と「john smith」の2件がマッチしています。「Carol Taylor」は検索キーワードに含まれないため除外されています。

このように、toLowerCase()で両者を小文字に統一してから比較することで、大文字・小文字の違いを気にせず柔軟な部分一致検索が可能になります。

補足：よりモダンな書き方

indexOf()の代わりに、ES6で導入されたincludes()メソッドを使うと、より直感的に記述できます。

console.log(studentDetails.filter(obj =>
    obj.studentName.toLowerCase().includes(searchName.toLowerCase())));

どちらの書き方でも結果は同じですが、includes()の方が「含まれているかどうか」という意図が明確に伝わるため、可読性の面でおすすめです。