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と記述することで使うことができます。

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

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

記事を検索

関連するキーワード

関連する記事

JavaScriptでcreateElementメソッドを使いHTMLを動的生成する方法を現役エンジニアが解説

JavaScriptでHTMLを動的生成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptのhiddenオブジェクトの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのhiddenオブジェクトの使い方について解説します。 ユーザーに見えないようデータを保持しフォームで送信することができる方法を、実際...
JavaScript

プラグインですぐ実装できる！jQueryで検索機能を追加する方法【初心者向け】

JavaScriptのライブラリであるjQueryで検索機能を追加する方法を紹介します。 今回は、誰でも手軽に検索機能を実装できるようにプラグインを活用し...
JavaScript

JavaScriptの無名関数について現役エンジニアが解説【初心者向け】

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

JavaScriptで画像切り替えを行う方法を現役エンジニアが解説【初心者向け】

JavaScriptで画像切り替えを行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 J...
JavaScript

JavaScriptで処理を終了する方法を現役エンジニアが解説【初心者向け】

JavaScriptで処理を終了する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &n...
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つ）を代入することで、削除となります。 実際に書いてみよう hashのあるURLのページを開いて、hashを削除した場合の動作を見てみましょう。今回は、下記のMDNのリファレンスページのリンクを使って説明します。 このURLにはhashとして#Examplesが付いています。これにより、ページの中断にあるExamplesの項目の位置にスクロールされた状態で表示します。 MDNのLocation:hashのページ ページを表示したら、ブラウザの開発ツールなどを開いて下記のJavaScriptを実行してみてください。 location.hash = ''; これでhash値が削除されました。 ページ内遷移がおこなわれ、ブラウザのURLから#Examplesがなくなり、ページの一番上が表示されたことが確認できました。同様にhash値をセットすることで、ページのその場所に移動することもできます。 下記のJavaScriptを実行してみてください。 location.hash = 'Examples' ExamplesをセットするとURLにhashが追加されページのExamplesの場所に移動します。 まとめ Locationオブジェクトのhash値を削除する方法を紹介しました。 hash値を操作すると、hash値に対応したidの場所へページ内遷移がおこなわれます。ユーザーに情報を探しやすく提供するのに有効です。 筆者プロフィール 横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
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 というキーに格納された要素は削除されました。   Hashに利用できるメソッド Hashに利用できるメソッドとして、３つのメソッドをご紹介します。 eachメソッド lengthメソッド empty?メソッド それぞれのメソッドについて以下で解説します。 eachメソッド eachメソッドを使用するとHashに格納されている要素を全て処理できます。 sample = { name: "tarou" , email: "example@example.com"} sample.each do |key, value| p
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

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

Ruby on Railsのhashをsortする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Ruby講座の内容をもとに紹介しています。   田島悠介 今回は、Rubyに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Ruby on Railsのhashをsortする方法について詳しく説明していくね！ 大石ゆかり お願いします！   Ruby on Railsの hashのsortとは hashのsortとは、hashの中身を条件にあった順に並べ替えるためのメソッドです。 hashについては、Ruby on Railsでhashを初期化する方法を現役エンジニアが解説【初心者向け】の記事も合わせてご覧ください。   sortを使う場面や利用メリット hashは要素を追加しても集合を自動で並べ替えてくれません。実際にhashに要素を設定してみると、設定した順になっていることがわかります。 例えば、 result = {orange: 'オレンジ', lemon: 'レモン', peach: 'ピーチ', apple: 'アップル'} puts result このプログラムは、hashを定義して表示するだけのプログラムです。実行すると以下のように表示されます。設定した順に並んでいます。 {:orange=>"オレンジ", :lemon=>"レモン", :peach=>"ピーチ", :apple=>"アップル"} しかし、場合によってはhashのキーをアルファベット順にしたり、hashの値をアルファベット順にしたりして並べ替えた方が、処理上都合がいい時があります。 sortを使うと並べ替えが比較的簡単にできます {:apple 'アップル', :lemon 'レモン', :orange 'オレンジ', :peach 'ピーチ'} こちらは、キーをアルファベット順に並べ替えてから表示した例です。   [PR] コーディングで副業する方法とはhashをsortする方法 キーで昇順／降順にする 昇順／降順とは何だったでしょうか。先におさらいしておきます。 例えば、アルファベットのaから順にzの順に並べることを昇順と言います。逆にzからaの順に並べることを降順と言います。文字は全て文字コードを持っていて、文字コードの小さい順が昇順、大きい順が降順です。 hashをキーで昇順にsortします。以下のようにします。 ハッシュ.sort.to_h 実はsortの結果はarray(配列)となりますので、hashに変換するためにto_hメソッドを使います。 次のような少し複雑な方法もあります。 ハッシュ.sort {|(k1, v1), (k2, v2)| k1 k2 }.to_h k1とk2がキー、v1とv2が値です。k1 k2で、キーで昇順の意味になります。 hashをキーで降順にsortします。以下のようにします。 ハッシュ.sort.reverse.to_h こちらも、次のような少し複雑な方法もあります。 ハッシュ.sort {|(k1, v1), (k2, v2)| k2 k1 }.to_h k2 k1で、キーで降順の意味になります。   値で昇順／降順にする 値でsortするには、少し複雑な方法を使います。 値で昇順にします。以下のようにします。 ハッシュ.sort {|(k1, v1), (k2, v2)|
Ruby

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

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