【javascript】【php】原始的な方法でフロントエンドとバックエンドのデータ連携について考える

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と言うライブラリを使用します。

github.com

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)に変数を待たせてしまうと言う方法があります。

developer.mozilla.org

<head>
    <script>
    window.___value = "<?php  echo("value"); ?>"
    </script>
</head>
<body>
    <script>
        console.log(window.___value)
    </script>
</body>

注意

グローバルオブジェクトに定義してしまうと、他のライブラリ、最悪、既存のプロパティにも影響する可能性があります。
影響を考える場合は、次のようにwindowのプロパティを見ることもできるようです。

qiita.com

変数を外部から指定できるようにする。

変数を定義し、指定部分のみ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
}


以上です。
連携する方法は色々ありますが、今回はプレーンな記述ですので大概どんな環境でも動きます。
今回提示した方法も一部でしか無いと思いますが、ご参考になさってください。

©︎2017-2018 WebSandBag