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

今回の記事は、

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

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

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


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


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オブジェクトに対して直接使用していただく形で大丈夫です

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

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

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

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

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

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