WordPress関数(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(クロスサイトスクリプティング)ができてしまうので使わないほうがよい