【学習日記#12】JavaScript「クラス」と「関数」

こんにちは、Ryuseiです！

今回は、reactを学ぶ前にもう一つ、JavaScriptにおける「クラス」と「関数」について学んできたので備忘録としてまとめておきたいと思います。

これらの理解は、プログラミングを進めていくうえでとても大事な基礎なので、しっかり押さえておきたいです。

---

関数（Function）

関数は、処理のまとまり」を表すJavaScriptの基本的な仕組みです。

例：名前を受け取って挨拶する関数

function greet(name) {
  console.log("Hello, " + name);
}
greet("Taro"); // → Hello, Taro

• ポイント
  • 関数の中で定義した変数や処理は、その関数の中でのみ使える（スコープ）。
  • 必要な時に 関数名() で呼び出して使う。

---

クラス（Class）

クラスは、「データとメソッド（処理）」を1つにまとめた型を作れる仕組みです。

JavaScriptでは ES6から導入 された構文で、実は中身は関数とプロトタイプで動いています。

例：Personクラス

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

  greet() {
    console.log("Hello, " + this.name);
  }
}

const p = new Person("Taro");
p.greet(); // → Hello, Taro

• new キーワードでインスタンス（実体）を作成。
• this は、そのインスタンス自体を指す。

---

this の使い方に注意！

this は、その場における「自分自身」を表すキーワードですが、場所によって指すものが変わります。

整理するとこんな感じになります。

使用場所	this が指すもの
オブジェクトのメソッド内	そのオブジェクト
クラスのメソッド内	そのインスタンス
通常の関数内（非strictモード）	window（ブラウザの場合）
アロー関数内	外側のスコープの this
イベントハンドラ	イベント対象要素（例: ボタン）

---

this の退避（that 変数）

通常の関数内で this を使うと、思ってたのと違うものを参照してしまうことがあります。

そんな時は、this を that（または self）という変数に退避させて使う方法があります。

例

const obj = {
  name: "Taro",
  greet: function () {
    const that = this;
    setTimeout(function () {
      console.log("Hello, " + that.name);
    }, 1000);
  }
};
obj.greet();

アロー関数を使えば that 不要！

const obj = {
  name: "Taro",
  greet: function () {
    setTimeout(() => {
      console.log("Hello, " + this.name);
    }, 1000);
  }
};
obj.greet();

---

まとめ

• 関数は「処理のまとまり」、クラスは「データとメソッドのまとまり」。
• this の動きは場所によって変わるので要注意！
• わからなくなったら、that で退避 or アロー関数で対応してみよう！

---

次回は、DOM操作やイベント処理についての内容を復習して、もっと実践的なJavaScriptを書けるようにしていきます。

これからも頑張りますので、よろしくお願いします