PHPからjavascriptへ値や連想配列を渡す手順まとめ

PHPでWeb開発をするときはPHP側からJavaScriptにデータを渡したい場面がでてきます。

データというのは例えば数値とか文字列とか連想配列とか様々です。

という訳でここでは普段PHPを使うときによく使うJavaScriptへのデータの渡し方を自分なりにまとめてみたいと思います。

このページの目次

PHPからJSへのデータ渡し方まとめ
ここまでのまとめ

PHPからJSへのデータ渡し方まとめ

PHPからJavaScriptに渡すデータの型として多いのは次の４つ

数値型
真偽値型
文字列型
連想配列

この４つの渡し方をそれぞれコード例と一緒に紹介していきます。

数値型の渡し方

数値型というのは整数とか浮動小数とかのことです。

これの渡し方は簡単でJavaScript出力時に次のようにそのまま echo するだけ

$int_num = 128;
$float_num = 3.141519;

?>
<script type="text/javascript">
let intNum = <?php echo $int_num; ?>;
let floatNum = <?php echo $float_num; ?>;
</script>
<?php

$int_num = 128;

$float_num = 3.141519;

let intNum = <?php echo $int_num; ?>;

let floatNum = <?php echo $float_num; ?>;

</script>

<?php

単純にそのままPHPでの変数名をそのまま出力しています。

そして実際に出力されるscriptタグを含めたjsコードは次の通り

<script type="text/javascript">
let intNum = 128;
let floatNum = 3.141519;
</script>

let intNum = 128;

let floatNum = 3.141519;

</script>

特に何も問題ありません。

整数とか少数に関しては渡すのはそれほど難しくはないですね。

真偽値型の渡し方

いわゆるTRUEとかFLASEの値です。

これも数値型みたいにそのまま変数名を出力すれば渡せる・・・と良かったんですがそれはできません。

なぜなら文字列にキャストした場合にTRUEは 1 、FALSEは "" (空文字列)になってしまうからです。

本当にそのまま渡せないかどうかは次のコードを実行すれば分かります。

$t = TRUE;
$f = FALSE;

?>
<script type="text/javascript">
let t = <?php echo $t; ?>;
let f = <?php echo $f; ?>;
</script>
<?php

$t = TRUE;

$f = FALSE;

let t = <?php echo $t; ?>;

let f = <?php echo $f; ?>;

</script>

<?php

このコードを実行して出力されるjsコードは次の通り

<script type="text/javascript">
let t = 1;
let f = ;
</script>

let t = 1;

let f = ;

</script>

TRUEが数値の1、FALSEに至っては空文字なので何も出力されていません。

じゃあどうすればスマートに真偽値が出力できるのか？

と探してみるとvar_exportという便利そうな関数がありました。

この関数は公式リファレンスの説明によると次のような関数です。

mixed var_export ( mixed $expression [, bool $return = FALSE ] )

var_export() は、渡された変数に関する構造化された情報を返します。この関数は var_dump() に似ていますが、返される表現が有効な PHP コードであるところが異なります。

引用元 : PHP.net : ver_exportより

本来は１つめの引数を出力する関数ですが、第２引数にTRUEを渡すことでそれを有効なPHPコードで使われる形式で返してくれます。

ただ単に値を返すのではなく「有効なPHPコード」で返すという点がポイントです。

つまりこれを使えば次のようにJavaScriptに対して真偽値を渡すことができます。

$t = TRUE;
$f = FALSE;

?>
<script type="text/javascript">
let t = <?php echo var_export( $t, TRUE ); ?>;
let f = <?php echo var_export( $f, TRUE ); ?>;
</script>
<?php

$t = TRUE;

$f = FALSE;

let t = <?php echo var_export( $t, TRUE ); ?>;

let f = <?php echo var_export( $f, TRUE ); ?>;

</script>

<?php

var_exportを使った上のコードで出力されるjsコードは次の通り

<script type="text/javascript">
let t = true;
let f = false;
</script>

let t = true;

let f = false;

</script>

しっかり true と false になっています。

これで数値型に加えて真偽値型も渡せるようになりました。

文字列型の渡し方

文字列型はそのまま渡しちゃえばいいような気がしますが、それはできません。

なぜならそのまま渡してしまうと文字列を囲むクォートが外れてしまうからです。

なので文字列を渡す場合はしっかりとクォートを付けて渡すようにしましょう。

例えば次のコードのように

$str = 'I have a pen';

?>
<script type="text/javascript">
let str = '<?php echo $str; ?>';

///または次の書き方でもOK
//let str = "<?php echo $str; ?>";
</script>
<?php

$str = 'I have a pen';

let str = '<?php echo $str; ?>';

///または次の書き方でもOK

//let str = "<?php echo $str; ?>";

</script>

<?php

文字列を渡すときはシングルクォート(')またはダブルクォート(")で囲む

これを忘れなければ大丈夫です。

連想配列の渡し方

最後は連想配列の渡し方です。

これは普通に出力時に変数名で echo しようとすると文字列でないので当然エラーになります。

なのでまず出力する前にJavaScriptで有効なJSON文字列に変換しなくてはなりません。

データをJSONとして文字列化するにはjson_encode関数が使われます。

その関数を使ってJavaScript側にデータを渡しているのが次のコード例

$data = array(
  'fruits' => array( 
    'apple',
    'banana',
    'cherry'
  )
);
$json = json_encode($data);

?>
<script type="text/javascript">
let data = <?php echo $json; ?>;
</script>
<?php

$data = array(

'fruits' => array(

'apple',

'banana',

'cherry'

)

);

$json = json_encode($data);

let data = <?php echo $json; ?>;

</script>

<?php

json_encodeで文字列化したものを echo で出力すればOKです。

ちなみにこのコードから出力されるjsコードは次の通り

<script type="text/javascript">
let data = {"fruits":["apple","banana","cherry"]};
</script>

let data = {"fruits":["apple","banana","cherry"]};

</script>

JavaScriptで有効なデータ形式になっていることが分かります。

連想配列の場合はデータをJS側で有効な形式にしなくてはならないので少し厄介ですね。

とはいってもjson_encode関数を挟むだけなのでそれほど面倒ではありません。

ここまでのまとめ

PHPからJavaScript側にデータを渡す方法をまとめると次の通り

数値型
変数名をそのまま echo すればOK
真偽値型
var_exportで有効なPHPコードにしてから echo で出力
文字列型
変数名を echo で出力するときにクォートで囲む
連想配列
json_encodeでJSON化してから echo で出力

それぞれの型に応じて渡し方が変わります。

自分自身もよくWeb開発でよく使う方法なのでまとめました。

ではでは～($・・)/~~~

PHPからjavascriptへ値や連想配列を渡す手順まとめ

PHPからJSへのデータ渡し方まとめ

数値型の渡し方

真偽値型の渡し方

文字列型の渡し方

連想配列の渡し方

ここまでのまとめ

関連記事

プロフィール

人気記事

検索してみる