X-HACK

【4日目】オブジェクトについて

javascript, tutorialss1 min read

四日目は、変数とメモリの関係性について話すつもりでしたが、オブジェクトについて先に話します。オブジェクトは重要なので折に触れて繰り返し説明します。まずは基本を抑えましょう。

「オブジェクトとは、名前と値をもつプロパティを格納する入れ物にすぎない」

オブジェクトは、単なる「データの入れ物」です。

前日の資料はこちら +JavaScript道場:三日目 / データ型と二進法について

用語集

  • オブジェクト
  • key: value
  • プロパティ
  • アクセスする、参照する、取り出す
  • 関数もオブジェクト(function object)
  • 変数のスコープ
  • this

オブジェクトとは

一言で言ってしまうと、オブジェクトとは「関連のあるデータと機能の集合」です。 ただ、それだけです。オブジェクトは連想配列と呼ばれることもあります。

難しくありませんので安心してください。 オブジェクトを使うと 「データをまとめて扱える」というだけ の話です。

オブジェクトを宣言する

オブジェクトの宣言方法は下記です。たったこれだけ。

1{}

確認してみましょう

1typeof {} // "object"

補足:typeof 演算子については次回を参照

オブジェクトは変数に格納できます

1// 例1
2var obj = {}
3// 例2
4var person = {}

中身が同じオブジェクトでも、比較すると false になる

比較演算子(== ,!= , <, > など)については別途紹介します

1var obj1 = {}
2var obj2 = {}
3 
4if (obj1 === obj2) {
5 console.log("同じ?")
6} else {
7 console.log("同じではない")
8}

プロパティ

「プロパティ」とはオブジェクトが持つデータのことです。 オブジェクトには「プロパティ」をセットできます。プロパティという名前はよく覚えておいてください。

ここの理解は非常に重要ですので、しっかり理解してください。

プロパティのセット方法 1

宣言時に指定する方法

1var obj = { name: "matsuda shinsuke", age: 34 }
2 
3obj // {name: "matsuda shinsuke", age: 34}

プロパティのセット方法 2

. (ドット) を使用してプロパティに値をセットする

1var obj = {}
2obj.name = "matsuda shinsuke"
3obj.age = 34
4 
5obj // {name: "matsuda shinsuke", age: 34}

プロパティのセット方法 3

ハッシュ(連想配列)を使用してプロパティに値をセットする

1var obj = {}
2obj['name'] = "安達祐実"
3obj['age'] = 39
4obj['profile'] = 'She is an actress.'
5 
6obj // { name: "安達祐実", age: 39, profile: 'She is an actress.' }

プロパティのセット方法 4

ES2015からの機能。プロパティ名と値に指定する変数名が同じ場合、省略して書ける。

1var name = "matsuda shinsuke"
2var age = 34
3// var obj = { name: name, age: age }
4var obj = { name, age }
5 
6obj // {name: "matsuda shinsuke", age: 34}

プロパティとは、 オブジェクトが持つ「名前付きのデータ」 のことです。 変数とは異なる概念なので、気をつけてください。非常に似てますが、同じにはしないでくださいね。

JavaScript のオブジェクトは、自身に関連付けられたプロパティを持ちます。オブジェクトのプロパティは、オブジェクトに関連付けられている変数と捉えることができます。オブジェクトのプロパティは、オブジェクトに属するものという点を除けば、基本的に通常の JavaScript 変数と同じようなものです。

オブジェクトのプロパティを取り出す

オブジェクトのプロパティを取り出す時は、. (ドット) を使います。

プロパティの中身をプログラム内で使用することを「取り出す」「アクセスする」「参照する」などと表現しますが意味はだいたい同じです。今は「同じ」だと思ってて問題ないです。

1// obj が持つ name という プロパティ を取り出す(アクセスする、参照する)
2obj.name
3 
4var name = obj.name // 変数に格納
5obj.name = "アイウエオ" // 書き換える
1var obj = {
2 name: "松田信介",
3 age: 34,
4 company_name: "株式会社X-HACK"
5}
6 
7console.log(obj.name) // 松田信介
8console.log(obj.age) // 34
9console.log(obj.company_name) // 株式会社X-HACK

連想配列のkeyを指定して取り出すこともできます

1var obj = {
2 name: "安達祐実",
3 age: 39
4}
5 
6console.log(obj['name']) // 安達祐実
7console.log(obj['age']) // 39

プロパティの中身にアクセスするには、どのオブジェクトが持つプロパティかを指定する必要があります。

1var obj = { name: "松田信介" }
2console.log(name) // undefined
3console.log(obj.name) // 松田信介
1var obj1 = { name: "松田信介" }
2var obj2 = { name: "織田信長" }
3console.log(obj1.name) // 松田信介
4console.log(obj2.name) // 織田信長

オブジェクトを宣言する際のルール

1. 宣言

中括弧 (or 波括弧、or カーリーブラケット)

1{} // 中括弧を使う

2. プロパティが一つの場合の書き方

key と value は : (コロン) で繋ぎます

1// データの名前: 実際のデータ
2// key: value 形式と表現することもあります
3{ name: "松田信介" }

3. プロパティが複数ある場合

カンマで区切ります.

1// 複数ある場合はカンマで区切ります
2// key: value, key: value, ...
3{ name: "松田信介", age: 34 }
4 
5// 改行しても構いません、カンマを忘れずに
6{
7 name: "松田信介",
8 age: 34
9}

オブジェクトのプロパティには関数もセットできる

オブジェクトには関数もセットできます。そして関数もオブジェクトです。関数の解説の時に改めて解説します。 オブジェクトのプロパティに関数(正確には関数オブジェクト)をセットできると覚えておいてください。

1// obj が sayHello という プロパティ を持つ
2var obj = {
3 sayHello: ...
4}
5 
6// sayHello という key に対応する value が functionオブジェクト
7var obj = {
8 sayHello: function() {
9 console.log("こんにちは")
10 }
11}
12 
13// 関数を「参照」する
14obj.sayHello
15// 関数を実行する
16obj.sayHello()

プロパティ内の関数から同じオブジェクトのプロパティにアクセスするにはthisを使う

これが非常に便利なのですが、まだ説明するための材料が十分に揃っていません。現時点ではさらっと理解しておいてください。

1// name と sayHello プロパティ を持つオブジェクト
2var obj = {
3 name: "松田信介",
4 sayHello: function() {
5 console.log("こんにちは、" + this.name + "と申します")
6 }
7}
8 
9obj.sayHello() // こんにちは、松田信介と申します

オブジェクトは何が便利なの?変数をその都度宣言するのと変わらない気がするのですが・・・?

現時点では便利さが実感できないため、何に使うのか分からないと思います。使い道が分からない道具の使い方は人間は覚えられないものなので、まずは「オブジェクト」というデータをまとめるものがあるんだなくらいに考えておいてください。

参考資料

長くなりました。。。 オブジェクトについてはまだまだ言うことがあります。


次回もこの話を続けます!

次回はこちら JavaScript道場:5日目 オブジェクトの解説続き