目次
Interactivity APIの位置づけ
前回も述べたように、Interactivity APIは主にフロントエンドの動的な振る舞いを制御するために使用されるもので、エディター側ではなくユーザーが操作する画面に適用されます。
このため、コードを記述する対象のファイルは以下の通りです：
- view.js：JavaScriptによる動作定義
- render.php または save.js：要素の出力と紐付け
本記事では、まずview.jsについて焦点を当て、フロントエンド側（HTMLとの連携）については次回の記事で説明します。
view.jsのコード例
まず、Interactivity APIを使うには、@wordpress/interactivityパッケージをインストールし、以下のように必要なメソッドをインポートします。
import { store, getContext } from "@wordpress/interactivity";
storeメソッドの基本
storeメソッドは、特定の**名前空間（namespace）**に対して、状態やアクション、コールバックなどを定義するものです。以下のように使用します：
store(
'myModal', {
actions: {
toggle: () => {
const context = getContext();
context.isOpen = !context.isOpen;
},
},
callbacks: {
logIsOpen: () => {
const context = getContext();
console.log(`Is open: ${context.isOpen}`);
},
},
});
- actions: ボタンのクリックなど、ユーザーの操作に応じて実行する関数を定義します。
- callbacks: 状態の変化などに応じて自動的に実行される関数を定義します。
- getContext(): 現在の要素に紐づいた状態（コンテキスト）にアクセスできます。
フロントエンド側との連携
上記のview.jsで定義した処理は、フロントエンド側のHTMLに以下のように記述することで動作します：
<div
data-wp-interactive='{ "namespace": "myModal" }'
data-wp-context='{ "isOpen": false }'
data-wp-watch="callbacks.logIsOpen"
>
<button
data-wp-on--click="actions.toggle"
data-wp-bind--aria-expanded="context.isOpen"
aria-controls="modal-1"
>
モーダルを表示/非表示
</button>
<p id="modal-1" data-wp-show="context.isOpen"> モーダル </p>
</div>
この例では、以下のように動作します：
- data-wp-interactive: 要素にmyModalという名前空間を紐づけ、view.jsの処理と接続。
- data-wp-on--click: ボタンクリック時にactions.toggleが実行され、isOpenの状態が切り替わる。
- data-wp-show: isOpenがtrueのときに要素が表示される。
- data-wp-watch: 状態変更時にlogIsOpenが自動で実行され、状態がコンソールに出力される。
おわりに
今回はInteractivity APIにおけるview.jsファイルの基本的な書き方と、フロントエンドとの接続の概要を説明しました。
data-wp-*属性の詳細な役割についてはまだ説明していませんので、次回の記事でそれぞれの属性の意味や使い方を詳しく解説します。
