TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法を現役エンジニアが解説【初心者向け】
JavaScript

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,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] フロントエンドで副業する学習方法を動画で公開中

location.hashプロパティとは

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

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

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

コラム

実は私も！？独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか？

現役エンジニア・デザイナーに何でも気軽に相談できる30分 を すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

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

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

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

実際に書いてみよう

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

location.hash

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

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

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

1時間でできる無料体験！

まとめ

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

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

筆者プロフィール

横山茂雄（よこやましげお）

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

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

JavaScriptでオリジナルの右クリックメニューを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオリジナルの右クリックメニューを作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向け...
JavaScript

JavaScriptでsprintfを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptでsprintfを実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptでindexOfメソッドを使って文字列を検索する方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでindexOfを使う方法について、テックアカデミーのメン...
JavaScript

JavaScriptのクロージャの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのクロージャの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そ...
JavaScript

JavaScriptのDateのタイムゾーンについて現役エンジニアが解説【初心者向け】

JavaScriptのDateのタイムゾーンについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 そ...
JavaScript

JavaScriptでIPアドレスを取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでIPアドレスを取得する方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入...
JavaScript

あわせてよく読まれている記事

JavaScriptでLocationオブジェクトのhash値を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptでLocationオブジェクトのhash値を削除する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでLocationオブジェクトのhash値を削除する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 Locationオブジェクトとは Locationオブジェクトのhash値について Locationオブジェクトのhash値を削除する方法 実際に書いてみよう まとめ   Locationオブジェクトとは documentの現在位置についての情報を持つオブジェクトです。平たく言うと、URLの情報を持つオブジェクトということになります。 Locationオブジェクトのプロパティには、URLの情報に関するものが複数あります。たとえば検索キーワード（URLの?以降）の値を持つsearchや、httpsなどのプロトコルを持つprotocolなどがあります。 [PR] フロントエンドで副業する学習方法を動画で公開中Locationオブジェクトのhash値について URLの#の後の文字列が、Locationオブジェクトのプロパティのhashに格納されています。このhash値はHTMLのidを割り当てた場所へ移動させるのに使うことができます。 画面の下の方に表示されているHTMLタグにidを割り当て、URLの最後にhashを#とidの名前という具合につけることで、その場所へスクロールした状態で表示できます。 Locationオブジェクトのhash値を削除する方法 Locationオブジェクトのプロパティに、hashという名前でhash値が格納されています。 そしてLocationオブジェクトは、記述の省略可能なwindowオブジェクトのプロパティです。そのため、location.hashと記述することで値の操作ができます。 location.hashに空文字（”シングルクォート2つ）を代入することで、削除となります。 コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
JavaScript

Ruby on Railsの繰り返し文でhashを追加する方法を現役エンジニアが解説【初心者向け】

Ruby on Railsの繰り返し文でhashを追加する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Ruby講座の内容をもとに紹介しています。   田島悠介 今回は、Rubyに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Ruby on Railsの繰り返し文でhashを追加する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 hashとは hashを追加する方法 繰り返し文でhashを追加する   hashとは hash(ハッシュ)とは、キーと値という2つのデータがペアになった集合のことです。一般的には「連想配列」と呼ぶこともあります。hashでキーと値を関連づけておくと、そのhashにキーを与えると関連づけた値を取得できます。 Ruby on Railsでhashを初期化する方法を現役エンジニアが解説【初心者向け】の記事も合わせてご覧ください。   [PR] フロントエンドで副業する学習方法を動画で公開中hashを追加する方法 hashは簡単に作成できますが、ここでは出来上がっているhashに後から追加する方法を解説します。 まずベースとなるhashを作成します。 base = {'オレンジ' => 150, 'レモン' => 200} putsで表示してみると、 {"オレンジ"=>150, "レモン"=>200}   となります。この例では、要素を2つ持つhashが作成できます。このhashに対して、何か要素を追加する方法は3つあります。 直接代入する方法 storeメソッドを使う方法 mergeメソッドを使う方法   直接代入する方法 base['バナナ'] = 50 と書きます。キー名を指定して値を直接代入します。中身をputsで確認すると、 {"オレンジ"=>150, "レモン"=>200, "バナナ"=>50} となります。要素が1つ追加されて3つの要素をもつhashとなります。   storeメソッドを使う方法 base.store('バナナ', 50) と書きます。storeメソッドの引数に、キー名と値を指定します。結果は1.の場合と同じです。   追加するときの注意点 追加するとき、追加したいhashに指定したキー名がすでに存在していると、値の上書きになります。 base = {'オレンジ' => 150, 'レモン' => 200} base['オレンジ'] = 160 を実行すると、hashは、 {"オレンジ"=>160, "レモン"=>200} となり、追加にはなりません。追加するときは、まだ存在しないキー名を指定する必要があります。   mergeメソッドを使う方法 1つのhashにもう1つのhashを結合します。 base = {'オレンジ' => 150, 'レモン' => 200} delta = {'バナナ' => 50} base = base.merge(delta) と書きます。mergeメソッドの引数に、結合したいhashを指定します。 また、merge!メソッドを使うと、 base = {'オレンジ' => 150, 'レモン' => 200} delta = {'バナナ' => 50} base.merge!(delta) とも書けます。   繰り返し文でhashを追加する Fruitsというフルーツのレコード一覧(データベース)があったとします。 フルーツのレコードには色々なデータが含まれる中で、その後の処理を簡潔にするために必要なデータだけhashにして取り出したいときがあります。名前をキー、価格を値にしたhashとして取り出したいとき、 fruits
Ruby

Ruby on Railsでhashを初期化する方法を現役エンジニアが解説【初心者向け】

Ruby on Railsでhashを初期化する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。 田島悠介 今回は、Rubyに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Ruby on Railsでhashを初期化する方法について詳しく説明していくね！ 大石ゆかり お願いします！   hashとは hash(ハッシュ)とは、キーと値という2つのデータがペアになった集合体のことです。 一般的には「連想配列」と呼ぶこともあります。 hashでキーと値を関連づけておくと、そのhashにキーを与えると関連づけた値を得ることが可能です。   例えば、’オレンジ’と’orange’を関連づけておくと、 hash から’オレンジ’を使って’orange’を取り出すことができるでしょう。 hashは、以下のようにキーと値を関連づけて表記します。 {'キー' => '値'} 例えば、冒頭の例では、 {'orange' => 'オレンジ'} となります。 ‘orange’がキーで、’オレンジ’が値です。 Webシステム開発の世界でよく使う「JSON(JavaScript Object Notation)形式」のテキストデータもキーと値を関連づけたデータです。 キーに関連して長さが不特定のデータを何でも関連づけられるので、WebやAIの世界でもよく使う「非定形データ」を表すのに向いています。   初期化する必要性 hashは、中身を初期化しないと使うことができません。 他の変数や配列などが初期化しないと使えないことと同じであるものの、初期化の方法は少し特殊です。   [PR] フロントエンドで副業する学習方法を動画で公開中hashを初期化する方法 要素のない空のhashを初期化したい場合には、以下のように記述しましょう。 result = Hash.new 要素が無い空のhashがresultに代入されます。   putsで空のhashを表示すると、下記のように記述できます。 {} hashは、{}で括られて表示されます。   hashに要素を追加するには、以下のように記述しましょう。 hashのオブジェクト.store(キー,値) storeメソッドを使って、追加したいキーと値を指定します。   newを使わずにいきなりhashのキーと値を指定して初期化することもできます。 result = {キー => 値} キーと値の要素を持つhashが生成されます。   実際に書いてみよう newとstoreメソッドを使うと、以下のように書けます。 result = Hash.new result.store('orange', 'オレンジ') puts result 実行すると以下のように表示されるでしょう。 {"orange"=>"オレンジ"}   要素を複数にしたい時は、storeを複数回実行します。 result = Hash.new result.store('orange', 'オレンジ') result.store('lemon', 'レモン') puts result コードを実行すると、 {"orange"=>"オレンジ", "lemon"=>"レモン"} と表示されます。   storeメソッドを使わない場合は、以下のように書けます。 result = {'orange' => 'オレンジ'} puts result 実行すると、 {"orange"=>"オレンジ"} と表示されます。   要素を複数にしたい時は、要素を列挙していきます。 result = {'orange' => 'オレンジ', 'lemon' => ' レモン'} puts result 実行すると、 {"orange"=>"オレンジ", "lemon"=>"レモン"} と表示されるでしょう。   キーのシンボル指定 キーに指定できるのは、文字列以外にも「シンボル」があります。シンボルとは、コロン(:)をつけた文字列です。 :文字列 キーにシンボルを利用すると、hashは以下のように初期化できます。 result = {:orange => 'オレンジ', :lemon => 'レモン'} puts result あるいは、下記のように記述します。 result = {orange:
Ruby

連想配列を身につけよう！Ruby on RailsのHashの使い方【初心者向け】

RubyのフレームワークRuby on RailsでのHashの扱い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次ハッシュとはlocation.hashプロパティとはlocation.hashプロパティの使い方location.hrefでURLのハッシュを取得する方法実際に書いてみようまとめ筆者プロフィール Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。   Hashではあるキー情報に対して、データを格納することができるものです。 今回はそのHashを使ってデータを扱う方法を説明します。 Hashとは Hashは連想配列とも言いますが、あるキー情報に対して、何かしらのデータを紐付けて格納できます。 例えば机にひきだしが2つあったとします。 1つ目のひきだしにAのシールを貼り、2つ目のひきだしにBのシールを貼り、それぞれAのひきだし、Bのひきだしとします。 Aのひきだしには鉛筆を、Bのひきだしにはノートを入れます。   ここで質問です。 Aのひきだしには何が入っているでしょうか。 答えは鉛筆が入っています。   このようにA(キー情報)には鉛筆(データ)といったイメージでデータの格納の仕方をするのが、Hashになります。   Hashの作成方法 Hashは以下のように作成することができます。 sample = {} これで空っぽのHashが作成されました。 最初から何かしらの値を設定したい場合は、以下のように書きます。 sample = { name: "tarou" } name というキーに対して、文字列の”tarou”が格納された状態です。   [PR] フロントエンドで副業する学習方法を動画で公開中Hashの基本的な使い方 Hashの基本的な使い方として、４つの操作をご紹介します。 要素の取得 要素の追加 要素の更新 要素の削除 それぞれの操作について以下で解説します。 要素の取得 要素(Hashに設定した値)を取得する場合は、以下のように書きます。 sample = { name: "tarou" } p sample[:name] => "tarou" name というキーを参照すると、”tarou”という文字列が取得できます。 要素の追加 要素を追加したい場合は、以下のように書きます。 sample[:email] = "example@example.com" p sample[:email] => "example@example.com" これでemail というキーに”example@example.com”という文字列を追加できました。 要素の更新 既に追加されている要素を更新する場合は、以下のように書きます。 sample = { name: "tarou" } sample[:name] = "zirou" p sample[:name] => "zirou" name というキーに格納されている”tarou”を”zirou”に更新できました。 要素の削除 要素を削除する場合は、deleteメソッドを使用します。 sample = { name: "tarou" } sample.delete(:name) p sample[:name] => nil これでname というキーに格納された要素は削除されました。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
Ruby

JavaScriptでlocationオブジェクトを使う方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでlocationオブジェクトを使う方法について解説します。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   大石ゆかり 田島メンター！locationオブジェクトというのは何でしょうか？ 田島悠介 ブラウザで表示したWebページのアドレス（URL）に関する情報が格納されているんだ。また、指定したアドレスに移動したりもできるんだよ。 大石ゆかり どのような書き方があるのですか？ 田島悠介 例を見ながら説明していくね！   locationオブジェクトとは プログラムを作っていると、Webページのアドレス（URL）に関する情報を取得したり、指定したアドレスに移動したい場面があるのではないでしょうか。そんな時に便利なのが、locationオブジェクトです。 URLとは、Uniform Resource Locator の略で、インターネット上でのページの「住所＝アドレス」のことを指します。URLには、情報の種類やサーバ名、ポート番号やファイル名など、プログラミングで使える様々な情報が格納されています。 それらの情報が格納されているのがlocationオブジェクトです。 実際の開発現場では、URLからパラメータを取得したり、指定したアドレスに移動したりする時に使います。   locationオブジェクトの書き方 基本的なプログラムは以下のようになります。locationキーワードの後ろに「.」ピリオドを付けて関数名を記載します。 主な関数については次章で紹介します。 location.関数名   [PR] フロントエンドで副業する学習方法を動画で公開中locationオブジェクトの主な使い方 この記事では、locationオブジェクトの主な使い方について解説します。 まずは、簡単な関数を用意します。 <!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <script> // locationオブジェクトを表示 console.log(location); // urlを取得 var url = location.href; console.log(url); // プロトコルを取得 var protocol =
JavaScript

Rubyでハッシュオブジェクトからキーや値を取り出す方法【初心者向け】

Rubyでハッシュオブジェクトからキーや値を取り出す方法について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。   田島悠介 今回は、Rubyに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ハッシュオブジェクトからキーや値を取り出す方法について詳しく説明していくね！ 大石ゆかり お願いします！   ハッシュオブジェクトからキーを取り出す方法 ハッシュはHashクラスのオブジェクトでキーと値とを組み合わせたデータを管理します。 ハッシュオブジェクトでキーだけを取り出したい場合は、Hashクラスのkeysメソッドを使います。 “オブジェクト.keys” でキーを取り出すことができます。   ハッシュオブジェクトから値を取り出す方法 続いて、ハッシュオブジェクトから値だけを取り出したい場合です。Hashクラスのvaluesメソッドを使います。 “オブジェクト.values” で値を取り出すことができます。   ハッシュオブジェクトからキーと値を取り出す方法 今度はキーと値を両方取り出す場合です。こちらはHash クラスのto_aメソッドを使います。 “オブジェクト.to_a” でキーと値の両方を取り出せます。   [PR] フロントエンドで副業する学習方法を動画で公開中実際に書いてみよう さて、ここからは実際にコードを書いてみましょう。まずハッシュオブジェクトを作成してみましょう!! hash = {}  #=> まずは空のハッシュを作成 hash["経済学"] = 80  #=>キーが経済学　値は80 hash["財政学"] = 70  #=> キーは財政学　値は70 hash["会計学"] = 60  #=> キーは会計学　値は60 p hash  #=> {"経済学"=>80, "財政学"=>70, "会計学"=>60} ハッシュオブジェクトが作成できましたね!! こちらは以下の場合でも同じハッシュオブジェクトが作成できます。 hash = {"経済学" => 80, "財政学" => 70, "会計学" => 60} p hash  #=> {"経済学"=>80, "財政学"=>70, "会計学"=>60}   どちらでも同じハッシュですのでお好きな方で作成してみてください。   さて、ここから、このハッシュオブジェクトを使ってキーを取り出してみましょう。キーの取り出し方は”　オブジェクト.keys”　でしたね!! key = hash.keys #=> keyという変数にハッシュオブジェクトから取り出したキーを代入 p key  #=> keyの内容を表示してみましょう!! #=> ["経済学", "財政学", "会計学"] のように配列で表示されます。   次は値を取り出してみましょう。値の取り出し方は”　オブジェクト.values”　でしたね。   value = hash.values #=> valueという変数にハッシュオブジェクトから取り出した値を代入 p value   #=> valueの内容を表示してみましょう!! #=>  [80, 70, 60]のように配列で表示されます。   最後にキーを値の両方を取り出してみましょう。   array = hash.to_a #=>
Ruby

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法を現役エンジニアが解説【初心者向け】