データを適切に扱うにはどうすればいいのかな。
こんにちは。HTMLやJavaScriptの開発歴8年の著者が、JavaScriptにおけるデータ構造、その中でも特に配列とオブジェクトの使い方や特徴をご紹介します。
JavaScriptではいくつかのデータ構造を扱うことができますが、その中でも特に配列とオブジェクトが使えるといろんな状況でデータを効率的に取り扱えることができます。
今回は配列、オブジェクトそれぞれのデータの扱い方と特徴を説明し、その使いどころまでを説明したいと思います。
JavaScriptにおけるデータ構造とは
JavaScriptでは、様々なデータを上手に扱うために、いくつかのデータ構造が用意されています。例えば数字や文字列を一つだけ格納する変数や、何個でも格納できる配列があります。
このようにデータの格納方法の種類や仕組みのことをデータ構造と呼びます。
さまざまなデータ型
JavaScriptで扱えるデータ構造には、次のようなものがあります。
| 変数 | データを１つだけ入れることができる |
| 配列 | 複数のデータを格納することができる |
| オブジェクト | 複数のデータを格納することができる |
| JSON | オブジェクトに似た構造で、phpやrubyなどの他言語のプログラムでも取り扱えるため、多言語間でのデータ交換に使用される |
この中でも特に、配列とオブジェクトは非常によく使用されるデータ構造です。複数のデータを格納できる点では同じですが、それらには明確な違いがありますので、次で詳しく説明したいと思います。
配列とオブジェクトの特徴
JavaScriptにおける配列、オブジェクトの特徴について説明します。
配列とオブジェクトは共に複数のデータを格納でき、文字列・数値・論理型・配列・オブジェクト・関数などを取り扱うことができます。つまり、配列の中にオブジェクトを格納したり、オブジェクトの中に配列を格納したりできますし、関数を格納することもできるということです。
では配列とオブジェクトはどこが違うのでしょうか。
配列はキーが数字で、0, 1, 2…と順番に増えていきます。そのため、格納した順番に処理したい場合などには配列が適しています。
オブジェクトはキーを任意の数字や文字列で設定することが可能です。そのため、名前を指定してデータを取り出すことができるので、コードの可読性に優れています。
このように配列とオブジェクトは似ているのですが、その特徴の違いによって使いどころが変わってきます。次の章でそれぞれの使い方を詳しく説明したいと思います。
JavaScriptにおける配列の使い方
JavaScriptにおける配列の基本的な使い方を説明します。
宣言方法
配列を使うには、まず配列の宣言が必要です。配列の宣言は次のように記述することができます。
var array = ["あ", "い", "う", "え", "お"];
[]で囲んで各データをカンマで区切って格納できます。ただ、配列の中身が既に決まっている場合にはこの方法でよいですが、まだ決まってなくて後でデータを格納したい場合は、次のように空の配列を宣言することができます。
var array = [];
データの取得
配列に格納したデータは次のように取得することができます。
var array = ["あ", "い", "う", "え", "お"]; console.log(array[0]);
あ
このように、array[]の中に対象のキーを入れると、その対象となるデータを取得できます。配列のキーは0から始まりますので、array[0]は一番目のデータを取得することになります。
データの追加
配列にデータを追加する方法は大きく２種類あります。
一つは配列のキーを指定して、そこに値を代入する方法です。
var array = ["あ", "い", "う", "え", "お"]; array[5]="か"; console.log(array);
["あ", "い", "う", "え", "お", "か"]
もともと宣言した配列はキーが0～4までしかありませんでしたが、新しくarray[5]にデータを代入することで追加することができました。
もう一つの方法は、pushメソッドを使用する方法です。
var array = ["あ", "い", "う", "え", "お"];
array.push("か");
console.log(array);
["あ", "い", "う", "え", "お", "か"]
pushメソッドを利用することで、配列の長さを考えなくても配列の最後にデータを格納することができます。
配列の使いどころ
JavaScriptで配列を使う場合は、配列に格納したデータを順番に取り出して処理をすることが多いです。以下のように記述します。
var array = ["あ", "い", "う", "え", "お"];
array.forEach(function(val){
console.log(val);
});
あ い う え お か
このように、forEachメソッドを使用すると、配列のデータを順番に取り出して処理をすることができます。
なお、配列についてはこちらの記事にも詳しく記載がありますので、ぜひ併せて読んでみてください。
JavaScriptにおけるオブジェクトの使い方
JavaScriptにおけるオブジェクトの基本的な使い方を説明します。オブジェクトは、配列とはまた違った特徴があります。
宣言方法
配列同様に、まずはオブジェクトを宣言する必要があります。オブジェクトを宣言するには、次のように記述します。
var obj = {name:"太郎", age:20, from:"東京"};
配列は[]で囲んで宣言しましたが、オブジェクトは{}で囲みます。また、配列の場合はデータの値をそのままカンマ区切りで格納できましたが、オブジェクトは各データにラベルを付ける必要があります。
オブジェクトのデータにラベルを付けることができるので、どういうデータが格納されているのか分かりやすくなります。例えばラベルがnameだと、その中に格納されているデータは名前だということががすぐに分かりますね。
また、空のオブジェクトを宣言することもできます。宣言時にはオブジェクトの中身が決まっておらず、後でデータを格納したい時に使います。
var obj = {};
データの取得
配列に格納したデータは次のように取得することができます。
var obj = {name:"太郎", age:20, from:"東京"};
console.log(obj.name);
//もしくは、
console.log(obj["name"]);
太郎 太郎
このように、obj.nameという形で記述することで、そのオブジェクトのnameというラベルが付いたデータを取得できます。また、obj["name"]といった方法でも同様のデータを取得できます。
obj["name"]の方法を使う場合は、ラベルの部分を変数で置き換えることができるので、ラベルが流動的に変わる時などで使うことができます。
var obj = {name:"太郎", age:20, from:"東京"};
var a = "name"
console.log(obj[a]); //変数で置き換えが可能
太郎
ラベルを変数で置き換える方法は、少し複雑なプログラムなどで重宝することになるので、覚えておくと役に立つと思います。
データの追加
オブジェクトにデータを追加する場合は次のように記述します。
var obj = {name:"太郎", age:20, from:"東京"};
obj.gender = "男"
console.log(obj.gender);
男
任意のラベルを付けてデータを代入するだけで、オブジェクトにデータを追加することができます。
オブジェクトの使いどころ
オブジェクトはラベルを指定して、可読性の高いソースコードを作成するのに向いています。配列のようにデータを順番に取り出して処理をするということは、可能ではありますがほとんどしません。
例えばこのようにオブジェクト使用した一文を作る処理があります。
var obj = {name:"太郎", age:20, from:"東京", gender:"男"};
console.log(
obj.name + "さんは、" +
obj.from + "出身の" +
obj.age + "才" +
obj.gender + "性です。"
);
太郎さんは、東京出身の20才男性です。
となり、それぞれのデータにラベルがあるので内容が一目で分かります。
しかし配列を使うと、
var array = ["太郎", 20, "東京", "男"];
console.log(
array[0] + "さんは、" +
array[2] + "出身の" +
array[1] + "才" +
array[3] + "性です。"
);
太郎さんは、東京出身の20才男性です。
このようになってしまい、数字だけではそのデータが何を意味しているのかが分かりません。オブジェクトにはこういった状況で使用するのに適しています。
なお、オブジェクトについてはこちらの記事にも詳しく記載がありますので、ぜひ併せて読んでみてください。
まとめ
配列とオブジェクトについて簡単にご紹介し、その特徴の違いから使いどころを説明しました。
以下にその特徴の違いを簡単にまとめておきます。
| 項目 | 配列 | オブジェクト |
|---|---|---|
| キー | 0からの連番 | 任意の数字、文字列 |
| 取得 | array[0]など、配列の番号を指定して取得 | obj.nameなど、ラベルを指定して取得 |
| 使いどころ | forEachなどを用いて、配列に格納されているデータを順番に処理する | 任意にラベルを指定して値を取得することで、ソースコードの可読性を高める |
配列とオブジェクトにはこのような違いがあり、使いどころをきちんと把握することでソースコードを簡潔に、また分かりやすく書くことができるようになります。是非これらの使いどころをマスターして、効率的なプログラミングに役立てていただければと思います！
