JavaScriptでlocation.hrefを使いこなす5つの方法

JavaScriptでlocation.hrefを使った便利な技術を学ぶ初心者 JS
この記事は約4分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptでlocation.hrefを使いこなすことができるようになります。

初心者でも分かりやすい説明とサンプルコードで、location.hrefの使い方を5つの方法で解説していきます。

●location.hrefとは

location.hrefは、JavaScriptでブラウザのアドレスバーに表示されているURLを操作するためのプロパティです。

これを使って、ページ遷移やリダイレクト、URLの操作などが行えます。

●location.hrefの使い方

ここでは、location.hrefを使った5つの方法とそれぞれのサンプルコードを紹介します。

○サンプルコード1:ページ遷移

location.hrefを使って別のページに遷移するコードを紹介します。

この例では、ボタンをクリックするとGoogleのトップページに遷移します。

document.querySelector('#btn').addEventListener('click', function () {
  location.href = 'https://www.google.com';
});

○サンプルコード2:リダイレクト

location.hrefを使ってリダイレクトするコードを紹介します。

この例では、ページが読み込まれたら5秒後にGoogleのトップページにリダイレクトします。

setTimeout(function () {
  location.href = 'https://www.google.com';
}, 5000);

○サンプルコード3:URL操作

このコードでは、location.hrefを使ってURLの操作をする方法を紹介しています。

この例では、現在のURLにクエリパラメータを追加してリロードしています。

const newUrl = location.href + '?key=value';
location.href = newUrl;

○サンプルコード4:リフレッシュ

このコードでは、location.hrefを使ってページをリフレッシュ(更新)する方法を紹介しています。

この例では、ボタンをクリックすると現在のページがリフレッシュされます。

document.querySelector('#btn').addEventListener('click', function () {
  location.href = location.href;
});

○サンプルコード5:ブラウザ操作

このコードでは、location.hrefを使ってブラウザの戻る・進む操作を行う方法を紹介しています。

この例では、戻るボタンをクリックすると一つ前のページに戻り、進むボタンをクリックすると一つ後のページに進みます。

document.querySelector('#back').addEventListener('click', function () {
  history.back();
});

document.querySelector('#forward').addEventListener('click', function () {
  history.forward();
});

●注意点と対処法

location.hrefを使用する際には、次の注意点と対処法に留意してください。

  1. location.hrefを使ってページ遷移やリダイレクトを行うと、ブラウザの履歴が残ります。
    履歴を残さず遷移したい場合は、location.replace()を使用してください。
  2. location.hrefを使ってURLを操作する際、繰り返し同じクエリパラメータが追加されることがあります。
    そのような場合は、既存のクエリパラメータを削除または更新してから、新しいクエリパラメータを追加してください。

まとめ

この記事では、JavaScriptでlocation.hrefを使いこなす方法を5つ紹介しました。

初心者でも簡単に理解できる説明とサンプルコードで、location.hrefの使い方を学べる内容となっています。

注意点と対処法も確認して、location.hrefを活用してみてください。