MENU
「シャッチクンのWEBエンジニア入門」ではHTML/CSSからSASS、JavaScriptまで、初心者からプロまで学べるステップバイステップの解説を提供。効率的なWeb制作をサポートします。
  1. ホーム
  2. javascript
  3. 第6回:クラスとモジュール

第6回:クラスとモジュール

javascript
javascript

プログラミングを学ぶ中で、「クラス」や「モジュール」といった概念に出会うことがあります。
クラスとモジュールを理解することで、複雑なプログラムをより整理しやすく、そして再利用して効率的に書くことができるようになります。
この記事ではクラスとモジュールの基本的な使い方と、それがなぜ重要なのかを解説します。

目次

クラスとは？

クラスはオブジェクトを作成するためのテンプレートです。
オブジェクトの設計図と考えることができます。
クラスを使うことで、同じ構造を持つ複数のオブジェクトを効率的に作成することができます。

  • プロパティ
    オブジェクトの状態や特徴を表すデータ。
  • メソッド
    オブジェクトが持つ機能で、関数として定義される。
class Coffee {
  constructor(type, size) {
    this.type = type;
    this.size = size;
  }

  describe() {
    return `${this.size} ${this.type}`;
  }
}

const myCoffee = new Coffee("Latte", "Large");
const yourCoffee = new Coffee("Espresso", "Short");
console.log(myCoffee.describe()); // "Large Latte"
console.log(yourCoffee.describe()); // "Espresso Short"

この例ではCoffeeというクラスを使って、myCoffeeオブジェクトとyourCoffeeオブジェクトを生成しています。
クラスを使うことで複数のオブジェクトを簡単に作成し、それらに共通のメソッドを持たせることができます。

補足: クラスを作成しておくと、myCoffeeやyourCoffeeなどの変数を作成する時にゼロから作成するのではなく、あらかじめ決められた情報が入った状態から作成できるようになる、ということです。

なぜクラスを使うのか？

クラスを使うことでオブジェクト指向プログラミング（OOP）の利点を活かし、コードの再利用性と可読性を向上させることができます。

コードの再利用

クラスを使うことで同じロジックを何度も書く必要がなくなります。
クラス内で定義されたメソッドは、生成されたすべてのオブジェクトで共通して使用できます。

class Store {
  constructor(name, place) {
    this.name = name;
    this.place = place;
  }

  getDetails() {
    return `${this.name}は${this.place}にあります`;
  }
}

const store1 = new Store("海のカフェ", "日本海沿岸");
const store2 = new Store("深海のカフェ", "日本海溝");

console.log(store1.getDetails()); // "海のカフェは日本海沿岸にあります"
console.log(store2.getDetails()); // "深海のカフェは日本海溝にあります"

補足：このように共通部分をまとめることで、管理が容易になります。
クライアントが気軽に「にあります」を「にございます」に変更して、と言ってきても、クラスを作成していれば1行直すだけで済みます。
逆にクラスを作成していないと、店舗数分の修正が必要になり、保守性が良いとは言えません。

継承と拡張

クラスは継承を利用することで既存のクラスを拡張し、新しい機能を追加できます。

class SpecialStore extends Store {
  constructor(name, location, specialty) {
    super(name, location);
    this.specialty = specialty;
  }

  getSpecialty() {
    return `${this.name} は ${this.location} にあり、${this.specialty} がオススメです。`;
  }
}

const specialStore = new SpecialStore("海のカフェ", "日本海沿岸", "シーフードフライ");
console.log(specialStore.getSpecialty()); 
// "海のカフェは日本海沿岸にあり、シーフードフライがオススメです。"

上記のコードの解説は以下に記載します。
今、学習する余力があるかたは開いてみてください。

詳細なコード解説
STEP
SpecialStoreクラスの宣言
class SpecialStore extends Store {...}
  • class SpecialStore extends Store
    ここで新しいクラスSpecialStoreを宣言しています。
    このクラスはStoreクラスを継承（extends キーワード）しています。
    つまりSpecialStoreはStoreのすべてのプロパティとメソッドを受け継ぎます。
STEP
コンストラクタ
constructor(name, location, specialty) {
  super(name, location);
  this.specialty = specialty;
}
  • constructor(name, location, specialty)
    まずSpecialStoreクラスのコンストラクタは、3つの引数 (name, location, specialty) を受け取ります。
  • super(name, location)
    superキーワードを使って、親クラス（ここではStoreクラス）のコンストラクタを呼び出します。
    これによりStoreクラスのnameとlocationプロパティが初期化されます。
    初期化とは受け取った値をこのクラス内で使えるようにすることです。
  • this.specialty = specialty
    specialtyプロパティはSpecialStoreクラス固有のプロパティであり、このクラスに新たに追加することにしました。
    引数で渡されたspecialtyの値をこのプロパティに代入します。
STEP
メソッド
getSpecialty() {
  return `${this.name} は ${this.location} にあり、${this.specialty} がオススメです。`;
}
  • getSpecialty()
    getSpecialty メソッドはSpecialStoreクラス専用のメソッドです。
    このメソッドはストアの名前 (this.name) と特化している商品 (this.specialty) を文字列で返します。

補足：returnは値を返すと解説されることが多いですが、よくわかりませんね。
この後で出てくるインスタンス化する所で変数を宣言するのですが、その変数にreturnで設定した値（文字列だったり数値だったり）が代入されるので、そのように覚えておいてください。

STEP
インスタンスの生成とメソッドの呼び出し
const specialStore = new SpecialStore("海のカフェ", "日本海沿岸", "シーフードフライ");
console.log(specialStore.getSpecialty()); 
// "海のカフェは日本海沿岸にあり、シーフードフライがオススメです。"
  • new SpecialStore(“海のカフェ”, “日本海沿岸”, “シーフードフライ”)
    このコードでSpecialStoreクラスのインスタンスspecialStoreを生成しています。
    引数にはnameとして「海のカフェ」、location「日本海沿岸」、specialty として「シーフードフライ」を渡しています。
  • specialStore.getSpecialty()
    specialStoreインスタンスのgetSpecialtyメソッドを呼び出しています。
    このメソッドは「海のカフェは日本海沿岸にあり、シーフードフライがオススメです。」という文字列を返します。

補足：プログラムの学習というものは、地道に坂道を上るように理解することはできません。
階段を登るように知識が増えていきます。
そして目の前にある段差がどの程度の大きさなのかは、登ってみないとわかりません。
大きな段差を乗り越えた時、自分ができることが飛躍的に増えたことを実感できるでしょう。

モジュールとは？

モジュールはコードを分割して管理するための仕組みです。
大規模なプロジェクトでは、コードを機能ごとに分割して、各モジュールが独立して動作するようにすることで、メンテナンスが容易になります。

  • エクスポート
    モジュール内で定義された関数やクラスを他のファイルで使用できるようにします。
  • インポート
    他のファイルでエクスポートされたモジュールを使用します。

使用例

STEP
まずmath.jsというモジュールを作成します。
// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}
STEP
次に別のファイルでこのモジュールをインポートして使用します。
// main.js
import { add, subtract } from './math.js';

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

補足：このようにモジュールを使って別ファイルに作成することで、コードを整理し、ファイル間を超えて再利用しやすくなります。

クラスとモジュールの実践

実際のプロジェクトでクラスとモジュールをどのように活用できるか見てみましょう。

STEP
まずproduct.jsというモジュールを作成します。
// product.js
export class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

  getInfo() {
    return `${this.name}の価格は${this.price}円です。`;
  }
}
STEP
次にmain.jsでこのクラスを利用します。
// main.js
import { Product } from './product.js';

const coffee = new Product("Espresso", 300);
console.log(coffee.getInfo()); // "Espressoの価格は300円です。"

まとめ

JavaScriptのクラスとモジュールを利用することで、コードの再利用性が向上し、プロジェクトがより整理されます。

クラスはオブジェクトのテンプレートとして機能し、複数のオブジェクトに共通のメソッドを持たせることができます。
モジュールはコードを分割して管理することで、複数の開発者が同時に作業する際にも便利です。

初心者のかたでもこれらの概念を理解することで、より高度なJavaScriptのスキルを身につけることができるでしょう。

javascript
javascript
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次