オブジェクト
JavaScript でオブジェクトを変数として宣言するには以下のように連想配列を使用します。
let object_ = {};
上記は object_ はオブジェクトを扱う変数として宣言しています。中身はなく、空のオブジェクトです。
オブジェクトは Object 型と呼ばれます。
let example = new Object();
Object は連想配列でもあります。
JavaScript では、オブジェクトとはプロパティ、メソッドなどが定義された連想配列型データをいいます。
多くの場合はオブジェクトはクラスから生成されます。
クラスから生成されたオブジェクトデータはインスタンスと呼ばれます。解説の都合上 JavaScript ではオブジェクトとも呼ばれます。
オブジェクトは物体や事象を表しオブジェクト指向によって提唱されました。
提唱されたオブジェクト
とデータと関数の組み合わせたオブジェクト
では違いがあるためにプログラム上ではオブジェクトをインスタンスと呼びます。
オブジェクトの作成
オブジェクトを変数として宣言するには以下のようにします。
let obj_student = {};
これだけでは obj_student は空の状態ですが、オブジェクトにはデータや関数を後で追加することができます。
名前(name)、年齢(age)、クラス名(class_name) というデータを加えてみます。
obj_student.name = "sam"; obj_student.age = 10; obj_student.class_name = "B";
このことによって名前、年齢、クラス名というプロパティが追加されました。同じ容量でメソッドも追加することができます。
連想配列
Object 型は連想配列でもあります。連想配列の key とvalue の組み合わせの編集方法で上記の例を作成することもできます。
let obj_student = { name:"sam", age:10, class_name:"B" };
連想配列については連想配列型( Object )
で解説しています。オブジェクトの扱いと共通しますので参照してみてください。
オブジェクトは生徒の名簿として使えそうです。しかし、これではデータごとに変数宣言から始めなければなりません。JavaScript にはクラス宣言を使うことによって同じような形式のオブジェクトを複製することができます。
プロパティについて
オブジェクトはプロパティとメソッドを持つことができます。
プロパティはオブジェクトを表す変数で、メソッドは主に変数を操作するための関数です。
プロパティは変数名(識別子)とその値の組み合わせです。キーと値と言ったりもします。プロパティの順番は決まっていません。
プロパティは以下のようにオブジェクトの後に.
または[ ]
を使って指定します。
console.log( obj_student.name ); // または console.log( obj_student['name'] );
このことは連想配列に準じています。
プロパティにはプロパティ自体を操作するための Object.defineProperty()、Object.getOwnPropertyDescriptor() といったメソッドがあります。
ディスクリプタの操作によって、プロパティの変更、列挙型、削除といった既定の性質を変更することができます。
オブジェクトのプロパティとメソッドについては連想配列型( Object )
ページを参照してください。
クラス
JavaScript では class キーワードを使用してクラスを定義できます。クラスはオブジェクトのひな型のようなもので、同じような形式のオブジェクトを複数作成することができます。
class Example{ constructor(){ } }
このように宣言すれば、Example クラスが定義できました。constructor() はコンスラクターといいオブジェクトを生成するための関数です。
このひな型からオブジェクトを生成するには以下のようにします。new キーワードでオブジェクトを生成しようとすると、まずは constructor() を呼び出します。
const example_a = new Example(); const example_b = new Example();
クラス定義から同じひな型を使ったオブジェクトが example_a、example_b と複数できました。(ただし、この例ではクラスの中身がないので、作成されるオブジェクトも中身はありません。)
クラスから生成されたオブジェクトは正式にはインスタンス
といいます。
例えば、上記のオブジェクトの作成 obj_student をクラスで作成してみます。
class Student{ constructor( name, age, class_name ){ this.name = name; this.age = age; this.class_name = class_name; } }
この生徒データconstructor(
const student_01 = new Student("same", 10, "B"); const student_02 = new Student("tanaka", 10, "A");
クラスについて詳しくはクラス
ページを参照してください。
JSON
JavaScript では JSON と呼ばれるデータの受け渡しに利用するデータの記述方法があります。
JavaScript では XML というテキストもデータの受け渡しに利用されます。どちらもそのテキストを JavaScript に渡すと素早く DOM として利用できるようしてくれます。
JSON テキストのデータ構造は連想配列のリストと同じ key と value の組み合わせで編集します。
[ { "name":"sam", "age":10, "class_name":"B" }, { "name":"tanaka", "age":10, "class_name":"A" } ]
JSON は連想配列と同じ構造になっているために連想配列が JSON データして解説されているケースがありますが同じではありません。
JSON は Ajax といわれる XMLHttpRequest といった方法で外部からデータを取り込むときに利用されます。詳しくはDOM XMLHttpRequest インターフェイス
を参照してください。
JSON の方がデータとして扱い易く処理が速いと言われています。
JSON は stringify() メソッドによって JSON データテキストとして出力することができます。XML は読み込むことができるのですが出力するにはその要領を作成する必要があります。
JSON と XML、どちらを利用するかはその用途によると思います。