ブログ

第3回 JavaScriptの基礎「連想配列」

2022.05.23

プログラム開発

本記事のポイント

本ブログはIoT組込みエンジンNEQTOの特徴の一つであるJavaScriptによるNEQTO Engine対応デバイスの開発にフォーカスし、JavaScriptの基礎およびneqto.js特有の拡張機能について連載形式で紹介していきます。

この連載記事では、JavaScriptの基礎となる構文や文法について順番に解説していきます。第3回目の今回は「連想配列」について解説します。NEQTOユーザーがJavaScript開発を円滑に進めるために活用頂くこと、また、NEQTOに興味をお持ちの方がNEQTOを使用したJavaScript開発について理解を深めて頂くことが本ブログの目的となります。

1. はじめに

プログラミングによっては多くの変数を必要とする場合があります。その際、それらを「連想しやすい文字列」と「値」のペアで管理することができる「連想配列」を活用することで、よりわかりやすいコードにすることができます。例えば、定期的に気温・湿度・水位を測定したとします。その測定値1つ1つに対して名前を付け、それらを1つのグループ(配列)としておくことで、後からデータを参照する際、何のデータか把握しやすくなります。第3回は、この「連想配列」にフォーカスし、neqto.jsを使用して詳しく解説していきます。

「neqto.js」は、NEQTO Engine上で動作するJavaScript環境です。ECMAScript 5.1 Editionに対応しています。

2. 変数、配列、および連想配列

「連想配列」を理解していくため、まずは「変数」と「配列」について説明していきます。「変数」は、1つの値を入れる箱です。

変数	値
a	Alpha
b	Beta
c	Gamma
d	Delta

JavaScriptコードでは次のように表します。

var a = 'Alpha';
var b = 'Beta';
var g = 'Gamma';
var d = 'Delta';
print(a);
print(b);
print(g);
print(d);

Alpha
Beta
Gamma
Delta

「配列」は複数の値を1つの変数にまとめたものです。1つの値を格納する箱(要素)の集合体で構成され、それらの要素には先頭から順に「0」から始まる数値(インデックス)が自動的に割り当てられます。

変数	インデックス	値
obj	0	Alpha
obj	1	Beta
obj	2	Gamma
obj	3	Delta

JavaScriptコードでは次のように表します。配列の宣言には[ ]を使用し、値を参照する場合は[ ]にインデックスを指定します。

var obj = ['Alpha','Beta','Gamma','Delta'];
print(obj[0]);
print(obj[1]);
print(obj[2]);
print(obj[3]);

Alpha
Beta
Gamma
Delta

「配列」はインデックスで要素を識別しますが、数値だけでは何の値が格納されているか想定することができません。インデックスの代わりに、連想しやすい文字列(キー)を割り当てたものが「連想配列」となります。

変数	キー	値
obj	a	Alpha
obj	b	Beta
obj	c	Gamma
obj	d	Delta

JavaScriptコードでは次のように表します。連想配列の宣言には{ }を使用し、値を参照する場合は[ ]にキーを指定します。

var obj = {'a':'Alpha','b':'Beta','g':'Gamma','d':'Delta'};
print(obj['a']);
print(obj['b']);
print(obj['g']);
print(obj['d']);

Alpha
Beta
Gamma
Delta

連想配列に格納されている値を参照する方法は、[ ]以外に.を使用することができます。前者を「ブラケット記法」、後者を「ドット記法」と呼びます。

var obj = {'a':'Alpha','b':'Beta','g':'Gamma','d':'Delta'};

print(obj.a);
print(obj.b);
print(obj.g);
print(obj.d);

Alpha
Beta
Gamma
Delta

.を使用すると可読性は良くなりますが、「キー」の命名に「変数の命名規則」を適用する必要があります。例えば、'1st'のように数値で始まる文字列をキーに指定し、.を使用して値を参照すると例外(シンタックスエラー)が発生してしまいます。

どちらの記法が良いということはありませんが、予めルールを定め、混在して使用しないことを推奨します。特にルールがない場合は、[ ]を使用したブラケット記法をお勧めします。

3. neqto.jsによる動作検証

ここからは、neqto.jsを使用して、さらに深堀していきます。neqto.jsの動作環境について詳しく知りたい方は、下記のリンク先を確認してください。

NEQTO Hello World!

① キーの参照

自分で定義した連想配列であれば、キーがわかります。しかし、そうでない場合、どのようなキーを持っているか把握したい場合があります。キーを調べる方法として、Object.keys()メソッドがあります。このメソッドは指定されたオブジェクト(連想配列)が保有しているすべてのキーを配列で出力します。

var obj = {'a':'Alpha','b':'Beta','g':'Gamma','d':'Delta'};

var keys = Object.keys(obj);
print('keys.length: ' + keys.length);

for(var i=0; i&lt;keys.length; i++) {
  print(keys[i]);
}

keys.length: 4
a
b
g
d

キーを調べる方法として、for...in文を使用する方法もあります。連想配列に含まれるキーをひとつずつ取り出すことができます。

var obj = {'a':'Alpha','b':'Beta','g':'Gamma','d':'Delta'};

for(var key in obj) {
  print(key + ': ' + obj[key]);
}

a: Alpha
b: Beta
g: Gamma
d: Delta

② キーの有無

連想配列に特定のキーが存在するか否か確認したい場合、in演算子を使用します。

var obj = {'a':'Alpha','b':'Beta','g':'Gamma','d':'Delta'};

if('a' in obj) {
  print('a: ' + obj.a);
}
else {
  print("'a' does not exist");
  print(obj['a']);
}

if('c' in obj) {
   print('c: ' + obj.c);
}
else {
  print("'c' does not exist");
  print(obj['c']);
}

a: Alpha
'c' does not exist
undefined

連想配列objに'c'というキーが存在しないことがわかります。なお、存在しないキーで値を参照した場合はundefinedとなります。

③ 連想配列の型

連想配列の型を確認してみます。型を確認する方法として、Object.prototype.toString.call()メソッドがあります。このメソッドは指定されたオブジェクトのクラスを示す文字列を[object 型]の形式で出力します。

var obj = {'a':'Alpha','b':'Beta','g':'Gamma','d':'Delta'};
var type = Object.prototype.toString.call(obj);
print(type);

[object Object]

Objectと表示されました。JavaScriptで取り扱われる連想配列は、Object型の一種であることがわかります。

④ 連想配列のキーの追加と削除

空の連想配列を作成し、キーの追加と削除を行います。

連想配列はObject型です。Object型のインスタンスを作成し、新たにキーを追加します。キーの追加は、変数に初期値を格納する際と同じような記法で行うことができます。

var obj = new Object();

var keys = Object.keys(obj);
print('keys.length: ' + keys.length);
for(var key in obj) {
  print(key + ': ' + obj[key]);
}

print('Add new key');
obj['a'] = 'Alpha';
obj['b'] = 'Beta';
obj['g'] = 'Gamma';
obj['d'] = 'Delta';

var keys = Object.keys(obj);
print('keys.length: ' + keys.length);
for(var key in obj) {
  print(key + ': ' + obj[key]);
}

keys.length: 0
Add new key
keys.length: 4
a: Alpha
b: Beta
g: Gamma
d: Delta

キーの削除は、delete演算子を使用します。

var obj = {'a':'Alpha','b':'Beta','g':'Gamma','d':'Delta'};

delete obj['g'];

var keys = Object.keys(obj);
print('keys.length: ' + keys.length);
for(var key in obj) {
  print(key + ': ' + obj[key]);
}

keys.length: 3
a: Alpha
b: Beta
d: Delta

delete対象の'g'のみが削除されていることがわかります。

⑤ 連想配列とJSON

連想配列を使用していると、「連想配列をログ表示させたい」、「文字列変換してHTTPで送信したい」と考えることも多いと思います。その際、連想配列の構文に似ている「JSON」が役立ちます。「JSON」とは、「JavaScript Object Notation」の略で、JavaScriptオブジェクト(連想配列)の文字列表記法です。neqto.jsでも標準的にJSONオブジェクトが使用可能であり、これを活用して「連想配列」から「文字列」、「文字列」から「連想配列」の変換を容易に行うことができます。

「連想配列」を「JSON文字列」に変換する場合、JSON.stringify()メソッドを使用します。

var obj = {'a':'Alpha','b':'Beta','g':'Gamma','d':'Delta'};
var str = JSON.stringify(obj);
print('obj: ' + str);

obj: {"a":"Alpha","b":"Beta","g":"Gamma","d":"Delta"}

逆に「JSON文字列」を「連想配列」に変換する場合は、JSON.parse()メソッドを使用します。

var str = '{"a":"Alpha","b":"Beta","g":"Gamma","d":"Delta"}';
var obj = JSON.parse(str);
print('obj.a: ' + obj.a);
print('obj.b: ' + obj.b);
print('obj.g: ' + obj.g);
print('obj.d: ' + obj.d);

obj.a: Alpha
obj.b: Beta
obj.g: Gamma
obj.d: Delta

4. まとめ

いかがでしたか。連想配列を活用すれば、変数をグループ化して管理することが可能となり、コードをわかりやすくすることができます。また、ネットワーク通信で多く利用されているJSONフォーマットと互換があるため、通信フォーマット変換を必要とするプログラムを作成する場合に役立ちます。わかりやすいコードはバグの抑制につながりますので、ぜひご参考にしてください。