URL が有効か判定する URL.canParse() メソッド

• URL: https://zenn.dev/snowcait/articles/cb3cb764658100
• 日付: 2026-06-26
• Tier: Tier 3
• 要旨: URL の有効性をチェックする際に従来は new URL() の例外を try-catch で処理する必要があったが、URL.canParse() という静的メソッドが主要ブラウザに追加された。古いブラウザ向けには同等の動作を提供する Polyfill を hooks などの初期ロードファイルに実装しておくことが推奨される。

詳細

URL.canParse() メソッドの解説と Polyfill 実装

• 従来の課題: new URL(invalidString) は例外を投げるため、URLの有効性チェックには try-catch が必要だった
• URL.canParse(): ブール値を返す静的メソッド。主要最新ブラウザでは使用可能
• Polyfill 実装例: if (!URL.canParse) { URL.canParse = (url, base) => { try { new URL(url, base); return true; } catch { return false; } }; }
• SvelteKit での実装場所: hooks ファイルが推奨（アプリ起動時の早い段階で読み込まれるため）
• 判定式の注意: if (‘canParse’ in URL === false) も動作するが、エディタによっては赤線が引かれる。!URL.canParse の方が実用的
• 代替手段: core-js など Polyfill 対応ライブラリの導入も選択肢