こんにちは。駆け出しコーダーのYUYA MATSUURAです。
フリーランスとして保険薬剤師業務で生活収入を得ながら、プログラミング言語の取得に励んでいます。
プログラミングのカテゴリー内の記事では、日々学んだ内容をアウトプットすることにより知識の定着を狙うために、
同じくプログラミングの勉強をしている方々に有意義であると思われる内容を記事に起こしていこうと思っています。
今回は前回の記事に引き続き、配列とオブジェクトの意味と記述方法とまとめます。
↑配列については、上記事でまとめておりますのでご参考にどぞ！
JavaScriptでのオブジェクトについて学ぶ
配列は値をインデックス（数字）で管理しておりましたが、
オブジェクトはデータを “キー” と “値” のセットで管理します。
最初から？？と言う感じかも知れませんので、配列と比較して考えます。
let arry = ["yamada", 24 ,"Tokyo"];
let obj = {
name: "yamada",
age: 24,
address: "Tokyo"
};上が配列で、下がオブジェクトの記述になります。
配列は [ ] で囲み、オブジェクトは { } で囲みます。
そもそもの記述方法が異なりますね。
JavaScriptは配列とオブジェクトと言うものを明確に分けて考えます。
少し逸れますが、PHPでも同じような概念で『配列』と『連想配列』と言うワードが出てきます。
この２つは中身の書き方は違えど、両方とも [ ] で囲む記述をします。
これはPHPにおいては、配列の中の１つの概念に『連想配列』があるからです。
詳しくは下記のリンク先へどうぞ！
【バックエンド初心者がまとめるPHP学習日記③】配列と連想配列の概念を理解しよう
そもそもオブジェクトと連想配列って違うの？
私はJavaScriptをはじめに学んだ時に、もしかしたら１番初めに理解に苦しんだのが、オブジェクトと言う概念だったかもしれません。
と言うのも書籍やサイトに寄って、
let obj = {
name: “yamada”,
age: 24,
address: “Tokyo”
};
の事をオブジェクトと言ったり、連想配列と言ったりすることもあって、
頭がこんがらがってしまうんですよね・・・。
一応、ここで違いをまとめさせて頂きますが。
基本的にオブジェクトと連想配列は同じと思って頂いて、理解に支障はないかと思います。
ただし、正確にはオブジェクトと連想配列には１つ大きな違いがあって
連想配列 ▶ データ（キーとバリューのセット）しか入らない
オブジェクト ▶ JavaScriptでは “関数” をその中に入れることが出来る
ここに明確な違いがあります。
という事で、やってる事や考え方はPHPの連想配列もJavaScriptのオブジェクトも同じなのですが、
関数もオブジェクトには入れることが出来るという事で『≒』みたいな関係性と思ってください。
この微妙な違いが関係しているかは分かりませんが
JavaScriptでは配列・オブジェクトは囲む方法が [] と {} で異なるので混同しないようにしましょう。
オブジェクトはキーと値（バリュー）のセットで管理する
let obj = {
name: "yamada",
age: 24,
address: "Tokyo"
};オブジェクトは上記のように { } 内に２組を１セットで格納していきます。
○○: ××,
の記述において、初めの○○（nameやageに当たる部分）をキーまたはプロパティ名と呼び、
配列における「インデックス」の代わりと思ってください。
後ろの××（”yamada”や24に当たる部分）は値（バリュー）と呼びます。
そして、このキーと値のセットを「プロパティ」と言います
いろんな単語が出てきました・・・。
オブジェクトはプロパティ（キー（プロパティ名）＋値）の形でデータを管理する
今回の重要ポイント！！
まず「まとめ」ます。
①オブジェクトにはプロパティの形でデータを管理することが出来る
②プロパティはキー（プロパティ名）＋値のセットである
さらに、値には文字列や数字だけでなく、配列を入れる事ができます。
let obj = {
name: "yamada",
age: 24,
address: "Tokyo",
favoriteSubject: ['English', 'Math']
};オブジェクトの中に配列が入りました。
ちなみに逆パターンもあります。
arry = [
{
name: "yamada",
age: 24,
address: "Tokyo"
},
{
name: "Kato",
age: 32,
address: "Osaka"
},
{
name: "Ito",
age: 19,
address: "Okinawa"
},
];配列の中にオブジェクトのパターンです。オブジェクトに話を戻します。
そしてここが重要ポイントだと個人的に思うのですが、
オブジェクトの中の値には、” 関数 “を入れる事ができます。
（ちなみに文字列や数字やプリミティブ型と言い、配列や関数をオブジェクト型と言ったりします。）
let obj = {
name: "yamada",
age: 24,
address: "Tokyo",
favoriteSubject: ['English', 'Math'],
sayHallo: function() {
console.log("hallo");
}
};この時の”sayHallo”と言うキーが『関数名』みたいになります。
そしてオブジェクトに指定した関数
sayHallo: function() {
console.log(“hallo”);
}
を特別に「メソッド」と呼びます。
この「メソッド」と言うワードはJavaScriptを学んでると度々出てくるので覚える事必須です。
メソッドってなんだっけ？と迷子にならないように、
「メソッド？あ～オブジェクトの記事に出てきたやつか～。」と忘れたら戻ってこれるようにしてくださいね！
最後にオブジェクト内での「値」の呼び出し方
２つあるので覚えておきましょう。
①ドット記法 「オブジェクト名.キー（プロパティ名）」
オブジェクト名に続けて「.」（）ドットを書き、キー（プロパティ名）を連結させる方法です。
一般的にはこちらを使う方が多いかと思われます。
let obj = {
name: "yamada",
age: 24,
address: "Tokyo",
favoriteSubject: ['English', 'Math'],
sayHallo: function() {
console.log("hallo");
}
};
console.log(obj.name);
console.log(obj.favoriteSubject[0]);console.logで各々を呼び出してみましょう
“yamada” “English”と出力されたかと思いますので、ぜひ実際に書いてみて試してくださいね。
もちろん値が配列である favoriteSubject のキー部分を
console.log(obj.favoriteSubject[1]);
とした場合は、配列内のインデックスが「1」（前から２番目）である”Math”が呼び出されます。
②ブラケット記法 「オブジェクト名[ “キー（プロパティ名）” ]
let obj = {
name: "yamada",
age: 24,
address: "Tokyo",
favoriteSubject: ['English', 'Math'],
sayHallo: function() {
console.log("hallo");
}
};
console.log(obj["name"]);
console.log(obj["favoriteSubject"][0]);出力結果は同じになります。
出力方法は配列の時のと同じ考えですね！
メソッドの呼び出し
もちろんメソッドも呼び出すことが出来ます。
let obj = {
name: "yamada",
age: 24,
address: "Tokyo",
favoriteSubject: ['English', 'Math'],
sayHallo: function() {
console.log("hallo");
}
};
obj.sayHallo();ドット記法でobj内のsayHalloを呼び出しました。
コンソールには”hallo”と出力されてると思います。
元々のメソッドで引数は渡していないので、今回はobj.sayHallo(); 内の(引数)は空白でＯＫです。
まとめ
２回に分けて、配列とオブジェクトをまとめてみました。
キー、値、インデックス、プロパティ、メソッド
と様々な用語が出てきて、混同してしまいそうですが、
１つずつ意味を確かめながら少しずつ覚えていきましょう！
プロパティやメソッドの用語は今後もまた出てくると思いますので、
混同したら本記事に戻ってきてくださいね。
コメント