目次
概要
ユーザー入力の検証やデータのフィルタリングにおいて、文字列が「特定のキーワードを含んでいるか」「何で始まっているか」「何で終わっているか」を判定する処理は不可欠です。 本記事では、includes()、startsWith()、endsWith() の3つのモダンなメソッドを使用し、正規表現を使わずに高速かつ可読性の高い文字列判定を行う方法を解説します。
仕様（入出力）
- 入力: ファイル名の文字列リスト。
- 出力: 各ファイル名が特定の命名規則（プレフィックス、キーワード、拡張子）を満たしているかの判定結果。
- 動作: ファイル名を解析し、ルール適合状況をコンソールおよびHTMLリストに出力する。
基本の使い方
対象の文字列に対してメソッドを呼び出し、引数に検索したい文字列を渡します。戻り値はすべて true または false です。
const text = "report_2024_draft.pdf";
// 部分一致: "draft" が含まれているか
const hasDraft = text.includes("draft"); // true
// 前方一致: "report_" で始まっているか
const isReport = text.startsWith("report_"); // true
// 後方一致: ".pdf" で終わっているか
const isPdf = text.endsWith(".pdf"); // true
コード全文（HTML / JavaScript）
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String Search Example</title>
<style>
body { font-family: sans-serif; padding: 20px; }
.file-list { list-style: none; padding: 0; }
.file-item {
padding: 10px;
margin-bottom: 5px;
border: 1px solid #ddd;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
.tag {
font-size: 0.8em;
padding: 2px 6px;
border-radius: 4px;
margin-left: 5px;
color: white;
}
.tag-pdf { background-color: #e74c3c; }
.tag-img { background-color: #3498db; }
.tag-draft { background-color: #f39c12; }
.tag-valid { background-color: #2ecc71; }
</style>
</head>
<body>
<h2>ファイル名検査ツール</h2>
<ul id="fileList" class="file-list">
</ul>
<script src="app.js" defer></script>
</body>
</html>
javascript
/**
* 検査対象のファイル名リスト
*/
const files = [
"report_project_a.pdf",
"image_photo01.png",
"memo_draft_v1.txt",
"report_summary_draft.pdf",
"unknown_file"
];
/**
* ファイルの特性を判定してHTML要素を生成する
* @param {string} fileName
* @returns {HTMLElement}
*/
const createListItem = (fileName) => {
const li = document.createElement("li");
li.className = "file-item";
// ファイル名表示部分
const nameSpan = document.createElement("span");
nameSpan.textContent = fileName;
// タグ表示部分
const tagContainer = document.createElement("div");
// 1. startsWith: "report_" で始まるかチェック
if (fileName.startsWith("report_")) {
addTag(tagContainer, "REPORT", "tag-valid");
}
// 2. endsWith: ".pdf" で終わるかチェック
if (fileName.endsWith(".pdf")) {
addTag(tagContainer, "PDF", "tag-pdf");
} else if (fileName.endsWith(".png")) {
addTag(tagContainer, "IMG", "tag-img");
}
// 3. includes: "draft" (下書き) が含まれるかチェック
if (fileName.includes("draft")) {
addTag(tagContainer, "DRAFT", "tag-draft");
}
li.appendChild(nameSpan);
li.appendChild(tagContainer);
return li;
};
/**
* 汎用タグ追加ヘルパー
*/
const addTag = (parent, text, className) => {
const span = document.createElement("span");
span.textContent = text;
span.className = `tag ${className}`;
parent.appendChild(span);
};
// メイン処理
const init = () => {
const listContainer = document.getElementById("fileList");
files.forEach(file => {
const itemElement = createListItem(file);
listContainer.appendChild(itemElement);
});
};
document.addEventListener("DOMContentLoaded", init);
カスタムポイント
- 大文字・小文字の無視: これらのメソッドは厳密に大文字と小文字を区別します（Example.pdf と example.pdf は別物）。区別したくない場合は、事前に
toLowerCase()で小文字化してから判定することをお勧めします。JavaScript// 拡張子の大文字小文字を無視して判定 if (fileName.toLowerCase().endsWith(".pdf")) { ... } - 検索開始位置の指定:
includesとstartsWithは第2引数に検索開始位置（インデックス）を指定可能です。 例:str.startsWith("http", 0)
注意点
- 大文字と小文字の区別: 前述の通り、
"Apple".startsWith("apple")はfalseになります。ユーザー入力を扱う際は特に注意が必要です。 - null / undefined エラー: 対象の変数が
nullやundefinedの場合、メソッドを呼び出すとエラーになります。変数が確実に文字列であることを保証するか、オプショナルチェーン（?.）などを活用してください。 - 空文字の挙動:
"".includes("")など、空文字を検索対象にすると常にtrueが返ります。意図しない判定を防ぐため、空文字チェックが必要な場合があります。
応用
検索フィルターの実装
配列の filter メソッドと組み合わせることで、特定のキーワードを含むデータのみを抽出する検索機能を簡単に実装できます。
const allProducts = ["Apple Watch", "MacBook Pro", "iPhone 15", "Apple Pencil"];
// "Pro" を含む商品だけを抽出
const proProducts = allProducts.filter(product => product.includes("Pro"));
console.log(proProducts);
// 出力: ["MacBook Pro"]
まとめ
- 単純な有無チェックには
includes、先頭チェックにはstartsWith、末尾（拡張子等）チェックにはendsWithを使い分けます。 - 正規表現を使うよりも処理が高速で、コードの意図が読み手に伝わりやすくなります。
- ユーザー入力を判定する場合は、大文字小文字の揺らぎを吸収する処理（正規化）を挟むのが鉄則です。
