ウェブ開発の世界は、その複雑性と多様性ゆえに、開発者がサイトの詳細な情報を取得し、それを活用する能力を必要とします。この一環として、JavaScriptを使用して現在のウェブページのURLを取得したり、その各部分を解析したりする方法が極めて重要となります。
その方法が理解できれば、ドメイン名の取得、パスの解析、プロトコルの判断、さらにはクエリパラメータやフラグメント識別子の把握まで、URLの全情報を自在に扱うことが可能となります。そこで今回の記事では、その全てをカバーする、JavaScriptによるURL取得の総合ガイドを提供します。この記事を通じて、あなたのウェブ開発スキルはさらなるレベルアップを遂げることでしょう。
window.location.hrefを使ったURL全体の取得
最初の手法は、window.location.hrefを使うことです。これは現在のウェブページのURL全体を取得するのに使います。
var currentURL = window.location.href;
console.log(currentURL);window.location.hostnameでホスト名を取得
次に、現在のウェブページのホスト名を取得するにはwindow.location.hostnameを使用します。
var hostname = window.location.hostname;
console.log(hostname);window.location.pathnameによるパスの取得
また、現在のウェブページのパス部分を取得するにはwindow.location.pathnameを使用します。
var pathname = window.location.pathname;
console.log(pathname);window.location.protocolでプロトコルを取得
URLのプロトコル部分（httpまたはhttps）を取得するには、window.location.protocolを使用します。
var protocol = window.location.protocol;
console.log(protocol);window.location.searchによるクエリパラメータの取得
URLのクエリパラメータ部分（?以降の部分）を取得するにはwindow.location.searchを使用します。
var searchParams = window.location.search;
console.log(searchParams);window.location.hashでURLのフラグメント識別子を取得
最後に、URLのフラグメント識別子（＃以降の部分）を取得するにはwindow.location.hashを使用します。
var hash = window.location.hash;
console.log(hash);まとめ
以上がJavaScriptでURLを取得する主な方法です。これらを駆使することで、ウェブページのURLの全情報を自在に扱うことができます。今後のウェブ開発作業に役立ててください。
