JavaScriptのハッシュとは？使い方や効率的なキー取得方法を解説
- システム
エンジニア - javascriptの連想配列ってどんな配列なのですか？
- プロジェクト
マネージャー - javascriptでの連想配列は「キー」と「値」のペアによるデータ構造のことを言います。
JavaScriptのハッシュ（連想配列）とは？
JavaScriptの配列は、例えば次のように宣言して参照します。
|
1
2
3
4
5
6
|
array0 = [‘a’,’b’,’c’,’d’,’e’];
console.log(array0[0]); → a
array1 = [0,1,2,3,4];
console.log(array1[0]); → 0
|
JavaScriptの配列の各要素はデータ型が何であっても構いません。配列の中に配列があるという場合でも、可能になります。例えば、次のようなコードが存在します。
|
1
2
3
4
5
6
|
array = [
[0,”a”],
[1,”b”],
[2,”c”] ];
|
JavaScriptでの配列の参照は、必ずインデックスで行います。書き方としては、以下のようになります。
|
1
2
3
|
array[0]
|
つまり、JavaScriptのハッシュ(連想配列)とは、インデックスと言う数字ではなく、文字列で参照できるようになっているデータ型のことになります。
JavaScriptでハッシュを使うメリット
JavaScriptでハッシュ(連想配列)を宣言するには以下のようにします。配列との違いは、{}で囲むという点です。
|
1
2
3
|
array = { name:”JS太郎”, address:”東京都”, age:48 };
|
あるいは、以下のように書いても連想配列は宣言できます。どちらで書いても同じ意味になるので、双方で試してみてください。
|
1
2
3
4
5
6
|
array = {};
array[“name”] = “JS太郎”;
array[“address”] = “東京都”;
array[“age”] = 48;
|
JavaScriptでのハッシュの使い方6つ
上記で宣言した連想配列arrayにJavaScriptでアクセスするには、以下のように書きます。
|
1
2
3
4
5
|
console.log(array[“name”]); → JS太郎
console.log(array[“address”]); → 東京都
console.log(array[“age”]); → 48
|
文字列でアクセスしていることが確認できます。これが、ハッシュ(連想配列)です。インデックスでアクセスする配列との違いは、ここにあります。
1：JavaScriptでのハッシュの宣言方法
JavaScriptでハッシュ(連想配列)を宣言するには以下のようにします。配列との違いは、{}で囲むという点です。
|
1
|
array = { name:”JS太郎”, address:”東京都”, age:48 };
|
あるいは、以下のように書いてもハッシュ(連想配列)は宣言できます。どちらで書いても同じ意味になるので、双方で試してみてください。
|
1
2
3
4
|
array = {};
array[“name”] = “JS太郎”;
array[“address”] = “東京都”;
array[“age”] = 48;
|
2：JavaScriptでハッシュにアクセスする方法
上記で宣言したハッシュ(連想配列)arrayにJavaScriptでアクセスするには、以下のように書きます。
|
1
2
3
4
5
|
console.log(array[“name”]); → JS太郎
console.log(array[“address”]); → 東京都
console.log(array[“age”]); → 48
|
文字列でアクセスしていることが確認できます。これが、ハッシュ(連想配列)です。インデックスでアクセスする配列との違いは、ここにあります。
3：ハッシュとメソッドはどちらを使ってもよい
実際にJavaScriptでは、下記のように書いた場合でもハッシュ(連想配列)にアクセスできます。
|
1
2
3
4
5
|
console.log(array.name); → JS太郎
console.log(array.address) → 東京都
console.log(array.age) → 48
|
この書き方を見て、ピンと来る方もいるでしょう。JavaScriptでは、ハッシュ(連想配列)とメソッドは同じものなのです。そのため、どちらで書いても大丈夫です。
ハッシュ(連想配列)にアクセスする文字列のことを「キー」と言いますが、キーが外部から与えられ、どのようなキーでアクセスするのかが分からないときは、ハッシュ(連想配列)に文字列でアクセスします。
自分で明示的にキーを使用するときは、メソッドでアクセスするのがよいでしょう。
一般的に、使用するキーによりメソッド、もしくは文字列でアクセスをするというような分け方がされています。
4：連想配列の要素の削除
ハッシュ(連想配列)の要素を削除するには、deleteを使います。下記のようにして、キーを指定し、削除します。
|
1
2
3
4
|
array = { name:”JS太郎”, address:”東京都”, age:48 };
delete(“address”);
|
5：ハッシュを追加する方法と注意点
ハッシュ(連想配列)を追加する方法は以下の5つの方法があります。それぞれを順に追って解説していきます。
・ドット表記
・ブラケットを記述
・pushは使えない
・ハッシュを並び替える方法(ハッシュが１つだけでsortがある場合と、ハッシュが複数ある場合)
ドット表記の場合
JavaScript のオブジェクトは、自身に関連付けられたプロパティを持ちます。オブジェクトのプロパティは、オブジェクトに関連付けられている変数と捉えることができます。
オブジェクトのプロパティは、オブジェクトに属するものという点を除けば、基本的に通常の JavaScript 変数と同じようなものです。オブジェクトのプロパティは、オブジェクトの特性を定義します。オブジェクトのプロパティには、単純なドット表記でアクセスします。
|
1
2
3
|
objectName.propertyName
|
ブラケットを記述する場合
JavaScript オブジェクトのプロパティは、ブラケット (角括弧) 記述法でもアクセスすることができます (詳しくはプロパティのアクセサーを参照してください)。個々のプロパティが文字列値と関連付けられてアクセスできるため、オブジェクトは連想配列と呼ばれることがあります。ですから例えば、myCar オブジェクトのプロパティに次のようにアクセスできます。
|
1
2
3
4
5
|
myCar['make'] = 'Ford';
myCar['model'] = 'Mustang';
myCar['year'] = 1969;
|
pushは使えない
配列には、pushメソッドは使用できません。その理由は、push()メソッドが、あくまで配列を組み込むメソッドであるためです。しかし、push()を使って、配列の中に配列を作ることはできます。
|
1
2
3
4
5
|
var obj = { name:'太郎', age:30 };
obj.push( ['花子', 28] );
console.log( obj );
|
実行結果は以下の通りです。
|
1
2
3
|
Uncaught TypeError: obj.push is not a function
|
6：ハッシュを並び替える方法
続いてハッシュを並び替える方法についてご紹介いたします。大きく分けて、2点に分かれてます。
・ハッシュが1つだけでsortがある場合
・ハッシュが複数ある場合
以上2点をご紹介します。
ハッシュが1つだけでsortがある場合
sort() メソッドは、配列の要素を in place でソートします。既定のソート順は昇順で、要素を文字列に変換してから、UTF-16 コード単位の値の並びとして比較します。
|
1
2
3
4
5
6
7
8
9
10
11
|
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]
|
ハッシュが複数ある場合
続いて、複数のあるハッシュを並び替えるコードです。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
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文があります。次のようにして使います。
|
1
2
3
4
5
6
7
|
array = { name:”JS太郎”, address:”東京都”, age:48 };
for (key in array) {
console.log(key);
console.log(array[key]);
}
|
上記の結果は以下のようになります。
|
1
2
3
4
5
6
7
8
|
name
JS太郎
address
東京都
age
48
|
for … inで取得できるのは、あくまでも「キー」だけということには注意が必要です。値を取得するためには、取得したキーでアクセスします。
そして、for … inは順番を保証しない、ということも注意してください。定義した順番にキーが返ってくるとは限りません。
forEach文の使い方
forEach文を使うと、連想配列に対しての処理がよりスマートに書くことができます。例えば、以下のサンプルコードを実行すると、下記のような結果になります。
|
1
2
3
4
5
6
7
8
9
10
|
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(;;)が使えるところです。
例えば、
|
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。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
Visual StudioにESLintを導入してJavaScriptのコードをチェックする
ESLintは、JavaScriptのコードに対して構文ミスや設定したルールに沿っているかどうかをチェックできるツールです。JavaScriptは、コード内にエラーがあっても実行するまではエラーが判明しないことがあります […]
-
jQueryでCSSのスタイルを変更する方法
Webアプリケーションの見栄えを良くするために使われるCSS。CSSファイルを別に作成して読み込むという方法が一般的ですが、実はjQueryでもCSSを直書きが可能です。 この記事では、サンプルコードを例に挙げながらjQ […]
-
jQuery UIを使ってダイアログ表示を実装する方法
サービスの解約や何かを削除する際、ユーザーに対して「本当に〇〇してもよいですか？」というようなダイアログが表示されることがあります。誤操作を防ぐためにも役立つダイアログですが、実はjQuery UIで簡単に実装することが […]
-
JavaScriptの配列の宣言とは？様々な生成方法を紹介
Javaにおける配列 配列とは、複数の値を1つのまとまりとして扱うためのデータ構造です。Javaの配列では、同じ型のデータを扱い、intやdoubleなどの基本型の他に、Stringなど参照型のデータも扱えます。 この記 […]
-
JavaScriptでの連想配列の使い方！多次元配列と連想配列の違い
JavaScriptではじめる「連想配列」 「連想配列」はJavaScriptに限らず、プログラムでデータをあつかうための重要かつ便利なデータ構造です。連想配列を利用することでプログラミングの世界観が変わり、コーディング […]
