JavaScriptを学び始めて最初につまづくのがオブジェクトではないでしょうか？そこで本記事では、JavaScriptのオブジェクトについてわかりやすく解説しています。概要や使い方だけでなく注意点についてもまとめていますよ。
目次
JavaScriptのオブジェクトとは
JavaScriptでは、データを格納する方法としてオブジェクトを活用します。JavaScriptはオブジェクト指向プログラミングの一種で、オブジェクト指向プログラミングでは、プロパティと呼ばれるデータとメソッドと呼ばれる関数を複数持つことのできる変数（オブジェクト）同士の連携によって命令を処理しています。
近年では、オブジェクト指向プログラミングは、その利便性の高さにより、主流のプログラミング技法です。そのため、プログラミングを勉強する上でオブジェクト指向を身につけることはとても重要なスキルだといえます。
JavaScriptのオブジェクトの使い方
JavaScriptはオブジェクト指向プログラミングなので、オブジェクトの使い方を理解する必要があります。プログラミング初心者にとってオブジェクト指向について理解することは苦手意識があるかもしれません。
しかし、安心してください。JavaScriptのソースコードを書いているうちに、自然とオブジェクト指向は身についていきます。もし現時点でオブジェクト指向について理解できていなくても問題ありません。まずは、JavaScriptのプログラミングについて学びましょう。いつの間にかオブジェクト指向についても理解できているでしょう。
それでは、JavaScriptのオブジェクトの使い方について解説していきますね。
オブジェクトを定義する
JavaScriptでオブジェクトを定義する方法について解説します。前提として、JavaScriptで配列にデータを格納する場合の書き方は、次のようになります。
|
1 |
var array = ['山本飛鳥','male',25,83]; |
上記のコードを見ると「山本飛鳥」さんが「男性」だということは何となく分かりますが、「25」と「83」が何を示しているのかがわかりません。
一方、オブジェクトにデータを格納する場合、JavaScriptのソースコードの書き方は次のようになります。
|
1 2 3 4 5 6 7 8 |
const obj = { // プロパティを定義 // キー: 値 name: "山本飛鳥", sex: "male", age: 25, score: 83 }; |
上記のコードを見ると「山本飛鳥」さん「男性」「25歳」の方の点数が、「83点」だったと分かります。プログラム内で扱うデータが多く、処理が複雑になるほど、オブジェクトを活用することでデータを管理しやすくなります。また、複数人での開発や誰かに引き継ぐ可能性のあるプロジェクトでは、オブジェクトを利用するかしないかで保守性にかなりの違いがあります。
オブジェクトにプロパティを追加する
定義したオブジェクトに新しくプロパティを追加する方法について解説します。
オブジェクトにプロパティを追加する場合、JavaScriptのソースコードの書き方は次のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const obj = { // プロパティを定義 // キー: 値 name: "山本飛鳥", sex: "male", age: 25, }; // `score`プロパティを追加して値を定義 obj.score = 83; console.log(obj.name); // 出力 => "山本飛鳥" console.log(obj.score); // 出力 => "83" |
最初の処理でオブジェクトを定義した時点では、scoreプロパティは存在しませんでしたが、次の処理でscoreプロパティをオブジェクト内に追加することができました。
オブジェクトのプロパティを削除する
オブジェクトに定義されたプロパティを削除する場合、delete演算子を利用します。削除したいプロパティのキー名をdelete演算子で指定することで、オブジェクトから指定したプロパティを削除できます。オブジェクトのプロパティを削除する場合、JavaScriptのソースコードの書き方は次のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const obj = { // プロパティを定義 // キー: 値 name: "山本飛鳥", sex: "male", age: 25, score: 83 }; // オブジェクトから`score`プロパティを削除 delete obj.score; console.log(obj.name); // 出力 => "山本飛鳥" console.log(obj.score); // 出力 => 値なし(undefined) |
delete演算子でscoreプロパティが削除されたことにより、オブジェクト内からscoreプロパティの存在がなくなりました。
オブジェクトにプロパティの存在チェックをする
定義したオブジェクト内に指定するプロパティが存在しているかチェックする方法を解説します。確認するには、「undefined」と比較する方法と、in演算子を使う方法があります。まず、「undefined」と比較する場合、JavaScriptのソースコードの書き方は次のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const obj = { // プロパティを定義 // キー: 値 name: "山本飛鳥", sex: "male", age: 25, }; if (obj.score == undefined) { // プロパティが存在しない場合、文字列を出力 console.log('プロパティscoreは存在しません'); } |
今回のオブジェクトでは、「score」プロパティを定義していないので、if文は「true」となり、指定した文字列を出力する処理が実行されます。次に、in演算子を使う場合、JavaScriptのソースコードの書き方は次のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const obj = { // プロパティを定義 // キー: 値 name: "山本飛鳥", sex: "male", age: 25, }; const check = 'score' in obj if (check) { // プロパティが存在する場合、文字列を出力 console.log('プロパティscoreは存在します'); } else { // プロパティが存在しない場合、文字列を出力 console.log('プロパティscoreは存在しません'); } |
in演算子は指定したプロパティが存在する場合に「true」を返します。今回のオブジェクトでは、「score」プロパティを定義していないので、「false」となり、「プロパティscoreは存在しません」と出力されます。
JavaScriptのオブジェクトについての注意点
JavaScriptのオブジェクトを理解するにあたり、知っておくべき注意点について2つ紹介します。理解を深め、より高いレベルのプログラミングができるようになりましょう。
JavaScriptでは配列もオブジェクト
本記事の前半では、配列ではわかりにくいデータを管理するためにオブジェクトを活用しましょうと解説しました。しかし、それは厳密には間違っています。JavaScriptにおいては、関数も数値も文字列も配列もすべてオブジェクトです。
JavaScriptの配列は、オブジェクトで包んで関数を追加しようとしています。そのため、JavaScriptの配列は純粋な配列ではなく、配列のようなオブジェクトだといえます。
実際、JavaScriptの配列には通常のオブジェクトとは違い、特別なプロパティやメソッドがあります。代表的なものを紹介しますので、必要に応じて活用すると良いでしょう。
- lengthプロパティ : 配列のインデックス＋１を返す。
- pop() : 配列の末尾を削除して、削除した要素を返す
- push(value, …) : 配列の末尾に値を追加
- shift() : 配列の先頭を削除して、削除した要素を返す
- unshift(value, …) : 配列の先頭に値を追加
オブジェクトのプロティ名に使えない文字を定義する方法
JavaScriptで定義するオブジェクトのプロパティ名に識別子として使えない文字（ハイフンや空白など）を使用する場合には、クォート（”や’）で囲む必要があります。つまり、オブジェクトに定義するプロパティ名にハイフンが含まれる場合、JavaScriptのソースコードの書き方は次のようになります。
|
1 2 3 4 5 6 7 8 9 10 |
const obj = { // プロパティを定義 // キー: 値 name: "山本飛鳥", sex: "male", age: 25, "first-score": 83, "second-score": 90, "third-score": 96 }; |
上記のようにプロパティを定義することで、3回分の点数をデータとして利用することができます。もちろんプロパティ名を工夫することで回避することも可能です。しかし、ソースコードをわかりやすくするために、あえて必要となることもあります。状況に応じて上手く活用しましょう。
まとめ
今回は、JavaScriptのオブジェクトについて解説しました。プログラミングを学び始めたばかりの人には、難しく感じていた人もいるかもしれませんが、そんなことはありません。まずは、実際にJavaScriptのソースコードを書いてみて、オブジェクトを使った処理を実装してみてみましょう。意外と簡単にできると思いますよ。
