JavaScript学習の鍵。オブジェクトの活用術!

JavaScript
スポンサーリンク

オブジェクトとは

オブジェクトとはJavaScriptのデータ型の一つです。データ型について知りたい方はこちらの記事をご覧ください。

オブジェクト(Object)の特徴はキーと値を持つことです。キーと値の組み合わせをプロパティと呼びます。値には文字列や数値はもちろん、配列やオブジェクト、関数も設定できます。そのため、入れ子になっていることが多いです。

キーと値を書くときは「name:’masa’」のように書きます。このnameがキーであり、’masa’が値になります。キー名は自由に設定できますので、値がわかりやすい名前を付けることをおすすめします。

オブジェクトは初心者の方など慣れないと戸惑うと思いますが、その分使いこなせるとできることが多くなり複雑な実装でも対応できるようになります。事前に学習して慣れておきましょう。


オブジェクトの使い方

宣言

オブジェクトを使用するときは初期値に{}を指定して宣言します。

var foo = {};

プロパティの追加

プロパティを追加する方法は2種類の書き方があります。

var person = {};

//1つ目:ドットで指定する
person.name = 'masa';

//2つ目:[]で指定する
person['age'] = 20;

活用術

オブジェクトを活用する方法をいくつかあげます。これからの例は以下の変数を使います。

var months = {
  jan: '1月',
  feb: '2月',
  mar: '3月',
  apr: '4月',
  may: '5月',
  jun: '6月'
};

for文でプロパティの数だけ繰り返す

for文だと配列の場合では繰り返し回数を指定するのがよくある書き方ですが、オブジェクトの場合はプロパティの数だけ繰り返すことができます。

書き方はfor(var 一時的な変数名 in 繰り返すオブジェクト){}と書きます。取得できるのはキーですが、オブジェクト[key]で値は取り出せます。実際に書く場合このように書きます。

for(var key in months){
  console.log(key);
  console.log(months[key]);
}
//コンソールの出力結果
jan
1月
feb
2月
mar
3月
apr
4月
may
5月
jun
6月

プロパティは後から追加できるので、数を指定してしまうと動的に追加したときに全て繰り替えませんが、この書き方なら後からいくつプロパティを追加してもすべてに対して繰り替えされる利点があります。

キー、値をそれぞれ配列で取得する

キーや値を取得するときにプロパティが多いと個別に取得するのが大変です。これらを配列でまとめて取得するメソッドがあります。

Object.keys()とObject.values()を使用します。

//キーを配列で取得する
Object.keys(months);

//値を配列で取得する
Object.values(months);

オブジェクトのコピー

オブジェクトを新しいオブジェクトにコピーできます。元のオブジェクトを変更したくない場合はコピーして、コピーしたオブジェクトを変更、追加をすることで元のオブジェクトはそのままにできます。

Object.assign()メソッドを使用します。引数は(コピー先,コピー元)です。

//copyにmonthsの内容をコピーする
var copy = Object.assign({}, months);

JSON形式に変換

JSON形式に変換するとObjectだったものがJSON文字列として扱えるようになります。文字列しか渡せない場合や、JSONしか使えない場合に簡単に変換できます。

JSON.stringify(オブジェクト)メソッドを使用します。

//JSON文字列に変換する
var result = JSON.stringify(months);

まとめ

冒頭でも言いましたが、オブジェクトは初めは頭を抱えると思います。しかし、慣れてくるといろんなデータをまとめることができますし、複雑な処理でも自分で作成できるようになります。それだけJavaScriptではオブジェクトが重要となっています。

サイトや参考書を読んでいるだけでは理解するのは大変です。実際にオブジェクトを使ってプログラムを書いてみるといいと思います。

スポンサーリンク
JavaScript プログラミング
スポンサーリンク
この記事を書いた人
まさき

25歳の社会人3年目のシステムエンジニアです。
未経験からIT企業に入社して業務や、業務外でも学習することでプログラミングが書けるようになりました。
得意なのはHTML,CSS,JavaScript。最近はVue.jsとGASを勉強中です。
本を読むことが好きなのでIT技術書以外にもたくさん読みます。
好奇心旺盛でとりあえずやってみる精神です。
楽しいことが生きがいで、仕事も私生活も楽しくなるように日々奮闘中。

まさきをフォローする
シェアする
まさきのエンジニア図書館
タイトルとURLをコピーしました