JavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法について現役エンジニアが解説しています。URLにおけるハッシュとは、#の後の文字列のことです。HTMLにidを設定すると#で移動することが出来ます。Twitterなどでも#をつけてハッシュタグにしています。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

  1. ハッシュとは
  2. location.hashプロパティとは
  3. location.hashプロパティの使い方
  4. location.hrefでURLのハッシュを取得する方法
  5. 実際に書いてみよう
  6. まとめ

 

ハッシュとは

URLにおけるハッシュとは、#の後の文字列のことです。

Twitterなどでも#をつけてハッシュタグとして、特定の項目を表したりしますがこれと同じようなものです。HTMLにidを設定し、そのidをハッシュで指定したURLはページの表示位置がそのハッシュのidを持つHTMLタグの場所になります。

平たく言うと、ハッシュはURLで指定したページの表示位置を指定しているということになります。下記にMDNのlocation.hashのリファレンスのURLを載せてみました。

下のものにはハッシュを#Examplesとつけています。実際にこのリンクをクリックすると、同じページを表示しますがハッシュのあるものは、Examplesという項目の位置を表示していることが確認できるかと思います。

developer.mozilla.org/ja/docs/Web/API/Location/hash

developer.mozilla.org/ja/docs/Web/API/Location/hash#Examples(ハッシュあり)

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

location.hashプロパティとは

URLを現すLocationインターフェースのプロパティで、#を含むハッシュのデータが格納されています。先程のMDNのリファレンスのハッシュ付きリンクの場合は、#Examplesが格納されています。

location.hashプロパティの使い方

locationは、記述の省略が可能なwindowオブジェクトのプロパティです。そのため、そのままlocation.hashと記述することで使うことができます。

location.hrefでURLのハッシュを取得する方法

location.hashと記述することで現在のURLのハッシュ部分を取得できます。location.hashにHTMLに設定したidを設定することでその位置に移動することもできます。

いわゆる、ページ内遷移です。

実際に書いてみよう

記述は下記のものだけです。

location.hash

簡単にhashの値を確認する方法として、冒頭で紹介したMDNのハッシュ付きページを開いてブラウザの開発者ツールなどでコンソールにlocation.hashと記述してみてください。

#Examplesと表示されるはずです。

参考までにChromeブラウザの開発者ツールの開き方をGoogleのサイトで紹介したページのリンクを貼っておきます。
Chromeの開発者ツールの開き方(英語)

まとめ

URLのハッシュを使えば、初期の表示を指定した位置にすることができます。

JavaScriptでハッシュを取得したり書き換えることでページ内遷移ができます。ページのトップにスクロールを戻したり、中盤にある項目までスクロールさせたりとユーザーを助けることができますので活用してみてください。

筆者プロフィール

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。