Core Tech Blog

株式会社Coreのエンジニアチームが日々習得した技術やTipsを公開するブログです

PHPとJavaScriptの連携を始める前の頭の整理

Core開発部のKです。

ありがたい事に数名の新人が増えて開発部が大分賑やかになってきました。

新人の方のサポートをしていて感じたのですが、PHPとJavaScriptを扱う際に、JavaScript側でやるべき処理をPHP側でやろうとして上手く動かなかったりしているケースがあり、URLにアクセスした後、ブラウザ上でページが表示されるまでにPHPとJavaScriptがどう動いているのか、きちんと把握出来ていないようでしたので、今回ちょっとした解説を書こうかと思います。単純にWebページを表示するケースに絞っての説明となります。(AJAXの通信でも基本は変わらないですが、JSONや非同期通信について等説明が面倒になるので)

また、PHPとJavaScriptの棲み分けについての解説が中心のため、Webサーバの動きやCGIの説明等についても割愛しています。

各言語について簡単な説明

PHP

サーバ側で動いているスクリプト言語です。Webサーバはブラウザからリクエストを受けると、それがPHPであった場合には、裏でPHPを実行して実行した結果を受けとって返却します。PHPは、この時GETやPOSTで与えられたパラメータを受け取って、それらの情報を元に処理をして表示用のHTMLを生成します。

PHPに関して言われる動的なWebページというのは、パラメータによって動的に出力するHTMLが変わるという意味であって、出力された内容が変わることはありません。

JavaScript

ブラウザ上で動くスクリプト言語です。(node.js等サーバ上で動くJavaScriptもありますが、今回は関係無いので言及しません)読み込んでいるDOMに対しての動的な変更を行う事ができます。

JavaScriptに関して言われる動的なWebページというのは、ブラウザ上のデータをJavaScriptによって動的に変更し、表示されている内容を動的に変更できるという意味で、読み込んだHTMLからの変更を行う事ができるのはJavaScriptのみとなります。

処理概要

一番の大きな違いは実行される場所です。PHPはサーバ上で実行され、JavaScriptはブラウザ上で実行されます。PHPに限らずですが、サーバ上で動いている言語については、ブラウザがURLにアクセスしたタイミングで実行されて、実行した結果をHTMLとしてブラウザに返すという動きをします。ブラウザはPHPを知らず、単純に受け取ったHTMLを解釈するのみです。

例えば下の様なPHPを呼び出した場合には

<html>
<body>
<?php
    for($i=0; $i<5; $i++){
        echo "Hello ".$i." !!<br>\n";
    }
?>
</body>
</html>

PHPでは<?php ?>内に書かれていない内容はそのまま出力になり <?php ?>内は処理を行い、その中で出力があれば出力が行われる形になるので ブラウザに返される返答は下記の様なHTMLになります。

<html>
<body>
Hello 0 !!<br>
Hello 1 !!<br>
Hello 2 !!<br>
Hello 3 !!<br>
Hello 4 !!<br>
</body>
</html>

この時返されたHTML内には$iというものは存在しません。PHPの実行が全て完了した後に出力された内容がそのまま出力として渡されているためです。表示された時点でもうPHPの処理は完了していますので、当然ブラウザに渡された結果についてPHPでは変更を加えることが出来ません。

ではJavaScriptとの連携というのはどういうものなのでしょうか、これはPHPが出力するHTMLの中にJavaScriptも含めて出力する事で、JavaScriptの定義をPHP側で書き出せるという話になります。従って、PHPとJavaScriptの連携と言ってみても実際のところは別々に動いているだけです。

下記の様なPHPを呼び出したとします。

<html>
<body>
<script>
  <?php $hoge = "hogehoge"; ?>
  var hoge = "<?php echo $hoge; ?>"
  console.log(hoge);
</script>
</body>
</html>

これは下記の様なHTMLになります。

<html>
<body>
<script>
    var hoge = "hogehoge"
  console.log(hoge);
</script>
</body>
</html>

PHPの変数は存在せず、PHPの出力したJavaScriptがそのまま実行される形になります。つまりJavaScript実行時点では、PHPの変数というのは存在していません。

大まかな流れとしては下記の様な流れで実行がされています。

PHP実行 -> HTML及びJavaScript出力 -> JavaScript実行

ちなみに上記の様な変数の設定方法だと$hogeの値が、例えば"hogehoge\"; alert(\"danger\"); \""のような場合に、意図していないJavaScriptが実行される事になります。これはクロスサイトスクリプティングと言ってWebサイトの脆弱性の一つです。PHPでJavaScriptを埋め込む時には十分に注意して下さい。対処方法はここでは省略します。

ざっくりまとめると下記のようなイメージとなります。

f:id:coreinc:20180921182805p:plain

PHPとJavaScriptの連携について考える際の一助になれば幸いです。