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

日付: 2024 年 12 月 16 日

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

---

1. JavaScript モジュール

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

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

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

---

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

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

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

名前付きエクスポート

// 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}!`;
}

モジュールのインポート

別のモジュールから機(jī)能を取り込むには、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!

---

動的インポート

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

例: 遅延読み込み

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

loadModule();

---

2. JavaScript クラス

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

クラスの定義

クラスは 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;

---

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

プライベート フィールドとメソッドはクラス內(nèi)でのみアクセスでき、# 接頭辭で示されます。

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

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

---

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

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

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

---

3.モジュールとクラスの結(jié)合

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

例: モジュールとクラスの結(jié)合

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

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

---

4.現(xiàn)実世界の例: ショッピング カート

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

ファイル: 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. モジュール: コードを整理し、再利用性を促進(jìn)します。
2. クラス: オブジェクトを操作するための構(gòu)造化された方法を提供し、継承やカプセル化などの機(jī)能を提供します。
3. 組み合わせて使用??: モジュールとクラスを一緒に使用して、スケーラブルで保守可能なアプリケーションを構(gòu)築します。

---

練習(xí)課題

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

---

次は何ですか?

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

以上がJavaScript モジュールとクラスの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。