画像拡張子判定用正規表現

ファイルアップロードやパス処理で、画像ファイルかどうかを判定したい場面は多い。シンプルな正規表現で主要な画像形式をカバーする。

コード

const REGEX_IMG = /\.(png|webp|jpe?g|avif|gif)/;

function isImage(filename: string): boolean {
  return REGEX_IMG.test(filename);
}

使用例

isImage("photo.jpg");     // true
isImage("image.jpeg");    // true (e? で jpeg もカバー)
isImage("graphic.png");   // true
isImage("animation.gif"); // true
isImage("compressed.webp"); // true
isImage("modern.avif");   // true
isImage("document.pdf");  // false

パターンの解説

\.: リテラルのドットにマッチ
(png|webp|jpe?g|avif|gif): キャプチャグループで代替
- jpe?g: jpg と jpeg の両方にマッチ（e はオプション）

大文字小文字の対応

大文字の拡張子にも対応したい場合は、i フラグを追加する。

const REGEX_IMG = /\.(png|webp|jpe?g|avif|gif)/i;

isImage("PHOTO.JPG"); // true

代替アプローチ

正規表現ではなく、MIME タイプで判定したい場合：

async function isImageFile(file: File): Promise<boolean> {
  return file.type.startsWith("image/");
}

URL から拡張子を取得する場合は URL API を使う方が堅牢だ：

function getExtension(url: string): string {
  try {
    const pathname = new URL(url).pathname;
    return pathname.slice(pathname.lastIndexOf("."));
  } catch {
    return "";
  }
}

正規表現はシンプルだが、URL にクエリパラメータが含まれる場合などは誤判定する可能性がある。用途に応じて適切な方法を選ぶべきだ。