この翻訳は不完全です。英語から この記事を翻訳 してください。

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

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

オブジェクトの基本

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

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

他の 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] + 'です。');
  }
};

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

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

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

: もし動かないようなら、完成版のソースコードと見比べてみてください (完成版: oojs-finished.html さらにライブ版もあります) 。ライブ版は空白の画面ですが、それでOKです。また開発ツールを開いて上記のコマンドを入力してオブジェクトの構造を見てみます。

さて、何が起きているのでしょうか。オブジェクトには複数のメンバーがあり、それぞれに名前がついていて(例えば上の例では 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']

のように書きます。

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

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

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

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

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

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

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

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

新しいメンバーが追加されたことを確認してみましょう。

person['eyes']
person.farewell()

角括弧での書き方の良いところは、動的にメンバーの値を設定できるだけでなく、メンバーの名前も追加できるところです。例えば、ユーザーの情報として 2 つのテキストフィールドに名前と値を入力してもらい、人により個別のデータを設定したいとします。そういった値を以下のように取得します。

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

そうして、取得したメンバー名と値を次のように person オブジェクトに設定します。

person[myDataName] = myDataValue;

この動作を確認するため、先ほどのコードの person オブジェクトの中括弧に続いて、次の行をコードに追加してみてください。

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

そして、保存して再度読み込んで、次の行をテキストボックスに入力してみてください。

person.height

ドット記法を用いては事前に決められたメンバー名にアクセスすることしかできないため、上記のように事前には決まっていない変数名を使用し、オブジェクトに動的にメンバーを追加することはできません。

"this" とは何か

You may have noticed something slightly strange in our methods. Look at this one 例えば、:

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 (例えば、 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.

: 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.

このモジュール内の文書

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

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