JavaScript モジュールとクラス

9 日目: JavaScript モジュールとクラス

日付: 2024 年 12 月 16 日

9日目へようこそ！今日は、コードの構成、再利用性、読みやすさを大幅に向上させる 2 つの概念である JavaScript の モジュール と クラス について説明します。これらのトピックを理解すると、JavaScript スキルが向上し、プロの開発者のようにプロジェクトを構築できるようになります。

---

1. JavaScript モジュール

モジュールを使用すると、コードをより小さな再利用可能な部分に分割できます。 1 つの大きなファイルを用意する代わりに、機能を複数のファイルに整理できるため、コードベースの管理と保守が容易になります。

モジュールを使用する理由

1. 懸念事項の分離: 各モジュールは特定の責任を処理します。
2. 再利用性: あるモジュールのコードを別のモジュールで再利用できます。
3. 保守性: デバッグと更新が容易になります。

---

モジュールでのエクスポートとインポート

モジュールからのエクスポート

export を使用して、モジュールから変数、関数、またはクラスをエクスポートできます。

名前付きエクスポート

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

デフォルトのエクスポート

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

モジュールのインポート

別のモジュールから機能を取り込むには、import キーワードを使用します。

例: 名前付きエクスポートのインポート

// main.js
import { add, subtract } from './utils.js';

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

例: デフォルトのエクスポートのインポート

// main.js
import greet from './greet.js';

console.log(greet("Alice")); // Output: Hello, Alice!

---

動的インポート

動的インポートは、実行時に import() を使用してモジュールをロードします。

例: 遅延読み込み

const loadModule = async () => {
  const module = await import('./utils.js');
  console.log(module.add(5, 3)); // Output: 8
};

loadModule();

---

2. JavaScript クラス

JavaScript のクラスは、オブジェクトを作成し、関連するデータとメソッドをカプセル化するための設計図を提供します。これらは ES6 の一部であり、JavaScript でのオブジェクト指向プログラミングの基礎です。

クラスの定義

クラスは class キーワードを使用して定義されます。

例: 基本クラス

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

  greet() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
}

const person1 = new Person("John", 30);
console.log(person1.greet()); // Output: Hello, my name is John and I am 30 years old.

---

クラスの継承

継承により、クラスは extends キーワードを使用して別のクラスからプロパティとメソッドを派生できます。

例: 継承

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

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Buddy");
dog.speak(); // Output: Buddy barks.

---

静的メソッド

静的メソッドはインスタンスではなくクラス自体に属します。

例: 静的メソッド

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

---

プライベートフィールドとメソッド

プライベート フィールドとメソッドはクラス内でのみアクセスでき、# 接頭辞で示されます。

例: プライベートフィールド

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

---

クラス リテラルとオブジェクト リテラル

単純なデータ構造の場合、オブジェクト リテラルは迅速かつ簡単ですが、クラスでは次のことが可能です。

• 複数の同様のオブジェクトを作成するための明確な青写真。
• 継承とカプセル化のサポート。

---

3.モジュールとクラスの結合

最新の JavaScript アプリケーションでは、モジュールとクラスが美しく相互補完します。あるモジュールでクラスを定義し、それを別のモジュールで使用できます。

例: モジュールとクラスの結合

// main.js
import { add, subtract } from './utils.js';

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

---

4.現実世界の例: ショッピング カート

これは、モジュールとクラスの両方を組み合わせた実際的な例です。

ファイル: cart.js

// main.js
import greet from './greet.js';

console.log(greet("Alice")); // Output: Hello, Alice!

ファイル: main.js

const loadModule = async () => {
  const module = await import('./utils.js');
  console.log(module.add(5, 3)); // Output: 8
};

loadModule();

---

重要なポイント

1. モジュール: コードを整理し、再利用性を促進します。
2. クラス: オブジェクトを操作するための構造化された方法を提供し、継承やカプセル化などの機能を提供します。
3. 組み合わせて使用​​: モジュールとクラスを一緒に使用して、スケーラブルで保守可能なアプリケーションを構築します。

---

練習課題

1. 基本的な算術演算用の関数をエクスポートするモジュールを作成します。
2. 書籍を追加およびリストするメソッドを備えた図書館システムのクラスを作成します。
3. モジュールとクラスを組み合わせて、基本的な e コマース ショッピング カートをシミュレートします。

---

次は何ですか?

明日の 10 日目では、イベント ループと非同期プログラミングについて詳しく説明します。そこでは、JavaScript が同時実行、コールバック、Promise、およびイベント ループをどのように処理するかを学びます。 。乞うご期待!

以上がJavaScript モジュールとクラスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。