先生と生徒の会話形式で理解しよう

生徒

「JavaScriptのオブジェクトの中に関数を入れることができると聞いたのですが、それはどういう意味ですか？」

先生

「それは『メソッド』と呼ばれるもので、オブジェクトの中に入れた関数のことです。オブジェクトの性質や動きを表現できますよ。」

生徒

「なるほど。具体的にどうやって作って、どうやって使うんですか？」

先生

「では、基本から丁寧に説明していきますね！」

1. メソッドとは？オブジェクトの中の関数

JavaScriptのオブジェクトには、プロパティと呼ばれる情報（値）を入れられるだけでなく、メソッドと呼ばれる関数も入れられます。プロパティが「データそのもの」を表すのに対して、メソッドはオブジェクトに「動き」や「処理」を持たせる役割をします。

つまり、メソッドはオブジェクトの中にある「何かを実行するための部分」です。現実のものに例えると、人には「名前」や「年齢」といった情報だけでなく、「話す」「歩く」「あいさつする」といった行動があります。この行動にあたる部分を、JavaScriptではメソッドとして表現します。

プログラミング未経験の方は、「オブジェクトは情報と動作をひとまとめにしたもの」と考えると分かりやすいでしょう。単に値を保存するだけでなく、その値を使って何かをする処理まで一緒に管理できるのが、メソッドの大きな特徴です。

たとえば、次のように「犬」を表すオブジェクトを考えてみましょう。名前という情報（プロパティ）と、鳴くという動作（メソッド）を一緒に持たせています。


const dog = {
  name: "ポチ",
  bark() {
    console.log("ワンワン！");
  }
};

この例では、nameがプロパティ、barkがメソッドです。「ポチという名前の犬が鳴く」というイメージを、そのままコードに落とし込めているのが分かると思います。このように、メソッドを使うことでオブジェクトをより現実に近い形で表現できるようになります。

2. メソッドの基本的な定義方法

オブジェクトの中に関数を入れてメソッドとして定義するには、「プロパティ名」と「関数」をセットで書きます。書き方自体はそれほど難しくなく、これまで学んできたオブジェクトの書き方に、そのまま関数を当てはめるイメージで考えると理解しやすいでしょう。

ポイントは、「オブジェクトの中では、関数も値のひとつとして扱われる」という点です。文字列や数値と同じように、関数を代入すると、それがメソッドになります。そのため、特別な記号や難しいルールを覚える必要はありません。

たとえば、次の例では「犬」を表すオブジェクトの中に、鳴くという動作をメソッドとして定義しています。


const dog = {
  name: "ポチ",
  bark: function() {
    console.log("ワンワン！");
  }
};

このコードでは、nameが犬の名前という情報（プロパティ）で、 barkが鳴く動作を表すメソッドです。 function()の中に書かれた処理が、あとで呼び出されたときに実行されます。

プログラミング未経験の方は、「メソッドはオブジェクト専用の関数」というイメージを持つとよいでしょう。情報だけでなく、その情報に関係する動作までまとめて定義できることが、オブジェクトとメソッドを使う大きなメリットです。

3. メソッドの呼び出し方

オブジェクトのメソッドを呼び出すには、オブジェクト名.メソッド名()の形で書きます。「ドット（.）でメソッド名を指定して、最後に丸かっこ()を付ける」と覚えると迷いにくいです。この()は「今から実行してね」という合図で、付け忘れると動作が始まりません。

たとえば、先ほどのdogオブジェクトのbarkメソッドを呼び出すなら、次のように書きます。これで「鳴く」という処理が実行され、コンソールに文字が表示されます。


dog.bark(); // 「ワンワン！」と表示される

ここで大事なのは、dog.barkと書いただけでは「メソッドそのもの」を指しているだけで、実行はされないという点です。実際に動かしたいときは、必ず()を付けて呼び出しましょう。

もう少しイメージしやすい例として、「あいさつする」メソッドを持つオブジェクトを見てみます。呼び出し方は同じで、hello()のように丸かっこを付けるだけです。


const person = {
  name: "花子",
  hello: function() {
    console.log("こんにちは！");
  }
};

person.hello(); // 「こんにちは！」と表示される

このように、メソッドの呼び出しは「オブジェクト名 → ドット → メソッド名 → 丸かっこ」の流れで統一されています。まずはこの形に慣れると、JavaScriptのオブジェクト操作がぐっとスムーズになります。

4. メソッドをもっと簡単に書く書き方（ES6以降）

ES6（JavaScriptの新しい書き方）以降は、メソッドをもっとシンプルに書けます。


const cat = {
  name: "ミケ",
  meow() {
    console.log("ニャー！");
  }
};

このように書くと、関数のfunctionキーワードを省略できます。

5. メソッドの中でthisを使う意味

メソッドの中でthisを使うと、そのメソッドを持っているオブジェクト自身を指せます。つまり、自分のプロパティを参照したり変更したりできるのです。


const person = {
  name: "太郎",
  greet() {
    console.log(this.name + "さん、こんにちは！");
  }
};
person.greet(); // 「太郎さん、こんにちは！」と表示される

ここではthis.nameがperson.nameを指しています。

6. メソッドに引数を渡す

メソッドは関数と同じく、外から情報（引数）を受け取って使うことができます。


const calculator = {
  add(a, b) {
    return a + b;
  }
};
console.log(calculator.add(3, 5)); // 8と表示される

このように、引数を渡して結果を返すこともできます。

7. メソッドの注意点：アロー関数で書くとthisが変わる

メソッドの中でアロー関数を使うと、thisの指すものが変わるので注意が必要です。通常は普通の関数でメソッドを書くのがおすすめです。


const obj = {
  name: "サンプル",
  say: () => {
    console.log(this.name); // undefinedになる可能性が高い
  }
};
obj.say();

この場合、thisは外側の環境を指し、期待したオブジェクトを指しません。

8. ポイント整理

メソッドはオブジェクトの中に入れた関数で、オブジェクトの動作を表す。
呼び出すときは「オブジェクト名.メソッド名()」の形。
メソッドの中でthisは自分のオブジェクトを指す。
引数を渡して処理を柔軟にできる。
アロー関数で書くとthisの動きが変わるので注意。

まずはここをしっかり理解して、オブジェクトのメソッドを使いこなせるようになりましょう。

まとめ

オブジェクトのメソッドを振り返ろう

この記事では、JavaScriptにおけるオブジェクトのメソッドについて、定義方法から呼び出し方、実際の使いどころまでを順番に見てきました。メソッドとは、オブジェクトの中に定義された関数のことで、そのオブジェクトが持つ「動作」や「振る舞い」を表現するための重要な要素です。単なる値の集まりだったオブジェクトに、処理や動きを持たせられるようになることで、JavaScriptのコードは一気に実用的になります。

基本となるのは、プロパティ名: function() {}という形でメソッドを定義し、オブジェクト名.メソッド名()で呼び出す書き方です。さらに、ES6以降ではfunctionを省略したシンプルな記述も使えるようになり、読みやすく整理されたコードを書けるようになりました。初心者の方は、まずはこの「定義」と「呼び出し」の形をしっかり身につけることが大切です。

thisを理解すると一気にレベルアップ

メソッドを理解するうえで避けて通れないのがthisの存在です。 thisは「そのメソッドを持っているオブジェクト自身」を指す特別なキーワードで、オブジェクトの中にある他のプロパティを参照するために使われます。これによって、メソッドの中から自分自身のデータを使った処理ができるようになります。

たとえば、名前を持つオブジェクトがあった場合、その名前を使ってあいさつ文を表示する、といった処理はメソッドとthisの組み合わせで自然に書けます。この考え方は、ゲーム、フォーム処理、画面操作など、さまざまな場面で応用されます。

まとめとしてのサンプルプログラム

ここで、これまで学んだ内容をまとめたシンプルなサンプルを見てみましょう。オブジェクトの中にプロパティとメソッドを定義し、thisを使って情報を表示する例です。


const user = {
  name: "花子",
  age: 25,
  introduce() {
    console.log(this.name + "です。年齢は" + this.age + "歳です。");
  }
};

user.introduce();

このように、オブジェクトとメソッドを組み合わせることで、「データ」と「処理」をひとまとまりとして扱えます。小さなプログラムでも、この形に慣れておくと、後からコードを見返したときに内容が理解しやすくなります。

アロー関数との違いも意識しよう

記事の中でも触れたように、メソッドをアロー関数で書くとthisの挙動が変わります。初心者のうちは「メソッドは普通の関数で書く」と覚えておくのがおすすめです。なぜなら、アロー関数は自分自身のthisを持たず、外側の環境を参照するため、意図しない結果になりやすいからです。

まずは安全で分かりやすい書き方を使い、JavaScriptのオブジェクト構造に慣れてから、アロー関数の使いどころを学んでいくと理解がスムーズになります。

先生と生徒の振り返り会話

生徒：「オブジェクトに関数を入れる意味が、だいぶ分かってきました。データと動きがセットになっている感じですね。」

先生：「その理解はとても大切ですよ。メソッドはオブジェクトの性質を表すものなので、実際のモノをイメージすると覚えやすいです。」

生徒：「thisも最初は難しかったですが、『自分自身』だと思うと納得できました。」

先生：「その通りです。メソッドの中でthisを使えるようになると、コードの表現力が一気に広がります。」

生徒：「アロー関数は便利そうですが、メソッドでは注意が必要なんですね。」

先生：「ええ。まずは基本の書き方をしっかり身につけて、慣れてきたら使い分けを意識すると良いですよ。」

生徒：「これからオブジェクトを使ったコードを書くのが楽しみになってきました！」

先生：「それは良いことですね。少しずつ実際に書きながら、理解を深めていきましょう。」

JavaScriptのオブジェクトのメソッドを定義・呼び出す基本をやさしく解説！初心者でもわかる使い方