ウェブ開発において、ページを別のURLに移動させる「リダイレクト」はよく使われるテクニックです。
HTMLの<a>タグを使って簡単にリンクはできますが、JavaScriptを活用することで、特定の条件や処理が完了した際にリダイレクトを行うなど、より高度な制御が可能です。
この記事では、JavaScriptによるリダイレクトの方法、ボタンクリックでのリダイレクト、そして特定の処理後にリダイレクトさせる例を紹介します。
これらを活用することで、ユーザー体験を向上させるインタラクティブなウェブページを作成できるようになります。
JavaScriptリダイレクトの基本
まず、JavaScriptでの基本的なリダイレクト方法を確認しましょう。window.location.hrefを使用することで、指定したURLにページを移動させることができます。
シンプルなリダイレクト
このコードをページに埋め込むと、ページが読み込まれた際に自動でリダイレクトされます。
<script>
window.location.href = "https://web-create-kokusyo.com";
</script>window.location.replace()でのリダイレクト
window.location.replace()は、履歴に残さずリダイレクトを行います。
ユーザーが「戻る」ボタンを押しても元のページには戻れないため、ログアウト後のリダイレクトや他のページ遷移で使われることが多いです。
<script>
window.location.replace("https://web-create-kokusyo.com");
</script>時間差リダイレクト
リダイレクトのタイミングをコントロールしたい場合には、setTimeout()を使うことができます。例えば、5秒後にページを移動させたい場合は次のように記述します。
<script>
setTimeout(function() {
window.location.href = "https://web-create-kokusyo.com";
}, 5000); // 5000ミリ秒（5秒）
</script>ボタンクリックでリダイレクト
次に、ボタンクリックによってリダイレクトを行う方法を見てみましょう。これは、ユーザーの操作に応じてページ遷移を行いたい場合に便利です。
ボタンクリックでシンプルにリダイレクト
ボタンをクリックしたときに、特定のURLに移動させるシンプルな例です。
ユーザーがボタンをクリックするとリダイレクトされます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ボタンクリックでリダイレクト</title>
</head>
<body>
<button id="redirectButton">次のページへ</button>
<script>
document.getElementById('redirectButton').addEventListener('click', function() {
window.location.href = "https://web-create-kokusyo.com";
});
</script>
</body>
</html>確認ダイアログ付きリダイレクト
リダイレクト前にユーザーに確認を求めたい場合には、confirm()を使ってダイアログを表示することができます。
この例では、ユーザーがボタンを押すと確認ダイアログが表示され、「OK」を選択した場合にリダイレクトが実行されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>確認後リダイレクト</title>
</head>
<body>
<button id="confirmRedirectButton">次へ</button>
<script>
document.getElementById('confirmRedirectButton').addEventListener('click', function() {
var userConfirmed = confirm("次のページに移動しますか？");
if (userConfirmed) {
window.location.href = "https://web-create-kokusyo.com;
}
});
</script>
</body>
</html>処理後にリダイレクト
次に、何らかの処理が完了した後にリダイレクトを行う方法を見ていきます。例えば、フォーム送信が成功した後や、特定の条件が満たされた場合にだけページを移動させたい場合に有効です。
フォーム送信後にリダイレクト
ユーザーがフォームを正しく入力して送信した場合のみ、リダイレクトを実行します。フォームのバリデーション（入力内容の確認）と組み合わせて使うと便利です。
●DEMO
https://sample.web-create-kokusyo.com/sample14/
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フォーム送信後のリダイレクト</title>
</head>
<body>
<form id="emailForm">
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>
<button type="submit">送信</button>
</form>
<script>
document.getElementById('emailForm').addEventListener('submit', function(event) {
event.preventDefault();
var email = document.getElementById('email').value;
if (validateEmail(email)) {
alert("メールアドレスが確認されました。次のページに進みます。");
window.location.href = "https://web-create-kokusyo.com";
} else {
alert("正しいメールアドレスを入力してください。");
}
});
function validateEmail(email) {
var re = /\S+@\S+\.\S+/;
return re.test(email);
}
</script>
</body>
</html>処理完了後の自動リダイレクト
次に、特定の処理が完了した後にページを遷移させたい場合の例です。例えば、データ読み込みやアニメーションが終了した後などにリダイレクトを行うことができます。
このコードでは、3秒後に処理が完了したというメッセージが表示され、その後指定したページにリダイレクトします。
●DEMO
https://sample.web-create-kokusyo.com/sample14/index2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>処理後にリダイレクト</title>
</head>
<body>
<h1>データを処理中...</h1>
<div id="message"></div>
<script>
setTimeout(function() {
document.getElementById('message').innerText = "処理が完了しました。次のページに移動します。";
window.location.href = "https://web-create-kokusyo.com";
}, 3000);
</script>
</body>
</html>
JavaScriptリダイレクトのまとめ
JavaScriptを使ったリダイレクトは、単なる<a>タグのリンクよりも柔軟な制御が可能です。特定の条件が満たされた後や、何らかの処理が完了した後にリダイレクトを行うことで、ユーザー体験をよりスムーズにすることができます。
- window.location.hrefでシンプルにリダイレクト可能
- window.location.replace()を使うと、履歴に残さずリダイレクトができる
- ボタンクリックやフォーム送信後にリダイレクトを行うと、よりインタラクティブなページを作成できる
- 確認ダイアログや処理完了後のリダイレクトなど、条件に応じたページ遷移が可能
