WordPress関数(PHP)で取得した値をJavaScriptへ渡す方法

こちらの記事を参考にしました。

PHPで取得した値をJavascriptへ送りたい

PHPからJavaScriptに配列を渡す

Contents

結論

 PHPファイル内で<script></script>タグを挿入し、変数に値を入力します。

<?php 
//数字
$sendVariableNum = 5;
//文字
$sendVariableText = 'てすと';
//配列
$sendVariableArray = ['てすと1','てすと2','てすと3'];
?>
<script>
const sendVariable = <?php echo $sendVariable;?>;
const sendVariableText = <?php echo json_encode($sendVariableText, JSON_UNESCAPED_UNICODE);?>;
const sendVariableArray = Array.from(<?php echo json_encode($sendVariableArray, JSON_UNESCAPED_UNICODE); ?>);
</script>

<!--外部jsはここより下で読み込む-->

scriptタグのカスタムデータ属性に値を入れる方法も試してみましたが、文字数が多すぎるとうまくいきませんでした。

  • PHPからJavaScriptに文字列や配列を渡すときはjson形式で受け渡しをする
  • 日本語を含む場合はjson_encode();の第2引数にJSON_UNESCAPED_UNICODEを追加する
  • JSON.parse()はxss(クロスサイトスクリプティング)ができてしまうので使わないほうがよい