JavaScript】オブジェクト・メソッド・プロパティ・関数の違い

JavaScriptを学び始めたときに混乱しがちな「オブジェクト」「メソッド」「プロパティ」「関数」の違いについて、自分なりに整理してみました。

## オブジェクトとは？
オブジェクトは、名前（キー）と値（バリュー）の組み合わせでデータや機能をまとめたものです。
例えば、「りんご」という果物の名前や色、価格などの情報をまとめたデータを一つにできるイメージです。

```js
const apple = { //apple オブジェクト
  name: "りんご", 
  color: "赤",
  price: 150,
};
```
## プロパティとは？
オブジェクトの中にある「データ」のことをプロパティと呼びます。
先ほどの例で言うと、name, color, price がプロパティの名前で、それぞれの値がプロパティの値です。

```js
const apple = { 
  name: "りんご", //name、color、price はプロパティの名前
  color: "赤",
  price: 150,
};
```

## メソッドとは？
メソッドは「オブジェクトに紐付いた関数」です。
つまり、オブジェクトの中にある関数のことを指します。
オブジェクトが持つ「動作（処理）」をまとめたものです。

以下の例であれば、　**showInfo**がメソッドになります（関数を値とするプロパティ）。



```js
const apple = {
  name: "りんご",
  price: 150,
  showInfo: function() {
    console.log(this.name + "は" + this.price + "円です");
  }
};
apple.showInfo(); // メソッドの使い方。「りんごは150円です」と表示される
```

※ここでの this は、そのメソッドを呼び出したオブジェクト（ここでは apple）を指します。this を使うことで、同じメソッドを他のオブジェクトでも使える柔軟なコードを書けます。

:::note info
**super とは？**

super はクラス（継承関係にあるオブジェクト）で親クラスのメソッドを呼び出すときに使います。
例えば、親クラスのメソッドを拡張したり、呼び出したりしたいときに便利です。

```js
class Fruit {
  constructor(name) {
    this.name = name;
  }
  showInfo() {
    console.log(this.name + "です");
  }
}

class Apple extends Fruit {
  constructor(price) {
    super("りんご"); // 親クラスのコンストラクタを呼ぶ
    this.price = price;
  }
  showInfo() {
    super.showInfo(); // 親クラスの showInfo() を呼ぶ
    console.log(this.price + "円です");
  }
}

const apple = new Apple(150);
apple.showInfo();
// 出力：
// りんごです
// 150円です
```
ここでの super.showInfo() は親クラス（Fruit）の showInfo メソッドを呼んでいます。
:::


## 関数とは？
関数とは、繰り返し使える処理のまとまりを名前（関数名）で定義したものです。
一度作れば何度でも呼び出して使うことができ、プログラムの効率化と見通しの良さに役立ちます。

引数を受け取り、何らかの処理をして結果（返り値）を返すことが基本です。

関数は「単独で使う」こともありますし、オブジェクトの中に入ってメソッドになることもあります。


以下は、２つの数字を足して結果を返す関数の例です。

```js
// 関数の宣言
function add(num1, num2) { //num1、num2：引数（関数に渡す値）
  let sum = num1 + num2; //処理：引数に対して行う計算や操作
  return sum; //返り値：処理結果として返す値（返り値がない場合もあります）

}

// 関数の呼び出し
console.log(add(3, 5)); // 8
```
もしくは以下のように書くこともできます。

```js
// 関数の宣言
function add(num1, num2) {
  return num1 + num2;
}

// 関数の呼び出し
console.log(add(3, 5)); // 8
```


### 関数の使い方


**例1：割引価格を計算する関数**

お店で全ての商品を3割引にするセールをするとき、
毎回手動で計算するのは大変ですよね。

関数を使えば、元の価格を入力すると自動で割引価格を返す処理をまとめられます。

#### 1. 宣言

まず関数を宣言します。

```js
function calculateDiscountedPrice(originalPrice) {
  const discountRate = 0.7; // 3割引なので0.7を掛ける
  return originalPrice * discountRate;
}
```

#### 2. 呼び出し

その後で「呼び出し」を行います。

```js
console.log(calculateDiscountedPrice(1000)); // 700
console.log(calculateDiscountedPrice(500));  // 350
```
この関数は、originalPrice を引数に受け取り、割引後の価格を返しています。  


**例2：足し算をする関数**

```js

function add(num1, num2) { //addという関数を「宣言」
  return num1 + num2; //引数 num1 と num2 の和を返す(処理を書く）
}

console.log(add(2, 4)); // add(2, 4) で関数を呼び出し、結果をコンソールに表示
```
   
### 関数の書き方いろいろ
関数には色々な書き方があります。

#### 関数式
関数を変数に代入して定義する方法です。

```js
コードをコピーする
const add = function(num1, num2) {
  return num1 + num2;
};

console.log(add(2, 4)); // 6
```

#### アロー関数

より簡潔に関数を定義できる書き方です。

```js
const add = (num1, num2) => num1 + num2;
console.log(add(3, 5)); // 8
```

:::note warn
**アロー関数はメソッドにならない？**

アロー関数は、自分用の this を持っていません。
そのかわり、アロー関数が「書かれた場所の this」を使います。

もしアロー関数が、オブジェクトの外のほうで書かれていたら、
this は「オブジェクトじゃない別の場所」を指してしまいます。

だから、オブジェクトの中の動きを書きたいときは、
アロー関数ではなく普通の関数を使うのが安全です。

```js
const obj = {
  name: "ゆりりん",
  greet: () => {
    console.log(this.name + "さん、こんにちは！"); // thisはグローバルなどを指すのでundefinedになることが多い
  }
};
obj.greet(); // 期待通りに動かない
```
:::


#### コールバック関数
関数の引数として渡される関数のことを「コールバック関数」と言います。
関数の中で別の関数を実行するときに使います。

```js
function processPrice(price, callback) {
  const result = callback(price);
  console.log("処理結果は " + result + " です");
}

const applyTax = function(price) {
  const taxRate = 1.1;
  return Math.floor(price * taxRate);
};

processPrice(100, applyTax); // 処理結果は 110 です
```
processPrice 関数に applyTax という関数を渡しているので、applyTax がコールバック関数になります。

## まとめ

- オブジェクトは複数のデータや機能をまとめる箱のようなもの

- プロパティはオブジェクトの中にあるデータのこと

- メソッドはオブジェクトの中にある関数で、そのオブジェクトの動作を表す

- 関数は再利用できる処理のまとまりで、単独で使うこともあれば、オブジェクトの中に入ってメソッドとして使うこともある