質問内容

PHPで変数を持っていて、JavaScriptのコードでその値が必要です。PHPからJavaScriptに変数を渡すにはどうしたらよいでしょうか？

次のようなコードがあります。

<?php
$val = $myService->getValue(); // Makes an API and database call

同じページで、JavaScriptのコードがあり、そのコードには $val 変数にパラメータとして渡す必要があります。

<script>
    myPlugin.start($val); // I tried this, but it didn't work
    <?php myPlugin.start($val); ?> // This didn't work either
    myPlugin.start(<?=$val?>); // This works sometimes, but sometimes it fails
</script>

解決方法は？

実は、これにはいくつかのアプローチがあるんです。あるものは他のものより多くのオーバーヘッドを必要とし、またあるものは他のものより優れていると考えられています。

順不同。

1. AJAXを使って、サーバーから必要なデータを取得する。
2. ページのどこかにデータをエコーし、JavaScriptでDOMから情報を取得する。
3. データを直接JavaScriptにエコーする。

今回は、上記の方法をそれぞれ検証し、その長所と短所、そして実装方法について見ていきましょう。

1. AJAXを使用してサーバーから必要なデータを取得する

この方法が最も良いとされているのは サーバーサイドとクライアントサイドのスクリプトは完全に分離されています。 .

プロフェッショナル

• レイヤー間の分離が良い - 明日からPHPを使わず、サーブレットやREST APIなどのサービスに移行する場合でも、JavaScriptのコードをあまり変更する必要はありません。
• より読みやすい - JavaScriptはJavaScript、PHPはPHPです。この2つを混ぜることなく、両方の言語でより読みやすいコードを得ることができます。
• 非同期データ転送を可能にする - PHPから情報を取得するのは、時間やリソースがかかる場合があります。時には、情報を待ってページをロードし、その情報がいつでも届くようにしたいとは思わないでしょう。
• データがマークアップ上に直接存在しない - つまり、マークアップは追加的なデータからきれいに保たれ、JavaScriptだけがそれを見るということです。

短所

• レイテンシー - AJAXはHTTPリクエストを作成し、HTTPリクエストはネットワークを介して運ばれ、ネットワーク遅延があります。
• 状態 - 別のHTTPリクエストで取得されたデータには、HTMLドキュメントを取得したHTTPリクエストの情報は含まれません。この情報が必要な場合 (たとえば、フォームの送信に応答して HTML ドキュメントが生成された場合)、何らかの方法で情報を転送する必要があります。もしあなたがデータをページに埋め込むことを拒否した場合（この技術を使用する場合）、レースコンディションの対象となる可能性のあるクッキーやセッションに制限されます。

実装例

AJAXでは、2つのページが必要です。1つはPHPが出力を生成するページで、もう1つはJavaScriptがその出力を取得するページです。

取得データ.php

/* Do some operation here, like talk to the database, the file-session
 * The world beyond, limbo, the city of shimmers, and Canada.
 *
 * AJAX generally uses strings, but you can output JSON, HTML and XML as well.
 * It all depends on the Content-type header that you send with your AJAX
 * request. */

echo json_encode(42); // In the end, you need to echo the result.
                      // All data should be json_encode()d.

                      // You can json_encode() any value in PHP, arrays, strings,
                      //even objects.

index.php (または、実際のページがどのような名前であろうと)

<!-- snip -->
<script>
    function reqListener () {
      console.log(this.responseText);
    }

    var oReq = new XMLHttpRequest(); // New request object
    oReq.onload = function() {
        // This is where you handle what to do with the response.
        // The actual data is found on this.responseText
        alert(this.responseText); // Will alert: 42
    };
    oReq.open("get", "get-data.php", true);
    //                               ^ Don't block the rest of the execution.
    //                                 Don't wait until the request finishes to
    //                                 continue.
    oReq.send();
</script>
<!-- snip -->

上記の2つのファイルの組み合わせで、アラート 42 は、ファイルの読み込みが終了した時点で

その他の読み物

• XMLHttpRequest の使用 - MDN
• XMLHttpRequest オブジェクトリファレンス - MDN
• 非同期呼び出しからレスポンスを返すにはどうすればよいですか？

2. ページのどこかにデータをエコーし、JavaScriptでDOMから情報を取得する

この方法は、AJAXに比べるとあまり好ましくないが、それでも利点はある。それは、やはり 割と JavaScriptの中に直接PHPが入っていないという意味で、PHPとJavaScriptは分離されています。

プロフェッショナル

• <強い 高速 - DOM操作が速いことが多く、多くのデータを比較的早く保存し、アクセスすることができます。

短所

• <強い 意味不明なマークアップの可能性 - 通常、何が起こるかというと、ある種の <input type=hidden> の方が情報を取り出しやすいので、情報を保存するために inputNode.value しかし、そうすると、HTMLの中に意味のない要素ができてしまうことになります。HTMLには <meta> 要素は文書に関するデータ用で、HTML 5では data-* 属性は、特定の要素に関連付けることができるJavaScriptで読み取るための特別なデータです。
• ソースを汚す - PHPが生成するデータは、HTMLソースに直接出力されます。つまり、より大きく、より焦点の定まらないHTMLソースを得ることができます。
• 構造化データを取得しにくい - 構造化データは有効なHTMLでなければならず、そうでなければ自分で文字列をエスケープしたり変換したりしなければならないでしょう。
• PHPとデータロジックの緊密な連携 - PHPはプレゼンテーションで使われるため、きれいに切り離すことができない。

実装例

これは、ユーザーには表示されないが、JavaScriptからは見える何らかの要素を作るというものである。

index.php

<!-- snip -->
<div id="dom-target" style="display: none;">
    <?php
        $output = "42"; // Again, do some operation, get the output.
        echo htmlspecialchars($output); /* You have to escape because the result
                                           will not be valid HTML otherwise. */
    ?>
</div>
<script>
    var div = document.getElementById("dom-target");
    var myData = div.textContent;
</script>
<!-- snip -->

3. データを直接JavaScriptにエコーする

これが一番わかりやすいかもしれませんね。

プロフェッショナル

• <強い 非常に簡単に実装できる - 実装するにも、理解するにも、ほとんど手間がかからない。
• ソースを汚さない - 変数はJavaScriptに直接出力されるため、DOMに影響を与えません。

短所

• <強い PHPとデータロジックの密な結合 - PHPはプレゼンテーションで使われるため、きれいに切り離すことができない。

実装例

実装は比較的簡単です。

<!-- snip -->
<script>
    var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->

がんばってください