JavaScriptコード内でPHPで設定した定数を使用したい

Question

JavaScriptのコード内でPHPで設定した定数などを使用したいです。
試しにJavaScriptコード中に、<?php echo PATH; ?>というようにHTML内に書くときと同じように記述をしたら動作したのですが、こういった記述は問題ないのでしょうか？

Answer 1

問題ないのでしょうか？

全く問題ないです。ただ、Javascriptのファイルにはできればjavascriptしか書きたくない(PHP(できればHTMLも)とJavascriptはファイルを分けて保存し保守性を高めるのが一般的)というのはありますので方法を一つ提案します。

私は一旦HTMLに埋め込んでjavascriptで取り出して使っています。
下記サンプルは私が書きやすいのでjQueryを使っていますが・・・

例えば
(1)PHPの変数$list1の要素数が3以上だった場合、jsでポップアップで「3以上」と表示し、10以上だった場合は同様に「10以上」と表示するコードを考えてみると、こんな感じになります。
(2)また、$list2のような連想配列もjson形式にエンコードすることで埋め込むことができます。

<?php
// (1)
$list1 = [
    'a', 'b', 'c', 'd','e' 
];

// (2)
$list2 = [
    'hoge' => [
        'foo' => 'bar',
    ],
];
?>

// ~~~html書き始める~~~
<input type="hidden" id="list1" value="<?php echo count($list1) ?>">
<input type="hidden" id="list2" data-list="<?php echo json_encode($list2) ?>">

$(function() {
    // (1)
    var count = $("#list1").val();
    if (count >= 10) {
        alert("10以上");
    } else if (count >= 3) {
        alert("3以上");
    }

    // (2)
    var array = $("#list2").data("list");
    alert(array.hoge.foo);    // barと表示される
});

同じようにすれば、質問者様の仰られているPATHを埋め込んでjsで読み込んで処理を行うことがコードは少々長くはなりますがよりキレイなコードで実現できます。(もっと良い方法もあるかもしれませんが私はこの程度しか思いつきません。)

data属性に関してはこちらがこちらが参考になります。

Comments

[poooooo]

ご回答くださったみなさま、ありがとうございます。
大変参考になりました。

Answer 2

問題ないと思いますよ。自分もたまにやります。

定数に限らず、変数や出力するjavascriptのコードをPHPで制御することもたまにあります。
ただし、データなどはなるべくAJAXかHTMLに埋め込んでjavascriptで取得するようにしています。

Answer 3

JavaScriptコード自体をPHPで生成することはあまりないですが、変数宣言だけPHP出力をはめ込む、というのはちょくちょく行います。

json_encodeを使えば、そのままJavaScriptの変数宣言のところに書けて便利です。

Answer 4

jsを外部ファイル化しているのであれば拡張子phpにして
phpで吐き出してやればいいのでは？

またjsがHTMLファイル内に埋め込んでいるのであれば、同様に該当箇所を
phpで出力してやるだけです。

Answer 5

フレームワーク等を使用していないPHPの場合は、問題はないですが、
テンプレートエンジン等を使用している場合は、そのルールに従うべきです。

Answer 6

PHPが出力するHTML内にJavaScriptコードが直接記述されているのであれば別に問題はありません。
ただ、JavaScriptを別ファイル化しないとSEO的に不利になる気がします。
また、JavaScriptはクライアントサイドで動作する為、その値がクライアント側の動作で書き換えられる可能性がある事を意識して書く必要はあります。
が、動作はしますね。

Comments

[ShoheiTai]

> ただ、JavaScriptを別ファイル化しないとSEO的に不利になる気がします。
「jsを別ファイルにしないとSEOで不利」という話はあまり聞いたことがないのですが、
「表示速度が低下するのでSEOで不利」という意味でしょうか？

[kunai]

単純に無駄なコンテンツが増えるからとかそういう事です。
最近のGoogleのエンジンはJSを理解して動きますが、どこまでうまい事やってくれるかは不明ですので、対策出来るところは出来るだけ「わかりやすく」対策すべきだと思っています

[ShoheiTai]

確かに、無駄なものを極力減らしてクローラビリティを向上させるのは重要ですね。
ありがとうございます！