0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[JavaScrip][Methods] メソッドの分類(オブジェクト / プロトタイプ / インスタンス / スタティック)

Posted at

概要

JavaScriptの「メソッド」は、単に“関数をプロパティとして持つもの”ですが、
定義される場所呼び出し方によって、その性質は大きく異なります。

本記事では、オブジェクトメソッドプロトタイプメソッドインスタンスメソッドスタティックメソッド の順で整理し、
それぞれの構造・使い方・違いを具体例で理解します。

目次

  1. メソッドとは
  2. JavaScriptにおけるメソッドの4分類
     - オブジェクトメソッド
     - プロトタイプメソッド
     - インスタンスメソッド
     - スタティックメソッド
  3. 分類の関係図
  4. よく混同される用語と補足
  5. まとめ
  6. 参考リンク

メソッドとは

JavaScriptでは「オブジェクトのプロパティとして定義された関数」をメソッドと呼びます。

const user = {
  name: "Taro",
  greet() {             // ← メソッド
    console.log(`Hello, ${this.name}`);
  }
};

user.greet(); // "Hello, Taro"

この「メソッド」は どこに定義されているか によって、
呼び出し方や this の指す対象が変わります。

JavaScriptにおけるメソッドの4分類

オブジェクトメソッド

単体のオブジェクト(リテラル・ビルトインオブジェクト) に直接定義されたメソッド。
インスタンス化せずに利用できます。

console.log("Hello World");      // console オブジェクトのメソッド
Math.min(3, 7, -2);              // Math オブジェクトのメソッド
document.querySelector("#app");  // document オブジェクトのメソッド
  • 定義場所:オブジェクトリテラルや組み込みオブジェクト本体
  • 呼び出し方:object.method()
  • this:そのオブジェクト自身
  • 代表例:console.log(), Math.max(), JSON.parse(), document.querySelector()

💡 特徴

  • クラスでもインスタンスでもない、単体オブジェクト固有の関数
  • “インスタンス不要で呼べる” ため、MDNなどでは「静的メソッド(static)」と呼ばれることもある。

プロトタイプメソッド

すべてのインスタンスで共有される関数
実際のインスタンスメソッドの実体はここに定義されています。

Array.prototype.customLength = function() {
  return `Length is ${this.length}`;
};

const arr = [1, 2, 3];
console.log(arr.customLength()); // "Length is 3"
  • 定義場所:Class.prototype オブジェクト
  • 呼び出し方:instance.method()
  • this:インスタンス自身
  • 代表例:Array.prototype.map, String.prototype.slice

💡 特徴

  • 全インスタンスが同じ関数を共有 → メモリ効率が高い
  • class構文では、prototypeに自動的に登録される

インスタンスメソッド

クラスやビルトインオブジェクトから生成された インスタンス(個体) が呼び出すメソッド。

const str = "apple,banana,grape";
const fruits = str.split(","); // ← インスタンスメソッド
console.log(fruits); // ["apple", "banana", "grape"]
  • 定義場所:Class.prototype オブジェクト
  • 呼び出し方:instance.method()
  • this:インスタンス自身
  • 代表例:Array.map(), String.split(), Date.getFullYear()

💡 特徴

  • 各インスタンスのデータを操作するメソッド。
  • 内部的にはプロトタイプメソッドを参照しているため、定義は共通。

スタティックメソッド

クラス本体 に属するメソッド。
インスタンス化せずに直接呼び出すことができます。

class Car {
  static create(name) {      // ← スタティックメソッド
    return new Car(name);
  }

  constructor(name) {
    this.name = name;
  }
}

const car = Car.create("Tesla");
  • 定義場所:クラス定義内(staticキーワード付き)
  • 呼び出し方:Class.method()
  • this:クラス本体
  • 代表例:Array.isArray(), Date.now(), Promise.all()

💡 特徴

  • インスタンス不要で呼べる
  • 共通的・ユーティリティ的な処理をまとめるのに使う
  • 「オブジェクトメソッド」と違い、クラス構文で定義される

分類の関係図

JavaScriptのメソッド体系

┌─────────────────────────────────────────────────────┐
│   オブジェクト系メソッド (Object-based)                 │
│   ・オブジェクトメソッド   → 特定オブジェクトに属する関数    │
│      ex) console.log(), Math.min(), JSON.parse()    │
├─────────────────────────────────────────────────────┤
│   クラス系メソッド (Class-based)                       │
│   ・プロトタイプメソッド  → prototype に定義される関数    │
│      ex) Array.prototype.map()                     │
│   ・インスタンスメソッド  → 各インスタンスから呼ぶ         │
│      ex) arr.map(), str.split()                    │
│   ・スタティックメソッド  → クラス本体に属する関数         │
│      ex) Array.isArray(), Date.now()               │
└────────────────────────────────────────────────────┘

よく混同される用語

Math.min()JSON.parse() はクラスではないため厳密には「オブジェクトメソッド」ですが、
インスタンス不要で呼べる点から「静的メソッド(static)」と呼ばれることもあります。

まとめ

分類 所属 呼び出し方 インスタンス要否 定義場所 代表例
オブジェクトメソッド 単体オブジェクト object.method() ❌ 不要 オブジェクトリテラル console.log(), Math.max()
プロトタイプメソッド prototype共有領域 instance.method() ✅ 必要 Class.prototype Array.prototype.map()
インスタンスメソッド 各インスタンス instance.method() ✅ 必要 Class.prototype "abc".split()
スタティックメソッド クラス本体 Class.method() ❌ 不要 class (static) Array.isArray(), Date.now()

参考リンク

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?