メソッドとは何か
メソッドは、オブジェクトのプロパティとして格納された「関数」です。オブジェクトのデータ(他のプロパティ)を使って処理を行う“振る舞い”を表し、「データ+振る舞い」をひとまとまりにすることで、意味のある単位として扱えます。重要なのは、メソッド内から自分自身のデータへアクセスするときに this を使う点です。
基本の定義と呼び出し(this の直感)
オブジェクトリテラルでは、関数をプロパティに入れるか、メソッド省略記法で定義します。this は「メソッドを呼び出したオブジェクト」を指します。
const user = {
name: "太郎",
greet: function () {
return `こんにちは、${this.name}`;
},
// 省略記法(同じ意味)
say() {
return `${this.name}です`;
}
};
console.log(user.greet()); // こんにちは、太郎
console.log(user.say()); // 太郎です
JavaScriptここが重要です:this は「どう呼んだか」で決まります。user.greet() のように「obj.メソッド」の形なら、this は user を指します。
後からメソッドを追加する(拡張の感覚)
既存オブジェクトへメソッドを後付けできます。アプリの成長に合わせて振る舞いを増やすのに便利です。
const cart = { items: [] };
cart.add = function (name, price) {
this.items.push({ name, price });
};
cart.total = function () {
return this.items.reduce((sum, it) => sum + it.price, 0);
};
cart.add("Tシャツ", 1200);
cart.add("靴", 3500);
console.log(cart.total()); // 4700
JavaScriptアロー関数をメソッド本体に使わない理由(深掘り)
アロー関数は「自分の this を持たず、外側の this をそのまま使う」ため、メソッド本体に使うと期待通りに this がオブジェクトにならないことがあります。メソッドは通常の関数記法で定義し、内部のコールバックにアロー関数を使うのが安全です。
const timer = {
count: 0,
tick() {
setInterval(() => { // コールバックはアローで外側の this を保持
this.count++;
}, 1000);
}
};
timer.tick();
JavaScriptメソッドの切り出しと this の固定(はまりどころの回避)
メソッドを変数へ取り出して呼ぶと「ただの関数呼び出し」になり、this が失われます。bind を使うと this を固定した関数を得られます。
const obj = {
value: 42,
show() { console.log(this.value); }
};
const fn = obj.show;
fn(); // undefined を参照(strictでは this は undefined)
const bound = obj.show.bind(obj);
bound(); // 42(this が obj に固定されている)
JavaScriptメソッドの再利用(借用・委譲のテクニック)
他オブジェクトのメソッドを一時的に借りると、同じ処理を共有できます。call/apply は「今だけ this を指定して呼ぶ」方法です。
function greet() {
console.log(`こんにちは、${this.name}`);
}
const a = { name: "花子" };
const b = { name: "太郎" };
greet.call(a); // こんにちは、花子
greet.call(b); // こんにちは、太郎
JavaScriptgetter/setter(プロパティのように見えるメソッド)
「値の計算や検証を挟むけれど、プロパティっぽく使いたい」なら getter/setter が有効です。読み書き時の振る舞いを定義できます。
const account = {
_balance: 0,
get balance() { // 読み取り時のメソッド
return this._balance;
},
set balance(value) { // 書き込み時のメソッド(検証)
if (value < 0) throw new Error("負の残高は不可");
this._balance = value;
}
};
account.balance = 1000; // setter 呼び出し
console.log(account.balance); // 1000(getter 呼び出し)
JavaScriptメソッドチェーン(連続呼び出しで読みやすく)
メソッドが自分自身(this)や同じオブジェクトを返すように設計すると、連続して処理を書けます。
const builder = {
text: "",
add(str) { this.text += str; return this; },
upper() { this.text = this.text.toUpperCase(); return this; }
};
const result = builder.add("hello ").add("world").upper().text;
console.log(result); // HELLO WORLD
JavaScriptここが重要です:チェーン設計は「副作用の範囲」と「戻り値の一貫性」を意識すると使いやすくなります。
クラスのメソッド(設計を型で整理)
クラスでは、インスタンス(個別のオブジェクト)に結びつくメソッドと、クラス自体に結びつく静的メソッドを使い分けます。
class User {
constructor(name) { this.name = name; }
greet() { return `こんにちは、${this.name}`; } // インスタンスメソッド
static of(name) { return new User(name); } // 静的メソッド(工場)
}
const u = User.of("太郎");
console.log(u.greet()); // こんにちは、太郎
JavaScriptまとめ
メソッドは「オブジェクトのデータを使った振る舞い」を表す関数で、this を通じて自分のプロパティにアクセスします。メソッド本体は通常の関数記法で定義し、内部のコールバックにはアロー関数を使うと this の扱いが安定します。切り出し時は bind で this を固定し、call/apply で借用も可能です。getter/setterでプロパティ風の振る舞いを作り、チェーンやクラスで設計を整理すると、読みやすく拡張しやすいオブジェクト設計が身につきます。
