ウェブ開発において、ユーザーを特定のページに誘導する方法は多岐にわたります。この記事では、JavaScriptを使用してURLを遷移させる方法をいくつか紹介します。シンプルな方法から、より高度な履歴管理の方法まで、さまざまなシナリオに対応できるように説明します。
window.location.hrefを使う
window.location.hrefに新しいURLを設定することで、ページをそのURLに遷移させることができます。
window.location.href = 'https://example.com';この方法は非常にシンプルで、多くの場面で使われています。
window.location.replaceを使う
window.location.replaceを使用すると、現在のページを新しいURLに置き換えます。この方法では、ブラウザの履歴には新しいページが追加されません。
window.location.replace('https://example.com');履歴を残さずに遷移させたい場合に便利です。
window.location.assignを使う
window.location.assignも新しいURLにページを遷移させますが、window.location.hrefと同様にブラウザの履歴に追加されます。
window.location.assign('https://example.com');window.locationオブジェクトを直接操作する
window.locationオブジェクトのプロパティを変更することでURLを遷移させることもできます。
window.location = 'https://example.com';window.location.hashを使う
URLのフラグメント識別子（ハッシュ）を変更することでページ内の特定の位置に遷移させることができます。
window.location.hash = 'section1';history.pushStateとhistory.replaceStateを使う
history.pushStateとhistory.replaceStateは、URLを変更しつつページを再読み込みせずにブラウザの履歴を操作する方法です。
history.pushState
履歴を追加し、URLを変更します。
history.pushState(null, '', '/new-url');history.replaceState
現在の履歴を置き換え、URLを変更します。
history.replaceState(null, '', '/new-url');例
以下は、ボタンをクリックすると指定したURLに遷移する簡単な例です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL Navigation Example</title>
</head>
<body>
<button onclick="navigateToURL()">Go to Example.com</button>
<script>
function navigateToURL() {
window.location.href = 'https://example.com';
}
</script>
</body>
</html>まとめ
JavaScriptを使用してURLを遷移させる方法はさまざまあります。それぞれの方法を理解し、用途に応じて使い分けることが重要です。履歴の管理やページの再読み込みの有無など、要件に応じて適切な方法を選択してください。
