はじめに
この記事を読めば、JavaScriptの構造体を使いこなすことができるようになります。
構造体の基本から応用例、注意点、カスタマイズ方法までを12のサンプルコードを交えて解説します。
●JavaScript構造体の基本
○構造体とは
JavaScriptの構造体は、複数の値をまとめて扱うためのデータ構造です。
他のプログラミング言語での構造体と同様、異なる型のデータをひとまとめにすることができます。
○オブジェクトリテラルを使った構造体の作成
JavaScriptでは、オブジェクトリテラルを使って構造体を作成できます。
オブジェクトリテラルは、プロパティ名と値のペアを{}（中括弧）で囲んで表現します。
const person = {
name: "John",
age: 30,
city: "New York"
};●JavaScript構造体の使い方
○サンプルコード1：基本的な構造体の作成と利用
下記のサンプルコードでは、構造体personを作成し、そのプロパティにアクセスしています。
const person = {
name: "John",
age: 30,
city: "New York"
};
console.log(person.name); // John
console.log(person.age); // 30
console.log(person.city); // New York○サンプルコード2：構造体のプロパティへのアクセス
構造体のプロパティにアクセスする方法は2つあります。
ドット記法とブラケット記法です。
const person = {
name: "John",
age: 30,
city: "New York"
};
console.log(person.name); // John (ドット記法)
console.log(person["age"]); // 30 (ブラケット記法)○サンプルコード3：構造体にメソッドを追加
構造体には、関数（メソッド）も追加できます。
下記のサンプルコードでは、person構造体にgreetメソッドを追加しています。
const person = {
name: "John",
age: 30,
city: "New York",
greet: function () {
console.log("Hello, my name is " + this.name);
}
};
person.greet(); // Hello, my name is John○サンプルコード4：構造体を引数として関数に渡す
構造体を関数に引数として渡すことができます。
下記のサンプルコードでは、構造体personを引数としてshowInfo関数に渡しています。
const person = {
name: "John",
age: 30,
city: "New York"
};
function showInfo(p) {
console.log(p.name + " is " + p.age + " years old and lives in " + p.city);
}
showInfo(person); // John is 30 years old and lives in New York●JavaScript構造体の応用例
○サンプルコード5：構造体を使ったデータの管理
構造体は、データの管理に役立ちます。
下記のサンプルコードでは、商品の情報を格納する構造体productを作成しています。
const product = {
id: 1,
name: "Laptop",
price: 1200,
stock: 5
};
function printProductInfo(p) {
console.log("Product: " + p.name + ", Price: $" + p.price + ", Stock: " + p.stock);
}
printProductInfo(product); // Product: Laptop, Price: $1200, Stock: 5○サンプルコード6：構造体を使った簡単なグラフ作成
構造体を使って、簡単なグラフを作成することができます。
下記のサンプルコードでは、点の座標を表す構造体pointを作成し、その座標を表示しています。
const pointA = {
x: 2,
y: 3
};
const pointB = {
x: 5,
y: 7
};
function printCoordinates(p) {
console.log("X: " + p.x + ", Y: " + p.y);
}
printCoordinates(pointA); // X: 2, Y: 3
printCoordinates(pointB); // X: 5, Y: 7○サンプルコード6：構造体を使った簡単なグラフ作成
構造体を使って、簡単なグラフを作成することができます。
下記のサンプルコードでは、点の座標を表す構造体pointを作成し、その座標を表示しています。
const pointA = {
x: 2,
y: 3
};
const pointB = {
x: 5,
y: 7
};
function printCoordinates(p) {
console.log("X: " + p.x + ", Y: " + p.y);
}
printCoordinates(pointA); // X: 2, Y: 3
printCoordinates(pointB); // X: 5, Y: 7○サンプルコード7：構造体を使ったソート機能
構造体を利用して、データをソートすることができます。
下記のサンプルコードでは、studentsという構造体の配列を作成し、その配列を成績の降順でソートしています。
const students = [
{ name: "Alice", score: 90 },
{ name: "Bob", score: 82 },
{ name: "Charlie", score: 95 }
];
students.sort(function (a, b) {
return b.score - a.score;
});
console.log(students);
// Output:
// [
// { name: "Charlie", score: 95 },
// { name: "Alice", score: 90 },
// { name: "Bob", score: 82 }
// ]○サンプルコード8：構造体を使ったスライダー
構造体を利用して、スライダーの状態を管理することができます。
下記のサンプルコードでは、スライダーの値と最大・最小値を格納する構造体sliderを作成し、スライダーの値が範囲内に収まっていることを確認しています。
const slider = {
value: 50,
minValue: 0,
maxValue: 100
};
function isValueInRange(s) {
return s.value >= s.minValue && s.value <= s.maxValue;
}
console.log(isValueInRange(slider)); // true●JavaScript構造体の注意点と対処法
○プロパティ名の衝突
構造体のプロパティ名が重複していると、後から定義されたプロパティが上書きされてしまいます。
これを防ぐためには、一意なプロパティ名を使用することが重要です。
○構造体内でのthisの挙動
構造体内の関数（メソッド）でthisを使用する際には注意が必要です。
thisは、関数が呼び出された際の実行コンテキストに依存するため、意図しない値が参照されることがあります。
対処法として、アロー関数を使用することができます。
アロー関数では、thisは宣言された時点での実行コンテキストを参照します。
const person = {
name: "John",
age: 30,
city: "New York",
greet: () => {
console.log("Hello, my name is " + this.name);
}
};
person.greet(); // Hello, my name is undefined (thisがグローバルオブジェクトを参照するため)●JavaScript構造体のカスタマイズ
○サンプルコード9：構造体のプロパティを追加・削除
構造体のプロパティを追加・削除することができます。
下記のサンプルコードでは、構造体personに新しいプロパティjobを追加し、cityプロパティを削除しています。
const person = {
name: "John",
age: 30,
city: "New York"
};
person.job = "Developer"; // jobプロパティを追加
delete person.city; // cityプロパティを削除
console.log(person); // { name: "John", age: 30, job: "Developer" }○サンプルコード10：構造体を継承する
JavaScriptでは、構造体を継承することで、既存の構造体のプロパティやメソッドを再利用し、新しい構造体を作成することができます。
下記のサンプルコードでは、Object.assign()を使って、構造体personを継承し、新しい構造体employeeを作成しています。
const person = {
name: "John",
age: 30,
city: "New York",
greet: function() {
console.log("Hello, my name is " + this.name);
}
};
const employee = Object.assign({}, person, {
job: "Developer",
company: "Awesome Inc."
});
employee.greet(); // Hello, my name is John
console.log(employee.job); // Developerまとめ
この記事を読めば、JavaScriptで構造体を作成・使用する方法がマスターできます。
JavaScript構造体の基本から応用例、注意点と対処法、カスタマイズ方法まで、幅広い知識を網羅しています。
今後のプログラミングで、JavaScript構造体を活用して、より効率的なコードを書くことができるようになります。
