JavaScriptのオブジェクトについて基本を1から説明

スポンサーリンク

JavaScriptの重要な概念の1つにオブジェクトがあります。 このページではJavaScriptの入門者向けにオブジェクトの基礎の基礎を1から解説します。 何度か読み返せばオブジェクトの基礎は理解できます。

現在作成途中です。

オブジェクトとは

JavaScriptにおけるオブジェクトとは、複数のデータを1つにまとめたものです。

複数のデータを扱うという点では配列と同じですが、違うところが多々あります。 比較した方がわかりやすい場合はそのつど比較していきます。

この段階で抽象的な言葉を並べても退屈なだけなので、さっそく具体例を見ていきます。

空のオブジェクトを生成する

まず空のオブジェクトを生成してみます。オブジェクトは中括弧{}で囲みます。2つの生成方法がありますが、どちらでも構いません。


// 空のオブジェクト
var obj = {};


// これも空のオブジェクトを生成
var obj = new Object();

確認事項として、空の配列を生成する場合は次のように書きます。


var arr = [];

var arr = new Array();

ここで押えて欲しい基本事項は、オブジェクトは中括弧{}、配列は角括弧[]で囲むということです。 慣れないうちは混同しやすい所です。

プロパティとは

次は空ではなく、データの入っているオブジェクトについてみていきます。 次のようなオブジェクトが何を意味しているのかを順番に説明していきます。


var obj = {x: 0, y: 0};

まず、オブジェクトは順序付けされていないプロパティの集合です。
逆に順序付けされているプロパティの集合が配列です。

「順序付けされていない」とは、プロパティの順番は問わないということです。具体的には


var obj = {x: 0, y: 0};

と記述しても、プロパティの順番を変えて


var obj = {y: 0, x: 0};

と記述しても、どちらでも変わりません。

次にプロパティはカンマ(,)で区切ります。

これを表すと、次のようになります。


var オブジェクト = {プロパティ,プロパティ};

そして、プロパティは「名前」と「値」を持ちます。 さらに、「名前」と「値」はコロン(:)で区切ります。

つまり「プロパティ」 = 「名前: 値」です。 これを表すと、次のようになります。


var オブジェクト = {名前: 値, 名前: 値};

これで先ほどの


var obj = {x: 0, y: 0};

の意味がわかると思います。

「x: 0」と「y: 0」はそれぞれプロパティです。プロパティはカンマ(,)で区切られています。

「x: 0」は名前がx、値が0。
「y: 0」は名前がy、値が0。

このような意味になっています。これまでの要点をまとめると

  • オブジェクトは中括弧{}で囲む
  • オブジェクトは順序付けされていないプロパティの集合
  • プロパティはカンマ(,)で区切る
  • プロパティは「名前」と「値」を持つ
  • 「名前」と「値」はコロン(:)で区切る
以上を押えておいてください。

オブジェクトの具体例をもっと見てみる

上では説明のため、プロパティが2つの簡単なオブジェクトを紹介しましたが、 実際はもっとプロパティ数の多いオブジェクトを使ってプログラムを作成します。 ここではもう少し具体的なオブジェクトの例を見ていきます。

ツール・書籍紹介

まとめ・一覧

基本編

数値

文字列

正規表現

日付・時刻

配列

関数

オブジェクト指向

DOM操作

API

便利な小技集

用語

実践編

関連サイト