JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでメソッドを定義するには？初心者向けに基本から解説

JavaScriptのメソッドとは？

JavaScriptにおけるメソッドとは、オブジェクトに対して実行される「動作（アクション）」のことです。メソッドの本体は関数定義であり、その関数がオブジェクトのプロパティ値として格納されます。つまり、「オブジェクトの中に組み込まれた関数」がメソッドであると考えると分かりやすいでしょう。

メソッド定義の基本構文

オブジェクトリテラルの中で、プロパティ名に続けて function キーワードを使い関数を定義するだけで、メソッドを作成できます。

var オブジェクト名 = {
  プロパティ名: 値,
  メソッド名: function() {
    // 実行したい処理
    return 戻り値;
  }
};

サンプルコード：メソッドを定義してみよう

ここでは、「部署（department）」オブジェクトに details メソッドを持たせ、部署の詳細情報を文字列として返す例を見てみましょう。

<!DOCTYPE html>
<html>
   <body>
      <h3 id="myDept"></h3>
         <script>
            var department = {
               deptName: "Marketing",
               deptID : 101,
               deptZone : "North",
               details : function() {
                 return "Department Details<br>" + "Name: " + this.deptName + " <br>Zone: " + this.deptZone + "<br>ID: " + this.deptID;
               }
            };
          document.getElementById("myDept").innerHTML = department.details();
      </script>
   </body>
</html>

コードのポイント解説

  • オブジェクトの構造： department オブジェクトには、deptName・deptID・deptZone の3つのプロパティと、details というメソッドが定義されています。
  • thisキーワード： メソッド内では this を使うことで、同じオブジェクトが持つ他のプロパティ（this.deptName など）にアクセスできます。
  • 画面への表示： 最後に document.getElementById() でHTML要素を取得し、メソッドの戻り値を innerHTML に代入することで、ブラウザ上に結果を表示しています。

実行結果

このHTMLファイルをブラウザで開くと、次のように表示されます。

Department Details
Name: Marketing
Zone: North
ID: 101

補足：ES6の省略記法ならもっと簡潔に

ES6（ECMAScript 2015）以降では、function キーワードを省略した「メソッド短縮記法」も利用できます。書き方がシンプルになるため、現在の開発ではこちらが主流です。

const department = {
  deptName: "Marketing",
  deptID: 101,
  deptZone: "North",
  details() {
    return `Name: ${this.deptName}, Zone: ${this.deptZone}, ID: ${this.deptID}`;
  }
};
console.log(department.details());

このように、JavaScriptのメソッドは「オブジェクトのプロパティとして保存された関数」です。this の使い方をマスターすれば、データと処理をひとまとめにした、読みやすく再利用性の高いコードを書けるようになります。

  1. JavaScriptのsort()メソッドとは?配列ソートの基本と比較関数の使い方を解説

    JavaScriptのsort()メソッドは、配列の要素を並べ替えるための組み込みメソッドです。アルファベット順・数値順といった並べ替えの基準に加え、昇順・降順も自由に指定できます。デフォルトでは要素が文字列として比較され昇順にソートされますが、比較関数を渡すことで任意の順序を実現できます。 なお、sort()は元の配列そのものを変更する「破壊的メソッド」である点にも注意しましょう。元の配列を保持したい場合は、スプレッド構文([...arr])などで事前にコピーしておくのが安全です。 コード例 以下は、sort()メソッドを使って配列をソートするシンプルなサンプルコードです。 <!DO

  2. JavaScriptのコンストラクターにプロパティやメソッドを追加する方法

    JavaScriptでは、コンストラクター関数に対してprototype（プロトタイプ）を利用することで、後からプロパティやメソッドを追加することができます。この方法で追加したプロパティやメソッドは、そのコンストラクターから生成されたすべてのインスタンスで共有されるため、メモリの面でも効率的です。 サンプルコード 以下は、JavaScriptのコンストラクターにプロパティとメソッドを追加するコード例です。 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta n