— javascript, tutorialss — 1 min read
四日目は、変数とメモリの関係性について話すつもりでしたが、オブジェクトについて先に話します。オブジェクトは重要なので折に触れて繰り返し説明します。まずは基本を抑えましょう。
「オブジェクトとは、名前と値をもつプロパティを格納する入れ物にすぎない」
オブジェクトは、単なる「データの入れ物」です。
前日の資料はこちら +JavaScript道場:三日目 / データ型と二進法について
this
一言で言ってしまうと、オブジェクトとは「関連のあるデータと機能の集合」です。 ただ、それだけです。オブジェクトは連想配列と呼ばれることもあります。
難しくありませんので安心してください。 オブジェクトを使うと 「データをまとめて扱える」というだけ の話です。
オブジェクトの宣言方法は下記です。たったこれだけ。
1{}
確認してみましょう
1typeof {} // "object"
補足:typeof 演算子については次回を参照
1// 例12var obj = {}3// 例24var person = {}
比較演算子(== ,!= , <, > など)については別途紹介します
1var obj1 = {}2var obj2 = {}3 4if (obj1 === obj2) {5 console.log("同じ?")6} else {7 console.log("同じではない")8}
「プロパティ」とはオブジェクトが持つデータのことです。 オブジェクトには「プロパティ」をセットできます。プロパティという名前はよく覚えておいてください。
ここの理解は非常に重要ですので、しっかり理解してください。
宣言時に指定する方法
1var obj = { name: "matsuda shinsuke", age: 34 }2 3obj // {name: "matsuda shinsuke", age: 34}
. (ドット) を使用してプロパティに値をセットする
1var obj = {}2obj.name = "matsuda shinsuke"3obj.age = 344 5obj // {name: "matsuda shinsuke", age: 34}
ハッシュ(連想配列)を使用してプロパティに値をセットする
1var obj = {}2obj['name'] = "安達祐実"3obj['age'] = 394obj['profile'] = 'She is an actress.'5 6obj // { name: "安達祐実", age: 39, profile: 'She is an actress.' }
ES2015からの機能。プロパティ名と値に指定する変数名が同じ場合、省略して書ける。
1var name = "matsuda shinsuke"2var age = 343// var obj = { name: name, age: age }4var obj = { name, age }5 6obj // {name: "matsuda shinsuke", age: 34}
プロパティとは、 オブジェクトが持つ「名前付きのデータ」 のことです。 変数とは異なる概念なので、気をつけてください。非常に似てますが、同じにはしないでくださいね。
JavaScript のオブジェクトは、自身に関連付けられたプロパティを持ちます。オブジェクトのプロパティは、オブジェクトに関連付けられている変数と捉えることができます。オブジェクトのプロパティは、オブジェクトに属するものという点を除けば、基本的に通常の JavaScript 変数と同じようなものです。
プロパティの中身をプログラム内で使用することを「取り出す」「アクセスする」「参照する」などと表現しますが意味はだいたい同じです。今は「同じ」だと思ってて問題ないです。
1// obj が持つ name という プロパティ を取り出す(アクセスする、参照する)2obj.name3 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) // 349console.log(obj.company_name) // 株式会社X-HACK
1var obj = {2 name: "安達祐実",3 age: 394}5 6console.log(obj['name']) // 安達祐実7console.log(obj['age']) // 39
プロパティの中身にアクセスするには、どのオブジェクトが持つプロパティかを指定する必要があります。
1var obj = { name: "松田信介" }2console.log(name) // undefined3console.log(obj.name) // 松田信介
1var obj1 = { name: "松田信介" }2var obj2 = { name: "織田信長" }3console.log(obj1.name) // 松田信介4console.log(obj2.name) // 織田信長
中括弧 (or 波括弧、or カーリーブラケット)
1{} // 中括弧を使う
key と value は : (コロン) で繋ぎます
1// データの名前: 実際のデータ2// key: value 形式と表現することもあります3{ name: "松田信介" }
カンマで区切ります.
1// 複数ある場合はカンマで区切ります2// key: value, key: value, ...3{ name: "松田信介", age: 34 }4 5// 改行しても構いません、カンマを忘れずに6{7 name: "松田信介",8 age: 349}
オブジェクトには関数もセットできます。そして関数もオブジェクトです。関数の解説の時に改めて解説します。 オブジェクトのプロパティに関数(正確には関数オブジェクト)をセットできると覚えておいてください。
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.sayHello15// 関数を実行する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日目 オブジェクトの解説続き