JavaScriptにおいてのオブジェクト
前回の記事の冒頭でデータ型について少し触れましたが、前回紹介したデータ型は一括りにして「プリミティブ型」というデータ型です。
前回では７つのデータ型と紹介しましたが、JavaScriptにはもう一つ８個目のデータ型があります。
それこそが「オブジェクト」です。
プリミティブ型とオブジェクト
まず、プリミティブ型とは、前回軽く紹介した通り「数値」「文字列」「真偽値」などの単純なデータを格納している入れ物です。
それに対してオブジェクト型はその中に「プロパティ（名前）」「バリュー（値）」「メソッド（働き）」といった複合的なデータを格納している入れ物です。
オブジェクト指向型言語とは
オブジェクトというデータ型を扱う為、JavaScriptはオブジェクト指向型言語という位置づけのプログラミング言語となります。
現在使用されているプログラミング言語の多くがこのオブジェクト指向型言語ですが、そもそもオブジェクト指向型とは一体なんなのかという事を考えたいと思います。
オブジェクト指向をざっくりと
オブジェクト指向とはオブジェクトという部品を作成して、組み立て操作する。くらいの認識で問題ないようですが
例えばゲームのキャラクターを作成する時に、「キャラクター」が１０体いるとして、すべての「キャラクター」に「Aボタンでジャンプ」「Bボタンでダッシュ」といったプログラムを入力していくのは手間がかかります。
そこで「キャラクター」というオブジェクト（部品）を作成し、「Aボタンでジャンプ」「Bボタンでダッシュ」というメソッド（機能）を持たせておきます。
この時その「キャラクター」というオブジェクトはメモリ空間に保存されます。
次にその「キャラクター」というオブジェクトを１０個コピー
（メモリ空間に新たに同じ機能（メソッド）を持った「キャラクター」が保存される）
それぞれの「キャラクター１」「キャラクター２」といった名前や姿（プロパティ）を設定すれば、同じ操作で同じ機能を行う、名前や姿の違うキャラクターを作成でき、手間が大きく省けます。
後から「キャラクター」に「Xボタンで攻撃」をいう機能を追加すればコピーした１０体のキャラクター全てに同じ機能が追加されます。
このように同じ機能を持った物をオブジェクトとして定義し、使い回せるようにして効率化する。
そしてこの様なオブジェクトを組み合わせて一つのゲームを作り上げるというような認識です。
JavaScriptでのオブジェクトの書き方
それでは実際にJavaScriptでのオブジェクトの書き方を見てみます。
const Obj ={ // オブジェクトの名前は基本的にはconstで宣言
name: 'Char', // プロパティ： プロパティのバリュー（値）
act: function(){
console.log('Hello!' + Obj.name);
} //オブジェクトのプロパティに格納された関数、このオブジェクトが持つ機能（メソッド）
Obj2: {
name1: 'copyChar1',
age: 20 //オブジェクトのプロパティとしてオブジェクトを設定する事も可能
act2(){
console.log(`Hi!${this.name1} I'm${this.age}`);
} //メソッドの別記法でfunctionを省略、文字列の表示にもテンプレートリテラルを使用。
}
}
obj.act(); //実行結果は Hello！Char
obj.obj2.act2(); //実行結果は Hi!char1 I'm20
これが基本的なオブジェクトの記法です。
メソッドの実行について
まず第一に関数を実行する際には();を最後に付けます。
JavaScriptでは();が「関数を実行する」という役割を持ちます。
またJavaScriptにおける関数とは「実行可能なオブジェクト」という意味を持ちます。
それでは上の例を見てみますと、まず最初の実行文は
obj.act();
となっています。
これはobjの中のactというメソッドを実行しますよ。という実行文です。
ここでのポイントは「obj();」という書き方では無いという事ですね。
objというオブジェクト(部品)はactというメソッド(機能)を持っていますが、obj自体を実行しても、「objに機能はありませんよ」という意味のエラーが出ます。
これはキャラクター（オブジェクト）をジャンプ（メソッド）をさせる為にはAボタン(メソッドのプロパティ)を押さなくてはいけない。
という考え方をするといいかもしれません。
では二つ目の実行文を見てみましょう
obj.obj2.act2(); //obj(キャラクター素体)の中のobj2(プレイキャラクター)を選択してact2(ジャンプさせる)
上の説明を元に考えるとこういった感じでしょうか
今回はobj２にもact2という同じ様なメソッドを記載していますが、本来はこのact自体も一つの部品として定義しておいて、それを呼び出して実行するという方法を取ります。
これをコールバック関数と呼ぶのですが、これはまたの機会にじっくり考えていきます。
ドット記法とブラケット記法
今回メソッドを実行する為に記載した方法をドット記法と言いますが、メソッドの実行文にはもう一つブラケット記法という記載方法があります。
obj['act']();
ブラケット記法はこのように記載します。
見やすいような見やすくないような…私は記号をあれこれ打つのがめんどくさいのでドット記法の方が好きです。
thisについて
act２の実行文において「this」を使っていますが、こちらもコールバック関数と同じく非常に重要な役割を持ちますので、別の記事でじっくり考えていこうと思います。
まとめ
JavaScriptにおいてオブジェクトとはまさに基本にしてとても重要な考え方ですね、こうして記事に起こすことによって、より一層理解が深まりました。
最後までご覧いただいた方、備忘録にお付き合いいただきありがとうございました。
