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

JavaScript JavaScript
2025.12.16
スポンサーリンク

メソッドって何者？

メソッドは、
「オブジェクトにくっついている関数」 です。

オブジェクトが「データ（状態）」を持っているとしたら、
メソッドはそのデータに対して「できること（振る舞い）」を表します。

人で言えば、
データ：名前・年齢
メソッド：挨拶する・自己紹介する

というイメージです。
「データ＋それを扱う関数」をひとまとめにしたのが、メソッドを持つオブジェクトです。

一番シンプルなメソッドの例

オブジェクトの中に関数を書く

const user = {
  name: "太郎",
  greet: function () {
    console.log("こんにちは、" + this.name + "です");
  },
};

user.greet(); // こんにちは、太郎です
JavaScript

ここで greet がメソッドです。

ポイントは2つあります。

1つ目：
greet: function () { ... } のように、
「プロパティの値として関数を入れている」こと。
“関数を値として持っているプロパティ”がメソッド です。

2つ目：
メソッドの中で this.name を使っていること。
this は「このメソッドを呼び出しているオブジェクト」を指します。
ここでは user.greet() と呼んでいるので、this は user です。

だから this.name は "太郎" になります。

メソッドの短い書き方（メソッド記法）

よく使う現代的な書き方

さっきの greet は、
もう少し短く書けます。

const user = {
  name: "太郎",
  greet() {
    console.log("こんにちは、" + this.name + "です");
  },
};

user.greet(); // こんにちは、太郎です
JavaScript

greet: function () { ... } を
greet() { ... } と書ける、
これが「メソッド記法」です。

中身はまったく同じで、
「オブジェクトのプロパティとして定義された関数」 であることに変わりはありません。
現代のコードでは、この短い書き方がよく使われます。

メソッドと this の関係

「誰のメソッドとして呼ばれたか」で this が決まる

メソッドの本質は、
「そのオブジェクトのデータを使って何かする関数」
というところにあります。

次の例を見てください。

const user1 = {
  name: "太郎",
  greet() {
    console.log("こんにちは、" + this.name + "です");
  },
};

const user2 = {
  name: "花子",
  greet: user1.greet,
};

user1.greet(); // こんにちは、太郎です
user2.greet(); // こんにちは、花子です
JavaScript

同じ関数 greet を使っていても、
this は「呼び出し元のオブジェクト」によって変わります。

user1.greet() の中の this は user1
user2.greet() の中の this は user2

だから、それぞれの name が使われます。

ここが重要です。
メソッドは「どのオブジェクトから呼ばれたか」で意味が変わる。
this を通して“自分の持ち主のデータ”にアクセスする。

メソッドで「そのオブジェクトらしい振る舞い」を表現する

データだけでなく“動き”も一緒に持たせる

例えば、「本」を表すオブジェクトを考えてみます。

const book = {
  title: "JavaScript入門",
  price: 1980,
  printInfo() {
    console.log(this.title + "（" + this.price + "円）");
  },
};

book.printInfo(); // JavaScript入門（1980円）
JavaScript

book は「タイトル」と「価格」というデータを持ち、
printInfo という「自分の情報を表示する」という振る舞いを持っています。

もしメソッドを使わなかったら、
こうなります。

const title = "JavaScript入門";
const price = 1980;

function printInfo() {
  console.log(title + "（" + price + "円）");
}
JavaScript

これでも動きますが、
「この関数はどのデータとセットなのか」が分かりにくいです。

オブジェクト＋メソッドにすると、
「この関数はこのオブジェクトのためのものだ」
という関係がコードに刻まれます。

メソッドの中でプロパティを更新する

「自分の状態を変える」メソッド

メソッドは、
単に表示するだけでなく、
オブジェクトの状態を変えることもできます。

const counter = {
  value: 0,
  increment() {
    this.value += 1;
  },
  reset() {
    this.value = 0;
  },
};

counter.increment();
counter.increment();
console.log(counter.value); // 2

counter.reset();
console.log(counter.value); // 0
JavaScript

increment は「自分の value を 1 増やす」メソッド
reset は「自分の value を 0 に戻す」メソッド

になっています。

ここが重要です。
メソッドは「そのオブジェクトの状態を読んだり、変えたりするための“正規の入口”」
として設計できる。
外から直接プロパティをいじるより、メソッド経由の方が意図が明確になることが多い。

アロー関数をメソッドに使うときの注意（基礎だけ）

アロー関数は this の挙動が違う

次のコードを見てください。

const user = {
  name: "太郎",
  greet: () => {
    console.log("こんにちは、" + this.name + "です");
  },
};

user.greet(); // ？？？
JavaScript

多くの場合、ここで this.name は undefined になります。

アロー関数は「自分自身の this を持たず、
定義された場所の this をそのまま使う」という性質があります。

オブジェクトリテラルの中でアロー関数を書くと、
その this は user にはなりません。

基礎の段階では、
「メソッドで this を使いたいときは、アロー関数ではなく普通の function（またはメソッド記法）を使う」
と覚えておけば十分です。

初心者として「メソッド」で本当に押さえてほしいこと

メソッドは、

「オブジェクトのプロパティとして定義された関数」
であり、

「そのオブジェクトのデータ（プロパティ）を使って何かする“振る舞い”」
です。

特に大事なのは次の感覚です。

オブジェクトの中に greet() { ... } のように関数を書くと、それがメソッド
メソッドの中の this は「そのメソッドを呼び出したオブジェクト」を指す
データ（プロパティ）と振る舞い（メソッド）をセットで設計すると、コードの意味がはっきりする
メソッドで this を使いたいときは、アロー関数ではなく普通の関数を使う

まずは、こんなオブジェクトを自分で書いてみてください。

const user = {
  name: "太郎",
  sayHello() {
    console.log("こんにちは、" + this.name + "です");
  },
};

user.sayHello();
JavaScript

「このオブジェクトは“こういうデータ”を持っていて、
“こういうことができる”」
という形を、自分の手で何パターンか作ってみる。

その積み重ねが、
オブジェクト指向やクラスに進むときの、
とても強い土台になります。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました