スライドショー

JavaScriptのデータ構造とは?配列やオブジェクトを詳しく解説!

JavaScriptにはどんなデータ構造があるのかな。
データを適切に扱うにはどうすればいいのかな。

こんにちは。HTMLやJavaScriptの開発歴8年の著者が、JavaScriptにおけるデータ構造、その中でも特に配列とオブジェクトの使い方や特徴をご紹介します。

JavaScriptではいくつかのデータ構造を扱うことができますが、その中でも特に配列オブジェクトが使えるといろんな状況でデータを効率的に取り扱えることができます
今回は配列、オブジェクトそれぞれのデータの扱い方と特徴を説明し、その使いどころまでを説明したいと思います。

JavaScriptにおけるデータ構造とは

JavaScriptでは、様々なデータを上手に扱うために、いくつかのデータ構造が用意されています。例えば数字や文字列を一つだけ格納する変数や、何個でも格納できる配列があります。

このようにデータの格納方法の種類や仕組みのことをデータ構造と呼びます。

さまざまなデータ型

JavaScriptで扱えるデータ構造には、次のようなものがあります。

変数データを1つだけ入れることができる
配列複数のデータを格納することができる
オブジェクト複数のデータを格納することができる
JSONオブジェクトに似た構造で、phpやrubyなどの他言語のプログラムでも取り扱えるため、多言語間でのデータ交換に使用される

この中でも特に、配列とオブジェクトは非常によく使用されるデータ構造です。複数のデータを格納できる点では同じですが、それらには明確な違いがありますので、次で詳しく説明したいと思います。

配列とオブジェクトの特徴

JavaScriptにおける配列、オブジェクトの特徴について説明します。

配列とオブジェクトは共に複数のデータを格納でき、文字列・数値・論理型・配列・オブジェクト・関数などを取り扱うことができます。つまり、配列の中にオブジェクトを格納したり、オブジェクトの中に配列を格納したりできますし、関数を格納することもできるということです。

では配列とオブジェクトはどこが違うのでしょうか。

配列はキーが数字で、0, 1, 2…と順番に増えていきます。そのため、格納した順番に処理したい場合などには配列が適しています。

オブジェクトはキーを任意の数字や文字列で設定することが可能です。そのため、名前を指定してデータを取り出すことができるので、コードの可読性に優れています。

このように配列とオブジェクトは似ているのですが、その特徴の違いによって使いどころが変わってきます。次の章でそれぞれの使い方を詳しく説明したいと思います。

JavaScriptにおける配列の使い方

JavaScriptにおける配列の基本的な使い方を説明します。

宣言方法

配列を使うには、まず配列の宣言が必要です。配列の宣言は次のように記述することができます。

var array = ["あ", "い", "う", "え", "お"];
[]で囲んで各データをカンマで区切って格納できます。ただ、配列の中身が既に決まっている場合にはこの方法でよいですが、まだ決まってなくて後でデータを格納したい場合は、次のように空の配列を宣言することができます。

var array = [];

データの取得

配列に格納したデータは次のように取得することができます。

var array = ["あ", "い", "う", "え", "お"];
console.log(array[0]);

このように、array[]の中に対象のキーを入れると、その対象となるデータを取得できます。配列のキーは0から始まりますので、array[0]は一番目のデータを取得することになります。

データの追加

配列にデータを追加する方法は大きく2種類あります。
一つは配列のキーを指定して、そこに値を代入する方法です。

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才男性です。

このようになってしまい、数字だけではそのデータが何を意味しているのかが分かりません。オブジェクトにはこういった状況で使用するのに適しています。

なお、オブジェクトについてはこちらの記事にも詳しく記載がありますので、ぜひ併せて読んでみてください。

JavaScriptでObjectを使う!プロパティ・メソッドの活用術
更新日 : 2019年6月25日

まとめ

配列とオブジェクトについて簡単にご紹介し、その特徴の違いから使いどころを説明しました。
以下にその特徴の違いを簡単にまとめておきます。

項目配列オブジェクト
キー0からの連番任意の数字、文字列
取得array[0]など、配列の番号を指定して取得obj.nameなど、ラベルを指定して取得
使いどころforEachなどを用いて、配列に格納されているデータを順番に処理する任意にラベルを指定して値を取得することで、ソースコードの可読性を高める

配列とオブジェクトにはこのような違いがあり、使いどころをきちんと把握することでソースコードを簡潔に、また分かりやすく書くことができるようになります。是非これらの使いどころをマスターして、効率的なプログラミングに役立てていただければと思います!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

Tatsuya

Tatsuya

プログラム歴10年のシステムエンジニアです。
経験のある言語はHTML,JavaScript,PHP,VB,VBAなど。
WEB系の開発が得意です。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説