「検索条件は合っているはずなのに、ヒットしない」
「console.logで見ると同じ文字列に見えるのに、比較結果が false になる」
JavaScriptやTypeScriptで文字検索を実装していると、
このような経験をしたことがある人は多いはずです。
私自身、未経験からIT企業への転職に向けてTypeScriptを学ぶ中で、
ToDoリストや検索機能を作った際に、まさにこの問題にハマりました。
原因は意外と単純で、
入力値に含まれる「余計な空白」 でした。
結論から言うと、
文字検索を行う前に trim() を使うだけで、多くの不具合は防げます。
trim()とは何をするメソッドなのか
trim() は、文字列の 前後にある空白を削除する メソッドです。
const text = " hello ";
console.log(text.trim()); // "hello"
重要なのは、
- 文字列の 前後のみ を削除する
- 途中の空白（”hello world” など）は消えない
という点です。
なぜ文字検索でtrim()が必要になるのか
入力フォームには見えない空白が入りやすい
検索機能では、ユーザーの入力値をそのまま使うことが多くなります。
const keyword = input.value;
しかし、実際の入力には、
- 先頭にスペースが入っている
- 最後に改行やスペースが入っている
といったケースがよくあります。
見た目では分からなくても、
文字列としては別物 です。
空白があると文字列比較は失敗する
const word = "typescript";
const input = "typescript ";
console.log(word === input); // false
この時点で、検索は失敗します。
indexOf や includes を使っても、
余計な空白があれば一致しません。
trim()を使った基本的な文字検索
完全一致検索の場合
const keyword = input.value.trim();
if (keyword === "typescript") {
console.log("一致しました");
}
これだけで、
「空白が原因で一致しない」
という問題を防げます。
部分一致検索（indexOf / includes）
const keyword = input.value.trim();
const text = "TypeScriptの学習ログ";
if (text.includes(keyword)) {
console.log("検索ヒット");
}
検索前に trim() を挟むだけで、
ヒット率が安定します。
配列検索とtrim()の組み合わせ
ToDoリストや記事検索などでは、
配列の中から文字検索を行うことも多いです。
const tasks = [
"TypeScript 勉強",
"JavaScript 復習",
"React 学習"
];
const keyword = input.value.trim();
const result = tasks.filter(t => t.includes(keyword));
ここで trim() をしないと、
検索条件によっては常に空配列が返ることになります。
小文字・大文字問題と組み合わせる
文字検索では、空白だけでなく
大文字・小文字の違い も問題になります。
実務では、次のように組み合わせることが多いです。
const keyword = input.value.trim().toLowerCase();
const result = tasks.filter(t =>
t.toLowerCase().includes(keyword)
);
これで、
- 前後の空白
- 大文字・小文字
両方の問題をまとめて解決できます。
trim()を使うべきタイミング
文字検索での trim() は、
入力を受け取った直後 に使うのがベストです。
function search(keyword: string) {
const word = keyword.trim();
// 検索処理
}
こうしておくと、
- 検索ロジックがシンプルになる
- バグの原因を減らせる
というメリットがあります。
なぜtrim()の理解が重要なのか
trim()は地味なメソッドですが、
ユーザー入力を扱うすべての場面で重要 です。
- 検索
- フォーム送信
- バリデーション
これらはすべて、
「人が入力する＝想定外の値が入る」
という前提で設計する必要があります。
trim()は、その最初の防波堤です。
まとめ
文字検索で結果が返らない原因の多くは、
ロジックではなく 余計な空白 です。
trim() を使うことで、
- 空白による不一致を防ぐ
- 検索精度を安定させる
- 実装をシンプルに保つ
ことができます。
未経験からTypeScriptを学ぶ中で感じたのは、
こうした小さな処理の積み重ねが、実務コードの質を決める
ということでした。
コメント