JavaScript | 基礎構文:オブジェクト – メソッド

JavaScript JavaScript
スポンサーリンク

メソッドとは何か

メソッドは、オブジェクトのプロパティとして格納された「関数」です。オブジェクトのデータ(他のプロパティ)を使って処理を行う“振る舞い”を表し、「データ+振る舞い」をひとまとまりにすることで、意味のある単位として扱えます。重要なのは、メソッド内から自分自身のデータへアクセスするときに 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.メソッド」の形なら、thisuser を指します。


後からメソッドを追加する(拡張の感覚)

既存オブジェクトへメソッドを後付けできます。アプリの成長に合わせて振る舞いを増やすのに便利です。

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); // こんにちは、太郎
JavaScript

getter/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 の扱いが安定します。切り出し時は bindthis を固定し、call/apply で借用も可能です。getter/setterでプロパティ風の振る舞いを作り、チェーンやクラスで設計を整理すると、読みやすく拡張しやすいオブジェクト設計が身につきます。

タイトルとURLをコピーしました