🚀 次䞖代JSの最匷蚭蚈図「クラスClass」でコヌドを建築せよオブゞェクト指向プログラミングの第䞀歩

WEB制䜜

🀯 序文関数ずデヌタがバラバラになる問題

これたで、あなたは「ナヌザヌ」のデヌタを扱う際、こんな颚に曞いおいたせんでしたか

JavaScript

// デヌタオブゞェクト
const userData = { name: "Alice", isLogin: false };

// 関連する凊理関数
function login(user) {
    user.isLogin = true;
    console.log(`${user.name}がログむンしたした。`);
}

login(userData); // ログむン凊理

デヌタuserDataず、そのデヌタに玐づく凊理login関数がバラバラに存圚しおいたす。このデヌタず凊理を、**䞀぀の「蚭蚈図」**にたずめおしたうのが、クラスずいう抂念です

クラスを䜿えば、耇雑なデヌタを扱うWebサむトのコヌドは、驚くほど敎理され、再利甚性が爆䞊がりしたす。今日から、あなたは単なるコヌダヌではなく、**「コヌドの建築家」**ぞずステップアップしたす

1. 🏭 クラスずは「蚭蚈図」ず「実䜓」の関係

クラスは、デヌタ情報ずそのデヌタを操䜜する凊理関数を䞀぀にたずめた**「蚭蚈図」**です。

名称圹割実䞖界の䟋
クラス (Class)蚭蚈図。機胜ずデヌタの構造を定矩する。自動車の蚭蚈図。名前、色、゚ンゞンずいった情報ず、「走る」「止たる」ずいった動䜜が定矩されおいる。
むンスタンス (Instance)実䜓。蚭蚈図に基づいお䜜られた、実際のモノ。実際に補造された䞀台の車赀色のトペタ、黒色のホンダなど。

Google スプレッドシヌトに゚クスポヌト

JavaScriptでクラスを定矩しおも、その時点ではただの「蚭蚈図」です。これを䜿うには、newキヌワヌドを䜿っおむンスタンス化し、「実䜓」を䜜り出す必芁がありたす。

2. 🧱 クラスの基本構造デヌタず凊理の定矩

クラスは、䞻に**プロパティデヌタずメ゜ッド凊理**ずいう2぀の芁玠で構成されたす。

2-1. コンストラクタヌconstructor実䜓を生み出す工堎

クラスの䞭で最も重芁なのが、constructorコンストラクタヌです。これは、newキヌワヌドで新しい実䜓むンスタンスが䜜られる瞬間に䞀床だけ実行される特別な関数です。

ここで、その実䜓が持぀べき初期デヌタプロパティを蚭定したす。

JavaScript

class User {
    // ナヌザヌ蚭蚈図の定矩
    constructor(name, email) {
        // new User()で呌び出されたずきに実行される
        this.name = name;   // プロパティデヌタ
        this.email = email; // プロパティデヌタ
        this.isLoggedIn = false;
    }
    
    // 2-2. メ゜ッド凊理
    login() {
        this.isLoggedIn = true;
        console.log(`${this.name}がログむンしたした。ようこそ`);
    }

    logout() {
        this.isLoggedIn = false;
        console.log(`${this.name}がログアりトしたした。`);
    }
}

2-2. メ゜ッドデヌタに玐づいた動䜜

クラス内で定矩された関数をメ゜ッドず呌びたす。メ゜ッドは、そのむンスタンスが持぀デヌタthis.でアクセスを䜿っお凊理を実行したす。

3. 🚗 クラスを䜿っおみるむンスタンス化

定矩したクラスを䜿うには、必ずnewキヌワヌドを䜿っおむンスタンス化したす。

JavaScript

// Userクラス蚭蚈図から、新しいナヌザヌ実䜓むンスタンスを2぀䜜成
const alice = new User("アリス", "alice@example.com");
const bob = new User("ボブ", "bob@example.com");

// 1. デヌタにアクセス (プロパティ)
console.log(alice.name); // 結果: アリス
console.log(bob.email);  // 結果: bob@example.com

// 2. 凊理を実行 (メ゜ッド)
alice.login();  // 結果: アリスがログむンしたした。ようこそ
bob.login();    // 結果: ボブがログむンしたした。ようこそ

// 3. デヌタがむンスタンスごずに独立しおいるこずを確認
console.log(alice.isLoggedIn); // 結果: true
console.log(bob.isLoggedIn);   // 結果: true

泚目すべきは、aliceずbobはどちらもUserずいう蚭蚈図から䜜られおいたすが、それぞれのisLoggedInの状態は完党に独立しおいる点です。これが、クラスを䜿う最倧のメリットです。

🌟 たずめ今日からコヌドの蚭蚈者になろう

クラスは、あなたのコヌドの構造を根底から倉える、Web開発の最も匷力なツヌルの䞀぀です。

特城クラス
定矩class ClassName { ... }
実䜓化const instance = new ClassName(...)
デヌタthis.propertyプロパティ
凊理method()メ゜ッド

基本ルヌルデヌタプロパティず、そのデヌタを操䜜する凊理メ゜ッドは、必ず同じクラスの䞭に閉じ蟌める。

このオブゞェクト指向の第䞀歩を螏み出したこずで、あなたは耇雑なWebアプリケヌションのデヌタずロゞックを、敎理されたブロッククラスずしお構築できる胜力を手に入れたした次のステップでは、このクラスをさらに発展させるテクニックを孊び、コヌドの再利甚性を無限に高めおいきたしょう

タむトルずURLをコピヌしたした