PHPからJavascriptを動かす(呼び出す)方法
パソコンで直接動かせるデスクトップアプリケーションの場合、大体1つのプログラミング言語で完結できます。
C#ならC#だけで、JavaならJavaだけで出来るわけです。
スマホアプリだって、SwiftやKotlinでほぼ作れます。
しかし、WEB開発というのは、複数のプログラミング言語を駆使しがちです。
これはアプリケーションを動かすために、サーバーとブラウザを使う関係で、『サーバーで動く言語』と『ブラウザで動く言語』が違うためです。
基本的にブラウザで動くプログラミング言語はJavascriptですが、サーバーで動くプログラミング言語はたくさんあります。
PHP、Python、Node.js、Ruby、Javaなど
実装したい動作によっては、PHPの中でJavascriptを呼んだり、逆にJavascriptの中でPHPを呼んだりしたいこともあるわけです。
今回、その仕組みや具体的な方法を解説します。
PHPとJavascriptは動作環境が違う
WEB開発においてメジャーな言語としてPHPとJavascriptがありますが、前述したように、この2つのプログラミング言語は主戦場が異なります。
PHP | サーバー上で動作する言語 |
JavaScript | クライアント上で動作する言語 ※Node.jsはJavascriptだけどサーバーで動作します |
どのように処理されているかは以下のページを参照ください。
クライアント(ブラウザ)からサーバーへリクエスト(主にURLでアクセス)があると、リクエストがあったURLのファイルが参照され、まずサーバーの中でサーバーサイドスクリプトであるPHPが上から実行されます。
そして、ファイル内のPHPの実行が終わると、処理済みのデータをクライアント(ブラウザ)に送信します。
ブラウザはサーバーからデータを受け取ると、上からHTML・CSSを解析しながら、Javascriptが出てくるとJavascriptを実行していきます。
これが基本的なPHPとJavascriptの動作の流れです。
どうやってPHPからJavascriptを動かす?
先ほどの説明では、クライアントからサーバーにリクエストが送られると、サーバーでPHPが実行されてから、ブラウザに送られた後、Javascriptが実行されると説明しました。
順番としてはPHP(サーバー)→Javascript(ブラウザ)の順番です。
では、PHPからJavascriptを呼び出しする(実行する)ことはできるのでしょうか?
PHPからJavascriptの処理を呼び出すことは出来ます。
厳密にはPHPがJavascriptを動かしているわけじゃないですが、以下のようにすることで、PHPからJavascriptを操作できます。
<?php echo "<script>alert('test');</script>"; ?>
PHPからJavascriptを呼び出しするというのはどういうことか
元々、PHPでHTMLの表示を操作する時、以下のような記述の仕方をすることがあると思います。
<p><?php if (!$name) echo "{$name}様"; ?></p>
PHPの『echo』を使うと、サーバーがユーザーに送るHTMLの中に、文字列やHTMLタグを入れることができます。
これは.phpファイルのPHPを埋め込んだ箇所に、プログラムから文字列を直接書き込んでいるとイメージして良いです。
PHPとJavascriptの処理されるタイミングと場所の違い
詳細な説明です。
以下のように、HTMLでべた書きされた文字列はPHPでは変更できません。
<!-- HTMLべた書きでは変更が出来ない -->
<p>こんにちは、田中太郎さん</p>
ここにPHPの変数を使うと、出力される文字列を変更できます。
<?php
// PHPでユーザー名を変数に保存
$user_name = "田中太郎";
?>
<!-- PHPの変数に保存したユーザー名を出力 -->
<p>こんにちは、<?php echo $user_name; ?>さん</p>
HTMLはプログラムではなく、マークアップ言語だからこういうことができるんだと思われるかもしれませんが、HTMLはブラウザが読み取って、解析するまではただの文字列でしかありません。
そして、この考え方はスクリプト言語にも同様に当てはまります。
ということは、JavascriptもPHPの処理で内容を変更してしまえば、Javascriptの実行内容を操作出来てしまうということです。
PHPでJavascriptの実行内容を変更する例
例えば、以下のjQueryでは、class=”test”を持つ要素をクリックすると、その要素の兄弟要素が開閉するJavascriptです。
<script>
$(".test").on('click', function() {
$(this).next().slideToggle();
});
</script>
このJavascriptのトリガーを、PHPで任意のclassに変更ができます。
<?php
// PHPの変数にクラス名を入れとく
$class_name = ".test";
?>
<script>
$(<?php echo $class_name; ?>).on('click', function() {
$(this).next().slideToggle();
});
</script>
こんな風にJavascriptの中にPHPを書き込むことが可能です。
上記のサンプルではclassの部分だけをPHPで書き換えていますが、以下のようにJavascriptの記述全体をPHPで出力することも可能です。
<?php
echo "
<script>
window.onload = function() {
document.getElementById('btn').onclick = function() {
alert('ボタン押下');
}
};
</script>";
?>
いずれの方法でも、先にサーバーの中でPHPの部分だけが実行されるので、ブラウザはjavscriptが元々べた書きで埋め込まれていたものなのか、PHPで動的に書き出されたものかはわかりません。
PHPからjavascriptに変数の値を渡す方法
もっと実用的な話をすると、PHPでデータベースから取得したデータをjavascriptに渡してやりたい場合があります。
※これはAJAXなどでjavascriptからPHPに問い合わせる方法ではなく、PHPからjavascriptに値を渡すだけです。
<?php
// PHPでデータベースにアクセスして、データを取得してくるプログラム
?>
<script>
window.onload = function() {
// クリックに反応するタグのIDをデータベースから取得してきた値に設定
document.getElementById("<?php echo $row['tag']; ?>").onclick = function() {
// データベースから取得してきた文字列をアラート表示する
alert("<?php echo $row['msg'] ?>");
}
};
</script>";
上記のサンプルコードで特筆すべき場所はここ
// クリックに反応するタグのIDをデータベースから取得してきた値に設定
document.getElementById("<?php echo $row['tag']; ?>").onclick = function() {
// データベースから取得してきた文字列をアラート表示する
alert("<?php echo $row['msg'] ?>");
}
javascriptの構文の中で、phpの呼び出しが出てきます。
このように、Javascriptのプログラムの一部をPHPによって、書き換えることも可能です。
これもちゃんと動くので、PHPからjavascriptで使うセレクタをechoしたり、alertに表示する文章をPHPを使ってechoできるというわけです。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。