TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法を現役エンジニアが解説【初心者向け】
icon
icon
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分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

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

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のメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 Jav...
JavaScript

JavaScriptのfor-in文での要素の取り出し順番について現役エンジニアが解説【初心者向け】

JavaScriptのfor-in文での要素の取り出し順番について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説しま...
JavaScript

JavaScriptでページ遷移する方法を現役エンジニアが解説【初心者向け】

JavaScriptでページ遷移する方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けの...
JavaScript

JavaScriptで戻るボタンのイベントハンドラを実装する方法を現役エンジニアが解説【初心者向け】

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

JavaScriptのテキストエディタの選び方を現役エンジニアが解説【初心者向け】

JavaScriptのテキストエディタの選び方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

JavaScriptにおけるアンダースコアの意味を現役エンジニアが解説【初心者向け】

JavaScriptにおけるアンダースコアの意味について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入...
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

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

Ruby on Railsでhashとselectメソッドを使う方法を現役エンジニアが解説【初心者向け】

Ruby on Railsでhashとselectメソッドを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Ruby講座の内容をもとに紹介しています。 田島悠介 今回は、Rubyに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Ruby on Railsでhashとselectメソッドを使う方法について詳しく説明していくね！ 大石ゆかり お願いします！   Ruby on Railsのselectとは？ selectは、hashやarrayから条件にあった要素だけを取り出すためのメソッドです。 hashにselectを使う場合には、取り出したいhashの値の条件やキーの条件を指定します。selectは配列にも使えますが、ここではhashに使う方法をご紹介します。 hashとselectの違いとは 前述の通り、selectはメソッドです。hashは、キーと値をペアで要素として持つ集合です。 selectはhashやarray用に用意されたメソッドです。selectを使うと、hashから順にペアを取り出して処理したり、指定した条件に合ったペアだけを新たなhashとして取り出すことができます。 [PR] フロントエンドで副業する学習方法を動画で公開中selectを使う方法 selectは、以下のようにして使います。 対象のhash.select {|k, v| [行いたい処理]} あるいは 対象のhash.select do |k, v| [行いたい処理] end とします。書き方が違うだけで同じ処理となります。この使い方だとどちらもeachを使った時と同じ動作になります。また、以下のような使い方もあります。 対象のhash.select {|k, v| [条件]} 対象のhashから、条件がtrueになるペアだけを含む新たなhashを戻り値として取得できます。こちらはeachの時とは違う動作になります。 実際に書いてみよう fruits = { 'Apple' => 150, 'Banana' => 100, 'Orange' => 200, 'Peach' => 300 } fruits.select {|k, v| puts "#{k} : #{v}" } このプログラムを実行すると、 Apple : 150 Banana : 100 Orange : 200 Peach : 300 が表示されます。kとvのペアに対して処理が実行されます。 fruits = { 'Apple' => 150, 'Banana'
Ruby

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

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