【JavaScript】オブジェクト（第10回）

オブジェクトについての学習をします。

準備をしよう

下のURLをクリックして、「paiza.IO」を開いてください。
https://paiza.io/ja/projects/new

オブジェクトとは、抽象的な「モノ」という意味です。例えば、ゲームを作るときを考えると、主人公、敵、アイテムなどがありますが、これらはすべてオブジェクトです。

オブジェクトの基本的な仕組みは、「プロパティ」と「メソッド」です。「プロパティ」はオブジェクトの「情報」、「メソッド」は「操作」と考えることができます。

人を例にあげると、名前や年齢などがプロパティ、歩く・話すなどがメソッド、ということになります。

オブジェクトの情報のことです。

連想配列と同じです。キーと値を「:」でつなげてセットで設定していきます。

具体的に見ていきましょう。

連想配列と同じ方法です。オブジェクト名に「.」をつけて、キーを指定します。

具体的に見てみましょう。

「person」オブジェクトの「name」というプロパティを参照しています。「”taro”」というデータがありますから、「person.name」全体が「”taro”」に化け「taro」とコンソールに表示されます。

paiza.IOに、以下のコードを入れて下さい。

let person = {
    name: "taro",
    age: 24,
};
console.log(person.name);

コードを実行してみましょう。

taro

オブジェクトの操作のことです。ここには必ず、関数を設定します。

オブジェクト内に設定された関数を、メソッドと呼びます。

赤字のところのみです。

上記の通りです。メソッドの場合は、関数自体に名前がないので、キーに「（）」をつけて呼び出します。具体的に見ていきましょう。

さきほどの例だと、上記のようになります。「greet」がキーなので、その後ろに「（）」をつけて、「greet()」とすると、呼び出すことができます。

paiza.IOに、以下のコードを入れて下さい。

let person = {
    name: "taro",
    age: 24,
    greet: function() { console.log("hello") }
};
person.greet();

コードを実行してみましょう。

hello

let person = {
    name: "taro",
    age: 24,
    greet: function() { console.log("hello") }
};
console.log(person.name);
person.greet();

taro
hello

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

以上になります。今回はオブジェクトについてお伝えしました。

オブジェクトは本格的にアプリ開発をしていく上で必須の概念になります。メソッドのところが分かりづらいかもしれませんが、使っていくとだんだん慣れていきます。

概念と使い方を理解したら、どんどん自分で書いてみてください。自然と身についていきます。