この記事は翻訳作業中です。

この記事では、基本的な JavaScript オブジェクトの構文を学び、このコースで以前に見たいくつかの JavaScript の機能を復習し、すでに提供された多くの機能がオブジェクトであるという事実を再確認します。

前提知識: 基本的なコンピューターを操作する能力、基本的な HTML と CSS に対する理解、基本的な JavaScript に親しんでいること(JavaScript の第一歩JavaScript の構成要素を参照してください)。
到達目標: オブジェクト指向プログラミングについての基本的な理論、どのように JavaScript に関連するか、 JavaScript の作業を始める方法を理解できること。

オブジェクトの基本

オブジェクトとは関連のあるデータと機能の集合です。(機能はたいていは変数と関数で構成されており、オブジェクトの中ではそれぞれプロパティとメソッドと呼ばれます。) どんなものか例を見てみましょう。

最初に oojs.html ファイルを手元にコピーしてください。このファイルにはちょっとした内容 — ソースコードを書き込むための <script> 要素が一つ含まれています。このファイルをオブジェクトを書くための元として使います。作業中は開発者ツールのJavaScriptコンソールを開いておいて、すぐにコマンドを入力できるようにしておくとよいでしょう。

他のJavaScriptの書き方と同じように、オブジェクトの生成は変数の宣言と初期化から始まります。手始めに、下のコードをファイルに書いて見てください。それから保存して再読み込みしましょう。

var person = {};

person とJavaScriptコンソールに入力すると、以下の結果が表示差れます。

[object Object]

よくやりましたね! まずは最初のオブジェクトができました。でもこれだけでは空のオブジェクトであまり役には立ちません。さらにオブジェクトを変更してみましょう。

var person = {
  name: ['ボブ', 'スミス'],
  age: 32,
  gender: '男',
  interests: ['音楽', 'スキー'],
  bio: function() {
    alert(this.name[0] + ' ' + this.name[1] + 'は' + this.age + '才です。彼は' + this.interests[0] + 'と' + this.interests[1] + 'が好きです。');
  },
  greeting: function() {
    alert('やあ!私は' + this.name[0] + 'です。');
  }
};

保存して再読み込みした後で、コンソールにいくつか入力してみましょう。

person.name[0]
person.age
person.interests[1]
person.bio()
person.greeting()

オブジェクトから、データと機能を追加することができました。これで簡単な書き方で情報が引き出せます。

: もし動かないようなら、完成版のソースコードと見比べてみてください (完成版: oojs-finished.html さらに動くバージョンもあります。) よくある間違いは最後のメンバーの後ろにカンマを書いてしまうことです。これだけでもエラーになってしまいます。

さて、何が起きているのでしょうか。オブジェクトには複数のメンバーがあり、それぞれに名前がついていて(例えば上の例では name や age)、それぞれに値 (['Bob', 'Smith'] や 32) があります。それぞれの名前と値の組はカンマ ( , ) で区切られていて、名前と値はコロン ( : ) で区切られています。常にそのように書きます。

var objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value
}

メンバーの値はほとんど何でも大丈夫です。例えば、先ほどの例では文字列、数値、2つの配列に2つの関数でした。最初の4つはデータ項目でそのオブジェクトのプロパティと呼ばれます。後ろの2つはオブジェクトの持つデータを使用して何かをする関数でオブジェクトのメソッドと呼ばれます。

このように記号を使って書くオブジェクトは後で出てくるクラスを使用して生成する方法と対比してオブジェクトリテラルと呼ばます。

オブジェクトリテラルを使用してオブジェクトを生成する方法はとても一般的で、ある法則に則って構造化したデータをやり取りするときによく使います。(例えばサーバーにリクエストを送ったり、データベースに保存したり。) ある一つのオブジェクトを送るほうが複数の項目を何回かに分けて送るよりも効率的で、名前を用いて検索するときなどには、配列よりも扱いやすいときがあります。

ドットによる記述

先ほどの例では、オブジェクトのプロパティとメソッドに対して、ドット記法を用いてアクセスしました 。オブジェクト内部にカプセル化されたものにアクセスするための、名前空間です。つまり、先にオブジェクトの名前 (person) を書いて、ドット ( . ) を書いて、それから本当にアクセスしたいプロパティの名前や、配列の要素や、そのオブジェクトのメソッドを書くのです。

person.age
person.interests[1]
person.bio()

サブ名前空間

オブジェクトの内部にさらにほかのオブジェクトを持つことも可能です。例えば、先の例で、name メンバーを、

name: ['Bob', 'Smith'],

以下のように変更してみましょう。

name : {
  first: 'Bob',
  last: 'Smith'
},

これで簡単にサブ名前空間を作り出すことができました。難しそうに聞こえるかもしれませんが、ただ単に項目をドットを用いて数珠つなぎにつないでいけばいいのです。コンソールで試してください。

person.name.first
person.name.last

重要: この時点で下の書き方をしていたところは、以下のように変えなければなりません。

name[0]
name[1]

を、

name.first
name.last

のようにしなければ、メソッドが動かなくなってしまうでしょう。

角括弧による記述

オブジェクトのプロパティにアクセスするもう一つの手段として各括弧を用いた記法があります。

person.age
person.name.first

このように書く代わりに、

person['age']
person['name']['first']

のように書きます。

これは配列の添え字によく似ています。数字の代わりに、名前を用いて関連付けられたメンバーの値にアクセスするだけで、実はほとんど同じなのです。このようなオブジェクトを連想配列といい、配列が数字によって値を格納しているように、文字列によって値を格納しています。

オブジェクトメンバーの設定

今まではオブジェクトメンバーからの取得方法だけを見てきましたが、値をセットするメンバーを宣言することで、オブジェクトのメンバーに値をセットすることもできます。(ドットを使用した書き方でも、各括弧を使用した書き方でも構いません。)

person.age = 45;
person['name']['last'] = 'Cratchit';

これらの行を入力してみて、実際に値が変わったか調べてみましょう。

person.age
person['name']['last']

メンバーの値をセットするのは存在するプロパティやメソッドの更新だけにはとどまりません。まったく新しいメンバーを追加することもできるのです。

person['eyes'] = 'ハシバミ色';
person.farewell = function() { alert("バイバイみんな!"); }

You can now test out your new members:

person['eyes']
person.farewell()

One useful aspect of bracket notation is that it can be used to set not only member values dynamically, but member names too. Let's say we wanted users to be able to store custom value types in their people data, by typing the member name and value into two text inputs? We could get those values like this:

var myDataName = nameInput.value;
var myDataValue = nameValue.value;

we could then add this new member name and value to the person object like this:

person[myDataName] = myDataValue;

To test this, try adding the following lines into your code, just below the closing curly brace of the person object:

var myDataName = 'height';
var myDataValue = '1.75m';
person[myDataName] = myDataValue;

Now try saving and refreshing, and entering the following into your text input:

person.height

Adding a property to an object using the method above isn't possible with dot notation, which can only accept a literal member name, not a variable value pointing to a name.

"this" とは何か

You may have noticed something slightly strange in our methods. Look at this one for example:

greeting: function() {
  alert('Hi! I\'m ' + this.name.first + '.');
}

You are probably wondering what "this" is. The this keyword refers to the current object the code is being written inside — so in this case this is equivalent to person. So why not just write person instead? As you'll see in the Object-oriented JavaScript for beginners article when we start creating constructors, etc., this is very useful — it will always ensure that the correct values are used when a member's context changes (e.g. two different person object instances may have different names, but will want to use their own name when saying their greeting).

Let's illustrate what we mean with a simplified pair of person objects:

var person1 = {
  name: 'Chris',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

var person2 = {
  name: 'Brian',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

In this case, person1.greeting() will output "Hi! I'm Chris."; person2.greeting() on the other hand will output "Hi! I'm Brian.", even though the method's code is exactly the same in each case. As we said earlier, this is equal to the object the code is inside — this isn't hugely useful when you are writing out object literals by hand, but it really comes into its own when you are dynamically generating objects (for example using constructors). It will all become clearer later on.

ずっとオブジェクトを使ってきた

As you've been going through these examples, you have probably been thinking that the dot notation you've been using is very familiar. That's because you've been using it throughout the course! Every time we've been working through an example that uses a built-in browser API or JavaScript object, we've been using objects, because such features are built using exactly the same kind of object structures that we've been looking at here, albeit more complex ones than our own custom examples.

So when you used string methods like:

myString.split(',');

You were using a method available on an instance of the String class. Every time you create a string in your code, that string is automatically created as an instance of String, and therefore has several common methods/properties available on it.

When you accessed the document object model using lines like this:

var myDiv = document.createElement('div');
var myVideo = document.querySelector('video');

You were using methods available on an instance of the Document class. For each webpage loaded, an instance of Document is created, called document, which represents the entire page's structure, content, and other features such as its URL. Again, this means that it has several common methods/properties available on it.

The same is true of pretty much any other built-in object/API you've been using — Array, Math, etc.

Note that built in Objects/APIs don't always create object instances automatically. As an example, the Notifications API — which allows modern browsers to fire system notifications — requires you to instantiate a new object instance using the constructor for each notification you want to fire. Try entering the following into your JavaScript console:

var myNotification = new Notification('Hello!');

Again, we'll look at constructors in a later article.

Note: It is useful to think about the way objects communicate as message passing — when an object needs another object to perform some kind of action often it will send a message to another object via one of its methods, and wait for a response, which we know as a return value.

おさらい

Congratulations, you've reached the end of our first JS objects article — you should now have a good idea of how to work with objects in JavaScript — including creating your own simple objects. You should also appreciate that objects are very useful as structures for storing related data and functionality — if you tried to keep track of all the properties and methods in our person object as separate variables and functions, it would be inefficient and frustrating, and we'd run the risk of clashing with other variables and functions that have the same names. Objects let us keep the information safely locked away in their own package, out of harm's way.

In the next article we'll start to look at object-oriented programming (OOP) theory, and how such techniques can be used in JavaScript.

このモジュール内の文書

ドキュメントのタグと貢献者

 このページの貢献者: chameleonhead, mfuji09
 最終更新者: chameleonhead,