JavaScript：URLに移動：完全ガイド

window.location値は、ブラウザで表示している現在のURLを表します。この値を置き換えて、JavaScriptの別のURLに移動できます。これは、ユーザーを別のページにリダイレクトする場合に役立ちます。また、assign（）またはreplace（）メソッドを使用することもできます。

ユーザーを別のWebサイトまたは更新されたパス名にリダイレクトする理由はいくつかあります。ほとんどの場合、ユーザーの承認に応じてリダイレクトすることをお勧めします –クライアントがサイトにログインしているかどうか。この記事では、JavaScriptを使用してWebページでこれを行う方法を見ていきます。

JavaScript Go to URL

JavaScriptブラウザ履歴APIを使用すると、新しいURLに移動できます。次の方法を使用して、新しいURLに移動できます。

• window.locationに新しい値を割り当てます。
• window.assign（）メソッドを使用します。
• window.replace（）メソッドを使用します。

これらの3つの方法はすべて、別のURLに等しく移動するという目標を達成します。これらの各方法を見てみましょう。

JavaScriptwindow.location値

新しいURLに移動するには、ブラウザの履歴APIのロケーションオブジェクトを使用します。セッション履歴を使用すると、場所オブジェクトを新しいURLに再割り当てしたり、同じオブジェクトでhrefプロパティを使用したりできます。

このアプローチの構文は次のとおりです。

window.location = "url";

「url」は、ユーザーにアクセスさせたいURLを表します。このコード行が実行されると、JavaScriptリダイレクトが開始されます。これにより、ユーザーがWebブラウザで表示するページが変更されます。

この方法を例の形で見てみましょう：

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

const handleClick = (e) => {
      console.log("click")
      window.location = ('https://careerkarma.com') 
      // window.location.href = ('https://careerkarma.com')
      console.log(window.location)
    }

handleClick（）関数が実行されると、コードはステートメントをJavaScriptコンソールに記録します。次に、コードによって新しいURLにリダイレクトされます。

JavaScript window.location.assign（）

ロケーションオブジェクトには、assign（）と呼ばれるリダイレクトメソッドがあります。 このメソッドは、現在のURLに割り当てられたURLを割り当て、それを履歴スタックに追加します。

履歴スタックは、表示したページを表します（ページに戻ることができる「戻る矢印」について考えてみてください）。

次の構文を検討してください。

window.location.assign("url");

最後の例とは異なり、JavaScript変数（window.location）に値を割り当てる必要はありません。代わりに、ユーザーが表示するWebページを変更する方法を使用します。

履歴スタックは、ブラウザが戻るボタンまたは進むボタンがどこに行くべきかを記憶する方法です。

この方法の完全な例を見てみましょう：

const handleClick = (e) => {
      console.log("click")
      window.location.assign('https://careerkarma.com');      
}

同じサイトの別のページにリダイレクトする場合は、ロケーションオブジェクトのパス名プロパティを使用します：

const handleClick = (e) => {
      console.log("click")
      window.location.pathname = ('/newpage.html')
      console.log(window.location)
}

JavaScript window.location.replace（）

ユーザーが戻るボタンを使用して前のサイトに戻ることができるかどうかを制御することができます。

replace（）メソッドを使用すると、ユーザーをサイトに移動して、前のページに戻らないようにすることができます。一方、assign（）メソッドは、以前に表示していたページをブラウザの履歴に保存します。したがって、assign（）を使用すると、最後に表示したページを表示できます。

replace（）メソッドを見てみましょう：

window.location.replace("url");

assign（）と同様に、replace（）はメソッドです。このメソッドは1つの引数を受け入れます：ユーザーをポイントするURL。

replace（）メソッドをカスタム関数とともに使用して、メソッドの実行時にユーザーが表示するURLを変更できます。

const handleClick = (e) => {
      console.log("click")
      window.location.replace('https://careerkarma.com'); 
}

このRepl.itを使用して、選択したURLにリダイレクトするさまざまな方法を試してください。 [実行]ボタンを使用して、コードをデフォルトにリセットできます。

結論

JavaScriptでURLにアクセスするには、window.location、window.location.assign（）メソッド、またはwindow.location.replace（）メソッドを使用する3つの方法があります。

JavaScriptについてもっと知りたいですか？ JavaScriptの学習方法ガイドをご覧ください。このガイドには、JavaScriptを学習するためのヒントと、初心者および中級者向けの包括的な学習リソースのリストが含まれています。