【JavaScript】PHPで取得したデータをJavaScriptに渡す方法

2021年6月29日 2021年6月29日

本記事の内容

やりたいこと
- イメージ図
サンプルコード
実行画面
コードの解説
終わりに

やりたいこと

①PHPで取得した値をJavaScriptで使用する。

②PHPで取得した値を別ファイルのJavaScriptで使用する。

イメージ図

手順

①PHPのファイルを用意する。

②PHPでデータを用意する。

③同一ファイル内にHTMLの記述を行う。

④③のHTML内にJavaScriptの記述を行う。

⑤JavaScriptでPHPのデータを受け取る。

⑥⑤で受け取ったデータを外部参照しているJavaScriptで使用する。

サンプルコード

・main.php

<?php
  $color_array = ['red', 'blue', 'yellow'];
  $json_color_array = json_encode($color_array);
?>
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <script>
    let js_color_array = <?php echo $json_color_array; ?>;
    alert("main.php\n"+ js_color_array);
  </script>
  <script src="receive.js"></script>
</body>

</html>

・receive.js

!function () {
    var receive_data = js_color_array;
    alert("receive.js\n" + receive_data);
}();

実行画面

１回目のアラート

２回目のアラート

こめつぶ

期待する結果が出力されました！

コードの解説

・main.php

main.phpには3種類の言語が1つのファイルに記述されています。

はじめはPHPです。

ここでは、配列のデータを作成して、JavaScriptで使用するためにJson形式にデータを変換します。

<?php
  $color_array = ['red', 'blue', 'yellow'];  //配列を作成する
  $json_color_array = json_encode($color_array);  //json形式のデータに変換
?>

次にHTMLです。

初期のテンプレートから特に変更していません。<body>の中にJavaScriptの記述をしていきます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
　<--! ここにJavaScriptを記述する -->
</body>

</html>

最後はJavaScriptです。

PHPからJson形式にされたデータを受け取ります。アラートで内容を確認します。

最後の行で、外部参照するJavaScriptのファイルを記述します。

  <script>
    let js_color_array = <?php echo $json_color_array; ?>; //PHPからデータを受け取る。
    alert("main.php\n"+ js_color_array);                   //アラートで内容を確認
  </script>
  <script src="receive.js"></script>　             //外部参照するJavaScriptのファイルを記述する

・receive.js

即時関数を定義して、その中に処理を記述します。

js_color_arrayの中のデータには既にPHPから受け取ったデータが入っているので、代入して使用します。

アラートで内容を確認します。

!function () {
    var receive_data = js_color_array;    //main.php内のJavaScriptで受け取った変数を代入する
    alert("receive.js\n" + receive_data); //アラートで内容を確認
}();