PHPとjavascriptを扱う案件の場合、フロントエンドとバックエンドの連携が必要になる事があります。
「バックエンドの結果によって表示を出し分ける」程度であれば大した問題ではありません。
<?php $isValid = 1 if($isView) :?> <p>有効</p> <?php else: ?> <p>無効</p> <?php endif; >
しかし、フロントエンドで、バックエンドの値をによって処理を変える場合もあります。
今回は、バックエンドの値をフロントに流し混む方法について書きます。
しかも、比較的楽で且つ、原始的な方法です。
モダンな方法について
vue.jsの実装方法を見ていると、vue.jsとバックエンド(今回はPHP)の連携方法を見ていると、データ連携用のAPIを実装し、Ajax通信で値を取得して使うのが一般的なようです。
参考までに、vue.jsの場合はaxiosと言うライブラリを使用します。
APIを使う場合の懸念点
主に、下記があげられます。
- API開発の手間
- セキュリティ
リアルタイム性が求める必要が無いのでAPIを作るより直接渡した方が簡単です。
また、Ajaxを使うと言うことはapiのセキュリティのも担保する必要があります。
実装内容の割に、工数が割高になります。
原始的な方法とは
モダンな方法は理にかなった方法ではありますが、要件によっては機能過多な気がします。
そのため、この項では静的にphpのデータを渡す方法について書いていきます。
この項で言う、静的というのはjsで一回読み出せれば良いレベルの事を言います。
なお、コード内に出てくるphpの変数$value
は既に値が入っているとします。
タグの中に入れてしまう
一番簡単な方法は、タグの中にデータを入れてしまいjsでデータを取りに行く方法です。
<div id="value"><?php echo($value);></div> <script> var value = document.getElementById("value") console.log(value.innerText) </script>
簡単でわかりやすい方法ではありますが、描画に不要なタグが生成されるは不恰好です。
グローバルオブジェクトに紐づける
javascriptでも全てのスクリプトをスコープとした変数を定義する事ができます。
その方法に、グローバルオブジェクト(window
)に変数を待たせてしまうと言う方法があります。
<head> <script> window.___value = "<?php echo("value"); ?>" </script> </head> <body> <script> console.log(window.___value) </script> </body>
注意
グローバルオブジェクトに定義してしまうと、他のライブラリ、最悪、既存のプロパティにも影響する可能性があります。
影響を考える場合は、次のようにwindowのプロパティを見ることもできるようです。
変数を外部から指定できるようにする。
変数を定義し、指定部分のみscriptの外にだしてしまいます。
入出力が明確なのが良い所です。
ちなみに、素のjsを使う前提で記述しますがclass
でも同じように出来ます。
<html> <head> <script src="script.js"></script> <script> var value = new Value("<?php echo($value)?>") </script> </head> <body> <script> console.log(value.getValue()); </script> <body> </html>
最初に読み出す、script.jsは下記のようにします。
コンストラクタで、値をセットして、getValue
で値を出力します。
var Value = function(value) { if(!(this instanceof Value)) { return new Value(val) } this.value = value } Value.prototype.getValue = function() { return this.value }
以上です。
連携する方法は色々ありますが、今回はプレーンな記述ですので大概どんな環境でも動きます。
今回提示した方法も一部でしか無いと思いますが、ご参考になさってください。