フレームワーク別解説！React/Vue.js/AngularでURL遷移を行う方法

JavaScriptでブラウザをURLに移動させる方法

location.href プロパティを使う

最も簡単な方法は、location.href プロパティを使うことです。このプロパティは、現在のブラウザウィンドウのURLを取得または設定するために使用されます。

// URL "https://www.example.com/" に移動する
location.href = "https://www.example.com/";

window.location オブジェクトは、location.href プロパティを含む、ブラウザのナビゲーションに関する多くのプロパティとメソッドを提供します。

// URL "https://www.example.com/" に移動する
window.location.href = "https://www.example.com/";

// 新しいウィンドウで "https://www.example.com/" を開く
window.open("https://www.example.com/", "_blank");

// ブラウザの履歴を1つ前に移動する
window.history.back();

// ブラウザの履歴を1つ後に移動する
window.history.forward();

window.location.replace() メソッドは、現在のページを新しいページに置き換えます。これは、ユーザーがブラウザの戻るボタンをクリックしても元のページに戻れないようにする場合に便利です。

// URL "https://www.example.com/" に置き換える
window.location.replace("https://www.example.com/");

<a> タグを使う

JavaScriptを使わずに、HTMLの <a> タグを使ってURLに移動することもできます。

<a href="https://www.example.com/">Example</a>

注意事項

• 上記の方法は、すべてのブラウザで同じように動作するわけではありません。
• JavaScriptでURLに移動する場合、ユーザーに確認メッセージを表示するなど、ユーザーフレンドリーな実装を心がけましょう。
• セキュリティ上の理由から、ユーザーが入力したURLに直接移動する場合は注意が必要です。

<button onclick="navigateToUrl()">Example</button>

<script>
function navigateToUrl() {
  // URL "https://www.example.com/" に移動する
  location.href = "https://www.example.com/";
}
</script>

window.location オブジェクトを使う

<button onclick="navigateToUrl()">Example</button>

<script>
function navigateToUrl() {
  // URL "https://www.example.com/" に移動する
  window.location.href = "https://www.example.com/";

  // 新しいウィンドウで "https://www.example.com/" を開く
  window.open("https://www.example.com/", "_blank");
}
</script>

window.location.replace() メソッドを使う

<button onclick="navigateToUrl()">Example</button>

<script>
function navigateToUrl() {
  // URL "https://www.example.com/" に置き換える
  window.location.replace("https://www.example.com/");
}
</script>

<a href="https://www.example.com/">Example</a>

これらのサンプルコードは、あくまでも参考として使用してください。実際の使用例では、必要に応じてコードをカスタマイズする必要があります。

history.pushState() メソッドは、ブラウザの履歴に新しいエントリを追加します。これは、ユーザーがブラウザの戻るボタンをクリックしたときに新しいページが表示されるようにする場合に便利です。

// URL "https://www.example.com/" を履歴に追加する
history.pushState({}, "", "https://www.example.com/");

history.replaceState() メソッドは、ブラウザの履歴の現在のエントリを新しいエントリに置き換えます。

// URL "https://www.example.com/" を現在の履歴エントリに置き換える
history.replaceState({}, "", "https://www.example.com/");

HTMLの <meta> タグを使って、リダイレクトを指定することもできます。

<meta http-equiv="refresh" content="0; url=https://www.example.com/" />

JavaScriptフレームワークを使用している場合は、フレームワークが提供するナビゲーション機能を使うことができます。

• React: useNavigate() フック
• Vue.js: router.push() メソッド
• Angular: router.navigate() メソッド

• 上記の方法の多くは、ブラウザの履歴を変更します。ユーザーがブラウザの戻るボタンをクリックしたときに予期しない動作が発生する可能性があることに注意してください。