JavaScript

JavaScriptのオブジェクトにメソッドを定義する方法

どうも、つよぽんです!

今回は、JavaScriptのオブジェクトを使って「メソッドを定義する方法2種類」を解説します。

今回の記事は次のような方に向けて書きました。

想定読者
  • 関数とメソッドの違いを知りたい
  • メソッドを自作できるようになりたい

この記事を読み終えた後のあなたは次のことがわかるようになっています。

この記事を読み終えた後のあなた
  • 関数とメソッドの違いがわかるようになる
  • メソッドを自作できるようになる

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事とあわせて読むことでより深く学習できます。

あわせて読みたい
JavaScriptのオブジェクトを使ってメソッドを作成する今回はJavaScriptのオブジェクトにメソッドを作成する方法を学習します。 オブジェクトに配列がセットできたように、関数もオブジェクトにセットすることが出来ます。オブジェクトにセットされた関数のことを「メソッド」といいます。...

それでは次の内容で話を進めていきます。

今回の内容
  1. JavaScriptのメソッドと関数の違いをおさらいする
  2. JavaScriptのオブジェクトにメソッドを定義する方法

 

JavaScriptのメソッドと関数の違いをおさらいする

この章では、「メソッド」と「関数」の違いについてかるくおさらいします。

以前書いた「JavaScriptの配列のpushを例に、メソッドを覚えるコツ」でも説明した通り、「メソッド」と「関数」をまとめると以下のようになります。

関数とメソッドの違い
  • 関数とはオブジェクトに属さない関数のこと
    • 例: 「hoge()」, 「fuga()」のようにいきなり関数名から関数を実行できる
  • メソッドとはオブジェクトに属する関数のこと
    • 例:
      • array.push(1)」,「array.pop()」のように関数名(厳密にはメソッド名)の前にオブジェクト名がつく
      • オブジェクト.メソッド()」の形式で実行できる

つまり、オブジェクトのプロパティ値にセットされている関数を「メソッド」と呼び、それ以外を「関数」としてい使い分けます。

メソッドはオブジェクトのプロパティ値にセットされる関数」というのを理解しておくと、次の章で説明する内容をスムーズに理解できるでしょう。

あわせて読みたい
JavaScriptの配列のpushを例に、メソッドを覚えるコツどうも、つよぽんです! 今回は、JavaScriptの配列メソッドを覚えるコツについて解説します。 今回の記事では配列を例に...
  • オブジェクトのプロパティ値にセットされた関数は「メソッド」と呼ぶ

JavaScriptのオブジェクトにメソッドを定義する方法

この章では、「JavaScriptでメソッドを定義する方法」を説明していきます。

JavaScriptのオブジェクトを使ってメソッドを作る方法は、大きく分けると次の2通りあります。

メソッドを定義する2通りの方法
  1. オブジェクトの定義と一緒にメソッドも定義する
  2. オブジェクトの定義後にプロパティを追加する形でメソッドを定義する

上記2つについて、1つずつ画像を使いながら説明していきます。

メソッドを定義する方法その1 (オブジェクトの定義と一緒に作る)

まず、「①オブジェクトの定義と一緒にメソッドも定義する」から見ていきましょう。

JavaScriptでオブジェクトを定義する方法は「JavaScriptでオブジェクトを作成する2通りの方法」でも解説していますが、「{}」の中に「{key: value}」の形式で値をセットします。

このときに「value」の部分に関数をセットすればメソッドになり、その「value」に対応する「key」はメソッド名となります。

以下の画像は、上記で説明したものを図解したものです。

メソッド定義その1(オブジェクトの定義と一緒に作る)メソッド定義その1(オブジェクトの定義と一緒に作る)

以下の画像は、上の図解を実際にサンプルコードとして実装したものです。

サンプルコードの赤枠で囲まれているところが、メソッドを定義している箇所になります。

そしてオレンジ枠内の部分で「math.add(5, 2)」、つまり「オブジェクト名.メソッド名()」の形式でメソッドが実行できているのがわかります。(console.logで値が出力されている)

メソッドを定義するサンプルコードメソッドを定義するサンプルコード

上の画像内で書かれているサンプルコードは以下のリンクから直接確認できます。

オブジェクトにメソッドを作るサンプル

メソッドを定義する方法その2 (オブジェクトの定義後にプロパティを追加する形で作る)

次に、「②オブジェクトの定義後にプロパティを追加する形でメソッドを定義する」を解説します。

JavaScriptのオブジェクトのプロパティ操作【追加・削除】」でも説明したとおり、オブジェクトは定義時に値をセットするだけでなく、定義後にプロパティを追加して値をセットできます。

その機能を利用して、オブジェクトの定義後にメソッドを追加で実装することも可能です。

具体的な実装方法については以下の画像にまとめました。

メソッド定義その2(オブジェクト定義後にプロパティ追加の形式で作る)メソッド定義その2(オブジェクト定義後にプロパティ追加の形式で作る)

上の画像の左側に書いたコードのように記述することでも「メソッド」を定義することが出来ます。

実行方法は「①オブジェクトの定義と一緒にメソッドも定義する」と全く同じです。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • オブジェクトのプロパティ値にセットされた関数は「メソッド」と呼ぶ
  • メソッドを定義する方法は2通りある
    • オブジェクトの定義と一緒にメソッドも定義する
    • オブジェクトの定義後にプロパティを追加する形でメソッドを定義する

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
JavaScriptのオブジェクトを使ってメソッドを作成する今回はJavaScriptのオブジェクトにメソッドを作成する方法を学習します。 オブジェクトに配列がセットできたように、関数もオブジェクトにセットすることが出来ます。オブジェクトにセットされた関数のことを「メソッド」といいます。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です