Javascriptで可変変数を使用したい

Question

現在PHPとJavascriptの勉強をしていて、
PHPからJavascriptへデータの受け渡しをしているのですが、
コードを簡易化しようと思い、for文を使用したのですがうまくいきません。
何かいい方法はないでしょうか？
ご教授お願いいたします。

<!--変更前コード↓-->
<?php
  $data1 = [1,2,3,4,5];
  $data2 = [6,7,8,9,10];
  $data3 = [11,12,13,14,15];
  $data4 = [16,17,18,19,20];

 for ($i = 1; $i <= 4;$i++){
   ${"b".$i} = json_encode(${"data".$i});
 }
?>

<script>
  var a1 = <?php echo $b1; ?>;
  var a2 = <?php echo $b2; ?>;
  var a3 = <?php echo $b3; ?>;
  var a4 = <?php echo $b4; ?>;

  console.log(a1);
  console.log(a2);
  console.log(a3);
  console.log(a4);
</script>

↓

<!--変更後コード↓-->
<script>
 for (var i = 1; i <= 4; i++){
   eval( "var a" + i + "= <?php echo $b" + i + "; ?>;" );
   eval( "var console.log(a" + i + ");");
 }
</script>

Answer 1

PHP: Webサーバとして起動、Chrome等のブラウザが「HTMLください」とリクエストした段階で動的なHTMLを作って渡す為に実行される
JavaScript: Chrome等のブラウザがHTMLを受け取った後、ページの見栄えを変更する為に実行

なのでフェーズが違います。
とにかくPHPがHTMLを生成するのが先。

ChromeにとってWebサーバの奥がPHPだろうがRubyだろうがJavaだろうが全く関係ありません。
単にHTTPリクエストを飛ばしてHTMLを受け取り、scriptタグを見つけて実行するだけです。

---

これを前提にいじって見ましょう。
PHPにはHTMLタグっぽく使える面白い魔法があるのでそちらを利用します。

また、<?php echo $value; ?>は長いので、
ショートタグの<?= $value ?>を利用した方が若干読みやすいかなぁと思います。

<?php
// ここが固定される場合
$data1 = [1,2,3,4,5];
$data2 = [6,7,8,9,10];
$data3 = [11,12,13,14,15];
$data4 = [16,17,18,19,20];

$data = [
  "a1" => $data1,
  "a2" => $data2,
  "a3" => $data3,
  "a4" => $data4,  
];
?>

<script>
  <?php foreach ($data as $k => $v): ?>
    var <?= $k ?> = <?= json_encode($v) ?>;
  <?php endforeach; ?>
  <?php foreach ($data as $k => $v): ?>
    console.log(<?= $k ?>);
  <?php endforeach; ?>
</script>

Comments

[kazumasa118]

ありがとうございます。
わかりやすい回答でとても勉強になりました。

Answer 2

Javascriptで可変変数を使用したい

JavaScript で可変変数を実装するには クライアント側で eval() 関数が必須になりますが、こちらの質問・回答 にも通じる可読性の懸念があります。

---

1. PHPの <?php 〜 ?> 内はサーバー側処理
2. PHPの <?php 〜 ?> 外は応答されるHTML(javascript)側処理

この違いを混乱しやすい初学のうちは別の方法をおすすめします。

たとえば、二次元配列を JSON の文字列にして クライアントに渡す方法

<?php
  $data1 = [1,2,3,4,5];
  $data2 = [6,7,8,9,10];
  $data3 = [11,12,13,14,15];
  $data4 = [16,17,18,19,20];

  $json = json_encode([ $data1, $data2, $data3, $data4 ]);
?>
<script>
// $json（文字列）をJSON.parse()の引数にハードコードする。
let ary = JSON.parse(<?php echo $json ?>);
console.log( ary ); // javascriptでは二次元配列を処理
for(let item of ary) {
  console.log( item );
}
</script>

Comments

[kazumasa118]

ありがとうございます。
大変勉強になりました。

Answer 3

javascritの変数はphp渡せません
こんなかんじで・・・

Comments

[yambejp]

<?php
$data1 = [1,2,3,4,5];
$data2 = [6,7,8,9,10];
$data3 = [11,12,13,14,15];
$data4 = [16,17,18,19,20];

?>
<script>
<?PHP
for ($i = 1; $i <= 4;$i++){
print "var a{$i} = ".json_encode(${"data".$i}).";\n";
print "console.log(a{$i});\n";
}
?>
</script>

[kazumasa118]

やりたいことができました！！
的確なご回答でわかりやすかったです。
ありがとうございました。