.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. JavaScriptのハッシュとは?使い方や効率的なキー取得方法を解説

JavaScriptのハッシュとは?使い方や効率的なキー取得方法を解説

  • Javascript
  • プログラミング言語
  • 開発環境(IDE)
公開日時:   更新日時:
JavaScriptのハッシュとは?使い方や効率的なキー取得方法を解説
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>
    システム
    エンジニア
    javascriptの連想配列ってどんな配列なのですか?
    プロジェクト
    マネージャー
    javascriptでの連想配列は「キー」と「値」のペアによるデータ構造のことを言います。

    JavaScriptのハッシュ(連想配列)とは?


    JavaScriptの配列は、例えば次のように宣言して参照します。

    JavaScriptの配列の各要素はデータ型が何であっても構いません。配列の中に配列があるという場合でも、可能になります。例えば、次のようなコードが存在します。

    JavaScriptでの配列の参照は、必ずインデックスで行います。書き方としては、以下のようになります。

    つまり、JavaScriptのハッシュ(連想配列)とは、インデックスと言う数字ではなく、文字列で参照できるようになっているデータ型のことになります。

    JavaScriptでハッシュを使うメリット


    JavaScriptでハッシュ(連想配列)を宣言するには以下のようにします。配列との違いは、{}で囲むという点です。

    あるいは、以下のように書いても連想配列は宣言できます。どちらで書いても同じ意味になるので、双方で試してみてください。

    JavaScriptでのハッシュの使い方6つ


    上記で宣言した連想配列arrayにJavaScriptでアクセスするには、以下のように書きます。

    文字列でアクセスしていることが確認できます。これが、ハッシュ(連想配列)です。インデックスでアクセスする配列との違いは、ここにあります。

    1:JavaScriptでのハッシュの宣言方法

    JavaScriptでハッシュ(連想配列)を宣言するには以下のようにします。配列との違いは、{}で囲むという点です。

    あるいは、以下のように書いてもハッシュ(連想配列)は宣言できます。どちらで書いても同じ意味になるので、双方で試してみてください。

    2:JavaScriptでハッシュにアクセスする方法

    上記で宣言したハッシュ(連想配列)arrayにJavaScriptでアクセスするには、以下のように書きます。

    文字列でアクセスしていることが確認できます。これが、ハッシュ(連想配列)です。インデックスでアクセスする配列との違いは、ここにあります。

    3:ハッシュとメソッドはどちらを使ってもよい

    実際にJavaScriptでは、下記のように書いた場合でもハッシュ(連想配列)にアクセスできます。

    この書き方を見て、ピンと来る方もいるでしょう。JavaScriptでは、ハッシュ(連想配列)とメソッドは同じものなのです。そのため、どちらで書いても大丈夫です。

    ハッシュ(連想配列)にアクセスする文字列のことを「キー」と言いますが、キーが外部から与えられ、どのようなキーでアクセスするのかが分からないときは、ハッシュ(連想配列)に文字列でアクセスします。
    自分で明示的にキーを使用するときは、メソッドでアクセスするのがよいでしょう。

    一般的に、使用するキーによりメソッド、もしくは文字列でアクセスをするというような分け方がされています。

    4:連想配列の要素の削除

    ハッシュ(連想配列)の要素を削除するには、deleteを使います。下記のようにして、キーを指定し、削除します。

    5:ハッシュを追加する方法と注意点

    ハッシュ(連想配列)を追加する方法は以下の5つの方法があります。それぞれを順に追って解説していきます。

    ・ドット表記
    ・ブラケットを記述
    ・pushは使えない
    ・ハッシュを並び替える方法(ハッシュが1つだけでsortがある場合と、ハッシュが複数ある場合)

    ドット表記の場合

    JavaScript のオブジェクトは、自身に関連付けられたプロパティを持ちます。オブジェクトのプロパティは、オブジェクトに関連付けられている変数と捉えることができます。

    オブジェクトのプロパティは、オブジェクトに属するものという点を除けば、基本的に通常の JavaScript 変数と同じようなものです。オブジェクトのプロパティは、オブジェクトの特性を定義します。オブジェクトのプロパティには、単純なドット表記でアクセスします。

    ブラケットを記述する場合

    JavaScript オブジェクトのプロパティは、ブラケット (角括弧) 記述法でもアクセスすることができます (詳しくはプロパティのアクセサーを参照してください)。個々のプロパティが文字列値と関連付けられてアクセスできるため、オブジェクトは連想配列と呼ばれることがあります。ですから例えば、myCar オブジェクトのプロパティに次のようにアクセスできます。

    pushは使えない

    配列には、pushメソッドは使用できません。その理由は、push()メソッドが、あくまで配列を組み込むメソッドであるためです。しかし、push()を使って、配列の中に配列を作ることはできます。

    実行結果は以下の通りです。

    6:ハッシュを並び替える方法

    続いてハッシュを並び替える方法についてご紹介いたします。大きく分けて、2点に分かれてます。

    ・ハッシュが1つだけでsortがある場合
    ・ハッシュが複数ある場合

    以上2点をご紹介します。

    ハッシュが1つだけでsortがある場合

    sort() メソッドは、配列の要素を in place でソートします。既定のソート順は昇順で、要素を文字列に変換してから、UTF-16 コード単位の値の並びとして比較します。

    ハッシュが複数ある場合

    続いて、複数のあるハッシュを並び替えるコードです。

    ハッシュから効率的にキーを取得する方法


    ハッシュから効率的にキーを取得する方法には、以下の2つがあります。

    ・for…in文
    ・foreach文

    いずれも繰り返し文の一種である、for文とforeach文が、この2つの内容が該当しており、ご紹介させていただきます。

    for … in文の使い方


    ハッシュ(連想配列)から効率的にキーを取得するための手段として、for … in文があります。次のようにして使います。

    上記の結果は以下のようになります。

    for … inで取得できるのは、あくまでも「キー」だけということには注意が必要です。値を取得するためには、取得したキーでアクセスします。

    そして、for … inは順番を保証しない、ということも注意してください。定義した順番にキーが返ってくるとは限りません。

    forEach文の使い方

    forEach文を使うと、連想配列に対しての処理がよりスマートに書くことができます。例えば、以下のサンプルコードを実行すると、下記のような結果になります。

    orEachは、「配列の各要素に対してこの関数の処理を実行せよ」という命令です。連想配列なので、そのままでは使うことができません。Object.keys(連想配列)と書いて「キーの配列」を取り出します。その取り出したキーの配列に対して処理を行うわけです。

    取り出したキーの配列に対して以下のように書くと、「変数」にキーが入り、thisに連想配列が入って関数内で使えるようになります。

    .forEach(function(変数) {
    関数の処理
    }, 連想配列);

    システム
    エンジニア
    コードには、多くの種類があるのですね。
    プロジェクト
    マネージャー
    これらのコードを使いこなすことで、効率のいい開発をすることができます。

    JavaScriptでハッシュを使い可読性の高いコードを書こう


    JavaScriptで開発するときは、連想配列を使って可読性の高いコードを書きましょう。いつでも連想配列を使えばいい、というものではありません。シンプルな配列の方がいい場合も、多々あります。

    シンプルな配列を使うべきところは、for(;;)が使えるところです。

    例えば、

    と書いて繰り返し処理を行うのは、実にシンプルで強力な手法です。

    もちろんですが、連想配列は添え字が数ではないため、lengthメソッドは使えません。lengthメソッドを使い、繰り返し処理を書くべき場面は多々あります。

    しかし、先ほども書いたことですが、要素の意味が分からなくなる場合は、連想配列を使いましょう。

    キーを取り出すには、「for … in」や「forEach」があります。覚えてしまえばこれほど便利なものもありません。連想配列を使いこなし、可読性の高いコードを書き、効率良くJavaScriptで開発をしましょう。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job