JavaScriptの達人になるための必須スキル！ オブジェクト/関数/クラス宣言を使いこなす
JavaScriptの構文: オブジェクト/関数/クラスの宣言を囲むかっこは何を意味しますか？
オブジェクトは、プロパティと値のペアの集まりです。オブジェクトリテラルを使ってオブジェクトを宣言する際、中括弧の中にプロパティと値のペアをカンマで区切って記述します。
const person = {
name: "山田 太郎",
age: 30,
gender: "男性",
};
上記の例では、person というオブジェクトが宣言されています。このオブジェクトには、name、age、gender という3つのプロパティがあり、それぞれ "山田 太郎", 30, "男性" という値が割り当てられています。
関数は、コードのブロックをまとめ、名前を付けて再利用できるようにするものです。関数宣言式や関数式を使って関数を宣言する際、中括弧の中にコードブロックを記述します。
function sayHello(name) {
console.log(`こんにちは、${name}さん！`);
}
sayHello("山田 太郎"); // こんにちは、山田 太郎さん！
上記の例では、sayHello という名前の関数が宣言されています。この関数は、name という引数を受け取り、"こんにちは、${name}さん！" というメッセージを出力します。
クラスは、オブジェクトのテンプレートです。クラスを使ってオブジェクトを生成すると、そのオブジェクトはクラスで定義されたプロパティとメソッドを持つことになります。クラス宣言式を使ってクラスを宣言する際、中括弧の中にクラスのメンバー（プロパティやメソッド）を記述します。
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`こんにちは、${this.name}さん！`);
}
}
const person = new Person("山田 太郎", 30);
person.sayHello(); // こんにちは、山田 太郎さん！
上記の例では、Person という名前のクラスが宣言されています。このクラスには、name と age というプロパティと、sayHello というメソッドがあります。
JavaScriptの構文において、オブジェクト/関数/クラスの宣言を囲む中括弧は、以下の役割を果たします。
- 宣言の内容をグループ化する
- コードの構造を明確にする
中括弧の使い方を理解することで、JavaScriptのコードをより読みやすく、理解しやすいものにすることができます。
オブジェクト
const person = {
name: "山田 太郎",
age: 30,
gender: "男性",
sayHello: function () {
console.log(`こんにちは、${this.name}さん！`);
},
};
person.sayHello(); // こんにちは、山田 太郎さん！
関数
function sayHello(name) {
console.log(`こんにちは、${name}さん！`);
}
sayHello("山田 太郎"); // こんにちは、山田 太郎さん！
const sayGoodbye = (name) => {
console.log(`さようなら、${name}さん！`);
};
sayGoodbye("山田 太郎"); // さようなら、山田 太郎さん！
上記は、関数宣言式と関数式を使って関数を宣言する例です。関数宣言式では、sayHello という名前の関数を宣言しています。関数式では、sayGoodbye という名前の関数を宣言しています。
クラス
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`こんにちは、${this.name}さん！`);
}
}
const person = new Person("山田 太郎", 30);
person.sayHello(); // こんにちは、山田 太郎さん！
オブジェクト/関数/クラス宣言のその他の方法
オブジェクト
- Object.create() メソッドを使う
const person = Object.create({
name: "山田 太郎",
age: 30,
});
console.log(person.name); // 山田 太郎
- new Object() コンストラクタを使う
const person = new Object();
person.name = "山田 太郎";
person.age = 30;
console.log(person.name); // 山田 太郎
関数宣言式と関数式以外にも、以下のような方法で関数を宣言することができます。
- 関数式をプロパティに割り当てる
const person = {
sayHello: function (name) {
console.log(`こんにちは、${name}さん！`);
},
};
person.sayHello("山田 太郎"); // こんにちは、山田 太郎さん！
const sayHello = new Function("name", `console.log(\`こんにちは、\${name}さん！\`)`);
sayHello("山田 太郎"); // こんにちは、山田 太郎さん！
- class キーワードと関数式を使う
const Person = class {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`こんにちは、${this.name}さん！`);
}
};
const person = new Person("山田 太郎", 30);
person.sayHello(); // こんにちは、山田 太郎さん！
オブジェクト/関数/クラス宣言には、さまざまな方法があります。それぞれの方法にはメリットとデメリットがあり、状況に応じて使い分けることが重要です。
javascript syntax
