jQueryでURLを取得する方法【$(location)で一括取得】

今回の記事は、

• jQueryを使ってURLを取得したい
• 素のJavascriptでのやり方は知ってるけどjQueryでのやり方は知らない

という方に向けた記事になっています。

この記事の前半では、「jQueryを使ってURLを取得する方法」について解説しつつ、後半では「素のJavascriptとの比較結果」をご紹介させていただきます。

フリーランス案件を探すならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心	・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20%	・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース	・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など	・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ ・ZOZOテクノロジーズ ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

jQueryでURLを取得する方法

jQueryを使ってURLを取得するには、ズバリ、$(location)オブジェクトを使用します。

この$(location)オブジェクトの中に、パラメータやホスト名、プロトコルなどのURL情報が含まれているのです。

それでは早速、実装例を見ながら確認していきましょう。

実装コード

<script>
console.log($(location).attr(href))
</script>

出力結果

=> https://hataworakuni.net/

上記の例では、hrefプロパティへアクセスすることで、URL全体を取得しています。

その他、実際の開発でも使用する可能性のある主要プロパティをまとめておきますので、一度目を通しておいてくださいね。
（※今回の例では、https://hataworakuni.net/index/?s=jqueryにアクセスした場合の結果を記載しています）

ホスト名

実装コード

$(location).attr(host)

出力結果

=> hataworakuni.net/

パラメータ

実装コード

$(location).attr(search)

出力結果

=> ?s=jquery

パス名

実装コード

$(location).attr(pathname)

出力結果

=> /index

プロトコル

実装コード

$(location).attr(protocol)

出力結果

=> https

ポート番号

実装コード

$(location).attr(port)

出力結果

=> 8080

ポート番号までのURL

実装コード

$(location).attr(origin)

出力結果

=> https://hataworakuni.net:8080/

JavascriptでURLを取得する方法

ここまでjQueryを使ってURLを取得する方法をご紹介してきましたが、素のJavascriptでもその方法はほとんど同じです。

というよりもむしろ、（これは非常に珍しいのですが、）素のJavascriptで処理した方が簡単です。

jQueryでは$(location)オブジェクトのプロパティにアクセスするためにattr()メソッドを使用する必要があったのですが、素のJavascriptでは直接アクセスすることができます。

実装コード

<script>
console.log(location.href)
</script>

出力結果

=> https://hataworakuni.net/

この他のプロパティについても、その名前自体はjQueryと同じですので、locationオブジェクトに対して直接使用していただく形で大丈夫です。

最後に

さて、ここまで、jQueryを使ってURLを取得する方法について解説してきましたがいかがでしたか？

素のJavascriptでの方法とほとんど同じやり方ですので、これまでと違和感なく使用できるかと思います。

また、珍しく素のJavascriptの方が書き方がシンプルですので、「コードをjQueryで統一している」というような事情がない限り、素のJavascriptを使用した方が効率的かもしれませんね。

このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。