●window.location.hrefとは？
今回はwindow.location.hrefについて詳しく解説していきたいと思います。
window.location.hrefは、現在のページのURLを取得したり、新しいページに遷移するために使用される非常に便利なプロパティです。
このプロパティを使いこなすことで、Webアプリケーションの利便性を飛躍的に高めることができるでしょう。
○window.location.hrefの基本的な使い方
まずは、window.location.hrefの基本的な使い方について見ていきましょう。
このプロパティを使えば、現在のページのURLを簡単に取得することができます。
○サンプルコード1：現在のURLを取得する
では早速、現在のURLを取得するサンプルコードを見てみましょう。
// 現在のURLを取得する
const currentURL = window.location.href;
console.log(currentURL);このコードを実行すると、現在のページのURLが出力されます。
例えば、現在のURLがhttps://example.com/page.htmlだとすると、次のような結果が得られます。
https://example.com/page.htmlこのように、window.location.hrefを使えば、現在のページのURLを簡単に取得できるのです。
○サンプルコード2：新しいページに遷移する
次に、window.location.hrefを使って新しいページに遷移する方法を見ていきましょう。
// 新しいページに遷移する
window.location.href = "https://example.com/new-page.html";このコードを実行すると、指定したURLのページに遷移します。
この例では、https://example.com/new-page.htmlというURLに遷移することになります。
●URLパラメータの操作
ここまでは、window.location.hrefの基本的な使い方として、現在のURLの取得と新しいページへの遷移について見てきました。
Webアプリケーションの開発では、これらの機能だけでなく、URLパラメータの操作も非常に重要になってきます。
URLパラメータとは、URLの末尾に付加される情報のことで、クエリ文字列とも呼ばれています。
例えば、https://example.com/page.html?id=123&name=JohnというURLでは、?以降のid=123&name=JohnがURLパラメータになります。
このURLパラメータを適切に操作することで、Webアプリケーションの機能性や利便性を向上させることができるでしょう。
では、実際にwindow.location.hrefを使ってURLパラメータを操作する方法を見ていきましょう。
○サンプルコード3：URLパラメータを取得する
まずは、URLパラメータを取得する方法から見ていきましょう。
次のサンプルコードは、URLパラメータを取得し、オブジェクトとして返す関数の例です。
function getUrlParams(url) {
const params = {};
const queryString = url.split('?')[1];
if (queryString) {
const keyValuePairs = queryString.split('&');
keyValuePairs.forEach(pair => {
const [key, value] = pair.split('=');
params[key] = decodeURIComponent(value);
});
}
return params;
}
// 現在のURLのパラメータを取得
const currentParams = getUrlParams(window.location.href);
console.log(currentParams);この関数では、URLを?で分割し、クエリ文字列を取得します。
さらに、クエリ文字列を&で分割して、キーと値のペアを取得します。
そして、それらのペアをオブジェクトに変換して返しています。
例えば、現在のURLがhttps://example.com/page.html?id=123&name=Johnだとすると、次のようなオブジェクトが取得できます。
{
id: "123",
name: "John"
}このように、URLパラメータを簡単に取得できるようになると、Webアプリケーションの開発がぐっと楽になりますね。
○サンプルコード4：URLパラメータを追加する
次に、URLパラメータを追加する方法を見ていきましょう。
次のサンプルコードは、現在のURLにパラメータを追加する関数の例です。
function addUrlParam(url, key, value) {
const newParam = `${key}=${encodeURIComponent(value)}`;
if (url.includes('?')) {
return `${url}&${newParam}`;
} else {
return `${url}?${newParam}`;
}
}
// 現在のURLにパラメータを追加
const newUrl = addUrlParam(window.location.href, 'category', 'books');
console.log(newUrl);この関数では、渡されたキーと値を使って新しいパラメータ文字列を作成します。
そして、元のURLに?が含まれている場合は&で、含まれていない場合は?で連結しています。
例えば、現在のURLがhttps://example.com/page.htmlだとすると、次のようなURLが生成されます。
https://example.com/page.html?category=booksこのように、URLパラメータを追加することで、Webアプリケーションの状態を柔軟に制御できるようになります。
○サンプルコード5：URLパラメータを削除する
では、URLパラメータを削除する方法も見ておきましょう。
次のサンプルコードは、指定したキーのパラメータを削除する関数の例です。
function removeUrlParam(url, key) {
const urlParts = url.split('?');
if (urlParts.length >= 2) {
const prefix = `${encodeURIComponent(key)}=`;
const params = urlParts[1].split(/[&;]/g);
// 指定したキーのパラメータを削除
for (let i = params.length; i-- > 0;) {
if (params[i].lastIndexOf(prefix, 0) !== -1) {
params.splice(i, 1);
}
}
url = urlParts[0] + (params.length > 0 ? `?${params.join('&')}` : '');
}
return url;
}
// 現在のURLからパラメータを削除
const newUrl = removeUrlParam(window.location.href, 'id');
console.log(newUrl);この関数では、URLを?で分割し、クエリ文字列を取得します。
そして、クエリ文字列から指定したキーのパラメータを探し、削除しています。
最後に、パラメータを削除したクエリ文字列を元のURLに連結して返しています。
例えば、現在のURLがhttps://example.com/page.html?id=123&name=Johnだとすると、次のようなURLが生成されます。
https://example.com/page.html?name=Johnこのように、不要になったパラメータを削除することで、URLをクリーンに保つことができます。
○サンプルコード6：URLパラメータを置換する
最後に、URLパラメータを置換する方法を見ていきましょう。
次のサンプルコードは、指定したキーのパラメータを新しい値に置き換える関数の例です。
function replaceUrlParam(url, key, value) {
const urlParts = url.split('?');
if (urlParts.length >= 2) {
const prefix = `${encodeURIComponent(key)}=`;
const params = urlParts[1].split(/[&;]/g);
// 指定したキーのパラメータを置換
for (let i = params.length; i-- > 0;) {
if (params[i].lastIndexOf(prefix, 0) !== -1) {
params[i] = `${key}=${encodeURIComponent(value)}`;
}
}
url = urlParts[0] + `?${params.join('&')}`;
} else {
url = `${url}?${key}=${encodeURIComponent(value)}`;
}
return url;
}
// 現在のURLのパラメータを置換
const newUrl = replaceUrlParam(window.location.href, 'id', '456');
console.log(newUrl);この関数では、URLを?で分割し、クエリ文字列を取得します。
そして、クエリ文字列から指定したキーのパラメータを探し、新しい値に置き換えています。
最後に、置換したクエリ文字列を元のURLに連結して返しています。
例えば、現在のURLがhttps://example.com/page.html?id=123&name=Johnだとすると、次のようなURLが生成されます。
https://example.com/page.html?id=456&name=Johnこのように、URLパラメータの値を動的に変更することで、Webアプリケーションの状態を柔軟に制御できるようになります。
●よくあるエラーと対処法
ここまで、window.location.hrefを使ったURLの操作について見てきましたが、実際にコードを書いていると、思わぬエラーに遭遇することがありますよね。
せっかく書いたコードが思い通りに動かないと、がっかりしてしまいます。
ただ、エラーの原因を理解し、適切な対処法を身につけることで、より堅牢なコードを書けるようになります。
それでは、window.location.hrefを使う際によく遭遇するエラーとその対処法を見ていきましょう。
エラーメッセージに振り回されずに、冷静に対処できるようになりましょう。
○TypeError: Cannot read property ‘href’ of undefined
このエラーは、window.locationオブジェクトがundefinedになっている場合に発生します。
つまり、windowオブジェクトが存在しない、またはlocationプロパティが存在しない状況です。
このエラーが発生する典型的なケースは、Node.jsなどのサーバーサイド環境でwindow.location.hrefを使おうとした場合です。
Node.jsにはブラウザ環境のようなwindowオブジェクトが存在しないため、window.locationはundefinedになります。
対処法としては、コードが実行される環境を確認し、windowオブジェクトが存在する場合にのみwindow.location.hrefを使うようにします。
次のように、typeof window !== 'undefined'でチェックするのが一般的です。
if (typeof window !== 'undefined') {
console.log(window.location.href);
} else {
console.log('ブラウザ環境ではありません');
}このように、実行環境を考慮してコードを書くことで、エラーを回避できます。
○SecurityError: The operation is insecure
このエラーは、セキュリティ上の制限によってwindow.location.hrefへのアクセスがブロックされた場合に発生します。
具体的には、HTTPSのページからHTTPのURLへの遷移を試みた場合などです。
ブラウザはセキュリティを重視するため、安全でない遷移を許可しません。
HTTPSからHTTPへの遷移は、安全性が低下するためブロックされるのです。
対処法としては、できるだけすべてのページをHTTPSで提供するように設計するのがベストです。
そうすれば、このエラーに悩まされることはありません。
どうしてもHTTPのページへの遷移が必要な場合は、ユーザーにアクションを促し、ユーザーのクリックなどのイベントでページ遷移を行うようにします。
ユーザーの明示的なアクションによる遷移は、セキュリティ制限を回避できます。
// ユーザーのクリックイベントで遷移する
document.getElementById('link').addEventListener('click', function() {
window.location.href = 'http://example.com';
});このように、セキュリティの制限を理解し、適切に対処することが大切です。
○SyntaxError: Unexpected token ‘=’
このエラーは、JavaScriptの構文エラーを示しています。
=が期待されていない場所で使用されている、つまり、代入演算子の使い方に誤りがあることを意味します。
window.location.hrefを使う際に、このエラーが発生するケースとしては、次のような誤った代入が考えられます。
// 誤った代入
window.location.href = 'https://example.com' = true;正しくは、次のように代入します。
// 正しい代入
window.location.href = 'https://example.com';このエラーを避けるためには、JavaScriptの構文ルールをしっかりと理解することが大切です。
コードをじっくりと見直し、=の位置が正しいかどうかを確認しましょう。
また、エディタの構文チェック機能を活用するのも良いでしょう。
多くのエディタには、構文エラーを検出してくれる機能があります。
そういった機能を使えば、エラーに早期に気づくことができます。
●window.location.hrefの応用例
さて、ここまでwindow.location.hrefの基本的な使い方やURLパラメータの操作、よくあるエラーと対処法について見てきました。
きっと、window.location.hrefの使い方がだいぶ理解できてきたのではないでしょうか。
でも、学んだことを実際に応用できてこそ、本当の理解と言えますよね。
そこで、ここでは、window.location.hrefを使ったちょっと応用的な例を見ていきたいと思います。
実務で役立つ実践的なスキルを身につけるためにも、ここでしっかりと応用例を理解しておくことが大切です。
それでは、具体的なコードを見ながら、window.location.hrefの応用的な使い方を探っていきましょう。
○サンプルコード7：ページの自動リロード
まずは、ページの自動リロードです。
これは、一定時間ごとにページを自動的に更新する機能ですね。
例えば、株価や天気予報など、定期的に最新の情報に更新したいページで使われることがあります。
では、window.location.hrefを使ってどのようにページの自動リロードを実装するのでしょうか。
次のサンプルコードを見てみましょう。
// 5秒ごとにページを自動リロードする
setInterval(function() {
window.location.href = window.location.href;
}, 5000);このコードでは、setInterval関数を使って、5秒（5000ミリ秒）ごとに指定した関数を実行しています。
その関数の中で、window.location.hrefにwindow.location.hrefを代入しています。
つまり、現在のURLを再度読み込むことで、ページをリロードしているのです。
setIntervalを使っているので、これが繰り返し実行され、5秒ごとにページが自動的に更新されます。
実行結果は、次のようになります。
// ページが5秒ごとに自動的にリロードされるただし、自動リロードを使う際は注意が必要です。ユーザーが予期しない動作になる可能性があるからです。
必要な場合にのみ、ユーザーに断りを入れた上で使用するようにしましょう。
○サンプルコード8：外部リンクを新しいタブで開く
次は、外部リンクを新しいタブで開く方法です。
Webサイトには、他のサイトへのリンクが含まれていることがよくあります。
そのようなリンクをクリックしたときに、新しいタブでそのページを開くようにすると、ユーザーにとって便利ですよね。
では、window.location.hrefを使ってどのように実装するのでしょうか。
次のサンプルコードを見てみましょう。
// 外部リンクを新しいタブで開く
const links = document.querySelectorAll('a[href^="http"]');
links.forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault();
window.open(this.href, '_blank');
});
});このコードでは、まずquerySelectorAllを使って、href属性がhttpで始まるすべての<a>要素を取得しています。
これによって、外部リンクを抽出しているのです。
次に、forEachを使って、各リンクに対してクリックイベントのリスナーを設定しています。
クリックされたときの処理では、まずevent.preventDefault()でリンクのデフォルトの動作（ページ遷移）をキャンセルしています。
そして、window.openを使って、リンクのURLを新しいタブ（'_blank'）で開いています。
ここで、リンクのURLはthis.hrefで取得しています。
実行結果は、次のようになります。
// 外部リンクをクリックすると、新しいタブでそのページが開くこのように、window.location.hrefとwindow.openを組み合わせることで、外部リンクを新しいタブで開く機能を実装できます。
ユーザービリティの向上につながる、実用的なテクニックだと思います。
まとめ
JavaScriptのwindow.location.hrefについて、基本的な使い方から応用例まで、詳しく見てきました。
実務で役立つテクニックも身につけることができたのではないでしょうか。
フロントエンドエンジニアとしてのキャリアを目指すなら、window.location.hrefのような実践的なスキルを身につけることが重要です。
今回学んだことを活かして、さらに自分のスキルを磨いていきましょう。
