JavaScriptの関数とオブジェクト
このトピックを終えると
関数を自分で作成してコードを再利用でき、オブジェクトで関連するデータをまとめて管理できます。
関数 — コードをまとめて再利用する
同じコードを何度も書く代わりに、関数としてまとめておくと、名前を呼び出すだけで繰り返し実行できます。
javascript
// 関数の宣言
function greet(name) {
return `こんにちは、${name}さん！`;
}
// 関数の呼び出し
console.log(greet("キム開発")); // "こんにちは、キム開発さん！"
console.log(greet("イコーディング")); // "こんにちは、イコーディングさん！"nameはパラメータ — 関数に渡される入力値です。returnは結果を返すキーワードです。returnがない場合、関数はundefinedを返します。
javascript
// アロー関数 — 短く書く方法（ES6+）
const add = (a, b) => a + b;
console.log(add(3, 5)); // 8
// 複数行の場合は中括弧 + return
const calculate = (price, tax) => {
const total = price + price * tax;
return total;
};
console.log(calculate(10000, 0.1)); // 11000アロー関数(=>)は、現代のJavaScriptで最も一般的に使用される関数作成方法です。1行の場合はreturnも省略できるため、コードが簡潔になります。
オブジェクト — 関連するデータをまとめて管理する
人の名前、年齢、メールをそれぞれ個別の変数に保存すると管理が難しくなります。オブジェクトは、関連するデータをキーと値のペアにまとめて、1つの単位として管理します。
javascript
const user = {
name: "キム開発",
age: 28,
email: "dev@example.com",
skills: ["JavaScript", "Python"]
};
// アクセス方法（2種類）
console.log(user.name); // "キム開発"（ドット記法）
console.log(user["email"]); // "dev@example.com"（ブラケット記法）
// 値の変更
user.age = 29;
// 新しいプロパティの追加
user.company = "スタートアップ";メソッド — オブジェクト内の関数
オブジェクト内に関数を入れることができます。これをメソッドと呼びます。
javascript
const calculator = {
result: 0,
add(value) {
this.result += value;
return this;
},
subtract(value) {
this.result -= value;
return this;
},
show() {
console.log(`結果: ${this.result}`);
}
};
calculator.add(10).add(5).subtract(3).show();
// 結果: 12thisは「このオブジェクト自身」を指します。this.resultはcalculator.resultと同じ意味です。メソッドでreturn thisをすると、チェイニング — メソッドを連続して呼び出すパターンが可能になります。