【PHP入門】PHPファイル内でPHPからJavaScriptにデータを渡す方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、PHPファイル内でPHPからJavaScriptにデータを渡す方法を見ていきます。

JavaScriptからPHPにデータを渡す方法については、別途記事にしています。

気になる方はCheckしてみてください。

【PHP入門】JavaScriptからPHPにデータを渡す方法 | fetch-API

【 JavaScriptからPHPにデータを渡す方法】

1 PHPからJavaScriptにデータを渡す基本
2 Sample-Code全文
3 Twitterやってます！Follow Me！
4 PHP / Laravel書籍
5 参考・引用
6 最近の投稿

PHPからJavaScriptにデータを渡す基本

PHPと言うServer-Sideの言語とJavaScriptと言うClient-Sideの言語の別言語のデータのやり取りなので、それぞれにデータをやり取りするための処理が必要になってきます。

PHP側はJavaScriptに渡したい値を「 json_encode(渡す値) 」する

まずPHP側では、JavaScriptに渡したい値をJSONデータに変換します。

PHPの場合は「 json_encode(値)」とすればJSONデータに値を変換できます。

<?php

// [ PHPからJavaScriptにデータを渡す ]

// スカラー型
$robotama = 'ロボ玉';

// 1. 渡したいデータをJSONデータに変換する
$robotama_json = json_encode($robotama);

// 配列
$robotama_array = ['ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機'];

$array_json = json_encode($robotama_array);

JavaScript側はPHPから受け取る値をPHPタグ＆echoで出力する

JavaScript側ではPHPから受け取る値を「 JSON.parse(‘PHP-Start-Tag echo 受け取るJSON-Data PHP-End-Tag’); 」

とすることで受け取ることができます。

// 1. PHPから受け取る値は、
// 「 JSON.parse('PHP-Start-Tag echo 受け取るJSON-Data PHP-End-Tag') 」で受け取る。
const robotama = JSON.parse('<?php echo $robotama_json; ?>');
console.log({robotama});
    // {robotama: 'ロボ玉'}

また、JSON.parse() を使わず「 PHP-Start-Tag echo 受け取るJSON-Data PHP-End-Tag 」だけでも受け取れるようです。

// 2. PHPから受け取る値は、
// 「 PHP-Start-Tag echo 受け取るJSON-Data PHP-End-Tag 」でも受け取れる。
const array = <?php echo $array_json; ?>;
console.log({array});
    // array: (3) ['ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機']

連想配列は、JavaScriptだとObjectに変換されるので注意

PHPの連想配列はJavaScriptだとObjectに変換されてしまうので注意です。

<?php

// 連想配列
$robotama_association_array = [
    'ロボ玉試作1号機' => 1000, 
    'ロボ玉試作2号機' => 2000,
    'ロボ玉試作3号機' => 3000
];

$association_array_json = json_encode($robotama_association_array);

?>

<script>

// 3. 連想配列は、JavaScriptだとObjectに変換されるので注意🔥
const association_array = <?php echo $association_array_json; ?>;
console.log({association_array});
    // association_array: {ロボ玉試作1号機: 1000, ロボ玉試作2号機: 2000, ロボ玉試作3号機: 3000}

</script>

Sample-Code全文

<?php

// PHPからJavaScriptにデータを渡す🔥

// スカラー型
$robotama = 'ロボ玉';

$robotama_json = json_encode($robotama);

// 配列
$robotama_array = ['ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機'];

$array_json = json_encode($robotama_array);

// 連想配列
$robotama_association_array = [
    'ロボ玉試作1号機' => 1000, 
    'ロボ玉試作2号機' => 2000,
    'ロボ玉試作3号機' => 3000
];

$association_array_json = json_encode($robotama_association_array);

// Object
$robotama_object = (object)[
    'ロボ玉試作1号機' => 1000, 
    'ロボ玉試作2号機' => 2000,
    'ロボ玉試作3号機' => 3000
];

$object_json = json_encode($robotama_object);

?>

<h1>PHPからJavaScriptにデータを渡すTestをするロボ玉🔥</h1>

<h2>1. PHP側では、JavaScriptに渡したい値を json_encode(渡す値) </h2>

<h2>2. JavaScript側では、PHPから受け取る値を JSON.parse('PHP-Start-Tag echo 受け取るJSON-Data PHP-End-Tag')</h2>
<p>または、</p>
<h2>JSON.parse() を使わず「 PHP-Start-Tag echo 受け取るJSON-Data PHP-End-Tag 」だけでも受け取れる</h2>

<h3>連想配列は、JavaScriptだとObjectに変換されるので注意🔥</h3>

<h3>VSCode の拡張機能「PHP-Server」を使って、確認してみよう🔥</h3>


<h3>参考・引用</h3>
<a href="https://qiita.com/tksnino/items/c8c542f1f0a7bf9d6031" target="_blank" >PHPからJavaScriptに配列を渡す</a>


<script>

// 1. PHPから受け取る値は、
// 「 JSON.parse('PHP-Start-Tag echo 受け取るJSON-Data PHP-End-Tag') 」で受け取る。
const robotama = JSON.parse('<?php echo $robotama_json; ?>');
console.log({robotama});
    // {robotama: 'ロボ玉'}


// 2. PHPから受け取る値は、
// 「 PHP-Start-Tag echo 受け取るJSON-Data PHP-End-Tag 」でも受け取れる。
const array = <?php echo $array_json; ?>;
console.log({array});
    // array: (3) ['ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機']


// 3. 連想配列は、JavaScriptだとObjectに変換されるので注意🔥
const association_array = <?php echo $association_array_json; ?>;
console.log({association_array});
    // association_array: {ロボ玉試作1号機: 1000, ロボ玉試作2号機: 2000, ロボ玉試作3号機: 3000}


const object = <?php echo $object_json; ?>;
console.log({object});
    // object: {ロボ玉試作1号機: 1000, ロボ玉試作2号機: 2000, ロボ玉試作3号機: 3000}


</script>