JavaScriptでObjectを使う!プロパティ・メソッドの活用術


オブジェクトってどうやって作るの?
プロパティやメソッドの使い方がわからない
オブジェクトってJSONや配列に変換できるの?

JavaScriptでプログラミングをするなら絶対避けては通れないのがオブジェクトという概念です。しかし、いざ勉強しようとすると何から始めていいのか分からない人も少なくありません。オブジェクトを使ってさまざまなデータを活用するにはどのように学習を進めていけばいいのでしょうか?

こんにちは!ライターの長野です。

この記事では、初心者でもオブジェクトの使い方や活用方法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

この記事はこんな人のために書きました

  • オブジェクトの基礎を学習したい人
  • プロパティやメソッドの活用方法を知りたい人
  • オブジェクトの変換方法を学びたい人

オブジェクトとは?

まずは、オブジェクトについて確認をしておきましょう。オブジェクトは、あらゆる「モノ」をプログラム上で表現するために作られたデータ構造です。データには、大きく分けて「プロパティ」と「メソッド」が格納されています。

プロパティは「名前」と「値」がペアになったデータのことで、例えば「name: ‘太郎’」のように記述します。値は文字列だけでなく数値や配列・Boolean・関数なども使えて、別のオブジェクトを値としてさらに持つこともできます。

そして、その値に関数を設定することをメソッドと呼びます。まとめると次のようになります!

  • プロパティ → 名前と値(文字・数値・Boolean・配列など)
  • メソッド → 名前と値(関数)

このように複雑なデータを1つにまとめて運用することができるのが大きな特徴でしょう。メソッドの詳しい使い方や活用技については、次の記事で体系的に解説しているのでぜひ参考にしてみてください!

オブジェクトの作成

この章では、基本的なオブジェクトを作成する方法について見ていきましょう! 主に、リテラルやnew演算子を使った作成方法を学んでいきます。

オブジェクトリテラルを使う方法

もっともポピュラーなオブジェクトの作り方としては、値そのものを直接記述するリテラルを使う方法です。オブジェクトのリテラルは{ }で囲んだデータ形式になります。

var myObject = {};

この1行で新しいオブジェクトを作成することができます。

new演算子を使う方法

もう1つの作り方としては、new演算子を利用したパターンがあります。

var myObject = new Object();

newを使うとObjectのインスタンス(コピーのようなもの)を作ることができます。なので、myObjectとObjectは別のモノとして扱われます

ちなみに、インスタンスの概念やnewの基本的な使い方については、次の記事で体系的にまとめているのでぜひ参考にしてみてください!

【JavaScript入門】new演算子の使い方と生成方法まとめ!
更新日 : 2019年5月17日

プロパティの作り方

この章では、オブジェクト内に含めるプロパティの作り方について見ていきましょう! 主に、基本的なプロパティの構文や配列の中に作るオブジェクトについても学習していきます。

基本的なプロパティの構文

まずは基本的なプロパティを作ってみましょう!記述方法としては連想配列のような感じで「キー(プロパティ名)」と「値」がペアになるようにします。

プロパティ名 : 値

「値」に関しては文字列や数値だけでなくBoolean型・配列・関数…など、JavaScriptで扱うほとんどの値を設定することができます。

var info = {
    name : '田中 太郎',
    age : 30,
    japan: true,
    hobby: ['読書', 'ウォーキング', 音楽''],
    getName: function() { console.log(this.name) }
}

配列の中にオブジェクトを作る

オブジェクト自体を配列の要素にすることもできるので、合わせて解説しておきます! 次のサンプル例を見てください!

var arr = [
  {name: '太郎', age: 30},
  {name: '花子', age: 25},
  {name: '次郎', age: 42}
];

この例では、配列の要素1つずつがオブジェクトになっていることが分かります。各オブジェクトの中には「name」「age」という2つのプロパティが存在していますね。

このように配列の要素としても利用できるのはオブジェクト自体も値として利用することができるからです。そのため、例えばプロパティの値に別のオブジェクトを設定して階層構造を持たせることも可能です。

var info = {
    name : '田中 太郎',
    age : 30,
    hobby: {
        book: 'Sample Book',
        music: 'myMusic Song'
    },
}

この例では、オブジェクトの中にある「hobby」プロパティの中で、さらに「book / music」というプロパティを作成しています。

プロパティにアクセスする方法

プロパティにアクセスするには、ドット演算子(「.」)を使う方法とブラケット記述法([])があります。

ドット演算子を使う方法

var info = {
    name : '田中 太郎',
    age : 30
}

console.log(info.name + ', ' + info.age);

実行結果:

田中 太郎, 30

ブラケット記述法

var info = {
    name : '田中 太郎',
    age : 30
}

console.log(info['name'] + ', ' + info['age']);

実行結果:

田中 太郎, 30

プロパティの追加

プロパティは追加していくこともできます。ドット演算子(「.」)を使う方法とブラケット記述法([])のどちらでもできます。

var info = {
    name : '田中 太郎',
}

info.age = 30;
info['add'] = "東京千代田区";

console.log(info);

実行結果:

{name: "田中 太郎", age: 30, add: "東京千代田区"}

プロパティを削除する方法

delete演算子を使ってプロパティを削除することができます。

var info = {
    name : '田中 太郎',
    age : 30,
    add : "東京千代田区"
}

delete info.add;

console.log(info);

実行結果:

{name: "田中 太郎", age: 30}

プロパティの存在を確認する方法

指定したプロパティが存在しているかどうか確認するには、undefinedと比較するかin演算子を使う方法があります。

undefinedと比較

JavaScriptでは存在しないプロパティにアクセスした場合、undefinedを返します。例外が発生するわけではありません。

var info = {
    name : '田中 太郎',
    age : 30,
}

if (info.add == undefined) {
    console.log('プロパティaddは存在しません');
}

実行結果:

プロパティaddは存在しません

in演算子を使う方法

in演算子は、指定したオブジェクトに指定したプロパティが存在するならtrueを返します。

var info = {c
    name : '田中 太郎',
    age : 30,
}

if (!('add' in info)) {
    console.log('プロパティaddは存在しません');
}

実行結果:

プロパティaddは存在しません

プロパティの一覧を取得する方法

オブジェクトが持つプロパティをすべて列挙する方法をご紹介します。一般的な方法として「Object.keys()」「forEach()」「for-in()」について学んでいきます。

Object.keys()を使ってプロパティを取得する方法

まずは、「Object.keys()」を使った方法を見ていきましょう! これは引数に任意のオブジェクトを指定するだけで、保持しているプロパティを列挙してくれるので便利です。次のサンプル例を見て下さい!

var obj = {
    name : '田中 太郎',
    age : 30,
    area : '東京都千代田区'
}
  
console.log(Object.keys(obj));
["name", "age", "area"]

この例では、「Object.keys()」の引数に「obj」を指定することでプロパティだけを列挙しているのが分かりますね。また、戻り値が「配列」になるという点もポイントです。

forEach()を使ってプロパティを取得する方法

今度は「forEach()」を使った方法を見てましょう! ただし、forEach()は「配列」に対して利用できるメソッドなので、このままではオブジェクトに使うことができません。

しかし、思い出して下さい! 「Object.keys()」を使えば配列としてプロパティを取得できましたよね? そこで、次のような記述でプロパティの名称を列挙できます。

Object.keys(obj).forEach(function(value) {

  console.log(value);
  
});
name
age
area

この例では、Object.keys()に続けてforEach()をチェーンで繋いで実行しています。このように記述することで、オブジェクトのプロパティを配列化したあとにforEach()で1つずつ処理しているわけです。

これにより、保持しているプロパティを活用した複雑な処理も可能になるわけです。

for-inを使ってプロパティを取得する方法

一般的によく使われる「for-in」を使った方法についても見ていきましょう! これはfor文のようにオブジェクトが持つプロパティを1つずつ繰り返し取得することができます。次のサンプル例を見て下さい!

var obj = {
    name : '田中 太郎',
    age : 30,
    area : '東京都千代田区'
}

for (var key in obj) {

    console.log(key);

}
name
age
area

この例では、オブジェクト「obj」に対してプロパティを1つずつ「key」という値に代入して取得しています。

ただし、for-inの特性としてプロトタイプチェーンを辿ってプロパティすべてを列挙します。この特性を使いたくない場合は、以下のように「hasOwnProperty()」を使うようにしましょう!

for (var key in obj) {
   if(obj.hasOwnProperty(key)){

        console.log(key);

    }
}

オブジェクト「obj」に対して「hasOwnProperty()」を使い、引数にプロパティが代入された「key」を指定すればOKです。

オブジェクトの活用

この章では、オブジェクトをさらに活用するための方法について見ていきましょう! 主に、オブジェクトをJSONや配列に変換する方法や複製について学んでいきます。

「JSON.stringify()」でオブジェクトをJSONに変換する

オブジェクトをJSONに変換するには「JSON.stringify()」を利用します。これは引数にオブジェクトを指定するだけで、戻り値としてJSONデータを取得することができるのです。次のサンプル例を見て下さい!

var obj = {
    name : '田中 太郎',
    age : 30,
    area : '東京都千代田区'
}

var result = JSON.stringify(obj);

console.log(result);
{"name":"田中 太郎","age":30,"area":"東京都千代田区"}

この例では、「JSON.stringify()」の引数にオブジェクト「obj」を指定しています。実行結果を見ても分かるようにオブジェクトのデータがJSONに変換されて文字列として取得できているわけです。

この「JSON.stringify()」についての活用方法は次の記事で体系的にまとめているので、ぜひ参考にしてみてください!

【JavaScript入門】JSONの作成とparse() / stringify()の使い方!
更新日 : 2019年4月23日

「Object.values()」でオブジェクトを配列に変換する

次に、オブジェクトを配列に変換する方法について見ていきましょう! 基本的に配列とオブジェクトはデータの構造が違うわけですが、「Object.values()」を使うとプロパティの「値」を配列化できます。使い方は簡単でvalues()の引数に配列化したいオブジェクトを指定するだけです!

Object.values(【オブジェクト】)

引数に指定したオブジェクトの「値」を自動的に抽出して、配列の要素に書き出してくれます。次のサンプル例を見てください!

var obj = {
    name: 'taro',
    age: 30,
    area: 'Tokyo'
}
  
var result = Object.values(obj);
  
console.log(result);
["taro", 30, "Tokyo"]

この例では、「name / age / area」という3つのプロパティの「値」を配列にしています。実行結果を見ると「値」だけが配列要素に変換されているが分かりますね。

「Object.assign()」でオブジェクトを複製する

今度はオブジェクトを複製する方法を見ていきましょう! まずは、簡単なオブジェクトを用意します。

var obj = {
    name: 'taro',
    age: 30
}

この例では、名前と年齢だけのプロパティを持っています。普通に考えればオブジェクトの複製は次のように記述すれば問題ないように思えます。

var newObj = obj;
  
console.log(obj);
console.log(newObj);
{ name: "taro", age: 30 }

{ name: "taro", age: 30 }

「obj」の複製として新しく「newObj」というオブジェクトを複製して、実行結果も問題ないように見えますよね? しかし、例えば値を変更してみると問題が発生するのが分かります!

obj.name = 'hanako';

console.log(obj);
console.log(newObj);
{ name: "hanako", age: 30 }

{ name: "hanako", age: 30 }

「obj」のnameプロパティを変更したわけですが、実行結果を見ると「newObj」のnameプロパティも一緒に変更されてしまっているのが分かります。実は、単純に「var newObj = obj」と記述しただけでは複製とは言えず、あくまで「obj」を参照しているだけにすぎないのです。

そのため、「obj」の値が変更されると参照している「newObj」の値も変わるわけです。そこで、利用するのが「Object.assign()」です!

Object.assign(【複製オブジェクト】, 【複製元オブジェクト】);

このように、複製するオブジェクトと複製元になるオブジェクトを指定するだけで参照ではない完全なコピーを作ることができるのです。次のサンプル例を見てください!

var newObj = Object.assign({}, obj);

obj.name = 'hanako';

console.log(obj);
console.log(newObj);
{ name: "hanako", age: 30 }

{ name: "taro", age: 30 }

この例では、複製元として「obj」を指定し、複製するオブジェクトは新規で作るため{ }のように空のオブジェクトを設定します。これにより、「obj」の値だけを変更すれば複製されたnewObjの値は変更していないのが実行結果からも分かりますね!

メソッドの作り方

この章では、基本的なメソッドの作り方について見ていきましょう! 主に、メソッド構文の概要とthisの扱いについて学んでいきます。

基本的なメソッドの構文

冒頭でも少し紹介しましたが、メソッドはプロパティの値に関数を設定したものというのが基本的な考え方になります。

var obj = {
 
    //プロパティ : 値(文字・数値・配列など),

    //プロパティ : 関数  ←これがメソッド
 
}

例えば、文字列をコンソールログに出力するだけのメソッドは次のように作成することができます。

var obj = {
    showText: function() {
 
        console.log( 'Hello World' );
 
    }
}

この例では、objというオブジェクトにshowTextという名前のメソッドを作成しています。メソッドの作り方は一般的な関数を作成する方法とほとんど同じと言えるでしょう。

ただし、このメソッドの実行方法はオブジェクトからチェーンでメソッドを呼び出すという点を覚えておきましょう!

obj.showText();

このようにオブジェクトとメソッドをチェーンで連結することで実行することができます。ちなみに、メソッドの基本から活用術までを次の記事で詳しくまとめているので、ぜひ合わせて参考にしてみてください!

【JavaScript入門】メソッドの使い方まとめ(一覧/メソッドチェーン)
更新日 : 2018年6月28日

thisのスコープについて

thisはJavaScriptに最初から用意されている変数で、呼び出した場所や方法によってその中身が変化するという特殊な存在です。これはメソッドとして使う場合と、一般的な関数として使う場合でも異なってくるので解説をしておきます。

例えば、次のサンプル例を見てください!

var myObj = {
 
    getSomething: function() {
        console.log( this );
 
        function showSomething() {
            console.log( this );
        }
    }
 
};

この例では、getSomethingというメソッドを作成していますね。このメソッドの中で、一般的な関数showSomethingを作っている点にも注目してください。

このメソッドと関数は、それぞれthisをコンソールログに出力する処理を記述しています。しかしながら、この実行結果はどちらも同じではありません。結果は以下のようになります!

  • メソッドのthis:自身のオブジェクトを出力する
  • 関数のthis:windowsオブジェクトを出力する

つまり、メソッド呼び出しと関数呼び出しではthisの示す内容が異なります。この事実を知らないと、バグを引き起こす可能性があるので十分に注意しておきましょう。

まとめ

ここでは、オブジェクトや独自オブジェクトの作り方について説明しました。オブジェクトとは、モノの特徴を表すプロパティの集まりのことです。

ブラウザにあらかじめ用意されたオブジェクトもあれば、独自のオブジェクトを作成することもできます。使いこなすことができるように、この記事を何度も参考にして下さいね!

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

長野 透

長野 透

熊本在住のフリープログラマ兼ライターです。C/C++/C#、Java、Python、HTML/CSS、PHPを使ってプログラミングをしています。専門は画像処理で最近は機械学習、ディープラーニングにはまっています。幅広くやってきた経験を活かしてポイントをわかりやすくお伝えしようと思います。
お問合せはこちらでも受け付けています。
[email protected]

おすすめコンテンツ

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

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