はじめに

プログラミング言語で複数の値を格納する代表的な仕組みとして配列というものが存在します。また、配列には大きく分けて2種類あり、「配列(Array)」と「連想配列(Associative Array)」が存在します。

連想配列は言語によって呼び方が様々です、この項目のタイトルにある「キー・バリュー形式」というのは、連想配列のことを指します。また、JavaScriptでは連想配列のことを「オブジェクト」と呼んだりもします。

サンプルプロジェクト

キーバリュー形式のデータ
zip

配列から学ぶキー・バリュー形式の学習

プログラミングで好きな和菓子一覧のような値を用意したい場合には、配列(Array)を使います。


sweets = ["もなか", "だんご", "すあま", "ようかん"];

単純に要素を列挙しただけの配列を特に1次元配列とか線形配列と呼びます。
1次元配列のキー(添え字)は0から順番に自動で数字が振られます。例えばもなかを指定する場合は以下のようになります。


console.log(sweets[0]);

複数の要素を全て参照したい場合にはfor文を使って以下のように記述します。


for (let i = 0; i < sweets.length; i++) {
    console.log(sweets[i]);
}

1次元配列があると言うことは、2次元配列や3次元配列なども存在します。2次元以上の配列を多次元配列とも呼びます。

例えば好きなお菓子の一覧を二次元配列にして洋菓子も追加しようとすると以下のようになります。


sweets = [
           ["もなか", "だんご", "すあま", "ようかん"],
           ["ビスケット", "クッキー",  "パンケーキ"],
];

仮にこの2次元配列からビスケットを参照したい場合はsweets[1][0]を参照します。


console.log(sweets[1][0]);

連想配列

配列のメリットの一つはキー(添え字)が自動的に採番されるので宣言が楽なことです。

しかし、上記の例では0が和菓子で1が洋菓子であることをソースコードから確認することができません。そこでキーに文字列を使える連想配列を活用します。


sweets = {
    japanese:["もなか", "だんご", "すあま", "ようかん"]
    western:["ビスケット", "クッキー",  "パンケーキ"]
}

仮にこの配列からビスケットを参照したい場合はsweets.western[0]あるいはsweets["western"][0]と参照します。

※ なお、配列はコンピューター側からみた場合、複数のデータを連続的にメモリ上に確保しておけるため、都合が良かったりします。C言語には配列は存在しますが、連想配列は備わっていません。

連想配列でアドレス帳を作る

アドレス帳を作ってみます。まずは一人分のアドレスを連想配列で表現してみます。


member = {
  "name" : "アシアル太郎" ,
  "homephone" : "050-****-*****",
  "mobileemail" : "asial@example.com", 
};

この配列を後で繰り返し構文で参照するのですが、キーが数字の連番では無いためfor文は使えません。連想配列に対応した繰り返し構文を使う必要があります。


for (let key in member) {
  console.log(member[key]);
}

for...inという繰り返し構文では、連想配列のキーの数だけ繰り返しを実行します。また、繰り返しの度にキーの文字列を任意の変数に代入させることができます。上記の例ではkeyという変数に対してname,homephone,mobileemailの文字列をそれぞれ代入しています。

さて、一人分のデータなら1次元の連想配列で作成できますが、一人分だとアドレス帳になりません。配列と組み合わせてmembers配列を作成します。


members = [
            {
              "name" : "アシアル太郎" ,
              "homephone" : "050-****-*****",
              "mobileemail" : "asialtaro@example.com", 
            },
            {
              "name" : "アシアル花子" ,
              "mobilephone" : "080-****-*****",
            },
];

余談ですが、WEBの世界で存在しないURLやメールアドレスを教材に掲載したいときは、ドメイン部分に「exaple.com」を使います。

あとからmembers配列に要素を追加したい場合は以下のように記述します


members.push(
            {
              "name" : "アシアル次郎" ,
              "mobilephone" : "070-****-*****",
              "mobileemail" : "asialjiro@example.com", 
            }
)

全員のアドレス帳を単純に確認したいだけの時は以下のように記述します。


console.log(members);

console.log()命令を使えば配列や連想配列の値をログに表示させることができます。しかし、データを加工しながらユーザーの画面に出したいときなどには、繰り返し構文を使って表示する必要があります。2次元配列なので少し難易度は高くなります。


for (let i = 0; i < members.length; i++) {
  for (let key in members[i]) {
    console.log(members[i][key]);
  }
}

配列もfor inみたいな形で参照したい場合

for...ofを使うことで配列もfor...inみたいな形で参照できます。


for (let member of members) {
  for (let key in member) {
    console.log(member[key]);
  }
}

キーバリュー型のデータベース

 連想配列のような仕組みで値を格納できるデータベースとして「キーバリュー型データベース」が存在します。リレーショナルデータベースに比べて、事前にテーブル設計を行わなくても気軽に利用できることや速度上の優位性・分散処理上の優位性があります。

 身近なキーバリュー型データベースの活用例としてはブラウザに情報を記録できる「Web Storage」があります。Web StorageはHTML5の標準技術のため、特別な準備は不用で簡単に利用できます。

NoSQL型のデータベース

リレーショナルデータベース以外のデータベースをNoSQL型と呼びます。キーバリュー型のデータベースもNoSQL型の一つです。リレーショナルデータベースは信頼性を保つための仕組みが非常に優れています(ACID特性)。しかし、大量のセンサーデータを多少欠損しても良いので片っ端から記録するとか、膨大な会員を抱えるSNSの投稿を記録したりユーザー毎のタイムラインを表示するのは得意ではありません。

 1億人お小遣い帳を記録するならリレーショナルデータベースの機能だけで比較的簡単に実現できますが、1億人のSNS投稿を支えようと考えた場合はNoSQL型のデータベースを元にデータの扱い方を設計する必要があります。なお、最近のリレーショナルデータベース製品はNoSQL型のデータをサポートしている場合があります。

配列操作方法のまとめ

  • 配列要素を末尾に追加する時にはpush()命令を使う
  • 配列要素を末尾から削除するときにはpop()命令を使う
  • 連想配列にキーを追加するときには特に命令は不要です
  • 連想配列のキーを削除するときにはdelete演算子を使います