WordPress 6.5「Script Modules API」解説：JavaScriptの新時代

WordPress 6.5で導入された「Script Modules API」とは何か？

2024年3月にリリースされたWordPress 6.5では、多くの新機能が追加されましたが、特に開発者にとって注目すべき機能の一つが「Script Modules API」です。この新APIは、WordPressでのJavaScriptの扱い方を根本から変革する可能性を秘めています。

本記事では、Script Modules APIの概要、利点、具体的な実装方法、そして今後の展望について詳しく解説します。WordPress開発者やテーマ・プラグイン開発に携わる方々にとって、必読の内容となっています。

なぜScript Modules APIが重要なのか？

これまでWordPressでは、JavaScriptの読み込みと管理に「wp_enqueue_script」関数を使用してきました。この方法は長年にわたり機能してきましたが、モダンなJavaScript開発が主流となった現在では、いくつかの制限がありました：

ESモジュール（ECMAScript Modules）の直接サポートがない
依存関係の管理が複雑
動的インポートの実装が困難
モダンJavaScriptの機能を活用しにくい

Script Modules APIは、これらの課題を解決し、WordPressでのJavaScript開発を現代的なものへと進化させます。特に、新しく導入されたInteractivity APIとの連携により、より効率的でパフォーマンスの高いインタラクティブなウェブサイト構築が可能になります。

Script Modules APIの主な特徴と利点

Script Modules APIの主な特徴と、それがもたらす利点は以下の通りです：

1. ネイティブESモジュールのサポート

Script Modules APIの最大の特徴は、ブラウザネイティブのESモジュールを直接サポートすることです。これにより以下のメリットが得られます：

構文的な利点：import/export文を使用した明確なモジュール構造
スコープの分離：各モジュールは独自のスコープを持ち、グローバル名前空間の汚染を防止
静的解析の容易さ：ツールによる依存関係の追跡と最適化が容易に
ツリーシェイキング：未使用コードの削除によるバンドルサイズの最適化

2. パフォーマンスの向上

ESモジュールは、従来のスクリプト読み込みに比べてパフォーマンス面で多くの利点があります：

並列ダウンロード：モジュールは依存関係が解析された後、並行してダウンロード可能
効率的なキャッシング：モジュールごとに個別にキャッシュ可能
遅延評価：コードは必要になるまで評価されない
非同期読み込み：デフォルトで非同期的に読み込まれ、ページのレンダリングをブロックしない

3. 依存関係の明示的管理

ESモジュールでは、依存関係が各モジュール内で明示的に宣言されます：

自己文書化するコード：依存関係がコード内で明確に表示される
循環依存の検出：循環依存がある場合、開発時に検出可能
分離されたインポート：必要な機能のみをインポートし、バンドルサイズを削減

4. モダンな開発エコシステムとの統合

Script Modules APIは、現代のJavaScript開発エコシステムとの統合を容易にします：

NPMパッケージの活用：ESM対応のNPMパッケージを直接利用しやすくなる
ビルドツールとの連携：webpack、Rollupなどのモダンビルドツールとの連携が改善
TypeScript対応：型指定をサポートする開発フローとの統合が容易

WordPress 6.5で提供されるscriptモジュール

WordPress 6.5では、Script Modules APIとともに、すぐに使用できる2つの重要なモジュールが提供されています。これらはInteractivity APIと連携して動作します：

モジュール名	パス	主な機能	使用例
`@wordpress/interactivity`	`/wp-includes/js/dist/ interactivity.js`	インタラクティブなUIコンポーネントの構築	動的フォーム、タブ、モーダル、ライブ検索など
`@wordpress/interactivity-router`	`/wp-includes/js/dist/ interactivity-router.js`	クライアントサイドルーティングの実装	ページ遷移のナビゲーション、履歴管理など

これらのモジュールは、Interactivity APIを使ってインタラクティブなコンポーネントを構築する際の基盤となります。特に重要なのは、これらが標準で提供されるため、追加のライブラリをロードする必要がないことです。

Script Modules APIの基本的な使い方

Script Modules APIを使用するための基本的な方法を見ていきましょう。

1. サーバーサイドでのモジュール登録

PHPコードでScript Modulesを登録するには、新しい「wp_enqueue_script_module」関数を使用します：

// 基本的なモジュール登録
function my_plugin_enqueue_modules() {
    wp_enqueue_script_module(
        'my-module-handle',
        plugin_dir_url( __FILE__ ) . 'assets/js/my-module.js'
    );
}
add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_modules' );

// 依存関係を指定したモジュール登録
function my_plugin_with_deps() {
    wp_enqueue_script_module(
        'my-advanced-module',
        plugin_dir_url( __FILE__ ) . 'assets/js/advanced.js',
        array( '@wordpress/interactivity' ) // WordPressコアモジュールへの依存
    );
}
add_action( 'wp_enqueue_scripts', 'my_plugin_with_deps' );

// 基本的なモジュール登録

function my_plugin_enqueue_modules() {

wp_enqueue_script_module(

'my-module-handle',

plugin_dir_url( __FILE__ ) . 'assets/js/my-module.js'

);

}

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_modules' );

// 依存関係を指定したモジュール登録

function my_plugin_with_deps() {

wp_enqueue_script_module(

'my-advanced-module',

plugin_dir_url( __FILE__ ) . 'assets/js/advanced.js',

array( '@wordpress/interactivity' ) // WordPressコアモジュールへの依存

);

}

add_action( 'wp_enqueue_scripts', 'my_plugin_with_deps' );

2. モジュールの記述（クライアントサイド）

JavaScriptファイル内では、標準的なESモジュール構文を使用できます：

// my-module.js
import { store, getContext } from '@wordpress/interactivity';

// モジュールの名前空間を定義
store( 'my-plugin', {
    state: {
        count: 0,
    },
    actions: {
        increment: ({ state }) => {
            state.count++;
        },
    },
    selectors: {
        isEven: ({ state }) => state.count % 2 === 0,
    },
} );

// 他の場所で使用するための関数をエクスポート
export function initializeCounter() {
    console.log( 'Counter initialized!' );
}

// my-module.js

import { store, getContext } from '@wordpress/interactivity';

// モジュールの名前空間を定義

store( 'my-plugin', {

state: {

count: 0,

actions: {

increment: ({ state }) => {

state.count++;

selectors: {

isEven: ({ state }) => state.count % 2 === 0,

} );

// 他の場所で使用するための関数をエクスポート

export function initializeCounter() {

console.log( 'Counter initialized!' );

}

3. モジュールの動的インポート

必要に応じてモジュールを動的にインポートすることも可能です：

// 条件に応じて動的にモジュールをインポート
async function loadFeatureOnDemand() {
    if (document.querySelector('.special-feature')) {
        const { initializeFeature } = await import('./special-feature.js');
        initializeFeature();
    }
}

// ユーザーインタラクション時に機能を読み込む
document.querySelector('.load-button').addEventListener('click', async () => {
    const { setupUI } = await import('./heavy-component.js');
    setupUI();
});

// 条件に応じて動的にモジュールをインポート

async function loadFeatureOnDemand() {

if (document.querySelector('.special-feature')) {

const { initializeFeature } = await import('./special-feature.js');

initializeFeature();

}

// ユーザーインタラクション時に機能を読み込む

document.querySelector('.load-button').addEventListener('click', async () => {

const { setupUI } = await import('./heavy-component.js');

setupUI();

});

Interactivity APIとの連携

Script Modules APIの真価は、Interactivity APIと組み合わせた時に発揮されます。以下は、両者を組み合わせた簡単なカウンターコンポーネントの例です：

1. PHP側（レンダリング関数）

function render_counter_block() {
    // モジュールの登録
    wp_enqueue_script_module(
        'my-counter-module',
        plugin_dir_url( __FILE__ ) . 'build/counter.js',
        array( '@wordpress/interactivity' )
    );
    
    // HTMLの出力
    return '
    <div data-wp-interactive="my-counter">
        <p>カウント: <span data-wp-text="state.count">0</span></p>
        <button data-wp-on--click="actions.increment">増加</button>
        <button data-wp-on--click="actions.decrement">減少</button>
        <p data-wp-bind--hidden="!selectors.isEven">現在の値は偶数です</p>
    </div>
    ';
}

function render_counter_block() {

// モジュールの登録

wp_enqueue_script_module(

'my-counter-module',

plugin_dir_url( __FILE__ ) . 'build/counter.js',

array( '@wordpress/interactivity' )

);

// HTMLの出力

return '

<p data-wp-bind--hidden="!selectors.isEven">現在の値は偶数です</p>

</div>

}

2. JavaScript側（モジュールファイル）

// counter.js
import { store } from '@wordpress/interactivity';

store( 'my-counter', {
    state: {
        count: 0,
    },
    actions: {
        increment: ({ state }) => {
            state.count++;
        },
        decrement: ({ state }) => {
            if (state.count > 0) {
                state.count--;
            }
        },
    },
    selectors: {
        isEven: ({ state }) => state.count % 2 === 0,
    },
} );

// counter.js

import { store } from '@wordpress/interactivity';

store( 'my-counter', {

state: {

count: 0,

actions: {

increment: ({ state }) => {

state.count++;

decrement: ({ state }) => {

if (state.count > 0) {

state.count--;

}

selectors: {

isEven: ({ state }) => state.count % 2 === 0,

} );

この例では、Interactivity APIのディレクティブを使用して、状態の表示や更新をHTML要素に直接バインドしています。Script Modules APIにより、このロジックをクリーンなESモジュールとして記述できます。

従来のアプローチとの違い

従来のwp_enqueue_scriptと新しいScript Modules APIの違いを比較してみましょう：

機能/特徴	wp_enqueue_script（従来）	wp_enqueue_script_module（新API）
モジュールシステム	グローバル変数または限定的なAMD	ネイティブESモジュール
依存関係の定義	PHPコードで明示的に記述	JSファイル内のimport文で自動的に処理
スコープ	グローバルスコープが基本	モジュールごとに隔離されたスコープ
読み込みタイミング	基本的に同期（async/deferで調整可）	デフォルトで非同期
ツールサポート	モダンツールとの統合に課題あり	現代的ビルドツールと自然に連携
ブラウザ互換性	ほぼすべてのブラウザで動作	モダンブラウザ向け（IE非対応）

この比較からわかるように、Script Modules APIはモダンなJavaScript開発手法に対して大幅に適応性が向上していますが、古いブラウザへの対応が犠牲になる可能性があります。

実際の開発シナリオでの活用例

Script Modules APIを実際のWordPress開発シナリオでどのように活用できるか、いくつかの具体例を見てみましょう。

1. プログレッシブエンハンスメントの実装

基本的な機能をHTMLとCSSで提供し、JavaScriptが利用可能な場合にのみ拡張機能を追加する手法です：

// PHP側
function render_enhanced_form() {
    wp_enqueue_script_module( 
        'form-enhancer',
        plugin_dir_url( __FILE__ ) . 'js/form-enhancer.js'
    );
    
    return '
    <form class="basic-form" data-wp-interactive="form-enhancer">
        <!-- 基本フォーム要素 -->
        <input type="text" name="name" required>
        <!-- JavaScript拡張要素（初期状態では非表示） -->
        <div class="enhanced-controls" data-wp-bind--hidden="!state.jsEnabled">
            <!-- 拡張UI要素 -->
        </div>
        <button type="submit">送信</button>
    </form>
    ';
}

// JavaScript側（form-enhancer.js）
import { store } from '@wordpress/interactivity';

store( 'form-enhancer', {
    state: {
        jsEnabled: true,
    },
    init: () => {
        // 拡張機能の初期化
    }
} );

// PHP側

function render_enhanced_form() {

wp_enqueue_script_module(

'form-enhancer',

plugin_dir_url( __FILE__ ) . 'js/form-enhancer.js'

);

return '

</div>

</form>

}

// JavaScript側（form-enhancer.js）

import { store } from '@wordpress/interactivity';

store( 'form-enhancer', {

state: {

jsEnabled: true,

init: () => {

// 拡張機能の初期化

}

} );

2. 必要に応じた機能の遅延読み込み

ページの特定のセクションが表示された時だけ、必要なJavaScriptを読み込む例：

// main.js
const observer = new IntersectionObserver(async (entries) => {
    for (const entry of entries) {
        if (entry.isIntersecting) {
            if (entry.target.classList.contains('video-section')) {
                // 動画プレーヤーモジュールを動的にインポート
                const { initVideoPlayer } = await import('./video-player.js');
                initVideoPlayer(entry.target);
            } else if (entry.target.classList.contains('map-section')) {
                // 地図モジュールを動的にインポート
                const { initMap } = await import('./map.js');
                initMap(entry.target);
            }
            // 一度読み込んだら監視を解除
            observer.unobserve(entry.target);
        }
    }
});

// 監視対象の要素を登録
document.querySelectorAll('.lazy-section').forEach(section => {
    observer.observe(section);
});

// main.js

const observer = new IntersectionObserver(async (entries) => {

for (const entry of entries) {

if (entry.isIntersecting) {

if (entry.target.classList.contains('video-section')) {

// 動画プレーヤーモジュールを動的にインポート

const { initVideoPlayer } = await import('./video-player.js');

initVideoPlayer(entry.target);

} else if (entry.target.classList.contains('map-section')) {

// 地図モジュールを動的にインポート

const { initMap } = await import('./map.js');

initMap(entry.target);

}

// 一度読み込んだら監視を解除

observer.unobserve(entry.target);

}

});

// 監視対象の要素を登録

document.querySelectorAll('.lazy-section').forEach(section => {

observer.observe(section);

});

3. モジュラーなコンポーネントシステムの構築

再利用可能なUIコンポーネントをモジュールとして実装する例：

// components/index.js
export { default as Tabs } from './tabs.js';
export { default as Modal } from './modal.js';
export { default as Accordion } from './accordion.js';

// 使用例（main.js）
import { store } from '@wordpress/interactivity';
import { Tabs, Modal } from './components/index.js';

// コンポーネントの初期化
store( 'my-ui', {
    state: {
        // 状態管理
    },
    init: ({ state }) => {
        // 各コンポーネントの初期化
        Tabs.init();
        Modal.init();
    }
} );

// components/index.js

export { default as Tabs } from './tabs.js';

export { default as Modal } from './modal.js';

export { default as Accordion } from './accordion.js';

// 使用例（main.js）

import { store } from '@wordpress/interactivity';

import { Tabs, Modal } from './components/index.js';

// コンポーネントの初期化

store( 'my-ui', {

state: {

// 状態管理

init: ({ state }) => {

// 各コンポーネントの初期化

Tabs.init();

Modal.init();

}

} );

開発者が注意すべき点

Script Modules APIを活用する際に注意すべきポイントをいくつか紹介します：

1. ブラウザ互換性への配慮

ESモジュールはIE11を含む古いブラウザではサポートされていません。サイトの訪問者層によっては、フォールバックの実装を検討する必要があります：

ユーザーエージェントに基づいてモジュール/非モジュールバージョンを提供
プログレッシブエンハンスメント手法の採用
必要に応じてポリフィルを活用

2. パフォーマンスの考慮

ESモジュールは多くのパフォーマンス上の利点がありますが、以下の点に注意が必要です：

過剰な細分化はHTTPリクエスト数の増加につながる可能性がある
本番環境では適切なバンドル戦略を検討
HTTP/2が利用可能なホスティング環境を活用すると効果的

3. 既存コードとの互換性

既存のJavaScriptコードをESモジュールに移行する際の注意点：

グローバル変数に依存しているコードの修正
jQuery依存コードの段階的な移行計画
モジュールとグローバルスクリプトの混在環境での依存関係管理

Script Modules APIのビルドツールとの統合

モダンなJavaScript開発では、様々なビルドツールを活用することが一般的です。Script Modules APIはこれらのツールとの統合も容易です。

1. webpackとの連携

webpack.config.jsの設定例：

const path = require( 'path' );

module.exports = {
    entry: {
        'main': './src/index.js',
        'components': './src/components.js',
    },
    output: {
        path: path.resolve( __dirname, 'build' ),
        filename: '[name].js',
        // ESモジュール形式で出力
        module: true,
        library: {
            type: 'module',
        },
    },
    experiments: {
        outputModule: true,
    },
    // 外部依存の設定
    externals: {
        '@wordpress/interactivity': 'module @wordpress/interactivity',
        '@wordpress/interactivity-router': 'module @wordpress/interactivity-router',
    },
};

const path = require( 'path' );

module.exports = {

entry: {

'main': './src/index.js',

'components': './src/components.js',

output: {

path: path.resolve( __dirname, 'build' ),

filename: '[name].js',

// ESモジュール形式で出力

module: true,

library: {

type: 'module',

experiments: {

outputModule: true,

// 外部依存の設定

externals: {

'@wordpress/interactivity': 'module @wordpress/interactivity',

'@wordpress/interactivity-router': 'module @wordpress/interactivity-router',

};

2. Rollupとの連携

rollup.config.jsの設定例：

export default {
    input: 'src/index.js',
    output: {
        file: 'build/bundle.js',
        format: 'es', // ESモジュール形式で出力
    },
    // 外部依存の設定
    external: [
        '@wordpress/interactivity',
        '@wordpress/interactivity-router',
    ],
    plugins: [
        // 必要なプラグイン
    ]
};

export default {

input: 'src/index.js',

output: {

file: 'build/bundle.js',

format: 'es', // ESモジュール形式で出力

// 外部依存の設定

external: [

'@wordpress/interactivity',

'@wordpress/interactivity-router',

plugins: [

// 必要なプラグイン

]

};

3. @wordpress/scripts との統合

WordPressの公式ビルドツールを使用する場合の設定例：

// package.json
{
    "scripts": {
        "build": "wp-scripts build",
        "start": "wp-scripts start"
    },
    "dependencies": {
        "@wordpress/scripts": "^26.0.0"
    }
}

// webpack.config.js
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

module.exports = {
    ...defaultConfig,
    output: {
        ...defaultConfig.output,
        module: true,
        library: {
            type: 'module',
        },
    },
    experiments: {
        ...defaultConfig.experiments,
        outputModule: true,
    },
    externals: {
        '@wordpress/interactivity': 'module @wordpress/interactivity',
        '@wordpress/interactivity-router': 'module @wordpress/interactivity-router',
    },
};

// package.json

{

"scripts": {

"build": "wp-scripts build",

"start": "wp-scripts start"

"dependencies": {

"@wordpress/scripts": "^26.0.0"

}

// webpack.config.js

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

module.exports = {

...defaultConfig,

output: {

...defaultConfig.output,

module: true,

library: {

type: 'module',

experiments: {

...defaultConfig.experiments,

outputModule: true,

externals: {

'@wordpress/interactivity': 'module @wordpress/interactivity',

'@wordpress/interactivity-router': 'module @wordpress/interactivity-router',

};

今後の展望と発展の方向性

Script Modules APIはWordPress 6.5で初めて導入された新機能であり、今後も発展していくことが予想されます。

1. 予想される今後の拡張

コアモジュールの拡充：より多くの共通ユースケースをカバーするモジュールの追加
型定義の提供：TypeScriptの型定義ファイルの正式サポート
ビルドツール統合の向上：より簡単にビルドプロセスを設定できるヘルパーや設定の提供
バンドル戦略の最適化：複数モジュールの効率的な配信方法の改善

2. エコシステムへの影響

Script Modules APIの導入は、WordPress開発エコシステム全体に影響を与える可能性があります：

プラグイン開発の現代化：より多くのプラグインが最新のJavaScript手法を採用
共有コンポーネントライブラリの登場：再利用可能なUIコンポーネントのエコシステム発展
フロントエンドフレームワークとの統合：React、Vue、Svelte等のフレームワークとの連携方法の改善
パフォーマンス向上：WordPressサイト全体のJavaScriptパフォーマンスが向上

3. 将来の可能性

長期的には、以下のような発展も期待できます：

マイクロフロントエンド：異なるプラグインが提供するUI要素の連携と統合
オフライン機能：ServiceWorkerとの連携によるプログレッシブウェブアプリケーション（PWA）機能
サーバーサイドとクライアントサイドの統合：同じコードベースでの両環境での動作（例：React Server Components的アプローチ）

まとめ：WordPress JavaScriptの新時代

WordPress 6.5で導入されたScript Modules APIは、WordPressでのJavaScript開発の新たな章を開くものです。この新APIにより：

モダンJavaScript開発手法をWordPressで直接活用できるようになった
パフォーマンスとコード品質の向上が期待できる
Interactivity APIと組み合わせることで、より簡潔で効率的な実装が可能に
現代的なビルドツールとの統合が改善された

Script Modules APIはまだ新しい機能であり、今後の発展とエコシステムの適応が期待されます。WordPress開発者は、この新しいAPIを学び、活用することで、より効率的で保守性の高いコードを作成できるようになるでしょう。

モダンなWebアプリケーション開発の手法をWordPressで実現したいと考えている開発者にとって、Script Modules APIは重要なステップとなります。ぜひ、自分のプロジェクトでこの新しいAPIを試して、その可能性を探ってみてください。

当社では、WordPress 6.5の新機能を活用したカスタム開発やプラグイン・テーマ開発サービスを提供しています。Script Modules APIやInteractivity APIを活用した最新のフロントエンド開発についてのご相談は、お気軽にお問い合わせください。

エーデルハーツ

Custom WordPress Support & Development