メインコンテンツまでスキップ

ESMスクリプト

ESMスクリプトは、モダンなESモジュール構文を使用し、PlayCanvasスクリプトの推奨される記述方法です。より良いコード構成、静的インポート、バンドル最適化、そしてモダンなJavaScript開発者にとって馴染みのある開発体験を提供します。

なぜESMスクリプトを選ぶのか?

  • モダンなJavaScript: クラス、アロー関数、分割代入などのES6+機能が使えます
  • 優れたツールサポート: オートコンプリートやエラーチェックが強化されたIDE対応
  • モジュール化されたコード: スクリプト間でインポート・エクスポートが可能
  • パフォーマンス向上: 静的インポートによりバンドルやデッドコード除去が改善
  • 将来性: 継続的に進化するWeb標準に基づいた設計

ESMスクリプトの作成

ESMスクリプトは、.mjs拡張子である必要があります:

  1. アセットパネルで新しいスクリプトを作成
  2. ファイル名に.mjs拡張子を付ける(例:PlayerController.mjs
  3. エディタがESMのひな形コードを自動生成
import { Script } from 'playcanvas';

export class PlayerController extends Script {
static scriptName = 'playerController';

    initialize() {
        // 初期化コードをここに
    }

    update(dt) {
        // 毎フレームの更新コードをここに
    }
}
ヒント

1つのファイルに複数のスクリプト: 単一の .mjs ファイル内に複数のスクリプトクラスを定義できますが、それぞれをエクスポートしないとエディタで使用できません。

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

標準のESモジュール構文を使って、スクリプト間でコードを共有できます:

// config.mjs - 共有設定
export const GAME_SETTINGS = {
    playerSpeed: 5,
    jumpHeight: 10,
    gravity: -9.8
};

export function clamp(value, min, max) {
    return Math.min(Math.max(value, min), max);
}
// PlayerController.mjs - 共有コードの使用例
import { Script } from 'playcanvas';
import { GAME_SETTINGS, clamp } from './config.mjs';

export class PlayerController extends Script {
static scriptName = 'playerController';

    update(dt) {
        const speed = GAME_SETTINGS.playerSpeed;
        // clamp関数を使う...
    }
}