PHPの配列をJavaScriptに渡す方法をわかりやすく解説

PHPの配列をJavaScriptで扱いたい場合、json_encode関数を使うのが最も一般的な方法です。PHP側で配列をJSON形式に変換して出力することで、そのままJavaScriptの変数として利用できるようになります。

json_encodeを使った基本的な方法

以下のように、PHPの変数をjson_encodeで変換し、scriptタグ内に出力するだけで配列を渡せます。

<script>
    var var_name = <?php echo json_encode($php_variable); ?>;
</script>

このとき、PHPの配列は自動的にJavaScriptのオブジェクトや配列リテラルへと変換されるため、特別な処理は不要です。

JSON文字列をパースする方法

AJAXリクエストなどでサーバーからJSON形式の文字列を受け取った場合は、JSON.parseを使って文字列をJavaScriptのオブジェクトに変換します。

var my_data = "<JSON-String>";
var my_var = JSON.parse(my_data);

この方法は、APIから取得したデータを扱う際によく使われる基本的なテクニックです。

サンプルコード

実際にPHPの配列をJavaScriptへ渡し、要素を表示する例を見てみましょう。

<?php
    // PHPで配列を作成
    $sample_array = array(
        0 => "Hello",
        1 => "there",
    )
?>
<script>
    // json_encodeで渡された配列にアクセス
    var passed_array = <?php echo json_encode($sample_array); ?>;
    // 配列の要素を順番に表示
    for(var i = 0; i < passed_array.length; i++){
        document.write(passed_array[i]);
    }
</script>

実行結果

このコードを実行すると、次のような出力が得られます。

Hellothere

注意点：セキュリティ対策

ユーザー入力など外部由来のデータを含む配列を渡す場合は、XSS（クロスサイトスクリプティング）攻撃を防ぐため、json_encodeにオプションフラグを指定することをおすすめします。

var safe_data = <?php echo json_encode($php_variable, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); ?>;

これにより、HTMLタグや特殊文字がエスケープされ、より安全にデータをJavaScriptへ渡すことができます。