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

Javascript
プログラミング言語
開発環境(IDE)

公開日時: 2020-07-03 　更新日時: 2022-06-13

この記事でわかること

システム エンジニア: javascriptの連想配列ってどんな配列なのですか？

プロジェクト マネージャー: javascriptでの連想配列は「キー」と「値」のペアによるデータ構造のことを言います。

JavaScriptのハッシュ（連想配列）とは？

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


array0 = [‘a’,’b’,’c’,’d’,’e’];
console.log(array0[0]); → a
array1 = [0,1,2,3,4];
console.log(array1[0]); → 0

array0 = [‘a’,’b’,’c’,’d’,’e’];

console.log(array0[0]); → a

array1 = [0,1,2,3,4];

console.log(array1[0]); → 0

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


array = [
[0,”a”],
[1,”b”],
[2,”c”] ];

array = [

[0,”a”],

[1,”b”],

[2,”c”] ];

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


array[0]

array[0]

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

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

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


array = { name:”JS太郎”, address:”東京都”, age:48 };

array = { name:”JS太郎”, address:”東京都”, age:48 };

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


array = {};
array[“name”] = “JS太郎”;
array[“address”] = “東京都”;
array[“age”] = 48;

array = {};

array[“name”] = “JS太郎”;

array[“address”] = “東京都”;

array[“age”] = 48;

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

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


console.log(array[“name”]); → JS太郎
console.log(array[“address”]); → 東京都
console.log(array[“age”]); → 48

console.log(array[“name”]); → JS太郎

console.log(array[“address”]); → 東京都

console.log(array[“age”]); → 48

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

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

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

array = { name:”JS太郎”, address:”東京都”, age:48 };

1	array = { name:”JS太郎”, address:”東京都”, age:48 };

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

array = {};
array[“name”] = “JS太郎”;
array[“address”] = “東京都”;
array[“age”] = 48;

array = {};

array[“name”] = “JS太郎”;

array[“address”] = “東京都”;

array[“age”] = 48;

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

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


console.log(array[“name”]); → JS太郎
console.log(array[“address”]); → 東京都
console.log(array[“age”]); → 48

console.log(array[“name”]); → JS太郎

console.log(array[“address”]); → 東京都

console.log(array[“age”]); → 48

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

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

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


console.log(array.name); → JS太郎
console.log(array.address) → 東京都
console.log(array.age) → 48

console.log(array.name); → JS太郎

console.log(array.address) → 東京都

console.log(array.age) → 48

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

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

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

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

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


array = { name:”JS太郎”, address:”東京都”, age:48 };
delete(“address”);

array = { name:”JS太郎”, address:”東京都”, age:48 };

delete(“address”);

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

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

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

ドット表記の場合

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

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


objectName.propertyName

objectName.propertyName

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

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


myCar['make'] = 'Ford';
myCar['model'] = 'Mustang';
myCar['year'] = 1969;

myCar['make'] = 'Ford';

myCar['model'] = 'Mustang';

myCar['year'] = 1969;

pushは使えない

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


var obj = { name:'太郎', age:30 };
obj.push( ['花子', 28] );
console.log( obj );

var obj = { name:'太郎', age:30 };

obj.push( ['花子', 28] );

console.log( obj );

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


Uncaught TypeError: obj.push is not a function

Uncaught TypeError: obj.push is not a function

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

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

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

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

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

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


const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

const months = ['March', 'Jan', 'Feb', 'Dec'];

months.sort();

console.log(months);

// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];

array1.sort();

console.log(array1);

// expected output: Array [1, 100000, 21, 30, 4]

ハッシュが複数ある場合

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


var sort_by;

(function() {
    // utility functions
    var default_cmp = function(a, b) {
            if (a == b) return 0;
            return a < b ? -1 : 1;
        },
        getCmpFunc = function(primer, reverse) {
            var dfc = default_cmp, // closer in scope
                cmp = default_cmp;
            if (primer) {
                cmp = function(a, b) {
                    return dfc(primer(a), primer(b));
                };
            }
            if (reverse) {
                return function(a, b) {
                    return -1 * cmp(a, b);
                };
            }
            return cmp;
        };

    // actual implementation
    sort_by = function() {
        var fields = [],
            n_fields = arguments.length,
            field, name, reverse, cmp;

        // preprocess sorting options
        for (var i = 0; i < n_fields; i++) {
            field = arguments[i];
            if (typeof field === 'string') {
                name = field;
                cmp = default_cmp;
            }
            else {
                name = field.name;
                cmp = getCmpFunc(field.primer, field.reverse);
            }
            fields.push({
                name: name,
                cmp: cmp
            });
        }

        // final comparison function
        return function(A, B) {
            var a, b, name, result;
            for (var i = 0; i < n_fields; i++) {
                result = 0;
                field = fields[i];
                name = field.name;

                result = field.cmp(A[name], B[name]);
                if (result !== 0) break;
            }
            return result;
        }
    }
}());

var sort_by;

(function() {

// utility functions

var default_cmp = function(a, b) {

if (a == b) return 0;

return a < b ? -1 : 1;

getCmpFunc = function(primer, reverse) {

var dfc = default_cmp, // closer in scope

cmp = default_cmp;

if (primer) {

cmp = function(a, b) {

return dfc(primer(a), primer(b));

};

}

if (reverse) {

return function(a, b) {

return -1 * cmp(a, b);

};

}

return cmp;

};

// actual implementation

sort_by = function() {

var fields = [],

n_fields = arguments.length,

field, name, reverse, cmp;

// preprocess sorting options

for (var i = 0; i < n_fields; i++) {

field = arguments[i];

if (typeof field === 'string') {

name = field;

cmp = default_cmp;

}

else {

name = field.name;

cmp = getCmpFunc(field.primer, field.reverse);

}

fields.push({

name: name,

cmp: cmp

});

}

// final comparison function

return function(A, B) {

var a, b, name, result;

for (var i = 0; i < n_fields; i++) {

result = 0;

field = fields[i];

name = field.name;

result = field.cmp(A[name], B[name]);

if (result !== 0) break;

}

return result;

}

}());

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

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

・for…in文
・foreach文

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

for … in文の使い方

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


array = { name:”JS太郎”, address:”東京都”, age:48 };
for (key in array) {
console.log(key);
console.log(array[key]);
}

array = { name:”JS太郎”, address:”東京都”, age:48 };

for (key in array) {

console.log(key);

console.log(array[key]);

}

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


name
JS太郎
address
東京都
age
48

name

JS太郎

address

東京都

age

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

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

forEach文の使い方

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


array = { name:”JS太郎”, address:”東京都”, age:48 };
Object.keys(array).forEach(function(item) {
console.log(item + “:” + this[item]);
}, array);

name:JS太郎
address:東京都
age:48

array = { name:”JS太郎”, address:”東京都”, age:48 };

Object.keys(array).forEach(function(item) {

console.log(item + “:” + this[item]);

}, array);

name:JS太郎

address:東京都

age:48

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

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

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

システム エンジニア: コードには、多くの種類があるのですね。

プロジェクト マネージャー: これらのコードを使いこなすことで、効率のいい開発をすることができます。

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

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

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

例えば、

array = [“a”, “b”, “c”];に対して、for(i=0; i<array.length; i++)

1	array = [“a”, “b”, “c”];に対して、for(i=0; i<array.length; i++)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

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

JavaScriptのハッシュ（連想配列）とは？

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

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

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

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

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

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

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

ドット表記の場合

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

pushは使えない

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

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

ハッシュが複数ある場合

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

for … in文の使い方

forEach文の使い方

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

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

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

充実した研修制度

資格取得を応援

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

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

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

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

JavaScriptのハッシュ（連想配列）とは？

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

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

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

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

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

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

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

ドット表記の場合

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

pushは使えない

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

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

ハッシュが複数ある場合

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

for … in文の使い方

forEach文の使い方

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

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

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

充実した研修制度

資格取得を応援

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

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

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

Visual StudioにESLintを導入してJavaScriptのコードをチェックする

jQueryでCSSのスタイルを変更する方法

jQuery UIを使ってダイアログ表示を実装する方法

JavaScriptの配列の宣言とは？様々な生成方法を紹介

JavaScriptでの連想配列の使い方！多次元配列と連想配列の違い