English 中文 العربية 日本語 Português

JavaScript: JavaScript クラスとモジュール

最終更新：2026-10-13

プロジェクトが大きくなると、バラバラの関数や変数だけでは不十分になります。組織化されたコード構造が必要です。クラスはオブジェクト指向パターンを提供し、モジュールはファイルレベルのコード分離を提供します。 together で、モダン JS プロジェクトの基盤を形成します。

関連する文：class set

1. クラス構文

クラスはオブジェクトを作成するためのテンプレートです。コンストラクタ関数のシンタシュガーです。

HTML 
<script>
class ClassName {
  constructor(params) {
    this.property = params;
  }
  method() {
    // ...
  }
}
</script>
HTML 
<div id="output" style="padding: 10px; border: 1px solid #ccc;"></div>

<script>
const output = document.getElementById('output');

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

  introduce() {
    return '私の名前は' + this.name + 'です。' + this.age + '歳で、' + this.grade + '年生です。';
  }

  study(subject) {
    return this.name + 'は' + subject + 'を勉強しています。';
  }
}

const s1 = new Student('Alice', 12, '6');
const s2 = new Student('Bob', 11, '5');

output.textContent = s1.introduce() + '\n' + s2.introduce() + '\n' + s1.study('算数');
</script>
💡 ヒント： class は本質的にはコンストラクタ関数 + プロトタイプのシンタシュガーです。new Student() は古い new function Student() と同じように動作しますが、構文がよりクリーンで直感的です。

2. プロパティとメソッド

(1) インスタンスプロパティとメソッド

constructor 内で this.xxx で定義されたプロパティとメソッドはインスタンスに属します。各オブジェクトは独自のコピーを持ちます。

(2) 静的メソッド

static キーワードで定義されたメソッドはクラス自体に属し、インスタンスには属しません。ClassName.method() で呼び出します。

(3) ゲッターとセッター

get と set キーワードを使って「仮想プロパティ」を定義します。読み書き時に自動的に実行される関数です。

HTML 
<div id="output" style="white-space: pre; font-family: monospace; padding: 10px; border: 1px solid #ccc;"></div>
<script>
const output = document.getElementById('output');

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName() {
    return this.firstName + ' ' + this.lastName;
  }

  set fullName(value) {
    const parts = value.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
}

const p = new Person('John', 'Doe');
output.textContent = 'fullName: ' + p.fullName + '\n';
p.fullName = 'Jane Smith';
output.textContent += '変更後: ' + p.fullName;
</script>

(4) サンプル：静的メソッドとゲッター/セッター

▶ 試してみよう

3. 継承

extends で子クラスが親クラスのプロパティとメソッドを継承します。super で親のコンストラクタやメソッドを呼び出します。

(1) サンプル：継承のデモ

▶ 試してみよう
💡 ヒント： 子クラスの constructor では、this を使う前に super() を呼び出す必要があります。親が初期化されるまで、子の this は存在しないためです。継承を学ぶ際に最も忘れやすいルールです。

4. ES モジュール

モジュールは JS のコード整理単位です。1つのモジュール ＝ 1つのファイル。モジュール内の変数はデフォルトでプライベートで、明示的に export されたアイテムのみが外部からアクセスできます。

(1) 名前付きエクスポート / インポート

HTML 
<script>
// math.js
export const PI = 3.14;
export function add(a, b) { return a + b; }

// app.js
import { PI, add } from './math.js';
</script>

(2) デフォルトエクスポート / インポート

HTML 
<script>
// logger.js
export default function log(msg) { console.log(msg); }

// app.js
import log from './logger.js';
</script>

(3) HTML でモジュールを使う

script タグに type="module" を追加するだけです。

HTML 
<script type="module">
  import { add } from './math.js';
  console.log(add(1, 2));
</script>
⚠️ 注意： モジュールファイルはブラウザによってキャッシュされ、同一オリジンポリシーの対象になります。ローカルで HTML ファイルを開くとモジュールの読み込みに失敗する可能性があります。HTTP サーバー経由で提供する必要があります。

(4) サンプル：単一ファイルモジュールシミュレーション（インラインモジュール）

実際のプロジェクトでは、モジュールは別々のファイルに分割する必要があります。ここでは type="module" を使って単一の HTML ファイル内でシミュレーションします。

▶ 試してみよう

関連する文：class set

❓ よくある質問

Q クラスとコンストラクタ関数の本当の違いは何ですか？
A 本質的な違いはありません。クラスはシンタシュガーです。ただし、クラスにはいくつかの特徴があります：new での呼び出しが必須（プレーン関数として実行不可）、メソッドは列挙不可、デフォルトで strict モード。構文がよりクリーンなため、クラスが推奨されます。
Q import と require の違いは何ですか？
A import は ES モジュール構文で、コンパイル時に静的に解析されます。require は CommonJS（Node.js）で、ランタイムに動的に読み込まれます。ブラウザは ES モジュールのみをネイティブサポートします。import はトップレベルにある必要があり、require はどこにでも置けます。
Q デフォルトエクスポートと名前付きエクスポートを混在できますか？
A はい。1つのモジュールに1つのデフォルトエクスポートと複数の名前付きエクスポートを持つことができます：export default App; export const utils = {};。インポートは：import App, { utils } from './module.js'。

📖 まとめ

📝 練習問題

  1. 基礎：width と height プロパティ、getArea() と getPerimeter() メソッドを持つ Rectangle クラスを作成してください。
  2. 中級：Rectangle に get area() ゲッターと set area(value) セッターを追加してください（面積を設定すると幅/高さが比例調整される）。その後、Rectangle を継承する Square サブクラスを作成してください。
  3. チャレンジ：on(event, callback)、off(event, callback)、emit(event, data) メソッドを持つ EventManager クラスを設計し、シンプルなイベントシステムをシミュレートしてください（ヒント：イベントをコールバックの配列にマッピングするオブジェクトを使う）。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%