[PHP] 外部のJavaScriptファイルでPHPの変数を参照する方法

PHPから外部のJavaScriptに値を渡す方法についてです。PHPファイルの中に直接JavaScriptを記載していて、JavaScriptファイルを外部に持っていこうとすると、値が参照できなくなります。外部JavaScriptに値を渡すには少し工夫が必要です。

Contents

1 準備
2 テキスト・数値等の渡し方
3 配列の渡し方

準備

まず、公開ディレクトリに「sample.js」というファイルを作り、その中に下記のソースを記載します。

alert("値: " + sample);
console.log(sample);

1 2	alert("値: " + sample); console.log(sample);

値がうまく渡った場合、アラートとコンソールに値が出力されるようになります。

テキスト・数値等の渡し方

配列ではないテキストや数値等の渡し方は簡単です。

<?php
    $sample ='abc';//PHPで配列を生成
?>

<script type="text/javascript">
var sample='<?php echo $sample; ?>';
</script>

<script type="text/javascript" src="sample.js"></script>//外部のJavaScriptファイルの読み込み

<?php

$sample ='abc';//PHPで配列を生成

var sample='<?php echo $sample; ?>';

</script>

6行目でJavaScriptの変数 sample に PHPの変数の値を代入しています。（右辺はPHPで値をechoするだけ）
これだけでPHPからJavaScriptに値を渡すことができます。

配列の渡し方

配列データを渡すには一工夫必要になります。

<?php
$sample = array('abc','def');//PHPで配列を生成
$varJsSample=json_encode($sample);//JavaScriptに渡すためにjson_encodeを行う
?>

<script type="text/javascript">
var sample=JSON.parse('<?php echo $varJsSample; ?>');//jsonをparseしてJavaScriptの変数に代入
</script>

<script type="text/javascript" src="sample.js"></script>//外部のJavaScriptファイルの読み込み