こんにちは！
本日は前回に引き続き 初学者様用のJavaScriptになります。
タイトルの通りJSのオブジェクトについてです。
JavaScriptはオブジェクト指向のプログラミング言語になります。
なのでオブジェクトに関する事を理解しておくのは絶対に避けては通れない重要ポイントです。
ですが全てを理解しようと思うと初心者には難しいので
ざっくりと分かりやすく初歩的な操作で説明していきます。
オブジェクトの作成は方法がいくつか種類がありますがここでは『オブジェクトリテラル』となります。
オブジェクト
データ(プロパティ)と機能(メソッド)を１つにまとめ、それぞれに名前であるオブジェクト名がつきます。
なので下記のオブジェクトの中に『プロパティ』と『メソッド』があるという事になります
const blogger = {
myblog: {
list: [
{
name: "dev.k",
url: "https://dev-k.hatenablog.com",
age: 30,
programmingBlog() {} //メソッド
}
]
}
}
1番上の波括弧 { から、最後の閉じられた } 所までがオブジェクトリテラルの宣言になります。
それではこのオブジェクト内を解説します。
まずは分割してプロパティからいきましょう！
プロパティ
先程言ったようにプロパティは、オブジェクト内にある（データ）という事になります。
const blogger = {
myblog: {
list: [
{
name: "dev.k",
url: "https://dev-k.hatenablog.com",
age: 30
}
]
}
}
この『blogger』というオブジェクト内にある『myblog』、『name』や『age』(以下略)がプロパティとなります。
角括弧 [ ] は配列としてデータをまとめて入れておく為に使用します。
そしてプロパティには『値』があります 私の『ブログ名』、『年齢』、これらがプロパティの『値』となります。
『値』には関数やオブジェクトを指定する事も可能となっており、オブジェクトリテラルでは
プロパティ名と値はコロン（ : ）で区切り
複数のプロパティを定義する際はプロパティに( , )カンマで区切っていきます。
プロパティの値は、『undefined』を除く全てのJavascriptの値をセット可能となります。
そして、プロパティの値は『読み取ったり』『書き換え』が可能となります。
そこは後ほど紹介します。
メソッド
全てのオブジェクトにはプロパティ以外にも『メソッド』というのがあります。
オブジェクトには、使えるメソッドがあらかじめ用意されています
例えば
このように『console』のオブジェクトに対して、それぞれの実行内容を指示(命令)する為の機能となります。
先程のオブジェクトであれば
const blogger = {
myblog: {
list: [
{
name: "dev.k",
url: "https://dev-k.hatenablog.com",
age: 30,
programmingBlog() {} //メソッド
}
]
}
}
オブジェクトのプロパティには関数を指定する事ができると先程言いましたが
関数=メソッドだと思って下さい。
ECMAScript 2015での新しい表記法です
これで新しいオブジェクトを作成してる事になります
上記では新しいオブジェクト内では空っぽですが
作成したメソッドにもアクセスが可能となります。
プロパティ・メソッドへアクセス
では、プロパティやメソッドに対してアクセスしていきましょう！
const blogger = {
myblog: {
list: [
{
name: "dev.k",
url: "https://dev-k.hatenablog.com",
age: 30,
programmingBlog() {} //メソッド
}
]
}
}
先程のオブジェクト内の、プロパティ『name』の『値』を取り出したいその場合は、ドット演算子を利用して記述します。
console.log( blogger.myblog.list[0].name)
『list』は配列になっています、『list内』にアクセスするには数字を記述する必要があります。
これはインデックス番号の指定となっており
プログラミング世界での数字の数え方は0から始まります、1.2.3〜ではなく0.1.2.3〜になります。
普段の数え方とごっちゃにならないように気をつけて下さい。
これは配列の定義が１つしかなくてもかならず『0』と記述して下さい。
これで『name』へアクセスできます。
dev.k
今回では配列は１つしかないないのでインデックス番号は『0』指定のまま、他のプロパティ『aeg』などに変えて取り出してみて下さい。
メソッドの場合もそんなに難しくはありません。
blogger.myblog.list[0].programmingBlog()
メソッドの時はカッコは忘れずに付けましょう。
メソッドでの確認をしたい場合は
const blogger = {
myblog: {
list: [
{
name: "dev.k",
url: "https://dev-k.hatenablog.com",
age: 30,
programmingBlog() {
console.log("test")
} //メソッド
}
]
}
}
これで先程のアクセスで試して下さい。
値の削除の場合は、『delete演算子』を使用します
delete blogger.myblog.list[0].url console.log(blogger)
先頭に『delete演算子』を記述し削除したいプロパティを指定します。
今回はここまでにしときましょう！
他にもプロパティの『値』の追加など色々と可能なので是非学んで覚えて下さい。
オブジェクトリテラルは結構、奥が深いのでどこまで学ぶのか見極めが肝心です。
まずはオブジェクトの構造やプロパティやメソッドなどの違いを覚えましょう！。