こんにちは！就労継続支援B型事業所かなうラボ利用者のちょびっとです。
Web制作コースと事務・ライティングコースに所属しています。
クラスは設計図、インスタンスは実際に作られたもの、と考えるとオブジェクト指向(データと振る舞いを一つにまとめて扱う」設計・開発手法)の概念が理解しやすくなります。
これを学ぶと、データベースやWebアプリなどで使えるプログラム設計ができるようになります。
クラス
概要
JavaScriptでは「クラス」は設計図のようなものです。
実際に動くプログラムを作る前に、どんな情報（プロパティ）や働き（メソッド）が必要かを
まとめておくことができます。
実例：人というクラス
// クラス宣言 : Person オブジェクトを作るための設計図
class Person {
// ------------------------------------------------------------
// コンストラクタ（constructor）
// - このメソッドは new Person(…) でインスタンスが生成されるときに
// 自動的に呼び出されます。
// - 引数として渡された値をオブジェクトのプロパティへ格納します。
// ------------------------------------------------------------
constructor(name, age) {
this.name = name; // インスタンス固有の「名前」プロパティ
this.age = age; // インスタンス固有の「年齢」プロパティ
}
// ------------------------------------------------------------
// greet メソッド
// - Person のインスタンスが自分自身を紹介するメソッドです。
// - console.log を使って挨拶文を出力します。
// ------------------------------------------------------------
greet() {
console.log(`こんにちは、${this.name}です！`);
}
// ------------------------------------------------------------
// birthday メソッド
// - 誕生日が来たことを表すメソッドです。
// - age を 1 増やし、その結果をコンソールに表示します。
// ------------------------------------------------------------
birthday() {
this.age += 1; // 年齢を 1 歳増やす
console.log(`${this.name}はもう${this.age}歳になりました。`);
}
}
// ---------------------------------------------
// 使用例（コメントアウトしているので実行したい場合は外してください）
// ---------------------------------------------
/*
const alice = new Person('Alice', 30);
alice.greet(); // こんにちは、Aliceです！
alice.birthday(); // Aliceはもう31歳になりました。
*/
✅ ポイント
class Personは「人」を表す設計図です。constructor内でnameとageを受け取り、インスタンスに属性として保存します 。(this.name,this.age)。greet()やbirthday()は、人が持つ行動を定義したメソッドです。
インスタンス
概要
クラスから実際に「人」を作るとき、その具体的な人物がインスタンスになります。クラスは雛形、インスタンスは完成品と言えます。
実例：実際に人を作ってみよう。
// ① Person クラスからインスタンスを作る
// - new 演算子はクラスのコンストラクタ（constructor）を呼び出し、
// 新しいオブジェクト（＝インスタンス）を生成します。
// 「アリス」という名前と 20 歳で Person を作る
const alice = new Person('アリス', 20);
// 同様に「ボブ」用のオブジェクトを作成
const bob = new Person('ボブ', 25);
// ② インスタンスメソッドを呼び出す
// - greet() は自己紹介をコンソールに表示するメソッドです。
// → こんにちは、アリスです！。
alice.greet();
// - birthday() は年齢を 1 歳増やし、その結果を表示します。
// → ボブはもう26歳になりました。
bob.birthday();
✅ ポイント
new Person(...)を呼ぶとクラスが「実体化」し、aliceやbobといったインスタンスが出来ます。- インスタンスごとに名前や年齢などの値は異なりますが、共通して同じメソッド（greet, birthday）を持っています。
オブジェクト指向
概要
オブジェクト指向（Object‑Oriented Programming, OOP）は、データとそれに対する処理をひとつのまとまり（オブジェクト）として扱う考え方です。
JavaScriptでもクラス・インスタンスという形で実装されます。
実例：家族を表すオブジェクト
/* -------------------------------------------------------------
Family クラスの定義
------------------------------------------------------------- */
class Family {
/* ------------------------------------------
コンストラクタ（constructor）
- new Family('スミス') のように呼び出すと、
このメソッドが実行されてインスタンスを初期化します。
------------------------------------------ */
constructor(name) {
this.name = name; // 家族名（例: "スミス"）
this.members = []; // メンバーを格納する配列。最初は空。
}
/* ------------------------------------------
addMember(person)
- Person オブジェクトを members 配列に追加します。
------------------------------------------ */
addMember(person) {
this.members.push(person);
}
/* ------------------------------------------
listMembers()
- 家族名と全メンバーの名前・年齢をコンソールへ出力。
------------------------------------------ */
listMembers() {
console.log(`${this.name}家族:`); // 家族名表示
this.members.forEach(m => { // 配列を走査
console.log(`- ${m.name}, ${m.age}歳`); // 個々のメンバー情報
});
}
}
/* -------------------------------------------------------------
使用例
------------------------------------------------------------- */
// 既に作成済みの Person インスタンス alice, bob を使う想定
const theSmith = new Family('スミス'); // 「スミス」家族を作る
theSmith.addMember(alice); // アリスを追加
theSmith.addMember(bob); // ボブを追加
// 家族全員の一覧を表示
theSmith.listMembers();
// 出力例:
// スミス家族:
// - アリス, 20歳
// - ボブ, 26歳
✅ ポイント
Familyは「家族」というオブジェクトを定義します。members配列にPersonインスタンスを追加し、家族全体の情報を一元管理できます。- このようにデータ（名前・年齢）とそれに対する処理（挨拶・誕生日・メンバー一覧）が結びつくことで、コードが整理されやすくなります。
重要ポイント
✅ ポイント
項目 意味 カプセル化 データとその操作を同じ場所にまとめること。
例：Personの名前・年齢はgreet()内で使われる。継承（今回の範囲では省略） あるクラスを基に別のクラスを作り、共通部分を再利用する仕組み。 ポリモーフィズム（多態性） 同じメソッド名で異なるオブジェクトが違う動きをすること。例： greet()はPersonだけでなく他クラスでも使える。
まとめ
- クラスは設計図、インスタンスはその実体化した具体的なオブジェクトです。
- JavaScriptのクラス構文を使うと、データ（プロパティ）と処理（メソッド）がまとまりやすく、初心者でも読みやすいコードを書けます。
- オブジェクト指向は「データ＋処理＝オブジェクト」という考え方で、プログラムを整理しやすくします。
次回は「プログラミングの基礎⑧：記述ルール／エラー処理とファイル操作」について学習します。
▶次回
◀前回
以上、就労継続支援B型事業所かなうラボ利用者のちょびっとでした。
最後までお読みいただき、ありがとうございました！