tezcelloさんアドバイスありがとうございます。
.js と PHP を混ぜるのは違和感ありますね…

Javascript で処理するのが最善ということで修正してみます。

> JavaScript コードの中に PHP コードを書く
PHPから出力する HTMLの中に、JavaScriptも一緒に出力してしまおうというのは避けるのが良かろうと思います。
となると、.jsなファイルも PHPスクリプトだと認識させる必要がある（あるいは JavaScriptだけど、ファイル名は○○.php）って事になるけれど、気持ち悪くないですか？

JavaScriptを動的に生成「しなければならない」理由が質問文や返信からでは判りませんが、本当に必要でしょうか？
他の方が仰る様に、HTMLのタグで制限出来るモノは記述し、（併せて/別途）PHPから出力する HTML中に`data-xxx`を出力しておいて、JavaScriptでそれらを読み取って処理すれば良いと思います。
処理手順と個別の条件を分けて考えるべきではありませんか？
＿＿JavaScript（＝処理手順）はキャッシュを使ってもらった方が良いでしょ？



> 質問の趣旨がぐちゃぐちゃになっていると思います。

当初の質問は、おそらく#9で書いた②だったようで解決したっぽく、一旦は回答に当たる物を書くのを控えたのですが、その後、#16 の後半で当初質問と異なるような質問が出て来たので、それに対しての回答が #17 です。

そういった意味では、#16後半に対して、「それはまた別の質問なので、別途質問を立てましょう」とアドバイスすべきでしたね。失礼しました。



utm.さんアドバイスありがとうございます、特定の動作(ボタン押下とか)になります。最適な方法としてQ&A掲示板の返信ボタンを押したタイミングで生成するように考えておりました。
皆さんから頂いたアドバイスから HTML や PHP を用意しておいて CSS で表示非表示を切り替える方法でも良いかと感じております。

まずはjavascriptにPHPを直接埋め込むという方法は避けて考えてみます。もう少しコードを完成（調べて）させてからお聞きするべきでした申し訳ありません。

質問の趣旨がぐちゃぐちゃになっていると思います。
input要素にmin maxなどのいわゆる入力制限をつけたいのであれば、html属性に定義があります。
https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/maxlength

また、カスタムしたいのであれば、以下のように属性に条件を持たせて、汎用的な処理にするのが自然です。
(以下のコードは例です。alertにフォーカスを吸われるので入力制御の内容によっては動きません。またhtmlの文法エラーがあります。)
```js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    
    <input id="name" class="customSimpleValidation" type="text" name="name" placeholder="名前を入力してください"
        data-min-length="5"
        data-length="10">

    
    <input id="name" class="customSimpleValidation" type="text" name="name" placeholder="名前を入力してください"
        data-min-length="<?=  MIN_LENGTH::NAME ?>"
        data-length="<?= MAX_LENGTH::NAME ?>">


    <script>

        const customSimpleValidationTargets = document.querySelectorAll('input.customSimpleValidation')
        customSimpleValidationTargets.forEach( (element) => {
            element.addEventListener('input', (event) => {
                const { target } = event
                const { value, dataset } = target
                
                if(value.length > dataset.length) {
                    alert(`${dataset.length}文字以内で入力してください`)
                    target.value = value.slice(0, dataset.length)
                }

            })
        })

    </script>
</body>
</html>
```

多分初心者の頃はどんな実装に関しても発想ができないと思いますが、いろいろ自分で試行錯誤して考えてみてはいかがでしょうか。
最初のうちから効率よく開発したいという気持ちはよくわかりますが、おそらくこういうサイトで質問して答えをもらっても理解がそもそもできないことも多いだろうし、脳死で質問が沸いてくるので建設的ではない気がします。

定数をサーバーにリクエストするだとか、
javascriptに直接埋め込むだとかを勧めるのがあまりにもばかげているので回答しました。

定数をサーバーにリクエスト(どのタイミングで？ページロードの時点なら、サーバーから一回クライアントのPCを通すのがまるっきり無意味だし、特定の動作(ボタン押下とか)なら、無意味なリクエストが何度も発生する(分岐すれば回避はできるが))

javascriptに直接埋め込む(値の共通化が一見して目的なのに、javascriptを汎用的にしないのは無駄)

また、inputタグをhiddenで持たせる方法も挙げられていますが、書き方によっては無駄にサーバーに値を送ることになるのでバグの原因になる可能性があることに留意すべきかと思います。

それと、もとの質問の文脈が以下のソースをもとにしているのに
```js
inputName.dataset.length = '<?php echo MAX_LENGTH::NAME; ?>';
```
以下の返信
> javascript から値にアクセスする方法を他の部分で代用する方法は考えていなかったのですがその方法でも良さそうですね。

は何も脳みそを使ってない

junerさんアドバイスありがとうございます。
javascript から値にアクセスする方法を他の部分で代用する方法は考えていなかったのですがその方法でも良さそうですね。

JavaScript を生成しなくても、 例えば input要素 に php で value として 値を設定して javascript から値にアクセスするとか、 `<template>` タグにphpで中身を書いて、 javascript からアクセスするとしたりすることもできるので javascript から fetch しなくても値同期的に渡すことはできますよ……？（php から javascriptを触る必要は無いと思います。

```php
<input id="name" type="hidden" 
   data-length="<?=htmlspecialchars(MAX_LENGTH::NAME); ?>"
   data-min-length="<?=htmlspecialchars(MIN_LENGTH::NAME); ?>"
 />
```
```js
const inputName = document.getElementById('name');
const NAME_MAX_LENGTH = inputName.dataset.length;
const NAME_MIN_LENGTH = inputName.dataset.minlength;
// DOING ..
```

otnさん回答ありがとうございます。
皆さんの意見をお聞きしたいときに意見交換を使用してみます。

毎回JavaSciptコードを生成することになりそうです。
JavaScript生成時に埋め込む方向で進めてみます。
全体で何回（Q&A掲示板の返信の数だけ）サーバーリクエストが発生するかについては今後考えていく課題になりそうですね…

> 質問を考えてみて複数の選択で迷っている場合は意見交換でお聞きしてみます、手段が絞られておりそれが解決できない場合は通常のQ&Aを利用致します。

一般的な意味で言うと、
「質問」は「答えが欲しい・アドバイスが欲しい」ということで「複数の案で困っているかどうか」とかはどっちでもい事です。「A案、B案はメリデメあるが、このケースではどっちの案が良いか？」は明らかに質問です。

「意見交換」は、「この件について、自分はこういう意見を持っているのだが、皆さんはどういう意見をお持ちですか？」ということです。自分の意見を書けないなら「交換」は出来ません。普通は特定のプログラムの話ではなくて、コーディングルールに関することとか、フレームワークの選択基準とか、開発手法とか、十人いれば十とは言わないまでも四か五くらいの異なる意見が出てもおかしくないようなケースが典型でしょうか。
もちろん一般論ではなくても、「この件について、自分はこういう意見を持っているのだが、皆さんはどういう意見をお持ちですか？」であれば良いと思いますが。

> 定数宣言のみ行いたい時も yambejp さんにアドバイス頂いたように api経由で取得すべきでしょうか？

全くの定数(PI=3.1416とか)であれば、JavaScript記述中に定数で書けば良いことで、PHP等の出る幕はないです。が、まあそういうことではないですよね。
値が、サーバーサイドのJavaScript生成時に定まっているのなら、JavaScript生成時に埋め込んでしまえば良いかと思います。質問のケースだと「毎回JavaSciptコードを生成」だと判断ましたので、これを第一に書きましたが、そうでなくて、JavaScriptコードは常に同じで固定ファイルに書いてあるケースだと、yambejp さんの挙げられた他の方法になるかと思います。毎回生成するのが良いのかどうかには、ここでは言及しません。

性能が問題になるケースだと「全体で何回サーバーリクエストが発生するの？」は気になりますね。まあ、そこがボツネックになってから考えても良いかと思いますが。


otnさんありがとうございます。
質問を考えてみて複数の選択で迷っている場合は意見交換でお聞きしてみます、手段が絞られておりそれが解決できない場合は通常のQ&Aを利用致します。

1つ気になることがあるのですが、定数宣言のみ行いたい時も yambejp さんにアドバイス頂いたように api経由で取得すべきでしょうか？

> 自分の中でもう少しまとめてから質問すべきでした以後気を付けます。

「目的の言語化が重要」と書きましたが、お書きの言葉に沿って言うと、（考えを）まとめてから質問した方が良いのは確かですが、「手段」のやり方について気になってしょうがないことがあれば、そこだけ先に聞いても良いかと思います。

その後、目的から考え直して、別の手段に変更することになれば、その目的に対しては、（不採用になった）最初の手段についての質問は無駄になりますが、質問してみて回答が参考になったのであれば、いずれ別の機会にその手段を使う際には役立つので、それで良いと思います。


otnさんアドバイスありがとうございます。
自分の中でもう少しまとめてから質問すべきでした以後気を付けます。

utm.さん回答ありがとうございます、明確な質問を思いつかずコードの選択にも迷ったので意見交換を初めて使用してみました、申し訳ありません…

手段を先に決めるのではなくて、「本当にやりたいことは何なのか？」を言語化することから始めましょう。
「本当にやりたいことは何なのか？」を聞いても手段を書いてしまう人も多いですが。


コードが読みにくいという質問趣旨と見せかけて、JavaScriptからサーバーにリクエスを送りたいという質問なのはあっぱれですね。1本取られました。
意見交換ですらない

otnさんアドバイスありがとうございます、Node.Js を使うという考えはなかったですがそちらのほうがよさそうですね。

①と②両方についての質問をしたかったのですが同時に異なる内容をまとめるべきではありませんでした申し訳ありません。
ブラウザ上で JavaScript が実行されるのに対し PHP はサーバーサイドで実行されるということを考えると api経由で取得すべきですね。

> JavaScript で HTML を生成する際に PHP も使いたいと考えているのですが、どのような書き方が良いでしょうか？

という質問文からは、「Node.JsなどでサーバーサイトでHTMLを生成する際に、PHP入りのHTML(=PHPソース)を生成して、それをPHPで処理して出来たHTMLをサーバーに返す」みたいなややこしいことをやろうとしているのかと思い、「それならPHPを使わず最初からNode.Jsで最終的なHTMLを生成すれば？」と思ったのですが、
> ※ コードの例
を見るとサーバーサイドのJavaScriptじゃなくてブラウザ上のJavaScriptに見えます。ということで、

①PHPで、JavaScriptを埋め込んだHTMLを生成しようとしていて、埋め込むJavaScriptのあたりの書き方をどうしたらいいかと言う質問
②たまにいらっしゃる、PHPが実行されるタイミングと場所を理解していず、「JavaScriptコードにPHPコードを埋め込むと、PHPもブラウザ上で実行されてサーバー側のPHP変数も参照できる」と誤解した前提での質問

と、全く異なる2種類の質問のどちらであるのかが質問文からは判別しにくいです。質問が全く異なるので、回答も全く異なることになるかと思います。

質問文中の
> JavaScript コードの中に PHP コードを書く場合は、定数宣言くらいで数値のみのものは引用符で括らないようにしている
は、断片的でよくわかりませんが、おそらく①についての話。私もそういう質問かと思ったのですが、回答に対しての返答を見ていると、yambejpさんの回答が解決に繋がりそうということらしいので、②だったということなのでしょうか。

②の場合の、誤解のない正しい問題認識は「ブラウザ上でJavaScriptが実行される際に、ブラウザにその時点で届けられておらずサーバー内にしかない情報を、ブラウザ上のJavaScriptからどうやって利用するか？」ということになるかと思います。「JavaScript コードの中に PHP コードを書く」ではないです。


maisumakunさん回答ありがとうございます、Node.js経由で利用する強力な開発ツールを使用することを考えるとPHPを混ぜ込まないほうが良いということですね勉強になりました。


> PHPを混ぜ込むとセキュリティ上よくないのでしょうか？

たしかに、JavaScriptに他言語を混ぜ込むような構造を取ると、XSSなどを引き起こす危険はあります。

ただ、#2はそういった問題ではなく、HTML埋め込みのJavaScriptでは**Node.js経由で利用する強力な開発ツール**がほとんど利用できないため、PHP云々を考えるまでもなく環境が不便すぎて選択したくない、という意味合いです

yambejpさんアドバイスありがとうございます、api経由で取得するということで進めていきます。
moduleでよみこむ方法を以前調べていたのを忘れておりました…

maisumakunさん回答ありがとうございます、PHPを混ぜ込むとセキュリティ上よくないのでしょうか？

utm.さんアドバイスありがとうございます、テラテイルの回答の中からまずは探すべきでした申し訳ありません。
JavaScript全体をヒアドキュメントで囲う方法を調べてみたのですがデメリットはないのですね勉強になりました。

js内でPHPの変数を利用したい場合は
- apiにfetch/XHRなどで取りに行く
- json/jsonpで処理する
- moduleでよみこむ
- cookieなどを利用する

などあります普通はapi経由で取得すると思います

そもそも論にはなってしまうのですが、自分が一定以上の規模のWebサイトを作るとすれば、JavaScriptもTypeScriptなどの仕掛けを使うためにも別ビルドとしたいので、ビューに直書きすることを意味する、PHPを混ぜ込む**事態そのものを発生させたくない**です。

短縮構文である<?=を使うとか、
 返すJavaScript全体をヒアドキュメントで囲うとか、あると思います。

ところでこんな質問はこのteratailで検索をかけたりして、解決しないのですか？

常連

【ジャック広告の配信について】 
現在、非ログイン状態のユーザー様に対して一部の地域限定でジャック広告を配信しております。 詳細につきましてはteratailブログをご確認ください。 
https://blog.teratail.com/entry/jack-ad-202511

## テーマ、知りたいこと

  JavaScript で HTML を生成する際に PHP も使いたいと考えているのですが、どのような書き方が良いでしょうか？

## 背景、状況

途中に <?php ?> が入るとコードが読みにくいため JavaScript コードの中に PHP コードを書く場合は、定数宣言くらいで数値のみのものは引用符で括らないようにしているという意見を頂きました。

※ コードの例
const inputName = document.getElementById('name');
inputName.dataset.length = '<?php echo MAX_LENGTH::NAME; ?>';
inputName.dataset.minlength = '<?php echo MIN_LENGTH::NAME; ?>';

const NAME_MAX_LENGTH = <?php echo MAX_LENGTH::NAME; ?>;
const NAME_MIN_LENGTH = <?php echo MIN_LENGTH::NAME; ?>;

inputName.dataset.length = NAME_MAX_LENGTH;
inputName.dataset.minlength = NAME_MIN_LENGTH;


JavaScript コードの中に PHP コードを書く場合はどのように書くのがよいでしょうか？

テーマ、知りたいこと

背景、状況

関連した質問