メソッド短縮記法とは何か
メソッド短縮記法は、オブジェクトやクラスの「関数プロパティ」を function キーワードなしで、name() { ... } の形で簡潔に定義できる ES6 の構文です。ここが重要です：短く書けるだけでなく、this は「メソッド呼び出しの文脈（obj.method() の obj）」を指し、アロー関数のように外側へ逃げません。従来の method: function(...) { ... } と同じ意味で、可読性と保守性が大幅に向上します。
// 従来の書き方
const counter1 = {
value: 0,
inc: function() { this.value++; }
};
// メソッド短縮記法
const counter2 = {
value: 0,
inc() { this.value++; }
};
counter2.inc();
console.log(counter2.value); // 1
オブジェクトでの基本（引数・return・this の扱い）
引数と返り値は従来どおり
短縮記法でも、デフォルト引数・分割代入・rest など、関数の機能はそのまま使えます。ここが重要です：関数としての表現力は維持しつつ、宣言が短くなるだけです。
const user = {
id: 1,
name: "Alice",
greet(greeting = "Hello") { return `${greeting}, ${this.name}`; },
label({ sep = ":" } = {}) { return `${this.id}${sep}${this.name}`; },
sum(...nums) { return nums.reduce((s, n) => s + n, 0); }
};
this は“メソッド呼び出し元”を指す
obj.method() の形で呼べば this は obj を指します。アロー関数のように外側の this をキャプチャしないため、オブジェクトの状態を安全に扱えます。
const cart = {
items: [],
add(item) { this.items.push(item); },
count() { return this.items.length; }
};
cart.add({ id: 1 });
console.log(cart.count()); // 1
クラスでの短縮記法（インスタンス・静的・async・ジェネレーター）
インスタンスメソッドと静的メソッド
クラスでも同じく短縮記法で定義します。ここが重要です：インスタンスの操作は通常メソッド、ユーティリティは static メソッドに分けると意図が明確になります。
class Counter {
constructor() { this.value = 0; }
inc() { this.value++; } // インスタンスメソッド
get() { return this.value; }
static make(start = 0) { // 静的メソッド
const c = new Counter();
c.value = start;
return c;
}
}
async やジェネレーターも短縮で書ける
非同期処理や反復可能な処理も、記法は短縮のままです。
class Repo {
constructor(base) { this.base = base; }
async fetchJson(path) {
const res = await fetch(this.base + path);
if (!res.ok) throw new Error("fetch failed");
return res.json();
}
*range(n) { // ジェネレーター
for (let i = 0; i < n; i++) yield i;
}
}
コールバックでの利点（定義は短く、渡し方は安全に）
メソッドは短く定義、コールバックに渡すときは包む
ここが重要です：メソッドをそのままコールバックに渡すと this を失います（呼び出し元がなくなるため）。アロー関数で包むか、bind で固定して渡すのが安全です。
const view = {
id: 42,
render() { console.log(this.id); }
};
setTimeout(() => view.render(), 0); // 安全：this を保持
setTimeout(view.render.bind(view), 0); // 安全：bind で固定
// setTimeout(view.render, 0); // NG：this なしで実行される
配列メソッドやイベントでの読みやすさ
短縮記法でメソッドを定義し、ループ内ではアローコールバックと組み合わせると、意図が直感的に伝わります。
const store = {
items: [{ id: 1, price: 100 }, { id: 2, price: 200 }],
withTax(rate = 0.1) {
return this.items.map(r => ({ id: r.id, tax: Math.round(r.price * rate) }));
},
logRow(r) { console.log(`${r.id}:${r.price}`); }
};
store.items.forEach(r => store.logRow(r)); // 読みやすく安全
設計指針と注意点（重要ポイントの深掘り）
メソッドにアロー関数を使わない
アロー関数は自前の this を持たず、外側の this をキャプチャします。メソッドとして this を“オブジェクト”にしたいなら、短縮記法（または通常の function）を使います。
const bad = {
x: 0,
inc: () => { this.x++; } // NG：this が外側を指す
};
const good = {
x: 0,
inc() { this.x++; } // OK：this は good
};
取り出し呼び出しで this を失う
const f = obj.method; f(); のように取り出して呼ぶと this が undefined（strict）になります。bind で固定するか、呼び出し側で obj を明示しましょう。
const f = store.logRow.bind(store);
f({ id: 99, price: 500 }); // OK
計算済みプロパティ名やジェネレーターとの組み合わせ
メソッド名を動的に決めたい場合、計算済みプロパティ名と短縮記法を併用できます。必要に応じてジェネレーターも短縮で書けます。
const name = "toJSON";
const obj = {
[name]() { return { ok: true }; },
*iter() { yield 1; yield 2; }
};
例題で理解を固める
// 1) ユーティリティオブジェクト
const utils = {
trimLower(s = "") { return String(s).trim().toLowerCase(); },
pad(num, width = 2) { return String(num).padStart(width, "0"); },
format({ id, name }) { return `${id}:${this.trimLower(name)}`; }
};
console.log(utils.format({ id: 7, name: " Alice " })); // "7:alice"
// 2) クラス＋イベント：短縮メソッドと安全なコールバック
class Timer {
constructor() { this.ticks = 0; }
start() { this.id = setInterval(() => this.ticks++, 1000); } // コールバックはアロー
stop() { clearInterval(this.id); }
}
const t = new Timer();
t.start();
setTimeout(() => { t.stop(); console.log(t.ticks); }, 3100);
// 3) 静的メソッドでファクトリ
class Url {
constructor(base) { this.base = base; }
build({ q = "", page = 1 } = {}) {
const params = new URLSearchParams({ q, page });
return `${this.base}?${params}`;
}
static from(env = "prod") {
return new Url(env === "prod" ? "https://api.example.com" : "/api");
}
}
const api = Url.from("dev");
console.log(api.build({ q: "js" }));
まとめ
メソッド短縮記法の核心は「関数をオブジェクト／クラスの“文脈（this）に正しく結びつけた”形で、短く定義できる」ことです。コールバックでの利点は、短縮記法でメソッドを明確にしつつ、渡すときにアローで包むか bind することで this を安定させ、読みやすさと安全性を両立できる点にあります。メソッドは短縮記法、コールバックはアロー、取り出し呼び出しは bind、アローをメソッドに使わない—この指針を守れば、初心者でも ES6+ の関数設計をシンプルかつ堅牢に運用できます。