リダイレクト
location.href location.replace location.assign
JavaScriptでページを別のURLへ遷移させます。履歴への記録の有無や用途によって使い分けます。
デモ：カウントダウンリダイレクト
コード例
js
// 即時リダイレクト（履歴に残る）
location.href = 'https://example.com';
location.assign('https://example.com'); // 同じ
// 履歴を残さないリダイレクト（戻れない）
location.replace('https://example.com');
// 現在のページをリロード
location.reload();
// location のプロパティ
location.href; // "https://example.com/path?q=1#hash"
location.protocol; // "https:"
location.host; // "example.com:8080"
location.hostname; // "example.com"
location.port; // "8080"
location.pathname; // "/path"
location.search; // "?q=1"
location.hash; // "#hash"
location.origin; // "https://example.com:8080"
// 遅延リダイレクト
setTimeout(() => {
location.href = '/new-page';
}, 3000);
// ユーザー確認後にリダイレクト
if (confirm('このページを離れますか？')) {
location.href = '/other';
}
// 認証後のリダイレクト（ログインページのパターン）
const returnTo = new URLSearchParams(location.search).get('returnTo') ?? '/';
location.replace(returnTo);比較：location.href vs location.replace
| 観点 | location.href（assign） | location.replace |
|---|---|---|
| 履歴への記録 | ✅ 残る（戻れる） | ❌ 残らない（戻れない） |
| 使いどころ | 通常のページ遷移 | ログイン後、エラーページからの復帰 |
| 例 | ボタンクリックで別ページへ | 認証リダイレクト、メンテナンスページ |
⚠️ オープンリダイレクト（セキュリティ）
URLパラメータをそのままリダイレクト先に使うのは危険です。必ず検証を行ってください。
js
// ❌ 危険：ユーザー入力をそのまま使う
const returnTo = params.get('returnTo');
location.href = returnTo; // 外部サイトへ誘導される可能性
// ✅ 安全：同一オリジンのみ許可
const returnTo = params.get('returnTo') ?? '/';
const url = new URL(returnTo, location.origin);
if (url.origin === location.origin) {
location.href = url.pathname + url.search;
} else {
location.href = '/'; // フォールバック
}🤖 AIプロンプトテンプレート
以下のようなJavaScriptのページ遷移・リダイレクトに関するサンプルコードを生成してください： - location.href / location.assign / location.replaceの使い分けと違い - location.replaceで履歴に残さずリダイレクトする認証後のパターン - setTimeoutを使った遅延リダイレクトの実装 - URLSearchParamsを使ったreturnToパラメータの安全な処理 - オープンリダイレクト脆弱性を防ぐ同一オリジン検証の実装
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。