JavaScriptはオブジェクトを扱う

JavaScriptではオブジェクトを扱えます。あらかじめ定義されているdocumentやwindowもオブジェクトです。独自に定義することもできます。

JavaScriptはこのオブジェクトと呼ばれているものをベースとして設計されている言語です。だからこそ、オブジェクトを理解するとJavaScriptが書きやすくなります。

オブジェクトの正体

オブジェクトは情報をもっています。現実の車が、重さや色を持っているのと同じようなイメージです。これをプロパティと呼びます。

オブジェクトはプロパティを入れるカバンと表現することもできます。

プロパティは名前と保持する値の2つで1組です。以下のように書くとオブジェクトが生成できます。

// オブジェクトの元となる関数を定義
function Car(color, weight) {
   this.color = color;
   this.weight = weight;
}

// Carを元に新しくオブジェクトを生成
const myCar = new Car("black", 5);

上の例にあるCarオブジェクトにはcolorとweightの情報が保存できます。

// オブジェクトの元となる関数を定義
function Car(color, weight) {
   this.color = color;
   this.weight = weight;
}

// Carを元に新しくオブジェクトを生成
const myCar = new Car("black", 5);
const yourCar = new Car("pink", 500);
const bobisCar = new Car("orange", 5);

このように複数のCarオブジェクトを生成することも可能です。見た目の変数上はthis.colorとthis.weightはそれぞれひとつずつしかありません。

const myCar = new Car("black", 5);

しかし、newというキーワードを合わせて使うことで新しいオブジェクトを生成し、そのオブジェクトに対してプロパティを設定できます。

これによって、複数のCarオブジェクトを作る時にも2種類の値が混ざらないようになっています。

実際に生成したオブジェクト自体のことをインスタンスと呼ぶことがあります。ただJavaScriptではインスタンスと、元となるオブジェクトの間に大きな差はありません。
例）Carオブジェクトから生成したインスタンスを変数myCarに入れる
　　変数にインスタンスが入っていない

また、オブジェクトを作るためには関数が必要です。今回はCarという名前で関数を定義しました。このようなオブジェクトの元になる関数をコンストラクタ関数と呼びます。

先ほどのコードは以下のようにも書けます。

// オブジェクトの生成
const myCar = {
    color: "black",
    weight: 5
};

コンストラクタ関数やnewなどを省略して書いた形です。
こちらのほうが個人的には理解しやすいのですが、複数同じ構造のオブジェクトが必要な場合、コンストラクタ関数と違って同じプロパティ名が存在することが保証されないので、使い分けないといけませんね。

プロパティの使い方は以下の通りです。

// 色を表示
console.log(myCar.color); // 出力: black

// 後から代入もできる
myCar.color = "green";
console.log(myCar.color); // 出力: green

また、存在しないプロパティに代入すると、そのプロパティが追加されます。

myCar.price = 100;
console.log(myColor.price); // 出力: 100

プロパティの値には、通常の変数と同じように別のオブジェクトや関数を入れることもできます。

インスタンスと同じように、プロパティに関数を入れるとメソッドと呼ばれることがあります。インスタンスやメソッドなどの言葉はJavaScriptのようにオブジェクトをベースにする言語ではなく、クラスというものをベースにする言語から来ています。言葉は同じですが、クラスベースの言語が定義するメソッド、インスタンスとは厳密には異なります。

const myCar = {
    speed: 10,
    position: { x: 0, y: 0 }, // オブジェクトの生成を一行で書いている
    move: function() { // メソッドの定義
        this.position.x += this.speed;
    }
};

myCar.move();

myCarのpositionにxとyのプロパティを持つオブジェクトを入れて、moveには関数を入れました。使い方は先ほどと同じです。

myCar.speed = 30;
myCar.move();
console.log(myCar.position.x); // 出力: 30

プロパティのアクセス方法として先ほどのドットを使うやり方をドット記法と呼びます。

他にはブラケット記法と呼ぶものがあります。

const persons = {
    bob: "ボブ",
    bobo: "ボボ",
    bobob: "ボボブ"
};

console.log(persons["bob"]); // 出力: ボブ

const name = "bobo";
console.log(persons[name]);  // 出力: ボボ

ブラケット記法では大かっこの中に文字列でプロパティ名を書くと値にアクセスできます。

まとめ

HTMLの要素を操作するときは、その要素を操作するためのプロパティが設定されたオブジェクトを取得する必要があります。

const idName = document.getElementById("id-name");

id-nameというidが指定された要素に関するオブジェクトを取得するコードです。取得した要素がidNameに入っているので、idNameを使って指定の要素が操作できます。

また、オブジェクトには今回紹介しなかったプロトタイプという概念もあります。オブジェクトを継承するときに必要になるので、気になった方は調べてみてくださいね。

・JavaScriptはオブジェクトを扱う
・オブジェクトはプロパティのかばん
・プロパティには数値、文字列、関数、別のオブジェクトなどが入る
・HTML要素などもオブジェクト