オブジェクトの中を見てみてみよう

I. オブジェクトとは？

オブジェクトについて、もう少し詳しく説明しましょう。

ここまでは「オブジェクトを使う」という目的のために必要なことを、できるだけ簡単に説明してきました。いわば、自動販売機を外側そとがわから見ていたようなものです。

自動販売機を使うには

お金を入れて
ボタンを押せば
ジュースが出てくる

という点だけ理解していれば、ふつうは大丈夫でしょう。機械の蓋を開いて、中に何が入っているか見る必要はありません。しかし、それでは、中身をまったく知らない小さな子供のように、お菓子の自動販売機からジュースを出そうして、困ってしまうことになるかもしれません。

なので、ここではちょっとだけ、オブジェクトの中身を見てみましょう。自動販売機だって、「この中にジュースの缶やボトルがたくさん入っているんだ」「入れたコインが何円かを計算する装置が入っているんだ」ということを知っていた方が、より間違いなく使えるというものです。

心配しなくても、難むずかしいことはありません。

一言でいうと、オブジェクトは 「関係（かんけい）がある情報をまとめたもの」 です。

ここでは、「プロフィールのカード」 や 「キャラクター」 に例たとえて説明します。

II. イメージは「自己じこ紹介（じこしょうかい）カード」

例たとえば、ある留学生のことを変数へんすうで表してみます。すると、こんなふうになります。

let name = "マリア";
let age = 20;
let country = "ブラジル";

しかし、これだと、情報がバラバラで管理（かんり）が大変です。そこで、これらを1枚のカードにまとめてみます。

III. オブジェクトの書かき方かた

JavaScriptでは { } を使って、このように書きます。

const student = {
  name: "マリア",  // 名前
  age: 20,         // 年齢
  country: "ブラジル" // 出身
};

このように、いくつかの情報を1枚のカードにまとめたもの 、それが「オブジェクト」です。

IV. プロパティ

カードの中のひとつひとつの情報を 「プロパティ」 と言います。カードの中から情報を取り出すときは、「.（ドット）」 を使います。

student.name → 「マリア」が出てくる！
student.age → 「20」が出てくる！

ブラウザオブジェクトでの例れい：

document.body.style.backgroundColor = "red";

このコードは、documentオブジェクトの中のbodyオブジェクトの、backgroundColor（プロパティ）を“red“に変えるという命令です。

V. メソッド: 「特徴」と「動うごき」をセットにできる

オブジェクトのすごいところは、データ（特徴） だけでなく、関数かんすう（動うごき） も一緒にまとめられることです。オブジェクトに含まれる関数かんすうを メソッド と言います。

プロパティ（特徴）： 名前、身長、色、値段など
メソッド（動うごき）： 走る、話す、計算するなど

VI. ゲームのキャラクターで例たとえると：

「オブジェクト」の考え方は、ゲームのキャラクターに例たとえると非常に分かりやすくなります。

オブジェクト：キャラクター自身（例れい：勇者ゆうしゃアレン）
プロパティ：ステータス（例れい：hp や name）
メソッド：行動（例れい：attack() や heal()）

コードでの例れい:

const hero = {
  name: "Allen"      // 特徴（プロパティ）
  hp: 100,           // 特徴（プロパティ）
  level: 5,          // 特徴（プロパティ）
  
  attack: function() { 
    alert("エイッ！と攻撃しました"); // 動（うご）き（メソッド）
  }
};

VII. なぜ「オブジェクト」を使うの？

世界にあるものは、すべて「名前」や「状態（じょうたい）」や「動うごき」を持っていますよね。

車：名前、色、スピード、ブレーキをかける動うごき
スマホ： モデル名、電池の残り、アプリを開く動うごき

オブジェクトを使うと、現実（げんじつ）の世界と同じようにプログラムが書ける ので、複雑（ふくざつ）なアプリも作りやすくなるんです。

Tip

「オブジェクト＝便利な情報のセット」 だと教えてあげてください。 “Object“という英語を辞書で見ると、難むずかしい漢字の「対象物（たいしょうぶつ）」と出てきます。プログラムでは、そう考えるより、「データとアクションをひとまとまりにしたもの」 と覚えるのが近道ちかみちです！

オブジェクトのイメージはつかめたでしょうか？

上で見たstudentやhereのように、自分でオブジェクトを作ることもできます（その方法については、第５章で説明します）。でも、そのまえに、すでに用意されているオブジェクトを利用してみましょう。

Keyboard shortcuts

留学生のためのJavaScript学習ガイド