JavaScriptのオブジェクトとは？

すべてのスタート。

こんにちは、「ふ」です。
今回はJavaScriptのオブジェクトについて紹介します。

「JavaScriptの変数や関数、配列など、基本的な構文は理解できたけど・・まだまだサンプルコードを見ても、何をやっているのかよくわからない」

という方。
次のステップ〜初心者脱出〜そのスタートとなるのが、オブジェクトの理解です。ここから中級者への道を歩んで行きましょう。

とはいっても、いきなり複雑な内容にはなっていません。
今回の記事では「新しい構文を１つ覚える」くらいの軽い話しかしませんので、最初のステップだと思ってお付き合いください。

プロパティ名: 値の集合。

「オブジェクト」と名がついているので、「オブジェクト指向とは」などと混同してしまうかもしれません。
ここで扱っているオブジェクトとは、JavaScriptが持っている「文字列」「数値」などと並ぶ、データ形式の１つのことです。ちょっとややこしいですね。

const obj = { プロパティ:値, プロパティ:値 }

オブジェクトは、「プロパティ名：値」をペアとしたデータの集合です。


〜「データの集合」と言えば、配列はご存知のことでしょう。

const taro = ["20","man","tokyo"]; const hakako = ["19","woman","osaka"];

「taro」「hanako」という２つの配列を作りました。
それぞれ年齢、性別、出身地を順番に格納しています。

　....「人物のスペック表」に配列を使うと、不便ですよね。

「「３//taroの年齢」」 console.log(taro[0]); 「「３//hanakoの出身地」」 console.log(hanako[2]);

情報を取り出そうとすると、添字（index）で参照することになります。
複雑なデータになるにつれ、「〇〇のindexはいくつだったかな？」となってしまうでしょう。

h2 { color:blue; font-size:130%; margin-top:1em; }

ちょっと脱線。⬆︎はCSSの記述例です。
「プロパティ名：値」形式で表現されていて、見た目にもわかりやすいし、アクセスも簡単です。

オブジェクトを使えばできる。

const taro = ｛ bbage:20, bbgender:"man", bbbirth:"tokyo" bb｝; const hanako = ｛ bbage:19, bbgender:"woman", bbbirth:"kyoto" bb｝

JavaScriptのオブジェクトを使えば、⬆︎のように「プロパティ名:値」形式でデータの集合を作成することができます。

見た目にもわかりやすいし、参照もしやすいですね。
もちろん後から、内容を編集することも可能です。

オブジェクトリテラル。

先ほどのオブジェクトの記述は、オブジェクトリテラルと呼ばれるもので、オブジェクトを生成する方法の１つです。

リテラル（literal）は、「文字通り」などという意味です。
オブジェクトを生成する方法は他にも存在するのですが、CSSのような形態で記述ができて一覧性も高い、オブジェクトリテラルを使うのが最も簡単です。

それでは、新しくオブジェクトを作ってみましょう。
例によって人物のスペック表にします。

オブジェクトリテラルの記述ルール。

オブジェクトリテラルの記述は、以下のような形式で書いていきます。

@1@ 全体を中括弧「{ }」で囲む
@2@ プロパティ名と値をコロン「:」でつなぐ。
@3@ 値の文字列はクオテーション「" "」で囲む。
@4@ プロパティが複数の場合はカンマ「,」で区切る。

const jiro = 「「１｛｝」」;

@1@ 全体を囲む中括弧を記述。
これだけでも「空のオブジェクト」として成立しています。

const jiro = ｛ 「「１bbage:22」」 bb｝;

@2@ プロパティ名「age」で値を「22」としました。
プロパティ名と値はコロンでつないで記述します。

const jiro = ｛ bbage:22, bbjender:「「１"man"」」 bb｝;

@3@ 値が文字列の場合はクオテーションで囲む必要があります。でないとプログラムが「man」というものを探しに行って、「man is not undefined(manというものは定義されていません)」とエラーを出してしまいます。
プロパティ名もテキストなのですが、これはそのままで構いません。プログラムには「jenderというキーが割り当てられた」と、ちゃんと認識されます。

const jiro = ｛ bbage:22「「５,」」 bbjender:"man"「「５,」」 bbbirth:"saitama" bb｝;

@4@ プロパティが複数に渡る場合はカンマで区切ります。

これもちょっと紛らわしいのですが、オブジェクトのデータは「プロパティ名:値」のセットで構成されており、「プロパティ」とはその１セットのことを指します。
ただこの２つは厳密に使い分けなくても対して語弊が生じることはありません。かる〜く知っておいてください。

プロパティへのアクセス。

オブジェクト.プロパティ名

プロパティの値へのアクセスは、オブジェクトの後にドット「.」を付けてプロパティ名参照します。

const jiro = ｛ bbage:22, bbjender:"man", bbbirth:"saitama" bb｝; console.log(「「１jiro.birth」」); 「「３// ▶︎ saitama」」

オブジェクト「jiro」の「birth」プロパティにアクセスできました。

〜このドットでつなぐアクセス方法、どこかで見たような....
それについては次回以降お話しするとします、ふふふ。

プロパティの値はなんでも。

オブジェクトのプロパティに含められる値ですが、基本letやconstに代入できるものはなんでも値にすることができます。

const saburo = ｛ bbfood:["ramen","sushi","curry"] bb｝; console.log(saburo.food[1]); 「「３// ▶︎ sushi」」

値に配列を入れました。
アクセスは「オブジェクト名.プロパティ名[index]」とすれば可能です。

const yoburo = ｛ bbgreeting:function() { bbconsole.log("おはよう"); bb} bb｝; yoburo.greeting(); 「「３// ▶︎ おはよう」」

関数もプロパティ値に入れることができます。
「オブジェクト名.プロパティ名( )」で呼び出して実行が可能です。

const goro = ｛ bblike:{ bbliquor:false, bboolong-tea:true bb} bb｝; console.log(goro.like.ooliong-tea); 「「３// ▶︎ true」」

これは、オブジェクトの中にさらにオブジェクトを含めたもの。また値には真偽値をつかっています。
「オブジェクト名.オブジェクト名.プロパティ名」と、ドットでつないでアクセスしていきます。


簡単なコーディングなので、みなさんもエディタを開いて実験してみてくださいね。

次回からJavaScriptの本質へ。

ここまで、JavaScriptのオブジェクトについてサラッと紹介してきました。最後までお読みくださり、ありがとうございます。

JavaScriptのオブジェクトについて、現段階での内容では「値にプロパティ名を割り当てられる、配列より便利な集合データ」としての認識しか得られないかもしれません。
しかしオブジェクトは、JavaScriptの基盤となる最も重要なものです。次回以降は徐々に踏み込んだ内容としていきますので、理解を深めてプログラミングスキルを何段階もアップさせていきましょう。

ではまた〜 ♫