JavaScriptでワイルドカードを使いこなす！初心者向け解説10選 – Japanシーモア

JavaScriptでワイルドカードを使いこなす！初心者向け解説10選

JavaScriptでワイルドカードを使いこなす初心者向け解説のイメージJS
2023.04.24
この記事は約10分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptでワイルドカードを使いこなすことができるようになります。

ワイルドカードは、文字列の一部に一致するパターンを表現するための便利なツールです。

この記事では、ワイルドカードの基本的な使い方から、応用例までを初心者向けに詳しく解説します。

また、注意点やカスタマイズ方法も紹介しますので、ぜひ最後までお読みください。

●ワイルドカードとは

ワイルドカードとは、文字列の一部に一致するパターンを表現するための記号です。

一般的には、アスタリスク(*)が任意の文字列に、クエスチョンマーク(?)が任意の1文字にマッチするワイルドカードとして使用されます。

○正規表現とワイルドカード

ワイルドカードは、正規表現という概念と関連が深いです。

正規表現は、文字列の検索や置換などの処理を行う際に用いられる強力なツールです。

JavaScriptでは、正規表現オブジェクトを使って文字列操作を行います。

●ワイルドカードの作り方

ワイルドカードを使った正規表現を作る方法を説明します。

○サンプルコード1：基本的なワイルドカード

下記のサンプルコードは、アスタリスク(*)とクエスチョンマーク(?)を使った基本的なワイルドカードを正規表現に変換する例です。

function wildcardToRegex(wildcard) {
  // アスタリスク(*)を正規表現の「任意の文字列」に変換
  // クエスチョンマーク(?)を正規表現の「任意の1文字」に変換
  const regex = wildcard.replace(/\*/g, ".*").replace(/\?/g, ".");
  return new RegExp(`^${regex}$`);
}

const pattern = "te*t?";
const regex = wildcardToRegex(pattern);
console.log(regex.test("test")); // true
console.log(regex.test("teat")); // true
console.log(regex.test("texts")); // false

●ワイルドカードの使い方

ワイルドカードを使って文字列検索、ファイル名検索、URL検索を行う方法を解説します。

○サンプルコード2：文字列検索

下記のサンプルコードは、ワイルドカードを使って文字列を検索する例です。

const wildcard = "ja*a?";
const regex = wildcardToRegex(wildcard);

const words = ["java", "javascript", "japan", "jazz"];
const matchedWords = words.filter(word => regex.test(word));
console.log(matchedWords); // ["java", "japan"]

○サンプルコード3：ファイル名検索

下記のサンプルコードは、ワイルドカードを使ってファイル名を検索する例です。

const wildcard = "*.txt";
const regex = wildcardToRegex(wildcard);

// ファイル名のリスト
const filenames = ["file1.txt", "file2.csv", "file3.txt", "file4.doc"];
// ワイルドカードに一致するファイル名を抽出
const matchedFilenames = filenames.filter(filename => regex.test(filename));
console.log(matchedFilenames); // ["file1.txt", "file3.txt"]

○サンプルコード4：URL検索

下記のサンプルコードは、ワイルドカードを使ってURLを検索する例です。

ここでは、特定のドメイン内のURLを抽出します。

const wildcard = "https://*.example.com/*";
const regex = wildcardToRegex(wildcard);

const urls = [
  "https://www.example.com/index.html",
  "https://blog.example.com/post1.html",
  "https://www.google.com/search?q=example",
  "https://sub.example.com/page.html"
];

const matchedUrls = urls.filter(url => regex.test(url));
console.log(matchedUrls); // ["https://www.example.com/index.html", "https://blog.example.com/post1.html", "https://sub.example.com/page.html"]

●ワイルドカードの対処法

ワイルドカードの中にある特殊文字（アスタリスクやクエスチョンマーク）をエスケープ処理する方法を説明します。

○サンプルコード5：エスケープ処理

下記のサンプルコードは、ワイルドカード内の特殊文字をエスケープする例です。

function escapeWildcard(wildcard) {
  return wildcard.replace(/([\*\?])/g, "\\$1");
}

const escapedWildcard = escapeWildcard("example?*.com");
console.log(escapedWildcard); // "example\?\*\.com"

●ワイルドカードの注意点

ワイルドカードを使用する際には、特殊文字の扱いに注意が必要です。

アスタリスクやクエスチョンマークは、意図しないマッチングを引き起こすことがありますので、適切にエスケープ処理を行いましょう。

●ワイルドカードのカスタマイズ

独自のワイルドカードを作成する方法を説明します。

○サンプルコード6：カスタムワイルドカード

下記のサンプルコードは、独自のワイルドカード記号を使って正規表現を作成する例です。

function customWildcardToRegex(wildcard, wildcardChars) {
  const { anyChar, anyString } = wildcardChars;
  const escapedAnyChar = anyChar.replace(/([.*+?^=!:${}()|[\]/\\])/g, "\\$1");
  const escapedAnyString = anyString.replace(/([.*+?^=!:${}()|[\]/\\])/g, "\\$1");

  const regexStr = "^" + wildcard
    .replace(escapedAnyChar, ".")
    .replace(escapedAnyString, ".*") + "$";

  return new RegExp(regexStr);
}

const customWildcard = "example@%com";
const customRegex = customWildcardToRegex(customWildcard, { anyChar: "@", anyString: "%" });
console.log(customRegex.test("example.com")); // true

●ワイルドカードの応用例

ワイルドカードを活用して、さまざまなシーンで使用できます。

○サンプルコード7：ファイルリスト取得

下記のサンプルコードは、ワイルドカードを使ってファイルリストを取得する例です。

const fs = require("fs");
const path = require("path");

function getFilesByWildcard(dir, wildcard) {
  const regex = wildcardToRegex(wildcard);
  return fs.readdirSync(dir).filter(file => regex.test(path.basename(file)));
}

const fileList = getFilesByWildcard("./", "*.txt");
console.log(fileList); // ["file1.txt", "file2.txt", "file3.txt"]

○サンプルコード8：入力値チェック

下記のサンプルコードは、ワイルドカードを使って入力値をチェックする例です。

const wildcard = "example.com/*";
const regex = wildcardToRegex(wildcard);

const inputValue = "example.com/test";
console.log(regex.test(inputValue)); // true

○サンプルコード9：URLルーティング

下記のサンプルコードは、ワイルドカードを使ってURLルーティングを行う例です。

const router = new Map();

function route(url, handler) {
  router.set(wildcardToRegex(url), handler);
}

function handleRequest(req) {
  for (const [regex, handler] of router.entries()) {
    if (regex.test(req.url)) {
      handler(req);
      break;
    }
  }
}

route("/posts/*", req => {
  console.log("This is a post request.");
});

handleRequest({ url: "/posts/123" }); // "This is a post request."

○サンプルコード10：データフィルタリング

下記のサンプルコードは、ワイルドカードを使ってデータをフィルタリングする例です。

const data = [
  { id: 1, name: "apple" },
  { id: 2, name: "banana" },
  { id: 3, name: "grape" },
  { id: 4, name: "orange" },
  { id: 5, name: "melon" },
];

function filterData(data, wildcard) {
  const regex = wildcardToRegex(wildcard);
  return data.filter(item => regex.test(item.name));
}

const filteredData = filterData(data, "*a*e");
console.log(filteredData);
// 出力: [ { id: 1, name: 'apple' }, { id: 3, name: 'grape' } ]

このサンプルコードでは、ワイルドカードを使って配列内のオブジェクトのnameプロパティをフィルタリングしています。

ここでは、*a*e というワイルドカードを指定して、名前が’a’で始まり’e’で終わるオブジェクトを抽出しています。

まとめ

ワイルドカードは、正規表現よりもシンプルなパターンマッチングを実現するためのツールです。

この記事では、ワイルドカードの基本的な使い方やカスタマイズ方法、さらに実用的な応用例を紹介しました。

これらのサンプルコードを参考に、ワイルドカードを活用して効率的なプログラムを作成してみてください。