PHPからJavaScriptに多次元配列を受け渡す方法を現役エンジニアが解説【初心者向け】

PHPからJavaScriptに多次元配列を受け渡す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• 多次元配列とは
• PHPからJavaScriptに多次元配列を受け渡す方法
• 実際に書いてみよう
• まとめ

 

多次元配列とは

多次元配列とは、配列の中に配列を持つ配列になります。

二次元以上の配列の事を指し、使用方法は通常の配列と変わりません。

例えば、以下のような配列の形は多次元配列といえるでしょう。

$sample = array(
    array(
        '犬', '猫', 'パンダ', '熊'
    ),
    array(
        'みかん', 'りんご', 'バナナ', 'ぶどう'
    ),
    array(
        '東京', '大阪', '京都', '福岡'
    )
);

 

[PR] フロントエンドで副業する学習方法を動画で公開中

PHPからJavaScriptに多次元配列を受け渡す方法

Webアプリケーションの動作において、PHPからJavaScriptに多次元配列を渡すシーンはよくあります。

 

例えば、以下のようなケースはよくあるでしょう。

PHPでDBからデータを取得
↓
取得したデータを整形・加工
↓
整形・加工したデータをフロントエンドへ渡し、JavaScriptで出力

 

本記事では多次元配列を例にして解説するものの、連想配列・多次元連想配列についても同様にデータを渡すシーンはよくあり、渡し方もほとんど同じです。

PHPからJavaScriptへの配列の渡し方を身につけ、開発に役立てましょう。

 

実際に書いてみよう

上記で記述した多次元配列を例に解説していきます。

$sample = array(
    array(
        '犬', '猫', 'パンダ', '熊'
    ),
    array(
        'みかん', 'りんご', 'バナナ', 'ぶどう'
    ),
    array(
        '東京', '大阪', '京都', '福岡'
    )
);

多次元配列をPHPで$sampleとして持っていると仮定し、これをJavaScriptに渡して出力をしていきましょう。

 

JavaScriptにPHPの配列を渡すためには、一度配列をJson形式に配列を変換する必要があります。

Json形式に変換するためには、下記のようにPHPの関数を使用します。

json_encode()

引数に変換したい配列を入れることで、Json形式に変換可能です。

 

<?php

$sampleJson = json_encode($sample);

 

これで$sampleをJson形式に変換した$sampleJsonという配列ができました。

 

あとはJavaScriptに渡すのみです。

<script>
    let sample = <?php echo $sampleJson?>;
</script>

念のため、JavaScriptのsampleへ正しく多次元配列が渡されたか見ていきましょう。

<script>
    console.log(sample)
</script>

渡せていることが確認できました。

 

まとめ

PHPのからJavaScriptへ多次元配列を渡す際は、下記のPHP関数を使用しましょう。

json_encode()

この関数でPHPの多次元配列を一度Json形式に変換し、JavaScriptへ多次元配列を簡単に渡すことが可能です。

 

 

執筆してくれたメンター

土田隼平（つちだしゅんぺい) フリーのWebエンジニアです。 最近までは求人サービスや画像共有システム、ECサービスの開発・運用をやってました。 趣味はラジオ（特にオールナイトニッポンやJUNK）を聞くことや近所の散歩です。 今の最重要ミッションは「運動不足解消」です。

 

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。