「The string did not match the expected pattern.」発生時の対処法

「The string did not match the expected pattern.」発生時の対処法

「The string did not match the expected pattern.」は、JavaScriptやGoogle Apps Script(GAS)、Web API利用時などに発生する代表的なエラーの一つです。

このエラーは、URLやメールアドレス、日付文字列、正規表現、APIパラメータなどが、システムが期待している形式と一致しない場合に発生します。

特にGoogle Apps ScriptやブラウザのFetch API、URLオブジェクトを利用している際によく発生するため、入力値やパラメータの形式を確認することが重要です。

この記事では、「The string did not match the expected pattern.」エラーの原因と解決方法について、具体的なコード例を交えながら詳しく解説します。

環境

  • OS macOS Big Sur
  • ブラウザ safari 15.0

エラー内容

以下のコードを実行時に発生。

<a href="#bar"></a>
<a href="#foo"></a>

const nodelist = document.querySelectorAll('a[href^=#]');
console.log(nodelist);

エラーメッセージ全文

SyntaxError: The string did not match the expected pattern.

画像

原因

「バックスラッシュ」が必要なため

解決方法

「バックスラッシュ」を使用する。

<a href="#bar"></a>
<a href="#foo"></a>

const nodelist = document.querySelectorAll('a[href^=\\#]');
console.log(nodelist);

「ダブルクオーテーション」を使用してもよい。

const nodelist = document.querySelectorAll('a[href^="#"]');
console.log(nodelist);

実行結果

URL形式が正しいか確認する

このエラーは、不正なURLを指定した場合によく発生します。

以下の例はエラーになります。

new URL('test');

正しくは以下のようにURLスキームを含めます。

new URL('https://example.com');

fetch実行時に発生する場合

Fetch APIで不正なURLを指定した場合にも発生します。

fetch('sample');

正しいURLを指定します。

fetch('https://example.com/api');

相対パスを利用する場合は、実行環境も確認します。

Google Apps Scriptで発生する場合

GASではUrlFetchApp実行時によく発生します。

以下のようにURLが不正な場合はエラーになります。

UrlFetchApp.fetch('test');

正しいURLを指定します。

UrlFetchApp.fetch(
  'https://example.com'
);

メールアドレス形式を確認する

入力値がメールアドレスとして扱われる場合、形式エラーで発生することがあります。

NG例

test@

OK例

test@example.com

入力値のバリデーションを実施することをおすすめします。

日付文字列を確認する

日付形式が想定と異なる場合も発生することがあります。

NG例

2025/99/99

OK例

2025-06-08

APIへ日付を渡す場合はフォーマットを確認します。

URLエンコードを確認する

日本語や特殊文字を含むURLではエンコードが必要です。

NG例

https://example.com?q=あいうえお

OK例

https://example.com?q=
encodeURIComponent('あいうえお')

パラメータにはencodeURIComponentを利用します。

入力値をログ出力する

原因調査では実際の値を確認することが重要です。

console.log(value);
console.log(typeof value);

GASの場合は以下を利用します。

Logger.log(value);

想定外の空文字やnullが渡されていないか確認します。

nullやundefinedを確認する

値が存在しない場合にもエラーの原因になります。

if (!value) {
  return;
}

事前チェックを行うことでエラーを回避できます。

try catchで詳細を確認する

エラー内容を取得すると原因調査しやすくなります。

try {

  // 処理

} catch (e) {

  console.log(e.message);
  console.log(e.stack);

}

Google Apps Scriptでも同様です。

try {

  // 処理

} catch (e) {

  Logger.log(e);

}

まとめ

「The string did not match the expected pattern.」は、文字列がシステムの期待する形式と一致していない場合に発生します。

・URL形式が不正
・Fetch APIのURLが誤っている
・GASのUrlFetchAppのURLが誤っている
・メールアドレス形式が不正
・日付形式が誤っている
・URLエンコードが不足している
・nullやundefinedが渡されている

まずはエラーが発生している値をログ出力し、期待される形式と一致しているか確認することが解決への近道です。

補足

The string did not match the expected pattern. は、JavaScriptでURLや文字列を扱う際に、想定された形式と一致していない場合に発生することがあります。

特に、fetch()new URL()URLSearchParamsなどで、不正なURLやエンコードされていない文字列を渡した場合に発生しやすいエラーです。

まずは、指定しているURLに空白、全角文字、不要な改行、クエリパラメータの記述ミスがないか確認しましょう。

const url = new URL("https://example.com/search?q=test");
fetch(url);

日本語や記号をクエリパラメータに含める場合は、encodeURIComponent()を利用すると安全です。

const keyword = "テスト 検索";
const url = "https://example.com/search?q=" + encodeURIComponent(keyword);

fetch(url);

また、APIのエンドポイントを動的に生成している場合は、変数がundefinedや空文字になっていないかも確認しておくとよいです。

参考リンク

関連記事