JavaScript 基礎 第10回 『オブジェクトの概要』

JavaScript 基礎 第9回では「配列」はデータの集合であると説明しましたが、もう一つデータの集合体の概念として「オブジェクト」があります。
オブジェクトについて知ることで、JavaScriptで実行できる処理の幅をさらに広げることができます。この章ではそんな「オブジェクト」について勉強していきましょう。

オブジェクトとは

さて、これまではJavaScriptを使って実装できるプログラムの機能やそのための仕組みについて学んできましたね。
JavaScriptの機能はそれだけではなく、使い方次第で直接ファイルを触らなくてもHTMLやCSSの操作することも可能です。JavaScriptでWebページのコンテンツを更新するには「DOM（ドム）」という仕組みを使いますが、まずはDOMについて学ぶ前に「オブジェクト」という概念から順に理解していきましょう。

オブジェクトとは、変数や関数など、プログラムに関連するデータや機能の集合体を指します。
例えば「自動車」関連のプログラムを作成するとした場合、「車種」「色」「幅」といった情報や、「加速する」「曲がる」といった機能などのデータを「自動車オブジェクト」という1つのオブジェクトにまとめます。

オブジェクトが持つこうしたデータや機能は、それぞれ「プロパティ」や「メソッド」と呼ばれます。

プロパティ

プロパティとは、オブジェクトが持つ属性や状態を表す言葉です。
自動車オブジェクトの場合、「色」や「幅」、「メーカー」といった情報がプロパティにあたります。
プロパティは主にオブジェクトの特徴を表しており、そのオブジェクトがプログラムの中でどのような動きをするかを定義する際にも役立てられます。

メソッド

プロパティの中でも、「加速する」や「曲がる」といった、オブジェクトに対する振る舞いを定義した関数のことをメソッドと呼びます。端的に言うと、オブジェクトが持つ関数はメソッドと呼ばれます。

オブジェクトの宣言

オブジェクトを宣言する際は以下の構文の形式で記述します。

■オブジェクトの宣言

let ●変数名● = {
  ●プロパティ名1●: '●データ1●',
  ●プロパティ名2●: '●データ2●',
}

このように、オブジェクトは{}（波括弧）で定義するプロパティとそれに対応するデータを囲むことで生成されます。
配列の宣言は[]（角括弧）で行われるので、混同しないように注意しましょう。
前項の「自動車オブジェクト（変数car）」を宣言するとしたら下記の形になります。

■例1. オブジェクト「car」を宣言

let car = {
  color: '赤',      //「色」を表すプロパティ
  width: '1700mm',  //「幅」を表すプロパティ
}

メソッドの定義

続いてメソッドの定義方法について解説していきます。
メソッドの項目でも説明しましたが、メソッドはオブジェクト内にある関数を指します。つまり、メソッドの書き方は関数の書き方とほぼ同じになります。

■メソッドの定義

let ●変数名● = {
  ●メソッド名●: function(●引数1●, ●引数2●) {
    ●実行する処理●
  }
}

メソッドを定義するには、オブジェクトの宣言内でメソッドの名前の後ろにコロン（:）をつけ、その後ろに処理の内容を記述した関数を書いていきます。

よく見てみるとfunctionの後ろに関数名がありませんね。これは第6回の関数で解説した「無名関数」です。メソッドを利用するときはメソッド名で処理を呼び出すので、関数名はつけずに無名関数の形で記述する必要があります。
例えば、オブジェクト「car」で加速のメソッド「accelerate」を定義した場合は以下のような記述になります。

■例2. オブジェクト「car」にメソッド「accelerate」を定義

let car = {
  accelerate: function() {
    ●加速の処理●
  }
}

オブジェクトの使い方

次にオブジェクトの使い方について学びましょう。

前述したとおり、「自動車」というオブジェクトは関連するプロパティ（データ）を持っており、そのプロパティ内に「加速する」「曲がる」といったメソッド（操作）が含まれています。
オブジェクトの使い方は非常にシンプルで、「オブジェクト名」と「メソッドのプロパティ名」をドットでつないで表記することで利用することができます。

■プロパティの構文

●オブジェクト名●.●メソッドのプロパティ名●()

例えば、オブジェクト「car」で加速のメソッド「accelerate」を使う場合は以下のような記述になります。

■例3. オブジェクト「car」のメソッド「accelerate」を呼び出す

car.accelerate()

オブジェクトとWebページ

これまではオブジェクトの基本概念と使い方について学びました。
ではこのオブジェクト、Webページにどういった形で活用されているのでしょうか？

JavaScriptには、実は初めから用意されているオブジェクトがいくつかあります。
例えば、「windowオブジェクト」はWebページの情報を取得したり、ブラウザの機能を操作したりするオブジェクトで、そのプロパティにはドキュメントの出力や情報を取得する「documentオブジェクト」や、これまでも活用してきたコンソールを扱う「consoleオブジェクト」など、ブラウザを構成するさまざまな機能が備えられています。

そしてWebページを構成している情報は「documentオブジェクト」に含まれているので、「documentオブジェクト」をJavaScriptで操作することによって、HTMLやCSSを操作することができるようになります。

●オブジェクト名1●.●オブジェクト名2●.●メソッド名●()

配列とオブジェクトの違い

前回紹介した「配列」も今回の「オブジェクト」も「データの集合体」という共通点を持っています。では配列とオブジェクトはいったいどんな違いがあるのでしょうか？

配列とオブジェクトで大きく異なる点は「何を経由してデータにアクセスしているか」という点です。
・配列：インデックス（管理番号）からデータにアクセスする
・オブジェクト：プロパティ（名前）からデータにアクセスする

こうした特徴から、配列は要素の順序が重要で、同じ型のデータを管理するのに適しており、オブジェクトはデータの順序が関係なく、自動車の「色」や「幅」のようにデータがプロパティと値の組み合わせで構成されているものを1つにまとめるのに適しているのです。

まとめ

この章では「オブジェクト」と「プロパティ」「メソッド」の概要について解説してきましたが、いかがでしたか？
実際にオブジェクトを使ってみるとよりイメージが湧いてくると思いますが、まずはオブジェクトという概念についてここできちんと理解を深めておいてください。

次の章ではいよいよDOMを使ってHTMLやCSSを操作していきます。