目次
はじめに
WordPressで、PHPで作った値をJavaScriptで利用したい場面があります。
例えば「サーバー側で作ったメッセージをJSで表示したい」というケースです。
この記事では、この方法について説明します。
PHPからJavaScriptに値を渡す3つの方法
PHPからJavaScriptに値を渡す方法は3つあり、それぞれ特徴があります（表1参照）。
ここでは代表的な3つの方法を紹介し、それぞれ「HELLO」というメッセージを例にして解説します。
| 方法 | 特徴 |
|---|---|
| wp_localize_script() | 配列をオブジェクト化でき、複数値やAjaxデータに便利 |
| wp_add_inline_script() | 登録スクリプトに安全に埋め込み可能 |
| <script>タグ直接出力 | 単純な値を手軽に渡せる |
wp_localize_script() の例
以下にコード例を示します。
// スクリプトを登録
wp_enqueue_script('my-script', get_template_directory_uri() . '/assets/js/my-script.js');
// PHPの値をJSに渡す
wp_localize_script('my-script', 'MyData', [
'message' => 'HELLO'
]);wp_add_inline_script() の例
以下にコード例を示します。
$message = 'HELLO';
// 空のスクリプトハンドルを登録
wp_register_script('my-inline-only', '');
// enqueueする（これでinlineを差し込めるようになる）
wp_enqueue_script('my-inline-only');
// inlineスクリプトを追加
$inline_js = "var MyData = { message: '" . esc_js($message) . "' };";
wp_add_inline_script('my-inline-only', $inline_js, 'before');<script>タグで直接出力する例
以下にコード例を示します。
<?php
$message = 'HELLO';
?>
<script>
var MyData = { message: '<?= esc_js($message); ?>' };
</script>JS側（共通）
どの方法でも、JS側では同じコードで値を参照できます。
console.log(MyData.message); // 'HELLO'MyData.messageでPHP側から渡されたメッセージを取得可能。- Ajaxに関係なく、ページ読み込み時にすぐ利用できます。
さいごに
今回紹介した方法を使えば、WordPressでPHP側で作った値を簡単にJavaScript側で参照できます。
単純な文字列や設定値なら <script>タグやwp_add_inline_script()、複雑な配列やAjaxデータを渡す場合はwp_localize_script()を使うと効率的です。
どの方法もJS側は共通コードで扱えるため、用途やデータの複雑さに応じて使い分けると開発が安全かつスムーズになります。
