更新日: 2017年02月27日
公開日: 2015年12月05日

ゼロから始めるJavaScript講座Vol14　オブジェクトの基礎

ゼロから始めるJavaScript講座オブジェクトの基礎
オブジェクトとは
オブジェクトの書き方
オブジェクトと連想配列
課題

ゼロから始めるJavaScript講座オブジェクトの基礎

オブジェクトとは

とは、「物体をオブジェクトオブジェクトデータ(プロパティ)操作(メソッド)

イメージとして、車を物体(オブジェクト)とした場合、以下のようになります。

2つは同じ「車」というオブジェクトです。

車オブジェクトには、種類・製作会社・色といったデータがあり、これは車によって異なります。このようにオブジェクトが持つデータのことをプロパティ

また車オブジェクトは、アクセル・ブレーキ・クラクションといった操作を行うことができ、このようにオブジェクトに対する操作のことをメソッド

このように車(オブジェクト)をプロパティとメソッドの集合として定義することで、車が何台あっても同じ尺度で扱うことができます。

オブジェクトはJavaScriptの基礎となっており、実はこれまでも多数のオブジェクトを利用しています。

オブジェクトの例として、お手本に従いプログラムを書いてみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>オブジェクト</title>
</head>
<body>
    <script>
        // 配列オブジェクト作成
        var fruits = new Array();

        fruits[0] = 'apple';
        fruits[1] = 'grape';
        fruits[2] = 'melon';

        // lengthプロパティにより配列の中で一番大きいキーの数値+1を取得し表示
        document.write(fruits.length); // 3
        // joinメソッドにより配列の全ての値をカンマで繋いだ文字列を取得し表示
        document.write(fruits.join(',')); // apple,grape,melon
    </script>
</body>
</html>

配列オブジェクトfruitsを定義し、lengthプロパティによるキーの数値+1取得(3)と、joinメソッドにより配列の全ての値をカンマで繋いだ文字列の取得(apple,grape,melon)をしました。

「配列オブジェクト?配列ではなくて？」と疑問に思ったかもしれませんが、実は配列もオブジェクトの一種です。

今回は新しく「fruits」という文字列オブジェクトを作成しました。

配列オブジェクトにはlengthプロパティjoin()メソッド

オブジェクトの書き方

オブジェクトのプロパティやメソッドを利用する場合、「.」(ドット)で繋げて指定します。

これにより、オブジェクトからデータを取り出したり操作を指定することができます。

なおメソッドは関数と同じく括弧まで含めて指定する必要があり、引数も何を指定するか定義されています。

オブジェクトと連想配列

オブジェクトはあらかじめ用意されたものを使う以外に、自分でオブジェクトを作成することも可能です。お手本にある通りプログラムを書いてみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>オブジェクト作成</title>
</head>
<body>
    <script>
        var apple = new Object();

        apple.color = 'red';
        apple.price = 100;
        apple.gram  = 150;

        document.write(apple.color);
        document.write(apple.price);
        document.write(apple.gram);
    </script>
</body>
</html>

オブジェクトを新しく作成し、[color][price][gram]というプロパティと値を定義しました。

「varappleオブジェクト

を定義する場合、プロパティオブジェクト名プロパティ

書き方は複数あり、書き方1と書き方2で、appleの中身は同一になります。

{}(波括弧)を利用することで、一度に複数のプロパティを定義できます。プロパティと値を「:」(コロン)で区切って記述します。

また既にお気づきの方もいるかもしれませんが、次のように書くことも可能です。

連想配列を学んだ際、を記入し、その中に連想配列のキーオブジェクトプロパティ

連想配列はオブジェクトの一種であり、キーオブジェクト

課題

配列fruitsに対し配列オブジェクトのpushメソッドを利用し「orange」を追加後、for文により配列fruitsの中身を全て表示するよう、プログラムを追記してください。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>challenge_object</title>
</head>
<body>
    <script>
        var fruits = new Array();

        fruits[0] = 'apple';
        fruits[1] = 'grape';
        fruits[2] = 'melon';

        // pushメソッドにより配列fruitsへorangeを追加


        // for文により配列fruitsの中身を表示


    </script>
</body>
</html>