テーマ、知りたいこと
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;
回答23件
#1
総合スコア524
投稿2025/02/14 09:31
短縮構文である<?=を使うとか、
返すJavaScript全体をヒアドキュメントで囲うとか、あると思います。
ところでこんな質問はこのteratailで検索をかけたりして、解決しないのですか？
#2
総合スコア146329
投稿2025/02/14 09:48
そもそも論にはなってしまうのですが、自分が一定以上の規模のWebサイトを作るとすれば、JavaScriptもTypeScriptなどの仕掛けを使うためにも別ビルドとしたいので、ビューに直書きすることを意味する、PHPを混ぜ込む事態そのものを発生させたくないです。
#3
総合スコア117203
投稿2025/02/14 09:53
js内でPHPの変数を利用したい場合は
- apiにfetch/XHRなどで取りに行く
- json/jsonpで処理する
- moduleでよみこむ
- cookieなどを利用する
などあります普通はapi経由で取得すると思います
#4
utm.さんアドバイスありがとうございます、テラテイルの回答の中からまずは探すべきでした申し訳ありません。
JavaScript全体をヒアドキュメントで囲う方法を調べてみたのですがデメリットはないのですね勉強になりました。
#5
maisumakunさん回答ありがとうございます、PHPを混ぜ込むとセキュリティ上よくないのでしょうか？
#6
yambejpさんアドバイスありがとうございます、api経由で取得するということで進めていきます。
moduleでよみこむ方法を以前調べていたのを忘れておりました…
#7
総合スコア146329
投稿2025/02/14 12:21
PHPを混ぜ込むとセキュリティ上よくないのでしょうか？
たしかに、JavaScriptに他言語を混ぜ込むような構造を取ると、XSSなどを引き起こす危険はあります。
ただ、#2はそういった問題ではなく、HTML埋め込みのJavaScriptではNode.js経由で利用する強力な開発ツールがほとんど利用できないため、PHP云々を考えるまでもなく環境が不便すぎて選択したくない、という意味合いです
#8
maisumakunさん回答ありがとうございます、Node.js経由で利用する強力な開発ツールを使用することを考えるとPHPを混ぜ込まないほうが良いということですね勉強になりました。
#9
総合スコア86160
投稿2025/02/15 03:28
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 コードを書く」ではないです。
#10
otnさんアドバイスありがとうございます、Node.Js を使うという考えはなかったですがそちらのほうがよさそうですね。
①と②両方についての質問をしたかったのですが同時に異なる内容をまとめるべきではありませんでした申し訳ありません。
ブラウザ上で JavaScript が実行されるのに対し PHP はサーバーサイドで実行されるということを考えると api経由で取得すべきですね。
#11
総合スコア524
投稿2025/02/15 06:56
編集2025/02/15 07:00コードが読みにくいという質問趣旨と見せかけて、JavaScriptからサーバーにリクエスを送りたいという質問なのはあっぱれですね。1本取られました。
意見交換ですらない
#12
総合スコア86160
投稿2025/02/15 14:01
手段を先に決めるのではなくて、「本当にやりたいことは何なのか？」を言語化することから始めましょう。
「本当にやりたいことは何なのか？」を聞いても手段を書いてしまう人も多いですが。
#13
utm.さん回答ありがとうございます、明確な質問を思いつかずコードの選択にも迷ったので意見交換を初めて使用してみました、申し訳ありません…
#14
otnさんアドバイスありがとうございます。
自分の中でもう少しまとめてから質問すべきでした以後気を付けます。
#15
総合スコア86160
投稿2025/02/16 02:56
自分の中でもう少しまとめてから質問すべきでした以後気を付けます。
「目的の言語化が重要」と書きましたが、お書きの言葉に沿って言うと、（考えを）まとめてから質問した方が良いのは確かですが、「手段」のやり方について気になってしょうがないことがあれば、そこだけ先に聞いても良いかと思います。
その後、目的から考え直して、別の手段に変更することになれば、その目的に対しては、（不採用になった）最初の手段についての質問は無駄になりますが、質問してみて回答が参考になったのであれば、いずれ別の機会にその手段を使う際には役立つので、それで良いと思います。
#16
otnさんありがとうございます。
質問を考えてみて複数の選択で迷っている場合は意見交換でお聞きしてみます、手段が絞られておりそれが解決できない場合は通常のQ&Aを利用致します。
1つ気になることがあるのですが、定数宣言のみ行いたい時も yambejp さんにアドバイス頂いたように api経由で取得すべきでしょうか？
#17
総合スコア86160
投稿2025/02/16 13:05
質問を考えてみて複数の選択で迷っている場合は意見交換でお聞きしてみます、手段が絞られておりそれが解決できない場合は通常のQ&Aを利用致します。
一般的な意味で言うと、
「質問」は「答えが欲しい・アドバイスが欲しい」ということで「複数の案で困っているかどうか」とかはどっちでもい事です。「A案、B案はメリデメあるが、このケースではどっちの案が良いか？」は明らかに質問です。
「意見交換」は、「この件について、自分はこういう意見を持っているのだが、皆さんはどういう意見をお持ちですか？」ということです。自分の意見を書けないなら「交換」は出来ません。普通は特定のプログラムの話ではなくて、コーディングルールに関することとか、フレームワークの選択基準とか、開発手法とか、十人いれば十とは言わないまでも四か五くらいの異なる意見が出てもおかしくないようなケースが典型でしょうか。
もちろん一般論ではなくても、「この件について、自分はこういう意見を持っているのだが、皆さんはどういう意見をお持ちですか？」であれば良いと思いますが。
定数宣言のみ行いたい時も yambejp さんにアドバイス頂いたように api経由で取得すべきでしょうか？
全くの定数(PI=3.1416とか)であれば、JavaScript記述中に定数で書けば良いことで、PHP等の出る幕はないです。が、まあそういうことではないですよね。
値が、サーバーサイドのJavaScript生成時に定まっているのなら、JavaScript生成時に埋め込んでしまえば良いかと思います。質問のケースだと「毎回JavaSciptコードを生成」だと判断ましたので、これを第一に書きましたが、そうでなくて、JavaScriptコードは常に同じで固定ファイルに書いてあるケースだと、yambejp さんの挙げられた他の方法になるかと思います。毎回生成するのが良いのかどうかには、ここでは言及しません。
性能が問題になるケースだと「全体で何回サーバーリクエストが発生するの？」は気になりますね。まあ、そこがボツネックになってから考えても良いかと思いますが。
#18
otnさん回答ありがとうございます。
皆さんの意見をお聞きしたいときに意見交換を使用してみます。
毎回JavaSciptコードを生成することになりそうです。
JavaScript生成時に埋め込む方向で進めてみます。
全体で何回（Q&A掲示板の返信の数だけ）サーバーリクエストが発生するかについては今後考えていく課題になりそうですね…
#19
総合スコア627
投稿2025/02/18 05:25
編集2025/02/18 05:36JavaScript を生成しなくても、 例えば input要素 に php で value として 値を設定して javascript から値にアクセスするとか、 <template> タグにphpで中身を書いて、 javascript からアクセスするとしたりすることもできるので javascript から fetch しなくても値同期的に渡すことはできますよ……？（php から javascriptを触る必要は無いと思います。
php
1<input id="name" type="hidden" 2 data-length="<?=htmlspecialchars(MAX_LENGTH::NAME); ?>" 3 data-min-length="<?=htmlspecialchars(MIN_LENGTH::NAME); ?>" 4 />
js
1const inputName = document.getElementById('name'); 2const NAME_MAX_LENGTH = inputName.dataset.length; 3const NAME_MIN_LENGTH = inputName.dataset.minlength; 4// DOING ..
#20
junerさんアドバイスありがとうございます。
javascript から値にアクセスする方法を他の部分で代用する方法は考えていなかったのですがその方法でも良さそうですね。
#21
総合スコア524
投稿2025/02/18 07:44
質問の趣旨がぐちゃぐちゃになっていると思います。
input要素にmin maxなどのいわゆる入力制限をつけたいのであれば、html属性に定義があります。
https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/maxlength
また、カスタムしたいのであれば、以下のように属性に条件を持たせて、汎用的な処理にするのが自然です。
(以下のコードは例です。alertにフォーカスを吸われるので入力制御の内容によっては動きません。またhtmlの文法エラーがあります。)
js
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7</head> 8<body> 9 10 <!-- 簡単なデモ --> 11 <input id="name" class="customSimpleValidation" type="text" name="name" placeholder="名前を入力してください" 12 data-min-length="5" 13 data-length="10"> 14 15 <!-- PHPで埋め込む場合 --> 16 <input id="name" class="customSimpleValidation" type="text" name="name" placeholder="名前を入力してください" 17 data-min-length="<?= MIN_LENGTH::NAME ?>" 18 data-length="<?= MAX_LENGTH::NAME ?>"> 19 20 21 <script> 22 23 const customSimpleValidationTargets = document.querySelectorAll('input.customSimpleValidation') 24 customSimpleValidationTargets.forEach( (element) => { 25 element.addEventListener('input', (event) => { 26 const { target } = event 27 const { value, dataset } = target 28 29 if(value.length > dataset.length) { 30 alert(`${dataset.length}文字以内で入力してください`) 31 target.value = value.slice(0, dataset.length) 32 } 33 34 }) 35 }) 36 37 </script> 38</body> 39</html>
多分初心者の頃はどんな実装に関しても発想ができないと思いますが、いろいろ自分で試行錯誤して考えてみてはいかがでしょうか。
最初のうちから効率よく開発したいという気持ちはよくわかりますが、おそらくこういうサイトで質問して答えをもらっても理解がそもそもできないことも多いだろうし、脳死で質問が沸いてくるので建設的ではない気がします。
定数をサーバーにリクエストするだとか、
javascriptに直接埋め込むだとかを勧めるのがあまりにもばかげているので回答しました。
定数をサーバーにリクエスト(どのタイミングで？ページロードの時点なら、サーバーから一回クライアントのPCを通すのがまるっきり無意味だし、特定の動作(ボタン押下とか)なら、無意味なリクエストが何度も発生する(分岐すれば回避はできるが))
javascriptに直接埋め込む(値の共通化が一見して目的なのに、javascriptを汎用的にしないのは無駄)
また、inputタグをhiddenで持たせる方法も挙げられていますが、書き方によっては無駄にサーバーに値を送ることになるのでバグの原因になる可能性があることに留意すべきかと思います。
それと、もとの質問の文脈が以下のソースをもとにしているのに
js
1inputName.dataset.length = '<?php echo MAX_LENGTH::NAME; ?>';
以下の返信
javascript から値にアクセスする方法を他の部分で代用する方法は考えていなかったのですがその方法でも良さそうですね。
は何も脳みそを使ってない
#22
utm.さんアドバイスありがとうございます、特定の動作(ボタン押下とか)になります。最適な方法としてQ&A掲示板の返信ボタンを押したタイミングで生成するように考えておりました。
皆さんから頂いたアドバイスから HTML や PHP を用意しておいて CSS で表示非表示を切り替える方法でも良いかと感じております。
まずはjavascriptにPHPを直接埋め込むという方法は避けて考えてみます。もう少しコードを完成（調べて）させてからお聞きするべきでした申し訳ありません。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。