JavaScriptでオブジェクト指向を実装！オブジェクト,プロパティ,メソッド,クラスの概念と書き方

JavaScript

【 2025/06/24 20:08 更新】

オブジェクト指向とは

オブジェクト指向はプログラムを「オブジェクト(物)」の集まりとして開発する手法や考え方です。

オブジェクト指向を活用して開発すると、複雑な処理が綺麗にまとまったプログラムとなります。

必要な基本の概念として、オブジェクト/インスタンス・プロパティ・メソッド・クラスがあります。

JavaScriptでもこれら概念を実装可能です。

本記事ではJavaScriptでオブジェクト指向を実装する基本的な方法を解説するよ！

JavaScriptのオブジェクト/インスタンス

オブジェクト/インスタンスとは、データと処理を、まとめた「物」です。

ここで、オブジェクト内のデータをプロパティ、処理をメソッドと呼びます。

JavaScriptでは、オブジェクトは{}で定義され、プロパティやメソッドを追加できます。

オブジェクトに関する用語

データはプロパティ、操作はメソッドと呼びます。

【 JSのオブジェクトの書き方】

〜宣言〜
宣言キーワードオブジェクト名 = {
　　　　キー:データor処理, // プロパティorメソッド
　　　　キー:データor処理, // プロパティorメソッド
　　　　...
};
〜キーを指定〜
オブジェクト名["キー名"];
オブジェクト名.キー名;
〜要素を追加〜
オブジェクト名["新キー名"] = データor処理;
オブジェクト名.新キー名 = データor処理;

Mapオブジェクトはちょっと違う

JSに元々実装されている"Mapオブジェクト"がありますが、普通のオブジェクトとは違った構造です。

次で説明するクラス構造寄りのオブジェクトとなっていますが、クラスともオブジェクトとも違う特殊な作りと言えます。

【 JavaScript 】


// オブジェクトを定義
let object01 = {
    name: "apple",              // プロパティ
    consoleOutPut: function() { // メソッド
        // キー"name"の中身をコンソールへ表示
        console.log(this.name);
    }
};

// 各キーの値を変更
object01["name"] = "りんご";

// メソッド実行
object01["consoleOutPut"](); // りんご

ブラウザで実行するとこんな感じです。（開発者モードで確認）

this.キー名

オブジェクト内で"this.キー名"を指定すると、オブジェクト内のプロパティやメソッドを指定できます。

【オブジェクトの使い方に詳しい記事】

JavaScriptの連想配列｜オブジェクトを使った方法

JavaScriptとは？変数,配列,連想配列,条件,繰り返し,関数,DOM操作など基本的な使い方を解説！

こじはなNote

開発者モードとは

ブラウザの「開発者モード」とは、Webサイトの開発や検証のために用意されている機能です。

JavaScriptの"console.log()"に指定した文字は、開発者モードの"コンソール"で確認できます。

※イメージ画像は、Chromeの開発者モードです。

【開発者モードの開き方】

Windows/Linux："F12"キーを押す。
mac："command"+"option"+"i"を押す。

JavaScriptのプロパティ

プロパティとはオブジェクト内で定義されたデータのことです。

JavaScriptにおけるプロパティは変数/定数とは大きく違い、オブジェクトが持つ「名前付きの値」です。

多くの他のプログラミング言語では、変数/定数とプロパティの違いは“オブジェクトの中か外か”だけの違いであることが多いですが、JavaScriptはそうではありません。

【 JSのオブジェクトの書き方】

〜宣言〜
宣言キーワードオブジェクト名 = {
　　　　キー:プロパティの値(データ), // プロパティ
　　　　キー:プロパティの値(データ), // プロパティ
　　　　...
};
〜キーを指定〜
オブジェクト名["キー名"];
オブジェクト名.キー名;
〜プロパティを追加〜
オブジェクト名["新キー名"] = プロパティの値(データ);
オブジェクト名.新キー名 = プロパティの値(データ);

【コード例】

【 JavaScript 】


// オブジェクトを定義
let object01 = {
    name: "apple",  // プロパティ
    price: 2000     // プロパティ
};

// 各キーのプロパティ値を変更
object01["name"] = "りんご";
object01.price = 300;

console.log(object01); // { name: "りんご", price: 300 }

ブラウザで実行するとこんな感じです。（開発者モードで確認）

開発者モードとは

ブラウザの「開発者モード」とは、Webサイトの開発や検証のために用意されている機能です。

JavaScriptの"console.log()"に指定した文字は、開発者モードの"コンソール"で確認できます。

※イメージ画像は、Chromeの開発者モードです。

【開発者モードの開き方】

Windows/Linux："F12"キーを押す。
mac："command"+"option"+"i"を押す。

JavaScriptのメソッド

メソッドとはオブジェクト内に定義された処理（関数）のことを言います。

メソッドと関数は違いを理解して言い分けしましょう！

【メソッドと関数の違い】

メソッド	オブジェクト内に定義された関数
関数	オブジェクト外に定義された関数

関数とは

関数とは、一連の処理に名前を付けて定義し、必要なときに呼び出すことができる仕組みのことです。

変数/配列にはデータが入りますが、関数には一連の処理がまとまります。

【 JavaScriptの関数の書き方】

JavaScriptの関数定義｜function

JavaScriptとは？変数,配列,連想配列,条件,繰り返し,関数,DOM操作など基本的な使い方を解説！

こじはなNote

【 JSのオブジェクトの書き方】

〜宣言〜
宣言キーワードオブジェクト名 = {
　　　　キー:function(引数) { // メソッド
　　　　　　　　メソッド呼び出したときに実行する処理
　　　　},
　　　　キー:function(引数) { // メソッド
　　　　　　　　メソッド呼び出したときに実行する処理
　　　　},
　　　　...
};
〜キーを指定〜
オブジェクト名["キー名"];
オブジェクト名.キー名;
〜キーを指定して呼び出し〜
オブジェクト名["キー名"](引数);
オブジェクト名.キー名(引数);
〜メソッドを追加〜
オブジェクト名["新キー名"] = function(引数) {
　　　　メソッド呼び出したときに実行する処理
}
オブジェクト名.新キー名 = function(引数) {
　　　　メソッド呼び出したときに実行する処理
}

【コード例】

【 JavaScript 】


// オブジェクトを定義
let object01 = {
    name: "こじはな",
    age: 24,
    nameOutput: function() { // メソッド
        console.log("名前は" + this.name + "です。");
    },
    agePlus: function( num ) { // メソッド
        this.age = this.age + num;
    },
};

// メソッド実行
object01["nameOutput"](); // 名前はこじはなです。
object01.agePlus(30);

// ageの中身を表示
console.log(object01["age"]); // 54

ブラウザで実行するとこんな感じです。（開発者モードで確認）

this.キー名

オブジェクト内で"this.キー名"を指定すると、オブジェクト内のプロパティやメソッドを指定できます。

開発者モードとは

ブラウザの「開発者モード」とは、Webサイトの開発や検証のために用意されている機能です。

JavaScriptの"console.log()"に指定した文字は、開発者モードの"コンソール"で確認できます。

※イメージ画像は、Chromeの開発者モードです。

【開発者モードの開き方】

Windows/Linux："F12"キーを押す。
mac："command"+"option"+"i"を押す。

JavaScriptのクラス

クラスはオブジェクト/インスタンスの構造に対する設計図です。

定義したクラスを基に、オブジェクト/インスタンスを生成することができます。

その場合、new クラス名()と書いて生成します 。

クラスとオブジェクトは違いを理解して言い分けしましょう！

【クラスとオブジェクトの違い】

クラス	あくまでオブジェクト/インスタンスの設計図
オブジェクト	クラスの設定を基に作った「物」(領域)

【 JSのクラスの書き方】

〜クラス定義〜
class クラス名 {

　　　　// プロパティの書き方
　　　　プロパティ名 = 初期値;

　　　　// コンストラクタの書き方
　　　　constructor(引数) {
　　　　　　　　処理 // 自クラスのプロパティは "this.プロパティ名"で利用可能
　　　　}

　　　　// メソッドの書き方
　　　　メソッド名(引数) {
　　　　　　　　処理 // 自クラスのプロパティは "this.プロパティ名"で利用可能
　　　　}
}

〜オブジェクト生成〜
宣言キーワード変数名 = new クラス名;

コンストラクタとは

コンストラクタは、クラスからnewでオブジェクト/インスタンスを生成したとき1番最初に実行されるメソッドです。

コンストラクタのメソッドを定義していない場合は、特に何も処理をしないコンストラクタが実行されます。

【コード例】

【 JavaScript 】


// クラスを定義
class fruitClass {

    name = null; // プロパティ
    price = 100; // プロパティ

    // コンストラクタ
    constructor(name, price) {
        this.name = name;
        this.price = price;
    }

    // メソッド
    nameOutput() {
        console.log("果物の種類は" + this.name);
        return true; // trueを返して終了
    }

}

// オブジェクトを定義
let object01 = new fruitClass("いちご", 300);

// オブジェクトの中身確認
console.log(object01);

// メソッド実行
object01["nameOutput"](); // 果物の種類はいちご

ブラウザで実行するとこんな感じです。（開発者モードで確認）

this.キー名

クラス/オブジェクト内で"this.キー名"を指定すると、オブジェクト内のプロパティやメソッドを指定できます。

開発者モードとは

ブラウザの「開発者モード」とは、Webサイトの開発や検証のために用意されている機能です。

JavaScriptの"console.log()"に指定した文字は、開発者モードの"コンソール"で確認できます。

※イメージ画像は、Chromeの開発者モードです。

【開発者モードの開き方】

Windows/Linux："F12"キーを押す。
mac："command"+"option"+"i"を押す。

まとめ

オブジェクト指向はプログラムを「オブジェクト(物)」の集まりとして開発する手法や考え方。
オブジェクト指向に必要な基本概念として、オブジェクト/インスタンス・プロパティ・メソッド・クラスがある。
オブジェクト/インスタンスとは、データと処理を、まとめた「物」。
オブジェクト/インスタンスをJavaScriptでは、オブジェクトは{}で定義する。
JavaScriptにおけるプロパティは変数/定数とは大きく違い、オブジェクトが持つ「名前付きの値」である。
メソッドとはオブジェクト内に定義された操作（関数）のことを言う。
クラスはオブジェクト/インスタンスの構造に対する設計図のこと。
定義したクラスを基に、オブジェクト/インスタンスを生成することができる。その場合、new クラス名()と書いて生成する。
コンストラクタは、クラスからnewでオブジェクト/インスタンスを生成したとき1番最初に実行されるメソッド。

JavaScript

【 2025/06/24 20:08 更新】

こじはな

Webエンジニア3年目。

フロントからバックエンドまで幅広く経験や知識を発信します！