オブジェクトと配列。両者ともプログラミング言語を学ぶ上で一度は耳にするワードです。
しかし、日常で触れる機会がほとんどないため、なんとなく苦手に感じる方もいるかもしれません。
この記事を通して、それぞれがどんなものなのか、またどのように使用するのかを理解していきましょう！
- オブジェクトと配列についての基礎知識
オブジェクトとは
オブジェクトは、プロパティを集めた集合のことをいいます。
プロパティは名前と値がセットになったものです。CSSのプロパティで例えるとイメージしやすいでしょう。
オブジェクトを用いると、プロパティを用いて複数のデータを簡単に管理することができます。
例えば、お客様Aについて名前、年齢、趣味、生年月日...といった情報があったときに、それらを一つのまとまり（オブジェクト）として保管することができます。
まだオブジェクトが何なのかわからなくても大丈夫です。以下の記述例をもとに、具体的な説明をみていきましょう。
基本構文と扱い方
オブジェクトは、変数と同様に「定義」が必要です。
オブジェクトの場合、再定義や再代入することはないので、宣言はconstを用います。
また、オブジェクトの作成は{}を記入します。この{}の中に、プロパティを記入していきます。
const customerA = {
// プロパティを記入
};
また、プロパティの記入は以下のように行います。
const customerA = {
// プロパティを記入
"name" : "石田",
"age" : 42,
"birth" : "1978月12月3日",
"hobby" : "サッカー"
};
このようにプロパティ名 : 値という形式で記述します。また、テキストを記入する場合は””で囲います（数値の場合は記述しません）。
ただし、プロパティ名に関しては、識別子として正しい名前（数字から始まっていない、-を含まないなど）であれば””は省略することができます。
const customerA = {
name : "石田", // ""の省略可能
"user-name" : "石田", // ""の省略不可
"1name" : "石田" // ""の省略不可
};
このように、複数のプロパティをまとめることができるのがオブジェクトです。
次に、オブジェクトの扱い方をみてみましょう。例えば以下のようなオブジェクトを作成したとします。
const customerA = {
name : "石田",
age : 42, birth : "1978月12月3日",
hobby : "サッカー",
strength : "リーダーシップ"
};
このオブジェクトのうち、customerAの誕生日をコンソール画面に表示させたい場合には、以下のように記述します。
console.log(customerA.birth);
console.log(customerA[birth]); // この書き方でもOK
上記の画像のように、コンソール画面に誕生日の情報を表示することができました。
このように、オブジェクトのプロパティ名を記述することで値を参照することができます。
使用例
例えばjQueryで以下のようなHTML要素を取得するとします。
<h1 class="ttl">Practice for jQuery</h1>$(".ttl"); // .ttlを取得
このように.ttlを取得すると、.ttlに入っている情報を一括で取得できます。
console.log()を用いてコンソール画面にこの結果を表示して、実際に得られた情報を確認してみましょう。
console.log($(".ttl")); // コンソール画面に、.ttlの情報を取得
上記の画像のように、.ttlに関する情報がオブジェクトで表示されます。
例えば、length : 1は、.ttlの数を表しています。今回ttlというクラス名をつけた要素は一つしかないので、値は1となっています。
配列とは
配列は、複数の値を番号付きで格納できるオブジェクトです。
クラスの出席番号をイメージすると、分かりやすいでしょう。
また配列に格納した値のことを要素、またその要素の番号のことをインデックスと呼びます。
以下の記述例をもとに、具体的な構文と扱い方をみていきましょう。
基本構文と扱い方
配列も、変数と同様に定義が必要です。配列はオブジェクト同様、再定義や再代入することはないので、宣言はconstを用います。
配列の作成する際は、以下のように配列リテラル（[]）の中に要素を,で区切って記述します。
const members = ["上田", "石田", "稲田"];作成した配列の値は、以下のように番号を指定することで参照することができます。
このとき、番号は0, 1, 2, 3 …と0から始まることに注意してください。
const members = ["上田", "石田", "稲田"];
console.log(members[0]);
members[0]を指定したことで、１番目に収納されていた要素「上田」を参照することができました。
使用例
配列を用いると、順番に配置したデータが扱いやすくなります。
例えば、以下のようにmembersという配列を作成します。
const members = ["上田", "石田", "稲田", "鈴木", "島津"];
この配列の要素を、インデックス番号の順番でコンソール画面に表示させたい場合、以下のように記述します。
const members = ["上田", "石田", "稲田", "鈴木", "島津"];
const num = members.length;
for(let i = 0; i < num; i++){
console.log(members[i]);
}
ここでnumは、要素の数を取得しています。さらに配列名.lengthによって、要素の数をカウントします。
次にfor文を使って繰り返し処理を行い、配列の要素を順番にコンソールに表示するよう記述しています。
このように、配列を用いると番号を使って簡単に要素を扱えるので、非常に便利です。
まとめ
この記事では、オブジェクトと配列の基本的な部分を解説しました。内容を簡単にまとめます。
オブジェクトと配列
- オブジェクト：キー（プロパティ名）と値のペアを格納するデータ構造。
- 配列：順番に並んだデータの集まりで、インデックスを使ってアクセスする。
配列の操作をすることができるメソッドはたくさんあるので、ぜひ調べてみてください。
オブジェクトと配列に関しては、JavaScriptをはじめとしたプログラミングにおける基礎知識になるので、必ず押さえておきましょう。
